:root{--bg:#efede8;--ink:#141414;--mute:#58574f;--ln:#c4c1b7;--c:#6b6a64;--d:"Instrument Serif","Times New Roman",serif;--b:"Newsreader",Georgia,serif;--m:"IBM Plex Mono",ui-monospace,Menlo,monospace;--g:clamp(1.1rem,3.2vw,2.75rem)}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1.1rem/1.65 var(--b)}
img,video{display:block;max-width:100%;height:auto}a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:30;background:var(--bg);padding:.5rem 1rem}
.logo,nav a,.cap,.meta,.fl button,.n,.mt,.nt,label,dt,figcaption,.tag,.btn,.back,.lab,.mb,dialog button,.fr{font:400 .78rem/1.5 var(--m);letter-spacing:.05em;text-transform:uppercase}
header{position:relative}.bar,main,footer .in{max-width:1600px;margin:0 auto;padding:0 var(--g)}
.bar{display:flex;justify-content:space-between;align-items:center;height:84px}
.logo{text-decoration:none}nav{display:flex;gap:clamp(1.1rem,2.8vw,3.2rem)}
nav a{text-decoration:none;padding:.4rem 0}nav a::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.55em;border:1px solid currentColor}
nav a:hover::before{background:var(--ink)}nav a[aria-current=page]{color:#6b6a64}nav a[aria-current=page]::before{background:#6b6a64}
.mb{display:none;background:none;border:1px solid var(--ink);color:inherit;padding:.5rem 1rem;cursor:pointer}
h1,h2{font-family:var(--d);font-weight:400;margin:0}h1 i,h2 i,.big i{font-style:italic}
h1{font-size:clamp(3.6rem,13vw,12rem);line-height:.9;letter-spacing:-.025em;animation:up .9s ease both}
@keyframes up{from{opacity:0;transform:translateY(1.2rem)}}
h2.lab{margin:0 0 2rem}.pt h1{padding-bottom:.1em}.intro{font-size:1.3rem;max-width:40ch;margin:1.5rem 0 0}
main>section,main>div{margin:clamp(2.5rem,5vw,4.5rem) 0}main>.pt{margin:clamp(1.5rem,4vw,3rem) 0 2rem}
.cap,.meta{color:var(--mute);margin:.2rem 0}.lead{font:clamp(1.7rem,3vw,2.6rem)/1.08 var(--d);margin:1rem 0}
.btn{display:inline-block;margin-top:1.5rem;padding:.95rem 1.5rem;border:1px solid var(--ink);background:none;color:var(--ink);text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--bg)}
.hh h1 span{display:block}.hh h1 span+span{font-style:italic;margin-left:clamp(2rem,16vw,16rem)}
.hh-b,.about .ab-g,.contact{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g)}
.hh-b{margin-top:clamp(2rem,5vw,4rem);align-items:end}.hh-t{grid-column:1/5}#hero{grid-column:5/13;animation:up 1.1s .15s ease both}
#hero img,#hero video{width:100%;max-height:85vh;object-fit:cover}
.trio a{display:grid;grid-template-columns:3rem 1fr auto 7rem;align-items:center;gap:1rem;padding:1.3rem 0;border-top:1px solid var(--ln);text-decoration:none;transition:padding .3s,color .3s}
.trio a:last-child{border-bottom:1px solid var(--ln)}.tn{font:clamp(2.6rem,8vw,7rem)/1 var(--d)}
.trio a:hover,.trio a:focus-visible{padding-left:1.2rem;color:var(--c)}.th{opacity:0;transition:opacity .3s}.trio a:hover .th,.trio a:focus-visible .th{opacity:1}
.feat{display:grid;grid-template-columns:repeat(12,1fr);gap:4rem var(--g);align-items:start}
.feat a{text-decoration:none}.feat a:nth-child(3n+1){grid-column:1/8}.feat a:nth-child(3n+2){grid-column:9/13;margin-top:4rem}.feat a:nth-child(3n){grid-column:4/10}
.ft{display:block;margin-top:.8rem;font:1.9rem/1.1 var(--d)}.feat .meta{display:block}.feat img{transition:opacity .3s}.feat a:hover img{opacity:.88}.feat a:hover .ft{color:var(--c)}
.fl{display:flex;gap:1.2rem;margin:2rem 0 0}
.fl button{background:none;border:0;padding:.7rem .6rem;cursor:pointer;color:var(--mute)}.fl button:hover{color:var(--ink)}
.fl button[aria-pressed=true]{color:var(--c)}.fl button[aria-pressed=true]::before{content:"[ "}.fl button[aria-pressed=true]::after{content:" ]"}
.idx{list-style:none;margin:2rem 0 clamp(2.5rem,5vw,4rem);padding:0}
.idx a{display:grid;grid-template-columns:3rem 1fr auto;gap:1rem;align-items:baseline;padding:.8rem 0;border-top:1px solid var(--ln);text-decoration:none;transition:padding .3s,color .3s}
.idx a:hover{padding-left:1rem;color:var(--c)}.idx .ti{font:clamp(1.6rem,3vw,2.4rem)/1.1 var(--d)}.mt,.n,.nt{color:var(--mute)}
.proj{margin:0 0 clamp(3rem,6vw,5rem)}.ph{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g);align-items:baseline;margin-bottom:1.75rem}
.ph .n{grid-column:1/2}.ph h2{grid-column:2/9;font-size:clamp(2.4rem,6vw,5.5rem);line-height:.95}.ph .d{grid-column:9/13}.ph p{margin:.3rem 0}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:1.75rem var(--g);align-items:start}.gal figure{margin:0}
.gal figure:nth-child(3n+1){grid-column:1/8}.gal figure:nth-child(3n+2){grid-column:9/13;margin-top:2rem}.gal figure:nth-child(3n){grid-column:3/9}
.proj:nth-of-type(even) .gal figure:nth-child(3n+1){grid-column:6/13}.proj:nth-of-type(even) .gal figure:nth-child(3n+2){grid-column:1/5}.proj:nth-of-type(even) .gal figure:nth-child(3n){grid-column:4/10}
.open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;transition:opacity .3s}.open:hover{opacity:.88}figcaption{color:var(--mute);margin-top:.5rem}
.vgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:3rem var(--g);align-items:start}
.vc{grid-column:1/span 7}.vc.v{grid-column:1/span 4}.vc.alt{grid-column:6/span 7}.vc.alt.v{grid-column:9/span 4}
.vc p{margin:.3rem 0}.vc h3{font:400 clamp(1.8rem,3.2vw,2.6rem)/1.05 var(--d);margin:1rem 0 .4rem}.vc h3 a{text-decoration:none}.vc h3 a:hover{color:var(--c)}.role{margin-top:.8rem!important}
.tag{display:inline-block;padding:.1rem .6rem;border:1px solid var(--ink)}.tag.edited{background:var(--ink);color:var(--bg)}.tag.filmed{border-color:var(--ln)}
.player{position:relative;width:100%;background:#dedbd2}.player img,.player video,.player iframe{width:100%;height:100%;object-fit:cover;border:0}.player.on{background:#111}.player.on video{object-fit:contain}
.play{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;border:1px solid #fff;background:rgba(20,20,20,.6);cursor:pointer;transition:transform .25s}.play:hover{transform:scale(1.08)}
.play::after{content:"";position:absolute;left:27px;top:20px;border:13px solid transparent;border-left:19px solid #fff;border-right:0}.nomedia{color:#fff;padding:1.5rem;margin:0}
#proj{max-width:1100px}#proj h1{margin:1.2rem 0 2rem;font-size:clamp(3rem,9vw,8rem)}.pw.v{max-width:min(100%,360px)}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 2rem;max-width:60ch;margin:2rem 0}dt{color:var(--mute)}dd{margin:0}
.about h1{margin-bottom:clamp(2rem,5vw,4rem)}.lede{grid-column:1/9;font:clamp(1.8rem,3.6vw,3.2rem)/1.1 var(--d);margin:0}#portrait{grid-column:9/13;grid-row:1/3}
.ab-t{grid-column:4/9}.ab-t p{margin:0 0 1.2rem}.about.solo .lede{grid-column:1/10}.about.solo .ab-t{grid-column:4/10}
.contact form{grid-column:5/13;order:2;display:grid;gap:1.6rem}.contact aside{grid-column:1/4;order:1}.contact aside h2{font:.78rem var(--m);text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}#cinfo p{margin:.2rem 0}
label{display:block;margin-bottom:.2rem}.opt{color:var(--mute)}
input,select,textarea{width:100%;padding:.7rem 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:inherit}textarea{resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}.hp{position:absolute;left:-9999px}
#st{margin:0;min-height:1.6em}#st.ok{color:var(--ink)}#st.err{color:#9a2a1c}
footer{border-top:1px solid var(--ln);margin-top:4rem;padding:2rem 0;color:var(--mute)}.big{display:block;font:clamp(2.6rem,9vw,8rem)/.95 var(--d);text-decoration:none;color:var(--ink);margin-bottom:3rem;transition:color .3s}.big:hover{color:var(--c)}
.fr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}.fr p{margin:0}
dialog{border:0;padding:0;background:var(--bg);width:100vw;height:100vh;max-width:100vw;max-height:100vh}dialog[open]{display:flex;align-items:center;justify-content:center}dialog::backdrop{background:var(--bg)}
dialog figure{margin:0;padding:4rem 1rem;text-align:center}dialog figure img{margin:auto;max-height:78vh;width:auto;max-width:100%}
dialog button{position:absolute;background:none;border:0;color:var(--ink);padding:.8rem;cursor:pointer}.x{top:.8rem;right:.8rem}.pv{bottom:.8rem;left:.8rem}.nx{bottom:.8rem;right:.8rem}
@media(max-width:860px){.hh-t,#hero,.ph .n,.ph h2,.ph .d,.lede,#portrait,.ab-t,.contact form,.contact aside,.about.solo .lede,.about.solo .ab-t{grid-column:1/-1;grid-row:auto}
.feat a,.feat a:nth-child(n),.gal figure,.gal figure:nth-child(n),.proj:nth-of-type(even) .gal figure:nth-child(n),.vc,.vc.v,.vc.alt,.vc.alt.v{grid-column:1/-1;margin-top:0}
.vc.v .player,.vc.v{max-width:320px}#portrait{max-width:320px}.contact form{order:2}.contact aside{order:1}.hh h1 span+span{margin-left:12vw}}
/* Mobile navigation stays in the page flow so it cannot cover the content. */
@media(max-width:760px){
#hdr{position:relative;z-index:20;background:var(--bg)}
#hdr .bar{height:auto;min-height:84px;flex-wrap:wrap}
#hdr .logo{max-width:calc(100% - 6rem)}
#hdr .mb{display:block;min-height:44px}
#hdr #nav{display:none;position:static;inset:auto;flex:0 0 100%;width:100%;height:auto;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);padding:.5rem 0 1.25rem;margin:0;border-bottom:1px solid var(--ln)}
#hdr #nav.nav-open{display:flex}
#hdr #nav a{display:block;position:static;align-self:stretch;margin:0;padding:.6rem 0;min-height:44px;font:400 clamp(1.8rem,7vw,2.4rem)/1.2 var(--d);text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
#hdr #nav a::before{display:none}
}
@media(max-width:600px){.trio a{grid-template-columns:2.2rem 1fr 5rem}.nt{display:none}.idx a{grid-template-columns:2.2rem 1fr}.idx .mt{display:none}.row2{grid-template-columns:1fr}}
@media(hover:none){.th{opacity:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Pair the two red flower photographs at a smaller, equal size. */
.proj[aria-labelledby="t-flower-studies"] .gal figure:nth-child(3){grid-column:3/7;grid-row:2;margin-top:0}
.proj[aria-labelledby="t-flower-studies"] .gal figure:nth-child(4){grid-column:7/11;grid-row:2;margin-top:0}
@media(max-width:860px){
.proj[aria-labelledby="t-flower-studies"] .gal figure:nth-child(3){grid-column:1/7;grid-row:3}
.proj[aria-labelledby="t-flower-studies"] .gal figure:nth-child(4){grid-column:7/13;grid-row:3}
}

/* Keep analogue photographs in a compact editorial sequence. */
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:nth-child(n){grid-column:auto;grid-row:auto;margin-top:0}
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:first-child{grid-column:3/11;grid-row:1}
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:nth-child(n+2):nth-child(even){grid-column:1/7}
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:nth-child(n+3):nth-child(odd){grid-column:7/13}
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:nth-child(2),
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:nth-child(3){grid-row:2}
@media(max-width:860px){
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:nth-child(n){grid-column:1/-1;grid-row:auto}
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:nth-child(2){grid-column:1/7;grid-row:2}
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:nth-child(3){grid-column:7/13;grid-row:2}
}

/* Photography categories wrap comfortably on small screens. */
#pf{flex-wrap:wrap;gap:.3rem 1rem}
.gallery-empty{margin:2rem 0 4rem;color:var(--mute)}
.proj[aria-labelledby="t-oh-so-boho"] .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
.proj[aria-labelledby="t-oh-so-boho"] .gal figure:nth-child(n){grid-column:auto;margin-top:0}
@media(max-width:600px){.proj[aria-labelledby="t-oh-so-boho"] .gal{grid-template-columns:minmax(0,1fr)}}


/* Title treatment for films whose source cover is a black frame. */
.poster-title{position:absolute;top:22%;left:8%;right:8%;color:#efede8;text-align:center;font:400 clamp(2rem,4vw,3.5rem)/1.05 var(--d);pointer-events:none}
.poster-title small{display:block;margin-top:1rem;font:400 .65rem/1.6 var(--m);letter-spacing:.08em;text-transform:uppercase}

/* HYROX photographs sit side by side in two balanced columns. */
.proj[aria-labelledby="t-hyrox-cpt-2026"] .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)}
.proj[aria-labelledby="t-hyrox-cpt-2026"] .gal figure:nth-child(n){grid-column:auto;grid-row:auto;margin:0;min-width:0}
.proj[aria-labelledby="t-hyrox-cpt-2026"] .gal img{width:100%;height:auto}

/* Cape Town Marathon photographs sit side by side in two balanced columns. */
.proj[aria-labelledby="t-cape-town-marathon-2026"] .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,2vw,1.5rem)}
.proj[aria-labelledby="t-cape-town-marathon-2026"] .gal figure:nth-child(n){grid-column:auto;grid-row:auto;margin:0;min-width:0}
.proj[aria-labelledby="t-cape-town-marathon-2026"] .gal img{width:100%;height:auto}

/* Responsive finishing: preserve the editorial layout while allowing tracks to shrink. */
.hh-b,.about .ab-g,.contact,.feat,.ph,.gal,.vgrid{grid-template-columns:repeat(12,minmax(0,1fr))}
.bar>*,.hh-b>*,.ab-g>*,.contact>*,.feat>*,.ph>*,.gal>*,.vgrid>*,.trio a>*{min-width:0}
.trio a{grid-template-columns:3rem minmax(0,1fr) auto 7rem}
.fr a,#cinfo a,dd{overflow-wrap:anywhere}
.fl{flex-wrap:wrap;gap:.3rem 1rem}.fl button{min-height:44px}
.player{overflow:hidden}.player>img,.player>iframe,.player>video{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.stop{position:absolute;top:.6rem;right:.6rem;z-index:2;border:1px solid #fff;border-radius:0;background:#141414;color:#fff;min-height:44px;padding:.45rem .8rem;font:.7rem var(--m);cursor:pointer}
.vc.v,.vc.alt.v{width:100%;max-width:420px}.pw.v{width:100%}
.proj h2{scroll-margin-top:1.5rem}.lightbox-open{overflow:hidden}
dialog{height:100dvh}dialog figure{max-width:100%;width:100%;padding:4rem 1rem}
dialog figure img{object-fit:contain;max-height:calc(100dvh - 9rem)}dialog figcaption{max-width:60ch;margin:.75rem auto 0;text-transform:none}
dialog button{min-height:44px}.gallery-empty{font-size:1rem}
@media(max-width:760px){
#hdr #nav.nav-open{display:flex}
#hdr .bar{gap:.4rem 1rem;min-height:76px}
#hdr .logo{max-width:calc(100% - 6rem);font-size:.7rem;letter-spacing:.035em}
#hdr #nav{padding-top:.5rem}
#hdr #nav a{min-height:48px;padding:.75rem 0}
.trio a:hover,.trio a:focus-visible{padding-left:0}
}
@media(max-width:600px){
.trio a{grid-template-columns:1.6rem minmax(0,1fr) clamp(3.6rem,16vw,5rem);gap:.7rem}
.tn{font-size:clamp(2rem,8vw,3rem)}
.vc.v,.vc.alt.v{max-width:min(100%,380px);margin-inline:auto}
.ph h2{overflow-wrap:anywhere}
.proj[aria-labelledby="t-analogue-portraits"] .gal figure:nth-child(n){grid-column:1/-1;grid-row:auto}
.proj[aria-labelledby="t-hyrox-cpt-2026"] .gal,.proj[aria-labelledby="t-cape-town-marathon-2026"] .gal{grid-template-columns:minmax(0,1fr)}
}

/* Digital gallery covers lead to a dedicated page for each series. */
.gallery-covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem var(--g);margin:2.5rem 0 4rem}
.gallery-cover{display:block;min-width:0;text-decoration:none;scroll-margin-top:1.5rem}
.gallery-cover-image{overflow:hidden;background:#e7e2d9}
.gallery-cover-image img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .4s ease,opacity .4s ease}
.gallery-cover:hover img,.gallery-cover:focus-visible img{transform:scale(1.025);opacity:.92}
.gallery-cover-caption{padding-top:.9rem;display:flex;flex-direction:column;gap:.5rem}
.gallery-cover-caption h2{font-size:clamp(1.8rem,2.6vw,2.8rem);line-height:1.08}
.gallery-cover:hover h2,.gallery-cover:focus-visible h2{color:var(--c)}
.gallery-detail .ph{display:none}
#gallery-back{display:inline-block;margin-bottom:1.8rem;min-height:44px;padding-block:.6rem}
.gallery-detail .proj{margin-top:0}
.gallery-detail .gal{gap:2rem var(--g)}
@media(max-width:1000px){.gallery-covers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.gallery-covers{grid-template-columns:minmax(0,1fr);gap:2.5rem}.gallery-cover-caption h2{font-size:2.2rem}}

/* Analogue: remove the repeated large section heading and show photos in pairs. */
.proj[aria-labelledby="t-analogue"]>.ph{display:none}
.proj[data-cat="analogue"] .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.65rem,2vw,1.5rem);align-items:start}
.proj[data-cat="analogue"] .gal figure:nth-child(n){grid-column:auto;grid-row:auto;margin:0;min-width:0}
.proj[data-cat="analogue"] .gal img{width:100%;height:auto}

/* Photography uses three generous columns with natural image proportions. */
body[data-page="photography"] main{max-width:1800px;padding-inline:clamp(1rem,1.5vw,1.5rem)}
#pgal .proj .gal{display:block;width:100%;max-width:none;margin-inline:0;column-count:3;column-gap:clamp(1.25rem,4.8vw,4.75rem)}
#pgal .proj .gal figure:nth-child(n){display:inline-block;vertical-align:top;width:100%;break-inside:avoid;page-break-inside:avoid;grid-column:auto;grid-row:auto;margin:0 0 clamp(1.25rem,4.8vw,4.75rem);min-width:0}
#pgal .proj .gal .open{display:block;width:100%;height:auto}
#pgal .proj .gal img{width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain}
@media(max-width:1000px){#pgal .proj .gal{column-count:2;column-gap:1.5rem}#pgal .proj .gal figure:nth-child(n){margin-bottom:1.5rem}}
@media(max-width:600px){#pgal .proj .gal{column-count:1}#pgal .proj .gal figure:nth-child(n){margin-bottom:1.25rem}}

/* Match the Video Editing badge treatment on the two UGC cards. */
.vc[data-c="ugc"] .tag.filmed-edited{background:var(--ink);color:var(--bg)}

/* Short context beneath the selected project titles. */
.feat .selected-desc{font:1.05rem/1.5 var(--b);max-width:48ch;margin:.65rem 0 0}

/* Selected films share a compact portrait frame and show their full covers. */
.feat a.selected-video{width:100%;max-width:360px;justify-self:center}
.feat a.selected-video:nth-child(1){grid-column:1/span 6;margin-top:0}
.feat a.selected-video:nth-child(2){grid-column:7/span 6;margin-top:0}
.selected-cover{display:block;width:100%;aspect-ratio:9/16}
.feat .selected-cover img{width:100%;height:100%;object-fit:contain}
.feat .selected-role{display:table;color:var(--ink);margin-top:.6rem}
@media(max-width:860px){.feat a.selected-video:nth-child(n){grid-column:1/-1;margin-top:0}}

/* Balance the selected photographs independently of their source proportions. */
.feat a[data-project="flower-studies"]{grid-column:4/10;width:100%;max-width:480px;justify-self:center}
.feat a[data-project="hyrox-cpt-2026"]{grid-column:2/12;width:100%;max-width:1000px;justify-self:center;margin-top:0}
@media(max-width:860px){
.feat a[data-project="flower-studies"],.feat a[data-project="hyrox-cpt-2026"]{grid-column:1/-1}
}