/* arvindfilms.com — white gallery, condensed caps for names, serif italic for voice */
:root{
  --bg:#FFFFFF; --ink:#111111; --muted:#666462; --rule:#E4E1DC; --accent:#9A5B12; --dark:#0E0E0D;
  --display:'Oswald','Arial Narrow',sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --voice:'Cormorant Garamond',Georgia,serif;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gutr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.muted{color:var(--muted)}
.wrap{max-width:1400px;margin-inline:auto;padding-left:calc(var(--gut) + 1vw);padding-right:calc(var(--gutr) + 1vw)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:30}
.skip:focus{left:16px}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:21}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.bar.scrolled{border-bottom-color:var(--rule)}
.bar-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 24px;min-height:60px}
.bar-name{font:500 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding-block:12px}
.bar nav{display:flex;flex-wrap:wrap;gap:0 26px;font-size:14px}
.bar nav a{text-decoration:none;padding-block:12px}

/* hero */
.hero-head{padding-block:28px 22px}
.wordmark{margin:0;font:600 clamp(40px,10.4vw,172px)/.86 var(--display);letter-spacing:-.012em;text-transform:uppercase;text-align:center;text-wrap:balance;overflow-wrap:anywhere}
.strap{margin:18px 0 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;font-size:14px;color:var(--muted);letter-spacing:.02em}
.reel-wrap{margin:0}
.reel{position:relative;width:100%;aspect-ratio:1.9/1;max-width:100%;overflow:hidden;background:var(--dark)}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:reelfade 80s linear infinite,reelzoom 80s linear infinite}
.reel img:first-child{opacity:1}
@keyframes reelfade{0%{opacity:0}1.5%{opacity:1}5%{opacity:1}6.5%{opacity:0}100%{opacity:0}}
@keyframes reelzoom{0%{transform:scale(1)}6.5%{transform:scale(1.035)}100%{transform:scale(1.035)}}
.cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 24px;font-size:14px;padding-top:12px}

/* sections */
.section{padding-top:clamp(80px,10vw,136px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:32px;font-size:14px}
.eyebrow{margin:0;font:500 13px/1.2 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}

/* work tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 20px}
.tile{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--ink)}
.tile-wide{grid-column:1/-1}
.tile-img{display:block;overflow:hidden;aspect-ratio:16/10;max-width:100%;background:var(--dark)}
.tile-wide .tile-img{aspect-ratio:2.2/1}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .4s}
.tile:hover .tile-img img{transform:scale(1.035)}
.tile:hover{color:var(--ink)}
.tile-cap{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 16px}
.tile-title{font:500 clamp(20px,2vw,26px)/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;text-wrap:balance}
.tile-meta{font-size:14px;color:var(--muted)}
.tile:hover .tile-title{color:var(--accent)}

/* credits */
.credits{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.credits li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:4px 32px;padding-block:18px;border-bottom:1px solid var(--rule)}
.cr-name{font:500 20px/1.25 var(--display);text-transform:uppercase;letter-spacing:.02em}
.cr-desc{color:#3a3936}
.also{margin:24px 0 0;color:var(--muted);font-size:15px;max-width:72ch}

/* info */
.info{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px 64px;align-items:start}
.info-img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.info-text{display:flex;flex-direction:column;gap:20px;max-width:640px}
.info-text>p{margin:0;font-size:17px;color:#333}
.quote{font:italic 400 clamp(34px,3.6vw,52px)/1.08 var(--voice)!important;color:var(--ink)!important;text-wrap:balance}
.caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--rule);padding-top:24px;margin-top:8px}
.caps h3{margin:0 0 8px;font:500 15px/1.2 var(--display);text-transform:uppercase;letter-spacing:.06em}
.caps p{margin:0;font-size:14px;line-height:1.75;color:#444}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:center;padding-bottom:24px}
.contact-text{display:flex;flex-direction:column;gap:22px}
.contact-line{margin:0;font:italic 400 clamp(42px,5vw,76px)/1.02 var(--voice);text-wrap:balance}
.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.contact-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;padding-block:13px;border-bottom:1px solid var(--rule);font-size:16px;overflow-wrap:anywhere}
.contact-list .muted{font-size:13px;letter-spacing:.04em;padding-top:2px}
.contact-img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* footer */
.foot{margin-top:clamp(80px,10vw,128px);border-top:1px solid var(--rule)}
.foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-block:26px calc(36px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--muted)}
.foot a{color:var(--muted)}

/* project pages */
.project{padding-top:28px}
.back{display:inline-block;font-size:14px;color:var(--muted);text-decoration:none;padding-block:10px}
.proj-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px 48px;align-items:end;padding-block:12px 40px}
.proj-title{grid-column:1/-1;margin:0;font:600 clamp(46px,8vw,128px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.008em;text-wrap:balance}
.proj-meta{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:12px 32px;justify-content:start}
.proj-meta dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.proj-meta dd{margin:2px 0 0;font-size:15px}
.proj-note{margin:0;font-size:17px;color:#333;max-width:52ch}
.gallery{display:flex;flex-direction:column;gap:16px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.shot{all:unset;display:block;cursor:zoom-in;background:var(--dark);overflow:hidden}
.shot:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shot img{width:100%;aspect-ratio:1.9/1;object-fit:cover;transition:opacity .3s}
.pair .shot img{aspect-ratio:16/10}
.shot:hover img{opacity:.92}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px;border-top:1px solid var(--rule)}
.pn a{display:flex;flex-direction:column;gap:6px;padding-block:28px;text-decoration:none}
.pn-next{text-align:right;align-items:flex-end}
.pn .muted{font-size:13px}
.pn-t{font:500 clamp(20px,3vw,38px)/1.05 var(--display);text-transform:uppercase}

/* lightbox */
.lb{border:0;padding:0;max-width:100vw;max-height:100vh;width:100vw;height:100vh;background:rgba(10,10,10,.96);display:none}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb img{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);object-fit:contain}
.lb-x{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));width:48px;height:48px;border:0;background:transparent;color:#fff;font-size:34px;line-height:1;cursor:pointer}
.lb::backdrop{background:transparent}

@media (max-width:860px){
  .tiles,.pair{grid-template-columns:1fr}
  .info,.contact,.proj-head{grid-template-columns:1fr}
  .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .credits li{grid-template-columns:1fr}
  .proj-meta{grid-template-columns:repeat(2,minmax(0,auto))}
  .contact-list li{grid-template-columns:1fr}
  .bar-in{justify-content:center}
}
@media (max-width:520px){.bar-name{display:none}.bar nav{gap:0 20px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reel img{animation:none}
  .tile-img img{transition:none}
}