/* Consistency pass: one gutter, one type system, shared header and labels.
   Loaded last on every page so it settles the earlier layered stylesheets.

   Type system
   - Manrope (sans): page titles, section headings, reading paragraphs.
   - DM Mono: the film-credit voice — project titles, labels, links, buttons,
     navigation, and the two big homepage statements. */
:root { --gutter:3vw; }
@media(max-width:720px) { :root { --gutter:20px; } }

/* One gutter everywhere: header, sections, footer. */
.site-header { padding-left:var(--gutter); padding-right:var(--gutter); }
.work,.intro,.contact,.home-page .intro,.home-page .contact,footer { padding-left:var(--gutter); padding-right:var(--gutter); }
.work-hero,.portfolio-index { padding-left:var(--gutter); padding-right:var(--gutter); }
.portfolio-index { max-width:none; }
.creative-main,.info-main { max-width:none; padding-left:var(--gutter); padding-right:var(--gutter); }

/* Header: name / page, with location underneath, on every page and size. */
.header-center { letter-spacing:.1em; }
.header-center h1,.header-center .header-title { margin:0 0 3px; font:inherit; letter-spacing:inherit; }
.header-center .header-location { display:block; margin-top:3px; opacity:.55; }
@media(max-width:720px) {
  .site-header { grid-template-columns:40px minmax(0,1fr) 36px; gap:10px; }
  .header-center { display:block; font-size:10px; line-height:1.6; }
  .header-center h1,.header-center .header-title { font-size:clamp(9px,2.5vw,12px); letter-spacing:.025em; }
  .header-center .header-location { font-size:9px; letter-spacing:.025em; }
}

/* Menu: mark the page you're on. */
.menu > a[aria-current="page"] { color:var(--accent); }

/* Titles and headings in Manrope, at a shared scale. */
.work-hero h1,.info-lead h1,.creative-hero h1 {
  font-family:Manrope,sans-serif; font-weight:500; letter-spacing:-.055em; line-height:1.02;
  font-size:clamp(52px,7.8vw,112px);
}
.work-hero h1 i { display:inline; font-family:inherit; font-size:1em; line-height:inherit; letter-spacing:inherit; }
.work-hero h1 i::after { content:" "; white-space:pre; }
.section-head h2,.creative-work h2,.info-contact h2,.service-row h2 {
  font-family:Manrope,sans-serif; font-weight:500; letter-spacing:-.045em; line-height:1.1;
}
.creative-work h2,.info-contact h2 { font-size:clamp(32px,4vw,54px); }
.service-row h2 { font-size:clamp(28px,3vw,40px); }
@media(max-width:720px) { .work-hero h1,.info-lead h1,.creative-hero h1 { font-size:clamp(44px,13vw,64px); } }

/* Reading paragraphs in Manrope. */
.intro-meta p { font:16px/1.65 Manrope,sans-serif; letter-spacing:0; }

/* Links and contact details in the mono voice, everywhere. */
.info-contact-links a { font:14px/1.5 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.info-contact-links { gap:14px; }

/* Card grids: same gap on the homepage and Selected Work. */
.portfolio-page .portfolio-list { column-gap:var(--gutter); }
@media(max-width:720px) { .portfolio-page .portfolio-list { column-gap:0; } }

/* Homepage cards: smaller logos on the two-up cards, and the label steps
   aside while the logo overlay is showing so the two never collide. */
.home-page .project-grid .portfolio-brand { width:calc(var(--brand-width) * .6); max-width:calc(var(--brand-max) * .6); }
.home-page .project-wide .portfolio-brand { width:calc(var(--brand-width) * .75); max-width:calc(var(--brand-max) * .75); }
#work .play { transition:opacity .3s ease; }
#work .preview-active .play { opacity:0; }

/* "Start a project" strip: dividers stop at the margins like the rest. */
.portfolio-page .work-next { margin-left:var(--gutter); margin-right:var(--gutter); padding-left:0; padding-right:0; max-width:none; }

/* Info: name and bio on top, portrait and behind-the-scenes side by side. */
.info-portrait,.info-bts { grid-row:3; justify-self:start; width:min(100%,360px); margin:8px 0 0; }
.info-portrait { grid-column:1; position:relative; aspect-ratio:9/16; background:#111820; }
.info-bts { grid-column:2; }
.info-portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.info-portrait-empty { display:none; }
.info-portrait.is-empty img { display:none; }
.info-portrait.is-empty .info-portrait-empty { display:flex; position:absolute; inset:0; align-items:center; justify-content:center; font:12px 'DM Mono',monospace; letter-spacing:.12em; color:#5d6a73; border:1px solid var(--line); }
@media(max-width:720px) {
  .info-portrait,.info-bts { width:100%; justify-self:stretch; }
  .info-portrait { grid-row:3; }
  .info-bts { grid-column:1; grid-row:5; }
}

/* Phones: all four filters visible, wrapping instead of sliding off-screen. */
@media(max-width:720px) {
  .filters { flex-wrap:wrap; justify-content:center; overflow:visible; margin:0; padding:0; gap:10px; }
  .filters button { padding:10px 16px; }
}

/* Phones and tablets: show brand logos on homepage cards too, like Selected Work. */
@media(hover:none) {
  #work .brand-overlay { opacity:1; background:radial-gradient(ellipse at center,rgba(5,9,12,.38) 0%,rgba(5,9,12,.16) 65%,rgba(5,9,12,.28) 100%); }
  #work .brand-credit { visibility:hidden; }
}

/* Phones: tighter "Let's work together" section. */
@media(max-width:720px) {
  .home-page .contact { min-height:0; }
  .home-page .contact-link { padding:48px 0; }
  .home-page .contact-link span { top:calc(48px + 6%); }
}
.contact-meta a { text-transform:uppercase; }

/* Card logos: a fixed-height slot so every logo sits on the same line, the
   same distance above its text, on every card. Logos are real images (not
   scaled background art) so they stay crisp. */
.brand-slot { display:flex; align-items:flex-end; justify-content:center; width:100%; height:30%; flex:none; }
.portfolio-brand { height:auto; max-height:100%; object-fit:contain; object-position:center bottom; }
.brand-overlay { gap:14px; }
.brand-credit { min-height:2.7em; }
/* No zoom on hover: scaling the card resampled the logo and made it look pixelated. */
.portfolio-row:hover .row-media,.project:hover .project-image { transform:none; }

/* Card credit: film type as a small, quiet label; your role as the bold line. */
.brand-credit { gap:6px; }
.brand-client { font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.brand-role { font-size:13px; font-weight:500; letter-spacing:.02em; opacity:1; }
@media(max-width:900px) { .brand-client { font-size:9px; } .brand-role { font-size:12px; } }

/* Cards: the logo alone on the video; your role sits under the project name. */
.brand-credit { display:none; }
.brand-slot { height:34%; align-items:center; }
#work .project-info p,.portfolio-page .row-title > span {
  display:block; margin:8px 0 0; font:12px/1.4 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; opacity:.6;
}

/* Profile: just the statement and the link, so the link sits right on the line. */
.home-page .intro-meta a:first-child { margin-top:0; grid-column:1 / -1; justify-self:end; }