:root{
  --pad-left:24px; --pad-top:96px; --brand-gap:80px; --nav-gap:28px;
  --font:"Courier New", Courier, monospace; --fg:#111111; --bg:#ffffff; --fs:13px;
  --section-gap:64px; --title-gap:6px; --title-gap-extra:14px;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
font-family:var(--font);font-size:var(--fs);line-height:1.5;font-weight:400}
a{color:inherit;text-decoration:none}
.header{
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:flex-start;
  padding-top:var(--pad-top); padding-bottom:var(--pad-top);
  padding-left:var(--pad-left); padding-right:40px; column-gap:24px;
}
.leftgroup{display:flex; align-items:center; gap:var(--nav-gap)}
.brand{font-size:var(--fs); font-weight:400; margin-right:var(--brand-gap)}
.nav{display:flex; align-items:center; gap:var(--nav-gap)}
.mid-ig{display:flex; align-items:flex-start; justify-content:flex-end}
.mid-ig a{font-size:11px; white-space:nowrap}
.rightcol{display:flex; flex-direction:column; align-items:flex-start; justify-self:end}
.contacts-block{display:flex; flex-direction:column; align-items:flex-start; font-size:11px; line-height:1.25}
.contacts-block .label{margin:0; padding:0}
.contacts-block .inline{display:flex; gap:12px; flex-wrap:wrap; margin-top:2px}
.contacts-block .spacer{height:12px}
.contacts-inline{display:flex; gap:10px; flex-wrap:wrap; margin-top:2px}

.main{width:100%; padding-left:var(--pad-left); padding-right:40px; padding-top:16px}
.hero{margin:80px 0 16px 0}
.nav a:hover, a:hover{font-weight:700}

/* Video sizes */
.player-home{position:relative; overflow:hidden; width:800px; height:450px}
.player-home > *{position:static !important; width:100% !important; height:100% !important; object-fit:contain; border:0}
.player-sm{position:relative; overflow:hidden; width:560px; height:315px}
.player-sm > *{position:static !important; width:100% !important; height:100% !important; object-fit:contain; border:0}

/* Spacing rules */
.stack-section{margin:24px 0}
.stack-title{margin:0 0 8px 0; font-size:13px; font-weight:400}
.project{margin:16px 0}
h1.title{margin:0 0 0 0; font-size:13px; font-weight:400; line-height:1.2}
.project h3{margin:0 0 var(--title-gap) 0; font-size:13px; font-weight:400; line-height:1.2}
.project.extra-gap h3,
.project.commercial-gap h3,
.project.music-gap h3{margin:0 0 var(--title-gap-extra) 0}

/* Compensation for The Assessment (Home -12px, Feature -16px) */
.hero .player-home{margin-top:-12px !important}
.project.assessment .player-home{margin-top:-12px !important}

.caption{font-size:12px; margin:0 0 8px 0}

/* Gap before Short Film */
.section-gap{margin-top:var(--section-gap)}

/* Two-up row */
.row{display:grid; grid-template-columns:560px 560px; gap:32px; align-items:start}
@media (max-width:1200px){ .row{grid-template-columns:1fr} }

footer{padding:12px 16px; padding-left:var(--pad-left); margin-top:24px}

/* === V20 tweaks === */
.mid-ig a{font-size:11px; white-space:nowrap}
.contacts-block{display:flex; flex-direction:column; align-items:flex-start; font-size:11px; line-height:1.25}
.contacts-inline{display:flex; gap:10px; flex-wrap:wrap; margin-top:2px}
body.page-commercial .project{margin:32px 0} /* double spacing */
.project h3{margin:0 0 14px 0} /* unified title->video spacing */

/* === V21 tweaks === */
.mid-ig a{font-size:11px; white-space:nowrap}
.contacts-block{display:flex; flex-direction:column; align-items:flex-start; font-size:11px; line-height:1.25}
.contacts-inline{display:flex; gap:10px; flex-wrap:wrap; margin-top:2px}
body.page-commercial .project{margin:32px 0}
.project h3{margin:0 0 14px 0}
.project.assessment h3{margin-bottom:6px}
.project.assessment .player-home{margin-top:-6px}
.pw-section{margin:28px 0}
.pw-title{margin:0 0 12px 0; font-size:13px; font-weight:400}
.pw-grid{display:grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); column-gap:16px; row-gap:16px}
.pw-item img{width:100%; height:420px; object-fit:cover; display:block; background:#fff}
.pw-cta{display:flex; justify-content:center; margin:20px 0 0 0}
.btn-link{display:inline-block; padding:8px 16px; border:1px solid #000; background:#fff; color:#000; text-decoration:none; font-size:13px; transition:.2s}
.btn-link:hover{background:#000; color:#fff}
@media (max-width: 820px){
  .pw-grid{grid-template-columns:1fr}
  .pw-item img{height:360px}
}

body.page-music-videos .project{margin:32px 0}

/* V27 PW base */
body.page-published-work .pw-grid{display:grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); gap:24px}
body.page-published-work .pw-item{aspect-ratio:1/1; background:#fff}
body.page-published-work .pw-item img{width:100%; height:100%; display:block; object-fit:contain; padding:8px 0}

/* V27 Dreams: 2 per row, slightly larger, thin separators */
body.page-published-work .pw-dreams .pw-grid{grid-template-columns: repeat(2, minmax(320px, 1fr)); gap:0}
body.page-published-work .pw-dreams .pw-item{aspect-ratio: 3 / 4}
body.page-published-work .pw-dreams .pw-item:nth-child(odd){border-right:1px solid #e6e6e6}
body.page-published-work .pw-dreams .pw-item:nth-child(n+3){border-top:1px solid #e6e6e6}

/* V27 Akkurat: push lower and crop first image for alignment */
body.page-published-work .pw-akkurat{margin-top:220px}
body.page-published-work .pw-akkurat .pw-item.cropY{aspect-ratio:1/1}
body.page-published-work .pw-akkurat .pw-item.cropY img{object-fit:cover; object-position:center}
body.page-published-work .pw-akkurat .pw-item:first-child img{object-fit:cover; object-position:center}

/* V27 Bio under contacts */
.bio{max-width:560px; font-size:11px; line-height:1.5; text-align:left; margin-top:42px}
.bio p{margin:0 0 10px 0}

/* V29: larger gap between @fleurfortune and Film Agent */
.mid-ig{margin-bottom:40px !important}

/* V29: Published Work fixed tiles, left-aligned like videos */
body.page-published-work .pw-grid{display:grid; grid-template-columns: repeat(2, 420px); gap:24px; justify-content:start}
body.page-published-work .pw-item{width:420px; height:420px}
body.page-published-work .pw-item img{width:100%; height:100%; object-fit:contain; display:block}

/* V29: About page bio block */
.about-block{max-width:560px}
.about-block p{margin:0 0 10px 0}

body.page-feature .stack-title{text-decoration:underline}

/* V31 Film spacing tweaks */
body.page-feature .project.assessment .player-home{margin-top:-22px !important}

body.page-feature .stack-title{margin-bottom:16px !important}

body.page-published-work .pw-dreams .pw-grid{justify-content:start; justify-items:start}

/* V32 Film spacing: imitate Short Film */
body.page-feature .project.assessment h3{margin:0 0 var(--title-gap-extra) 0 !important}
body.page-feature .project.assessment .player-home{margin-top:0 !important}

/* V32: Dreams mimic Akkurat, left-aligned, same white gaps */
body.page-published-work .pw-dreams .pw-grid{grid-template-columns: repeat(2, 420px); gap:24px; justify-content:start; justify-items:start}
body.page-published-work .pw-dreams .pw-item{width:420px; height:420px}
body.page-published-work .pw-dreams .pw-item img{object-fit:contain}

/* Ensure Akkurat uses same fixed grid (safety) */
body.page-published-work .pw-akkurat .pw-grid{grid-template-columns: repeat(2, 420px); gap:24px; justify-content:start; justify-items:start}
body.page-published-work .pw-akkurat .pw-item{width:420px; height:420px}
body.page-published-work .pw-akkurat .pw-item img{object-fit:contain}

/* V32: cropY for special items to harmonize aspect */
body.page-published-work .pw-dreams .pw-item.cropY img{object-fit:cover; object-position:center}

/* V33 Film spacing tweaks */
body.page-feature .stack-title{margin-bottom:22px !important}
/* Halve space between The Assessment and video: smaller bottom margin on h3 */
body.page-feature .project.assessment h3{margin-bottom:7px !important}

body.page-feature .project.assessment .player-home{margin-top:0 !important}

/* V33 Published top alignment */
body.page-published-work main{margin-top:0 !important}
body.page-published-work .pw-section:first-of-type{margin-top:0 !important}

/* === V34: Unify top-of-page spacing for Home & Film === */
body.page-feature main{margin-top:0 !important}
main .hero{margin-top:0 !important}

/* V34: Film - match Short Film spacing (small gap) */
body.page-feature .project.assessment h3{margin:0 0 var(--title-gap) 0 !important}
body.page-feature .project.assessment .player-home{margin-top:-12px !important}

/* V34: Home hero lift slightly to align with other pages */
.hero .player-home{margin-top:-18px !important}

/* V35 Film: lift block & align like Commercial */
body.page-feature .main{margin-top:-10px !important}
body.page-feature .project.assessment h3{margin:0 0 14px 0 !important} /* match generic project h3 */
body.page-feature .project.assessment .player-home{margin-top:0 !important}

/* V35 Home: increase title->video spacing */
.hero h1.title{margin:0 0 28px 0 !important}
.hero .player-home{margin-top:0 !important}

/* V35 Published: title underline + fine crops */
.pw-title .u{text-decoration:underline}
body.page-published-work .pw-akkurat .pw-item:nth-child(1) img,
body.page-published-work .pw-akkurat .pw-item:nth-child(2) img{clip-path: inset(1px 0 1px 0); object-fit:cover; object-position:center}
body.page-published-work .pw-dreams .pw-item:nth-last-child(-n+2) img{clip-path: inset(1px); object-fit:cover; object-position:center}

/* Ensure left alignment on PW grids */
body.page-published-work .pw-akkurat .pw-grid,
body.page-published-work .pw-dreams .pw-grid{justify-content:start; justify-items:start}


/* === V36 BASELINE SPACING (single source of truth) === */
:root{
  --gap-title-video:14px;
  --gap-section-title:22px;
}
/* Same white space below the header on every page */
main{margin-top:0 !important}
/* First section never adds extra top margin */
.main > section:first-child,
main > .hero,
main > .stack-section:first-child{margin-top:0 !important}

/* Title->video spacing identical everywhere (like Commercial/Music Video) */
.project h3{margin:0 0 var(--gap-title-video) 0 !important}
.hero h1.title{margin:0 0 var(--gap-title-video) 0 !important}

/* Players never pull upwards with negative margins */
.player-home,.player-sm{margin-top:0 !important}

/* Section label spacing */
.stack-title{margin:0 0 var(--gap-section-title) 0 !important}



/* === V43_from_V36 overrides === */

/* Keep baseline stable */
:root{
  --gap-title-video:14px;
  --gap-section-title:12px;
}
main{margin-top:0 !important}
.main > section:first-child, main > .hero, main > .stack-section:first-child{margin-top:0 !important}
.project h3{margin:0 0 var(--gap-title-video) 0 !important}
.hero h1.title{margin:0 0 var(--gap-title-video) 0 !important}
.player-home,.player-sm{margin-top:0 !important}
.stack-title{margin:0 0 var(--gap-section-title) 0 !important}

/* HOME: lower the title by +10px and halve the whitespace to the video */
.hero h1.title{margin-top:10px !important; margin-bottom:7px !important}
.hero .player-home{margin-top:-3px !important}

/* FILM: raise the The Assessment video by -10px (titles unchanged) */
body.page-feature .project.assessment .player-home{margin-top:-10px !important}

/* PUBLISHED */
/* Titles: use quoted forms without underline */
.pw-title .u{border:0; text-decoration:none}
/* Double the space between Akkurat and Dreams titles */
body.page-published-work .pw-akkurat + .pw-section .pw-title{margin-top:72px !important}

/* First two Akkurat images: slight zoom by cropping 4px top/bottom */
body.page-published-work .pw-akkurat .pw-item:nth-child(1) img{clip-path: inset(4px 0 4px 0); object-fit:cover; object-position:center; background:#fff}
body.page-published-work .pw-akkurat .pw-item:nth-child(2) img{clip-path: inset(4px 0 4px 0); object-fit:cover; object-position:center; background:#fff}

/* Ensure all images fill their frames (no white) */
body.page-published-work .pw-item img{width:100%; height:100%; object-fit:cover; object-position:center; background:#fff; padding:0}

/* Last two Dreams images: move up & right a touch and trim edges */
body.page-published-work .pw-dreams .pw-item:nth-last-child(-n+2) img{
  object-position: 55% 45%;
  clip-path: inset(2px 2px 0 0);
}
/* Dreams CTA fully left-aligned */
.pw-dreams .pw-cta{display:flex; justify-content:flex-start; margin-left:0}
.pw-akkurat .pw-cta{display:flex; justify-content:flex-start; margin-left:0}



/* === V44_from_V36 overrides === */

/* HOME: lower the title an extra ~10px (total ~20px), keep video in place */
.hero h1.title{margin-top:20px !important}

/* FILM: raise The Assessment video by ~20px (titles unchanged) */
body.page-feature .project.assessment .player-home{margin-top:-20px !important}

/* PUBLISHED: zoom more into the last two Dreams images; ensure crop via overflow */
body.page-published-work .pw-item{overflow:hidden}
body.page-published-work .pw-dreams .pw-item:nth-last-child(-n+2) img{
  transform: scale(1.06);
  transform-origin: center;
  object-position: 56% 44%;
  clip-path: inset(1px 1px 0 0);
}


/* === V45_from_V36: Home title lowered by +15px (total ~35px) === */
.hero h1.title{margin-top:35px !important}

/* === V46_from_V36: Home video raised to reduce title->video gap (title unchanged) === */
.hero .player-home{margin-top:-12px !important}