@font-face { font-family:'Bebas Neue'; src:url('/assets/bebas-neue.ttf') format('truetype'); font-weight:400; font-display:swap; }
:root { --bg:#111; --surface:#1e1e1e; --ink:#f7f7f5; --muted:#b7b7b4; --margin:clamp(20px,3vw,48px); --font-display:'Bebas Neue','Arial Narrow',sans-serif; --font-body:Arial,Helvetica,sans-serif; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html { --header-height:110px; scrollbar-gutter:stable; scroll-behavior:smooth; scroll-padding-top:var(--header-height); }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 var(--font-body); -webkit-font-smoothing:antialiased; }
body.modal-open { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
button,a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:2px solid var(--ink); outline-offset:6px; }
button[hidden],div[hidden] { display:none!important; }
h1,h2,p { margin:0; }
h1,h2 { font-weight:400; }
img { display:block; max-width:100%; }
svg { width:24px; height:24px; }
::selection { background:#ddd; color:#111; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip { position:fixed; z-index:50; top:12px; left:16px; padding:14px 20px; background:var(--ink); color:var(--bg); transform:translateY(-150%); }
.skip:focus { transform:none; }
main:focus { outline:none; }
.site-header { position:fixed; top:0; left:0; right:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:110px; padding:22px var(--margin); background:transparent; transition:background 200ms; }
.site-header.is-solid { background:var(--bg); }
.identity { display:flex; flex-direction:column; gap:5px; }
.identity h1 { font-family:var(--font-display); font-size:34px; line-height:1; letter-spacing:1px; }
.identity>span { font-size:14px; }
.site-header nav { display:flex; gap:30px; }
.site-header nav a { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.site-header nav a[aria-current] { text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:2px; }
.site-header nav a:hover,.contact-links>a:hover,.site-footer a:hover { opacity:.7; }
.hero { position:relative; height:100svh; min-height:540px; overflow:clip; background:#171012; isolation:isolate; }
.reel-media { position:absolute; inset:0; overflow:clip; }
.hero-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.background-player { position:absolute; inset:0; opacity:0; transition:opacity 400ms; pointer-events:none; }
.background-player.is-playing { opacity:1; }
.background-player iframe { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:max(100vw,240svh); height:max(135svh,56.25vw); border:0; }
/* Neutral scrim for readable controls over moving footage. */
.hero-scrim { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.08) 32%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.65)); }
.play-reel { display:flex; flex-shrink:0; align-items:center; gap:14px; padding:0; background:none; border:0; font-size:15px; white-space:nowrap; }
.play-circle { display:grid; place-items:center; width:52px; height:52px; border:1px solid rgba(255,255,255,.8); border-radius:50%; background:rgba(0,0,0,.25); transition:transform 250ms var(--ease),background 250ms; }
.play-circle svg { width:24px; height:24px; margin-left:3px; }
.play-reel:hover .play-circle { transform:scale(1.08); background:rgba(0,0,0,.5); }
.play-reel:active .play-circle { transform:scale(.96); }
.hero-bottom { position:absolute; bottom:32px; left:var(--margin); right:var(--margin); display:flex; align-items:center; gap:20px; }
#toggle-background { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:0; border-radius:50%; background:rgba(0,0,0,.35); padding:0; }
#toggle-background svg { width:18px; height:18px; }
#toggle-background:hover { background:var(--surface); }
.scroll-link { display:flex; align-items:center; justify-content:center; min-height:48px; gap:24px; margin-left:auto; font-size:15px; padding:10px 20px; border-radius:30px; background:rgba(0,0,0,.5); }
.scroll-label-short { display:none; }
.scroll-link svg { transition:transform 200ms var(--ease); }
.scroll-link:hover svg { transform:translateY(4px); }
.photography { padding:4px 0 0; scroll-margin-top:0; }
.photo-grid { position:relative; columns:3; column-gap:4px; margin:0 4px; }
.photo-grid.is-arranged { columns:auto; }
.photo-tile { display:block; position:relative; break-inside:avoid; margin-bottom:4px; overflow:hidden; background:var(--surface); }
.photo-grid.is-arranged .photo-tile { position:absolute; margin:0; }
.photo-tile>img { width:100%; height:100%; object-fit:cover; transition:transform 650ms var(--ease),opacity 250ms; }
.photo-tile:hover>img { transform:scale(1.025); opacity:.85; }
.photo-tile:focus-visible { outline-offset:-5px; }
.photo-open { position:absolute; bottom:18px; right:18px; padding:10px 14px; border-radius:24px; background:rgba(0,0,0,.8); font-size:14px; opacity:0; transform:translateY(6px); transition:opacity 200ms,transform 200ms var(--ease); }
.photo-tile:hover .photo-open,.photo-tile:focus-visible .photo-open { opacity:1; transform:none; }
.contact { text-align:center; padding:120px var(--margin) 100px; scroll-margin-top:0; }
.contact h2 { font:400 34px/1.1 var(--font-display); margin-bottom:28px; }
.contact-email { display:inline-block; font-size:clamp(24px,3vw,44px); letter-spacing:-.035em; line-height:1.3; min-height:44px; }
.contact-email:hover { text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px; }
.contact p { color:var(--muted); margin-top:18px; font-size:15px; }
.contact-links { display:flex; justify-content:center; align-items:center; gap:30px; margin-top:30px; }
.contact-links a { display:flex; align-items:center; justify-content:center; min-height:48px; font-size:15px; transition:opacity 180ms; }
.email-button { border-radius:28px; padding:12px 22px; gap:20px; background:var(--ink); color:var(--bg); }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px var(--margin) 30px; color:var(--muted); font-size:14px; }
.site-footer a { min-height:44px; display:flex; align-items:center; }
.photo-viewer,.video-dialog { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; border:0; padding:0; margin:0; background:#090909; color:var(--ink); }
dialog::backdrop { background:#090909; }
.viewer-top { position:absolute; top:16px; left:var(--margin); right:var(--margin); display:flex; justify-content:space-between; align-items:center; gap:20px; }
.viewer-top>a { min-height:44px; display:flex; align-items:center; }
.close-button { background:none; border:0; min-height:44px; display:flex; align-items:center; gap:20px; padding:0 5px 0 16px; }
.close-button span { font-size:30px; line-height:1; }
.viewer-stage { position:absolute; inset:80px var(--margin) 90px; display:flex; align-items:center; justify-content:center; }
.viewer-stage>img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.viewer-bottom { position:absolute; bottom:20px; left:var(--margin); right:var(--margin); display:flex; justify-content:space-between; align-items:center; gap:24px; }
.viewer-bottom button { padding:10px 0; display:inline-flex; align-items:center; gap:20px; min-height:44px; border:0; background:none; }
.viewer-bottom>span { font-size:14px; }
.video-dialog[open] { display:flex; align-items:center; justify-content:center; padding:80px var(--margin); }
.video-screen { width:min(100%,calc((100svh - 170px) * 16/9)); aspect-ratio:16/9; }
.video-screen iframe { width:100%; height:100%; border:0; display:block; }
.video-external { position:absolute; bottom:16px; min-height:44px; display:flex; align-items:center; }
.no-script { text-align:center; padding:24px; }
.no-script a { text-decoration:underline; }
@media(max-width:700px) {
  html { --header-height:94px; }
  .site-header { min-height:94px; padding-block:18px; gap:12px; }
  .identity h1 { font-size:28px; }
  .identity>span { font-size:13px; max-width:145px; line-height:1.3; }
  .site-header nav { gap:12px; }
  .site-header nav a { font-size:14px; }
  .hero { min-height:480px; }
  .hero-poster { object-position:57% center; }
  .hero-bottom { bottom:24px; gap:12px; }
  .scroll-link { padding:10px 14px; gap:10px; font-size:14px; }
  .photography { padding-top:3px; }
  .photo-grid { columns:2; margin-inline:3px; column-gap:3px; }
  .photo-grid.is-arranged { columns:auto; }
  .photo-tile { margin-bottom:3px; }
  .photo-open { display:none; }
  .contact { padding:76px var(--margin) 56px; }
  .contact h2 { font-size:30px; margin-bottom:24px; }
  .contact-email { font-size:clamp(20px,6vw,26px); }
  .contact p { font-size:14px; max-width:28ch; margin:16px auto 0; }
  .contact-links { gap:24px; }
  .site-footer { padding-bottom:22px; }
  .viewer-stage { inset:76px 12px 88px; }
  .viewer-bottom button { gap:12px; }
  .video-dialog[open] { padding-inline:0; }
}
@media(max-width:350px) {
  html { --header-height:103px; }
  :root { --margin:16px; }
  .identity>span { max-width:98px; }
  .site-header nav { gap:6px; }
  .hero-bottom { gap:8px; }
  .scroll-label-long { display:none; }
  .scroll-label-short { display:inline; }
  .scroll-link { padding-inline:11px; font-size:13px; gap:6px; }
}
@media(max-height:480px) and (orientation:landscape) {
  .hero { min-height:360px; }
  .site-header { min-height:86px; }
  .play-circle { width:58px; height:58px; }
  .play-reel { gap:10px; }
  .hero-bottom { bottom:18px; }
}
/* Narrow layouts show the complete 16:9 reel, with controls below the frame. */
@media(max-width:900px) {
  .site-header { background:var(--bg); }
  .hero { height:auto; min-height:0; padding-top:var(--header-height); background:var(--bg); }
  .reel-media { position:relative; inset:auto; width:100%; aspect-ratio:16/9; background:#090909; }
  .hero-poster { object-fit:contain; object-position:center; }
  .background-player iframe { inset:0; transform:none; width:100%; height:100%; }
  .hero-scrim { background:none; }
  .play-reel { gap:12px; font-size:14px; }
  .play-circle { width:44px; height:44px; }
  .hero-bottom { position:static; padding:18px var(--margin); min-height:80px; }
  #toggle-background { background:none; margin-left:auto; }
  .scroll-link { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}