@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap");

:root{
  --bg:#556B2F; --paper:#f1eee8; --muted:#9c9993; --line:#2b2b2b;
  --accent:#d8ff55; --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}.nav{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(0,66,37,.92);backdrop-filter:blur(12px);z-index:10}
.logo{font-weight:700;letter-spacing:.04em}.nav nav{display:flex;gap:30px}.nav nav a{color:#bdbab4;font-size:.9rem}.nav nav a:hover{color:var(--paper)}
.hero{min-height:calc(100vh - 76px);padding:8vw 5vw;display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}
.eyebrow{font-size:.72rem;letter-spacing:.18em;font-weight:700;color:var(--muted);margin:0 0 20px}.hero h1{font-size:clamp(4rem,8vw,8rem);line-height:.88;letter-spacing:-.055em;margin:0 0 30px}.hero h1 em,.contact h2 em{font-family:var(--serif);font-weight:500}.intro{max-width:540px;color:#b8b5af;font-size:1.1rem;margin-bottom:34px}.button{display:inline-flex;gap:18px;align-items:center;border:1px solid #555;padding:13px 18px;font-weight:700;font-size:.9rem}.button:hover{background:var(--paper);color:var(--bg)}
.hero-frame{height:min(70vh,700px)}.hero-image,.project-image{height:100%;background:linear-gradient(135deg,#272727,#101010);display:flex;align-items:center;justify-content:center;color:#777;font-size:.7rem;letter-spacing:.16em}
.section{padding:9vw 5vw}.section-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:70px}.muted{color:var(--muted);font-size:.8rem}
.project{display:grid;grid-template-columns:1.35fr 1fr;gap:6vw;align-items:center;margin-bottom:10vw}.project.reverse{grid-template-columns:1fr 1.35fr}.project.reverse .project-image{order:2}.project-image{aspect-ratio:16/10;min-height:330px}.project-info{max-width:520px}.project-type{color:var(--muted);font-size:.7rem;letter-spacing:.15em;font-weight:700}.project h2{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-.04em;margin:12px 0 20px}.project-info p{color:#aaa7a1}.credits{display:flex;gap:25px;color:#d0cdc7;font-size:.8rem;border-top:1px solid var(--line);padding-top:16px;margin-top:28px}.text-link{display:inline-block;margin-top:28px;border-bottom:1px solid #777;padding-bottom:4px;font-weight:700;font-size:.85rem}.text-link:hover{color:var(--accent);border-color:var(--accent)}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-bottom:10vw}.project-grid .project{display:block;margin:0}.project-grid .project-image{margin-bottom:25px}.project-grid h2{font-size:2.4rem}
.about{display:grid;grid-template-columns:1fr 2fr;gap:8vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.about h2{font-size:clamp(2.6rem,5vw,5rem);line-height:1;letter-spacing:-.045em;margin:0 0 30px;max-width:950px}.about p:not(.eyebrow){color:#aaa7a1;max-width:700px;font-size:1.05rem}
.reel-card{min-height:500px;display:flex;align-items:flex-end;padding:50px;background:radial-gradient(circle at 70% 30%,#4a4a4a,#151515 55%,#090909);border:1px solid #292929}.reel-content h2{font-size:clamp(3rem,6vw,6rem);margin:0 0 25px;letter-spacing:-.05em}.play{display:inline-block;background:var(--accent);color:#0b0b0b;padding:13px 18px;font-weight:700}
.contact{min-height:75vh;display:flex;flex-direction:column;justify-content:center}.contact h2{font-size:clamp(4rem,9vw,9rem);line-height:.86;letter-spacing:-.06em;margin:0 0 45px}.email{font-size:clamp(1.5rem,3vw,3rem);border-bottom:1px solid #666;display:inline-block;width:max-content}.socials{display:flex;gap:28px;margin-top:60px;color:var(--muted);font-size:.85rem}.socials a:hover{color:var(--paper)}
footer{border-top:1px solid var(--line);padding:25px 5vw;display:flex;justify-content:space-between;color:#777;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:800px){.nav{padding:0 6vw}.nav nav{gap:14px}.hero{grid-template-columns:1fr;padding-top:15vw}.hero-frame{height:55vh}.project,.project.reverse{grid-template-columns:1fr;gap:35px}.project.reverse .project-image{order:0}.project-grid{grid-template-columns:1fr}.about{grid-template-columns:1fr;gap:35px}.section{padding:18vw 6vw}.reel-card{min-height:420px;padding:30px}footer{padding:22px 6vw;gap:15px;flex-direction:column}}


/* Role sections */
.role-section{padding-top:10px}
.role-section + .role-section{border-top:1px solid var(--line);margin-top:10vw;padding-top:8vw}
.role-heading{display:grid;grid-template-columns:90px 1fr 1fr;gap:3vw;align-items:end;margin-bottom:70px}
.role-heading .eyebrow{margin:0}
.role-heading h2{font-size:clamp(2.8rem,6vw,6.5rem);line-height:.9;letter-spacing:-.055em;margin:0}
.role-description{color:var(--muted);max-width:390px;margin:0}
.project h3{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-.04em;margin:12px 0 20px}
.gaffer-section .project-image{background:linear-gradient(135deg,#242424,#0d0d0d)}
@media(max-width:800px){
  .role-heading{grid-template-columns:1fr;gap:14px;margin-bottom:45px}
  .role-heading .eyebrow{margin-bottom:0}
}

/* Multi-page portfolio */
.nav nav a.active{color:var(--paper);border-bottom:1px solid var(--paper);padding-bottom:4px}
.home-hero{min-height:calc(88vh - 76px)}
.portal-grid{padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.portal-card{background:var(--bg);min-height:390px;padding:4vw;display:flex;flex-direction:column;justify-content:space-between;transition:background .25s,color .25s}
.portal-card:hover{background:var(--paper);color:var(--bg)}
.portal-card h2{font-size:clamp(2.5rem,5vw,5.5rem);line-height:.92;letter-spacing:-.055em;margin:0}
.portal-card.compact{min-height:260px}
.portal-card.compact h2{font-size:clamp(2.2rem,4vw,4rem)}
.portal-arrow{font-size:.85rem;font-weight:700}
.page-intro{padding-bottom:4vw;border-bottom:1px solid var(--line)}
.page-intro h1,.about-page h1,.contact-page h1{font-size:clamp(4rem,9vw,9rem);line-height:.88;letter-spacing:-.06em;margin:0 0 35px}
.page-intro>p:last-child{max-width:650px;color:#c6c1b8;font-size:1.1rem}
.work-page{padding-top:7vw}
.about-page{min-height:calc(100vh - 150px)}
.about-page h1{max-width:1100px}
.about-copy{max-width:720px;margin-left:auto;color:#d0cbc2;font-size:1.1rem}
.contact-page{min-height:calc(100vh - 150px)}
.contact-page h1 em{font-family:var(--serif);font-weight:500}
@media(max-width:800px){.nav{height:auto;min-height:76px;align-items:flex-start;padding-top:22px;padding-bottom:18px}.nav nav{flex-wrap:wrap;justify-content:flex-end;max-width:65%}.portal-grid{grid-template-columns:1fr}.portal-card{min-height:280px;padding:8vw 6vw}.page-intro{padding-top:22vw}.about-copy{margin-left:0}}


/* Minimal homepage title */
.home-title-page {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-title-hero {
  width: 100%;
  padding: 8rem 6vw;
  text-align: center;
}

.home-title-hero h1 {
  margin: 0;
  font-family: "Lexend", sans-serif;
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.home-title-hero p {
  margin: 1.75rem 0 0;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  letter-spacing: 0.12em;
}


/* Global typography: Lexend */
html, body, button, input, textarea, select,
h1, h2, h3, h4, h5, h6, p, a, span, label {
  font-family: "Lexend", sans-serif;
}



/* Homepage navigation cards */
.home-title-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-title-hero {
  width: min(1400px, 92vw);
  padding: 6rem 0;
  text-align: center;
}

.home-title-hero h1 {
  margin: 0 0 4rem;
  font-family: "Lexend", sans-serif;
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.home-title-hero > p {
  display: none;
}

.home-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}

.home-link-card {
  min-height: 190px;
  border: 1px solid rgba(241, 238, 232, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: inherit;
  text-decoration: none;
  font-family: "Lexend", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 400;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.home-link-card:hover,
.home-link-card:focus-visible {
  background: #f1eee8;
  color: #556B2F;
  transform: translateY(-4px);
}

@media (max-width: 850px) {
  .home-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .home-title-hero {
    padding: 4rem 0;
  }

  .home-title-hero h1 {
    margin-bottom: 3rem;
  }

  .home-link-grid {
    grid-template-columns: 1fr;
  }

  .home-link-card {
    min-height: 120px;
  }
}



/* Homepage video background */
.video-home {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.home-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.home-video-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
  pointer-events: none;
}

.video-home .home-title-hero {
  position: relative;
  z-index: 2;
}

.video-home .home-title-hero h1,
.video-home .home-link-card {
  color: #f1eee8;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}

.video-home .home-link-card {
  background: rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.video-home .home-link-card:hover,
.video-home .home-link-card:focus-visible {
  background: #f1eee8;
  color: #556B2F;
  text-shadow: none;
}



/* FINAL HOMEPAGE VIDEO FIX */
html:has(body.homepage),
body.homepage {
  background: transparent !important;
}

body.homepage {
  min-height: 100vh;
}

body.homepage .video-home {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: transparent !important;
  isolation: isolate;
}

body.homepage .home-background-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  display: block;
}

body.homepage .home-title-hero {
  position: relative;
  z-index: 1;
}

body.homepage footer {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

body.homepage .home-link-card {
  background: rgba(0, 0, 0, 0.18);
}



/* Crop source-video side bars */
body.homepage .home-background-video {
  width: 112vw !important;
  height: 112vh !important;
  left: -6vw !important;
  top: -6vh !important;
  right: auto !important;
  bottom: auto !important;
  max-width: none !important;
  transform: scale(1.08);
  transform-origin: center center;
}



/* Cross-page navigation blocks */
.page-link-section {
  width: min(1400px, 92vw);
  margin: 5rem auto 3rem;
}

.page-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.page-nav-card {
  min-height: 120px;
  border: 1px solid rgba(241, 238, 232, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  color: #f1eee8;
  text-decoration: none;
  text-align: center;
  font-family: "Lexend", sans-serif;
  background: transparent;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.page-nav-card:hover,
.page-nav-card:focus-visible {
  background: #f1eee8;
  color: #556B2F;
  transform: translateY(-4px);
}

@media (max-width: 850px) {
  .page-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .page-link-grid {
    grid-template-columns: 1fr;
  }
}



/* Latest visual refinements */

/* Slightly tighter crop on homepage background video */
body.homepage .home-background-video {
  width: 118vw !important;
  height: 118vh !important;
  left: -9vw !important;
  top: -9vh !important;
  transform: scale(1.10) !important;
  transform-origin: center center;
}

/* Larger labels + stronger glass blur on homepage boxes */
body.homepage .home-link-card {
  font-size: clamp(1.25rem, 2vw, 1.75rem) !important;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Match larger text and blur treatment on cross-page navigation boxes */
.page-nav-card {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}



/* Contact page refinements */
.contact-page a[href*="youtube.com"],
.contact-page a[href*="instagram.com"] {
  font-size: clamp(1.4rem, 2.5vw, 2rem) !important;
  font-weight: 500;
  line-height: 1.3;
}

/* A Lizard State still */
.a-lizard-state-still {
  overflow: hidden;
}
.a-lizard-state-still img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* A Lizard State — fixed card size and tighter crop */
.a-lizard-state-still {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.a-lizard-state-still img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.18);
  transform-origin: center center;
}

/* Match Project Three to A Lizard State and crop only Lizard State's side bars */
.a-lizard-state-still,
.project-three-still {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.a-lizard-state-still img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: initial !important;
  transform: translateX(-50%) !important;
  transform-origin: center center;
}

/* Falling Apart project still */
.falling-apart-still {
  overflow: hidden;
}
.falling-apart-still img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Adam Oh - Birds and the Bees still */
.birds-and-bees-still {
  overflow: hidden;
}
.birds-and-bees-still img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Single-column horizontal project listing */
.project-grid {
  grid-template-columns: 1fr !important;
}

.project-card {
  width: 100%;
  max-width: none;
}

/* Keep project stills consistent and cinematic across the wider rows */
.project-card .project-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0 !important;
}

/* Preserve the special image behavior already established for real stills */
.project-card .project-image img {
  display: block;
}

/* Homepage viewport fit: keep footer/trademark visible without scrolling */
body.homepage {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

body.homepage .home-title-page {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
}

body.homepage .home-title-hero {
  padding-top: clamp(2rem, 5vh, 4rem) !important;
  padding-bottom: clamp(1.25rem, 3vh, 2.5rem) !important;
}

body.homepage footer {
  flex: 0 0 auto;
  margin-top: 0 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 1rem !important;
  transform: translateY(-0.75rem);
}

/* Slightly tighter homepage background-video framing */
body.homepage .home-background-video {
  width: 121vw !important;
  height: 121vh !important;
  left: -10.5vw !important;
  top: -10.5vh !important;
  transform: scale(1.11) !important;
  transform-origin: center center;
}


/* Gaffer page: three image spaces per project */
.gaffer-image-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  width: 100%;
}
.gaffer-image-gallery .project-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}
.gaffer-image-gallery .project-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  transform: none !important;
}
.gaffer-image-gallery .gaffer-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 760px) {
  .gaffer-image-gallery { grid-template-columns: 1fr; }
}

/* Project credit links */
.project-type a {
  color: inherit;
  text-decoration: none;
}
.project-type a:hover {
  text-decoration: underline;
}

/* Linked director credit */
.project-info > p:not(.project-type) a {
  color: inherit;
  text-decoration: none;
}
.project-info > p:not(.project-type) a:hover {
  text-decoration: underline;
}

/* Sing Me To Sleep project still */
.sing-me-to-sleep-still {
  overflow: hidden;
}
.sing-me-to-sleep-still img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* A Lizard State: remove any placeholder panel visible behind the still */
.a-lizard-state-project .project-image,
.a-lizard-state-project .a-lizard-state-still {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.a-lizard-state-project .project-image::before,
.a-lizard-state-project .project-image::after,
.a-lizard-state-project .a-lizard-state-still::before,
.a-lizard-state-project .a-lizard-state-still::after {
  content: none !important;
  display: none !important;
}

/* Sing Me To Sleep: match the project formatting below */
.sing-me-to-sleep-still {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  min-height: 0 !important;
}
.sing-me-to-sleep-still img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

/* Keep the two long Gaffer project titles on a single line */
.gaffer-long-title {
  white-space: nowrap;
  font-size: clamp(1.45rem, 3vw, 3rem) !important;
  line-height: 1.05;
}
@media (max-width: 700px) {
  .gaffer-long-title {
    font-size: clamp(1.05rem, 5vw, 1.7rem) !important;
  }
}

/* Moose Knuckles - Glitch stills */
.moose-knuckles-still { overflow: hidden; }
.moose-knuckles-still img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Center Writer/Director and Gaffer page headings */
.work-page .section-heading {
  text-align: center !important;
}
.work-page .section-heading h2 {
  width: 100%;
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Let's Connect page: centered heading and compact no-scroll layout */
body:has(.contact-page) .contact-page .section-heading {
  text-align: center !important;
}
body:has(.contact-page) .contact-page .section-heading h1,
body:has(.contact-page) .contact-page .section-heading h2 {
  width: 100%;
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Pull the bottom page links upward and keep the page within the viewport */
body:has(.contact-page) {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
body:has(.contact-page) .contact-page {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: clamp(1.5rem, 4vh, 3rem) !important;
  padding-bottom: clamp(0.75rem, 2vh, 1.5rem) !important;
}
body:has(.contact-page) .page-nav,
body:has(.contact-page) .page-nav-grid {
  margin-top: clamp(1rem, 2.5vh, 2rem) !important;
}
body:has(.contact-page) footer {
  flex: 0 0 auto;
  margin-top: 0 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.75rem !important;
}

/* Keep Let's make something centered on one line */
body:has(.contact-page) .contact-page .section-heading h1,
body:has(.contact-page) .contact-page .section-heading h2 {
  white-space: nowrap !important;
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(2rem, 6vw, 5rem) !important;
}
@media (max-width: 600px) {
  body:has(.contact-page) .contact-page .section-heading h1,
  body:has(.contact-page) .contact-page .section-heading h2 {
    font-size: clamp(1.65rem, 8vw, 2.75rem) !important;
  }
}

/* Phone number under contact email */
.contact-phone {
  margin-top: 0.35rem;
  margin-bottom: 0;
}
.contact-phone a {
  color: inherit;
  text-decoration: none;
}
.contact-phone a:hover {
  text-decoration: underline;
}

/* Moose Knuckles photo fix */
.moose-knuckles-still {
  overflow: hidden !important;
  background: transparent !important;
}
.moose-knuckles-still img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Writer/Director page: Directing Work heading only, centered */
.directing-intro {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.directing-intro h1 {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Gaffer page: Gaffer Work heading only, centered */
.gaffer-intro {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.gaffer-intro h1 {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Contact page final alignment */
.contact-main-heading {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(1.8rem, 5.5vw, 4.5rem) !important;
  line-height: 1.05 !important;
}
.contact-page .page-intro,
.contact-page .section-heading,
.contact-page .contact-intro {
  width: 100% !important;
  text-align: center !important;
}

/* Phone number matches email typography and spacing */
.contact-phone,
.contact-phone a {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}
@media (max-width: 600px) {
  .contact-main-heading {
    font-size: clamp(1.45rem, 7.5vw, 2.5rem) !important;
  }
}

/* Remove divider line above the 2026 Leon Bera footer on every page */
footer,
.site-footer {
  border-top: none !important;
}
footer::before,
.site-footer::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* Black backgrounds for Writer/Director, Gaffer, About Me, and Let's Connect pages */
body:not(.homepage) {
  background: #000000 !important;
}

/* Writer/Director page: reduce dead space before bottom page navigation */
body.directing-page-body .page-nav,
body.directing-page-body .page-nav-grid {
  margin-top: clamp(1rem, 2.5vw, 2rem) !important;
}
body.directing-page-body .work-page {
  padding-bottom: clamp(1rem, 2vw, 2rem) !important;
}

/* Gaffing Work page: reduce dead space before bottom page navigation */
body.gaffing-page-body .page-nav,
body.gaffing-page-body .page-nav-grid {
  margin-top: clamp(1rem, 2.5vw, 2rem) !important;
}
body.gaffing-page-body .work-page {
  padding-bottom: clamp(1rem, 2vw, 2rem) !important;
}

/* Falling Apart: keep description on one line */
.falling-apart-description {
  white-space: nowrap !important;
  font-size: clamp(0.72rem, 1.15vw, 1rem) !important;
}

/* Let's Connect: phone directly under email, same alignment and type */
.contact-email-phone {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.contact-email-phone .email {
  display: block !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.contact-email-phone .contact-phone-inline {
  margin-top: 0.25rem !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Let's Connect: left-align email and phone together */
.contact-email-phone {
  align-items: flex-start !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.contact-email-phone .email {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* Let's Connect: align email + phone with Instagram on the left */
.contact-page .contact-email-phone {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: flex-start !important;
}
.contact-page .contact-email-phone .email,
.contact-page .contact-email-phone .contact-phone-inline {
  width: max-content !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  font-size: clamp(1.5rem, 3vw, 3rem) !important;
}
.contact-page .socials {
  width: 100% !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Sing Me To Sleep: remove thin line beneath description */
.sing-me-to-sleep-project .project-info,
.sing-me-to-sleep-project .project-info p,
.sing-me-to-sleep-project .text-link {
  border-bottom: none !important;
  text-decoration-line: none !important;
}

/* FINAL: remove every possible line directly under the Sing Me To Sleep description */
.smts-description,
.smts-description:hover,
.smts-description:focus {
  border: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background-image: none !important;
}
.smts-description::before,
.smts-description::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  background: none !important;
}

/* A Lizard State: remove underline from YouTube link */
.lizard-youtube-link,
.lizard-youtube-link:hover,
.lizard-youtube-link:focus,
.lizard-youtube-link:visited {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* About Me layout update */
.about-style-title {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: clamp(2rem, 5vw, 5rem) !important;
  line-height: 1.05 !important;
}
.about-main-bio {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
@media (max-width: 600px) {
  .about-style-title {
    font-size: clamp(1.55rem, 8vw, 2.75rem) !important;
  }
}

/* About Me: force bio to the left side of the page */
.about-main-bio {
  position: relative !important;
  left: 0 !important;
  transform: none !important;
  width: min(760px, calc(100vw - 4rem)) !important;
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  align-self: flex-start !important;
}
.about-page:has(.about-main-bio) .about-main-bio {
  margin-left: calc(-1 * max(0px, (100vw - 100%) / 2)) !important;
}

/* About Me: larger Style and substance title */
.about-style-title {
  font-size: clamp(3rem, 7vw, 7rem) !important;
}
@media (max-width: 600px) {
  .about-style-title {
    font-size: clamp(2rem, 10vw, 3.5rem) !important;
  }
}

/* About Me: align CTA to the same x-axis as the bio */
.about-copy .about-work-together {
  display: block !important;
  width: min(760px, calc(100vw - 4rem)) !important;
  max-width: 760px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  align-self: flex-start !important;
}
.about-page .about-copy:has(.about-main-bio) .about-work-together {
  margin-left: calc(-1 * max(0px, (100vw - 100%) / 2)) !important;
}

/* About Me: center title across the page */
.about-style-title {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* About Me: remove underline/rule below Let's work together */
.about-work-together,
.about-work-together:hover,
.about-work-together:focus,
.about-work-together:visited {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;
}
.about-work-together::before,
.about-work-together::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  background: none !important;
}

/* About Me: keep full title centered and fully visible */
.about-style-title {
  position: static !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(2rem, 5.6vw, 5.6rem) !important;
  line-height: 1.05 !important;
}
@media (max-width: 700px) {
  .about-style-title {
    font-size: clamp(1.25rem, 7.2vw, 3rem) !important;
  }
}

/* About Me: fit the complete page into one viewport, like Let's Connect */
body:has(.about-page) {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body:has(.about-page) .about-page {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding-top: clamp(1rem, 2.5vh, 2rem) !important;
  padding-bottom: clamp(0.5rem, 1.5vh, 1rem) !important;
}

body:has(.about-page) .page-nav,
body:has(.about-page) .page-nav-grid {
  margin-top: clamp(0.5rem, 1.5vh, 1rem) !important;
  margin-bottom: 0 !important;
}

body:has(.about-page) .page-nav-card {
  min-height: 0 !important;
  padding-top: clamp(0.65rem, 1.5vh, 1rem) !important;
  padding-bottom: clamp(0.65rem, 1.5vh, 1rem) !important;
}

body:has(.about-page) footer,
body:has(.about-page) .site-footer {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.75rem !important;
}

/* About Me: restore navigation rectangles to the same sizing as other pages */
body:has(.about-page) .page-nav-card {
  min-height: revert !important;
  padding-top: revert !important;
  padding-bottom: revert !important;
}

/* Keep About Me within one viewport without shrinking the rectangles */
body:has(.about-page) .about-page {
  padding-top: clamp(0.5rem, 1.5vh, 1rem) !important;
  padding-bottom: 0 !important;
}

body:has(.about-page) .page-nav,
body:has(.about-page) .page-nav-grid {
  margin-top: 0.25rem !important;
  margin-bottom: 0 !important;
}

/* About Me: EXACT same navigation rectangle dimensions as every other page */
body:has(.about-page) .page-nav-card {
  min-height: 120px !important;
  padding: 1.5rem !important;
}

/* Move the full-size rectangle row upward instead of shrinking it */
body:has(.about-page) + .page-link-section,
body:has(.about-page) .page-link-section {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
body:has(.about-page) .page-link-section {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

body:has(.about-page) main > .page-link-section {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* About Me: lower the navigation rectangles to match Let's Connect placement */
body:has(.about-page) main > .page-link-section,
body:has(.about-page) .page-nav,
body:has(.about-page) .page-nav-grid {
  margin-top: 1.25rem !important;
}

/* About Me: use the exact same navigation-row spacing as Let's Connect */
body:has(.about-page) main > .page-link-section {
  width: min(1400px, 92vw) !important;
  margin: 5rem auto 3rem !important;
}

/* About Me: move navigation rectangles farther downward */
body:has(.about-page) main > .page-link-section {
  margin-top: 7rem !important;
}

/* About Me: truly center the heading relative to the viewport */
.about-style-title {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: calc(100vw - 3rem) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: clamp(1.8rem, 5vw, 5rem) !important;
}

/* FINAL About heading centering fix:
   center the H1 itself across the viewport instead of offsetting the inner span */
body:has(.about-page) .about-page > h1 {
  width: 100vw !important;
  max-width: none !important;
  margin-left: -5vw !important;
  margin-right: -5vw !important;
  text-align: center !important;
}

body:has(.about-page) .about-page > h1 .about-style-title {
  position: static !important;
  left: auto !important;
  transform: none !important;
  display: inline-block !important;
  width: auto !important;
  max-width: calc(100vw - 3rem) !important;
  margin: 0 auto !important;
  text-align: center !important;
  white-space: nowrap !important;
}

@media (max-width: 800px) {
  body:has(.about-page) .about-page > h1 {
    margin-left: -6vw !important;
    margin-right: -6vw !important;
  }
}

/* Project Six uploaded stills */
.project-six-still { aspect-ratio: 16 / 9; overflow: hidden; }
.project-six-still img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  object-position: center;
}


/* Homepage footer contact details */
body.homepage footer a,
body.homepage .site-footer a {
  color: inherit !important;
  text-decoration: none !important;
}
body.homepage footer a:hover,
body.homepage .site-footer a:hover {
  text-decoration: underline !important;
}

/* Responsive layouts: phone, laptop, and 4K displays */
html {
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
}

img,
video {
  max-width: 100%;
}

/* Laptop range: keep reading widths and gutters comfortable */
@media (min-width: 601px) and (max-width: 1919px) {
  .section {
    padding-block: clamp(3rem, 6vw, 6rem);
    padding-inline: clamp(2rem, 5vw, 5rem);
  }

  .page-link-section {
    width: min(1500px, calc(100vw - 8vw));
    margin-inline: auto;
  }

  .page-link-grid {
    gap: clamp(0.75rem, 1.2vw, 1.25rem);
  }

  body.homepage {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body.homepage .home-title-page {
    min-height: calc(100svh - 54px) !important;
  }

  body.homepage .home-background-video {
    width: 100vw !important;
    height: 100svh !important;
    inset: 0 auto auto 0 !important;
    transform: none !important;
  }

  body:has(.about-page),
  body:has(.contact-page) {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body:has(.about-page) .about-page,
  body:has(.contact-page) .contact-page {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Phone screens */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  .section {
    padding: 2.75rem 1.25rem !important;
  }

  .page-link-section {
    width: calc(100% - 2.5rem) !important;
    margin: 1.5rem auto 2rem !important;
  }

  .page-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }

  .page-nav-card {
    min-height: 90px;
    padding: 0.85rem 0.6rem;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
  }

  .page-intro h1,
  .about-page h1,
  .contact-page h1 {
    font-size: clamp(2.5rem, 12vw, 4.5rem);
    line-height: 0.98;
    margin-bottom: 1.5rem;
  }

  .project-grid {
    gap: 3rem;
  }

  .project-grid .project-image,
  .gaffer-image-gallery .project-image {
    min-height: 0 !important;
  }

  .project-info h2,
  .project-info h3 {
    overflow-wrap: anywhere;
  }

  .gaffer-image-gallery {
    grid-template-columns: 1fr !important;
  }

  .gaffer-long-title {
    white-space: normal !important;
    font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
    line-height: 1.15;
  }

  footer {
    padding: 1rem 1.25rem 1.25rem !important;
    gap: 0.5rem;
    font-size: 0.68rem;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  /* Let short laptop-height pages and phone pages scroll instead of clipping. */
  body:has(.about-page),
  body:has(.contact-page) {
    display: block !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body:has(.about-page) .about-page,
  body:has(.contact-page) .contact-page {
    display: block;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding-block: 2.5rem 1.5rem !important;
  }

  body:has(.about-page) .about-page > h1 {
    width: 100% !important;
    margin: 0 0 1.75rem !important;
    text-align: center !important;
  }

  .about-style-title {
    display: inline-block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: 1.08 !important;
  }

  .about-copy,
  .about-main-bio {
    width: 100% !important;
    max-width: 42rem !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .about-work-together {
    width: auto !important;
    margin-top: 1rem !important;
  }

  body:has(.about-page) main > .page-link-section {
    width: calc(100% - 2.5rem) !important;
    margin: 1rem auto 2rem !important;
  }

  body:has(.contact-page) .contact-page .contact-main-heading {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
  }

  body:has(.contact-page) .contact-email-phone {
    width: 100% !important;
    align-items: flex-start !important;
  }

  body:has(.contact-page) .contact-email-phone .email,
  body:has(.contact-page) .contact-email-phone .contact-phone-inline {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1rem, 4.4vw, 1.45rem) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  body:has(.contact-page) .socials {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
  }

  body.homepage {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body.homepage .home-title-page {
    flex: 1 0 auto;
    min-height: calc(100svh - 80px) !important;
    height: auto !important;
    padding: 1.5rem 0;
  }

  body.homepage .home-title-hero {
    width: calc(100% - 2.5rem) !important;
    padding: clamp(2.25rem, 7vh, 4rem) 0 !important;
  }

  body.homepage .home-title-hero h1 {
    margin: 0 0 2rem !important;
    font-size: clamp(3rem, 14vw, 5.25rem) !important;
    line-height: 0.95;
  }

  body.homepage .home-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }

  body.homepage .home-link-card {
    min-height: clamp(96px, 27vw, 128px);
    padding: 0.75rem 0.55rem;
    font-size: clamp(0.95rem, 4vw, 1.2rem) !important;
    line-height: 1.2;
    text-align: center;
  }

  body.homepage .home-background-video {
    position: fixed !important;
    width: 100vw !important;
    height: 100svh !important;
    inset: 0 auto auto 0 !important;
    object-fit: cover;
    object-position: center;
    transform: none !important;
  }

  body.homepage footer {
    transform: none !important;
    text-align: center;
  }
}

/* 4K monitors and televisions */
@media (min-width: 2560px) {
  body {
    font-size: 20px;
  }

  main > .section {
    width: 100%;
    max-width: 2400px;
    margin-inline: auto;
    padding: clamp(5rem, 7vw, 10rem) 6rem;
  }

  .page-link-section {
    width: min(2000px, 88vw);
    margin-inline: auto;
  }

  .page-link-grid {
    gap: 1.5rem;
  }

  .page-nav-card {
    min-height: 160px;
    font-size: clamp(1.5rem, 1.15vw, 2rem) !important;
  }

  body.homepage .home-title-hero {
    width: min(2100px, 92vw);
  }

  body.homepage .home-background-video {
    width: 100vw !important;
    height: 100svh !important;
    inset: 0 auto auto 0 !important;
    transform: none !important;
  }

  body.homepage .home-title-hero h1 {
    font-size: clamp(11rem, 7.5vw, 16rem) !important;
    margin-bottom: 5rem !important;
  }

  body.homepage .home-link-grid {
    gap: 1.5rem;
  }

  body.homepage .home-link-card {
    min-height: 230px;
    font-size: clamp(1.5rem, 1.2vw, 2.15rem) !important;
  }

  .page-intro h1,
  .about-page h1,
  .contact-page h1 {
    font-size: clamp(7rem, 6vw, 11rem);
  }

  .about-style-title {
    font-size: clamp(5rem, 5vw, 8rem) !important;
  }

  body:has(.contact-page) .contact-page .contact-main-heading {
    font-size: clamp(6rem, 6vw, 10rem) !important;
  }

  .about-copy,
  .about-main-bio {
    max-width: 1000px !important;
    font-size: 1.2rem;
  }

  body:has(.about-page) .about-page:has(.about-main-bio) .about-main-bio,
  body:has(.about-page) .about-copy .about-work-together {
    margin-left: 0 !important;
  }

  .project-info h2,
  .project-info h3 {
    font-size: clamp(3rem, 3vw, 5rem);
  }

  .gaffer-long-title {
    font-size: clamp(2.4rem, 2.5vw, 4rem) !important;
  }
}

/* Compact portrait-phone layouts for Directing and About */
@media (max-width: 600px) and (orientation: portrait) {
  body.directing-page-body .page-intro {
    padding: 1.35rem 1.25rem 0.8rem !important;
  }

  body.directing-page-body .page-intro h1 {
    margin-bottom: 0.35rem !important;
    font-size: clamp(2rem, 8.5vw, 2.8rem) !important;
    line-height: 1.05 !important;
  }

  body.directing-page-body .work-page {
    padding: 1rem 1.25rem 1.25rem !important;
  }

  body.directing-page-body .project-grid {
    gap: 1.5rem !important;
    margin-bottom: 0 !important;
  }

  body.directing-page-body .project-grid .project {
    margin: 0 !important;
  }

  body.directing-page-body .project-grid .project-image {
    width: 100% !important;
    height: clamp(8rem, 38vw, 10rem) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin-bottom: 0.8rem !important;
  }

  body.directing-page-body .project-info h3 {
    margin: 0.2rem 0 0.45rem !important;
    font-size: clamp(1.25rem, 5.6vw, 1.55rem) !important;
    line-height: 1.12 !important;
  }

  body.directing-page-body .project-info p:not(.project-type) {
    margin: 0.35rem 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }

  body.directing-page-body .project-type {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1em;
  }

  body.directing-page-body .text-link {
    margin-top: 0.6rem !important;
    font-size: 0.9rem !important;
  }

  body.directing-page-body .page-link-section {
    margin: 0.75rem auto 1rem !important;
  }

  body.directing-page-body .page-nav-card {
    min-height: 68px !important;
    padding: 0.6rem !important;
    font-size: 0.9rem !important;
  }

  body:has(.about-page) .about-page {
    padding: clamp(1rem, 3.5vh, 1.75rem) 1.25rem 0.75rem !important;
  }

  body:has(.about-page) .about-page > h1 {
    margin-bottom: 0.85rem !important;
  }

  body:has(.about-page) .about-style-title {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important;
    line-height: 1.08 !important;
  }

  body:has(.about-page) .about-copy,
  body:has(.about-page) .about-main-bio {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  body:has(.about-page) .about-work-together {
    margin-top: 0.65rem !important;
    font-size: 0.9rem !important;
  }

  body:has(.about-page) main > .page-link-section {
    margin: 0.5rem auto 1rem !important;
  }

  body:has(.about-page) .page-nav-card {
    min-height: 68px !important;
    padding: 0.6rem !important;
    font-size: 0.9rem !important;
  }
}

/* Short portrait phones */
@media (max-width: 600px) and (max-height: 740px) and (orientation: portrait) {
  body.directing-page-body .page-intro {
    padding-top: 1rem !important;
  }

  body.directing-page-body .work-page {
    padding-top: 0.65rem !important;
  }

  body.directing-page-body .project-grid {
    gap: 1rem !important;
  }

  body.directing-page-body .project-grid .project-image {
    height: clamp(7rem, 34vw, 8.5rem) !important;
    margin-bottom: 0.6rem !important;
  }

  body:has(.about-page) .about-page {
    padding-top: 0.75rem !important;
  }

  body:has(.about-page) .about-page > h1 {
    margin-bottom: 0.55rem !important;
  }

  body:has(.about-page) .about-main-bio {
    font-size: 0.92rem !important;
    line-height: 1.38 !important;
  }

  body:has(.about-page) .page-link-section {
    margin-top: 0.25rem !important;
  }

  body:has(.about-page) .page-nav-card {
    min-height: 58px !important;
  }
}

/* Phone correction: match Directing stills to the Gaffing gallery ratio */
@media (max-width: 600px) and (orientation: portrait) {
  body.directing-page-body .project-grid,
  body.directing-page-body .project,
  body.directing-page-body .project-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.directing-page-body .project-grid .project-image {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    margin-bottom: 0.8rem !important;
    overflow: hidden !important;
  }

  body.directing-page-body .project-grid .project-image img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }

  body.directing-page-body .project-info h3,
  body.directing-page-body .project-info p,
  body.directing-page-body .project-info a {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  body.directing-page-body .falling-apart-description {
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }

  /* Keep the About heading inside narrow phone viewports and let it wrap. */
  body:has(.about-page) .about-page > h1 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 0.85rem !important;
    padding: 0 !important;
  }

  body:has(.about-page) .about-page > h1 .about-style-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding: 0 0.15rem !important;
    font-size: clamp(1.35rem, 7vw, 2.1rem) !important;
    line-height: 1.12 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-wrap: balance;
  }

  body:has(.about-page) .about-page .about-main-bio {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    width: calc(100% - 0.75rem) !important;
    max-width: none !important;
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0.25rem !important;
  }

  body:has(.about-page) .about-copy .about-work-together {
    box-sizing: border-box !important;
    width: fit-content !important;
    max-width: calc(100% - 3rem) !important;
    margin-left: 3rem !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}