/* A film-strip portfolio, scoped to the work section. */
#work{background:#151614;color:#ecece2;padding:72px 4% 62px;overflow:hidden;max-width:none}
#work .section-top{align-items:start;margin-bottom:42px;gap:28px}
#work .eyebrow{font:10px/1.5 'Manrope',Arial,sans-serif;letter-spacing:2px;color:#aaa99c;margin-bottom:22px}
#work h2{font-family:Arial,Helvetica,sans-serif;font-weight:600;text-transform:uppercase;font-size:clamp(50px,8vw,116px);letter-spacing:-.075em;line-height:.88}
#work h2 em{color:#a8aa98;font-style:normal}
#work .section-top>p{font:12px/1.7 'Manrope',Arial,sans-serif;color:#b5b6ac;max-width:240px;margin-top:34px}
#work .filters{border-color:#ffffff25;gap:6px 22px;padding-bottom:14px}
#work .filters button{color:#acafa3;font-size:11px;min-height:44px}
#work .filters button[aria-pressed=true]{color:#fff;border-color:#d9bd86}
#work .filters button:hover{color:#fff}
#work .gallery-meta{color:#aeb0a5;font:10px/1.5 'Manrope',Arial,sans-serif;text-transform:uppercase;letter-spacing:1.5px;margin:24px 0}
.portfolio-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:28px}
.portfolio-controls button{color:#dfe0d5;background:none;border:1px solid #ffffff30;min-height:44px;padding:10px 17px;font-size:11px}
.portfolio-controls button[aria-pressed=true]{background:#e5e6d9;color:#191b17;border-color:#e5e6d9}
.portfolio-controls button:disabled{opacity:.3;cursor:default}
.portfolio-modes,.portfolio-arrows{display:flex;gap:6px}
.portfolio-hint{font:10px/1.5 'Manrope',Arial,sans-serif;color:#aeb0a5;margin:0;letter-spacing:1px}
#work .gallery{counter-reset:frame;gap:24px;align-items:start}
#work .gallery[data-view=reel]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#696e59 #242620;padding:4px 0 24px;overscroll-behavior-x:contain}
#work .gallery[data-view=reel] .photo{flex:0 0 clamp(250px,31vw,480px);scroll-snap-align:start}
#work .photo{color:#e4e5da;counter-increment:frame;margin:0;min-width:0}
#work .photo-img{aspect-ratio:4/5;background:#252722}
#work .photo img{transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s;filter:saturate(.86)}
#work .photo:hover img,#work .photo:focus-visible img{transform:scale(1.035);filter:saturate(1)}
#work .photo-caption{display:grid;grid-template-columns:30px 1fr auto;align-items:baseline;gap:12px;font:11px/1.6 'Manrope',Arial,sans-serif;letter-spacing:.3px;margin-top:16px;text-transform:uppercase}
#work .photo-caption:before{content:counter(frame,decimal-leading-zero);color:#a1a690;font-size:10px}
#work .photo-caption small{color:#a1a690;font-size:9px}
#work .gallery[data-view=grid]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
#work .outline{color:#e5e6d9;border-color:#797c6b;min-height:48px;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin:36px auto 0}
#work .outline:hover{background:#e5e6d9;color:#191b17}
#work .empty{color:#b9bbad}
#work button:focus-visible{outline:2px solid #d9bd86;outline-offset:5px}
@media(max-width:700px){#work{padding:52px 5% 44px}#work .section-top{display:block}#work .section-top>p{margin-top:24px}#work h2{font-size:clamp(49px,12vw,80px)}#work .gallery[data-view=reel] .photo{flex-basis:78vw}#work .gallery[data-view=grid]{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}#work .photo-caption{grid-template-columns:22px 1fr;gap:6px;font-size:10px}#work .photo-caption small{display:none}.portfolio-hint{display:none}#work .filters{gap:4px 17px}}
@media(prefers-reduced-motion:reduce){#work .photo img{transition:none}#work .gallery{scroll-behavior:auto}}
#work .photo-reveal{opacity:.55;translate:0 22px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1)}
#work .photo-in-view{opacity:1;translate:0 0}
#work .photo img{transform:scale(1.045) translateY(var(--photo-drift,0px))}
#work .photo:hover img,#work .photo:focus-visible img{transform:scale(1.065) translateY(var(--photo-drift,0px))}
@media(prefers-reduced-motion:reduce){#work .photo-reveal{opacity:1;translate:none;transition:none}#work .photo img,#work .photo:hover img,#work .photo:focus-visible img{transform:none}}
/* Keep photographs closer to the top and labels easy to read. */
#work{padding-top:48px}
#work .section-top{margin-bottom:25px}
#work h2{font-size:clamp(48px,6vw,82px)}
#work .eyebrow{margin-bottom:18px}
#work .filters button{font-size:12px}
#work .gallery-meta{letter-spacing:1px;font-size:11px;margin:20px 0}
.portfolio-controls{margin-bottom:20px}
.portfolio-controls button{font-size:12px}
.portfolio-enquiry{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #ffffff25;padding-top:28px;margin-top:44px}
.portfolio-enquiry p{font:24px/1.4 'Instrument Serif',Georgia,serif;color:#dfe0d5;margin:0}
.portfolio-enquiry a{display:inline-flex;align-items:center;gap:24px;min-height:48px;padding:12px 18px;border:1px solid #a8aa98;font-size:13px;color:#ecece2}
.portfolio-enquiry a:hover{background:#e5e6d9;color:#191b17}
.portfolio-enquiry a:focus-visible{outline:2px solid #d9bd86;outline-offset:5px}
@media(max-width:700px){#work{padding-top:38px}#work .section-top>p{margin-top:18px}#work .section-top{margin-bottom:20px}#work .filters{gap:0 15px}.portfolio-enquiry{align-items:stretch;flex-direction:column;gap:16px}.portfolio-enquiry a{justify-content:space-between}}
/* Gold connects the portfolio controls to the logo. */
#work h2 em{color:var(--paper)}
#work .eyebrow{color:var(--gold)}
#work .filters button[aria-pressed=true]{border-color:var(--gold)}
.portfolio-controls button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}
.portfolio-enquiry a{border-color:var(--gold)}
.portfolio-enquiry a:hover,#work .outline:hover{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}

/* Photo titles support the work without competing with it. */
#work .photo-caption{grid-template-columns:minmax(0,1fr) auto;gap:12px;text-transform:none;letter-spacing:0;font:13px/1.5 'Manrope',Arial,sans-serif;color:#dddcd2;margin-top:12px}#work .photo-caption:before{content:none}#work .photo-caption small{font-size:11px;letter-spacing:0;text-transform:none;color:#afb2a3}#work .photo-caption>span{min-width:0} @media(max-width:700px){#work .photo-caption{grid-template-columns:minmax(0,1fr);font-size:12px;line-height:1.5;margin-top:9px}}