/* site-fixes.css — loads AFTER site.css */

/* 1. Less empty space between the header and every page headline */
.intro{padding-top:clamp(28px,4.2vw,56px)}

/* 2. Home: headline + showreel sit together on the first screen */
.intro.home{padding-top:clamp(18px,3vh,30px); padding-bottom:clamp(30px,4vw,48px)}
.hero-top{display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,56px);
  margin-bottom:clamp(14px,2.2vh,22px)}
.intro.home h1{font-size:clamp(38px,5.4vw,68px); line-height:1.02}
.intro.home .lede{max-width:34ch; margin:0 0 .3em; font-size:16px; line-height:1.55}
/* the film is sized so the whole 16:9 frame (plus caption) fits the visible screen */
.stage{margin:0 auto; width:min(100%, calc((100vh - 300px) * 1.7778))}
@supports (height:100svh){ .stage{width:min(100%, calc((100svh - 300px) * 1.7778))} }
.stage .film{margin-top:0}
.intro.home .facts{margin-top:clamp(24px,3.4vw,40px)}
@media(max-width:760px){
  .hero-top{flex-direction:column; align-items:flex-start; gap:12px}
  .intro.home h1{font-size:clamp(36px,10.5vw,46px)}
  .intro.home .lede{max-width:none; font-size:15px}
}

/* 3. Photo grid: two-thirds-width landscape slot (pairs with a 4:5 portrait) */
.item.wide{grid-column:span 8}
@media(max-width:760px){ .item.wide{grid-column:span 12} }

/* 4. Lock the dark theme (#13120F background, #F2EDE3 text) regardless of device setting */
:root[data-theme="dark"]{color-scheme:dark; --ink:#F2EDE3}

/* 5. Photo page: spaced category sections (Food / Product / Lifestyle), each with its own heading + grid */
.catblock{margin-top:64px}
.catblock:first-of-type{margin-top:36px}

/* 6. About page: capability tags */
.pills{display:flex; flex-wrap:wrap; gap:10px 12px}
.pills .pill{display:inline-block; padding:9px 16px; border:1px solid rgba(242,237,227,0.22);
  border-radius:999px; font-size:12px; letter-spacing:0.04em; color:var(--ink,#F2EDE3)}