/* Global dark-theme tokens and base typography. --pad controls sitewide horizontal spacing. */
:root {
  --bg:#050505;
  --panel:#0b0b0b;
  --text:#f1f0ed;
  --muted:#9a9994;
  --red:#d51b20;
  --line:#242424;
  --pad:clamp(22px,5vw,80px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.45
}

a {
  color:inherit;
  text-decoration:none
}


/* Shared header, navigation and mobile menu. */
.site-header {
  height:96px;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:absolute;
  z-index:20;
  width:100%;
  border-bottom:1px solid rgba(255,255,255,.13)
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  letter-spacing:.3em
}

.calligraphy {
  height:58px;
  width:auto;
  display:block;
  mix-blend-mode:screen
}

.site-header nav {
  display:flex;
  gap:32px;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.16em
}

.site-header nav a:hover,.text-link:hover {
  color:var(--red)
}

.menu {
  display:none;
  background:none;
  border:0;
  color:#fff;
  letter-spacing:.15em
}


/* Homepage hero, reusable heading styles and primary buttons. */
.hero {
  min-height:100vh;
  padding:180px var(--pad) 90px;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 78% 48%,#202020 0,#0d0d0d 25%,#050505 56%)
}

.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#050505 0,transparent 55%,rgba(0,0,0,.2))
}

.hero-copy {
  position:relative;
  z-index:2;
  max-width:1000px
}

.eyebrow,.section-head>p,.credentials>p {
  font-size:11px;
  letter-spacing:.22em;
  color:#b5b3ad
}

.hero h1,.section h2 {
  font-weight:800;
  letter-spacing:-.055em;
  line-height:.87;
  margin:.25em 0;
  font-size:clamp(54px,8vw,126px)
}

.hero h1 em {
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:1px #d6d4cf
}

.intro {
  font-size:clamp(17px,1.6vw,24px);
  color:#bbb9b4;
  margin:34px 0
}

.button {
  display:inline-flex;
  gap:55px;
  align-items:center;
  border:1px solid #555;
  padding:17px 22px;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.16em;
  transition:.25s
}

.button:hover {
  background:var(--red);
  border-color:var(--red)
}


/* Common section spacing and headings. */
.section {
  padding:clamp(90px,12vw,180px) var(--pad);
  border-top:1px solid var(--line)
}

.section-head {
  display:grid;
  grid-template-columns:1fr 2fr;
  align-items:start;
  margin-bottom:80px
}

.section-head h2 {
  font-size:clamp(50px,7vw,105px);
  margin:0
}


/* Legacy project-card and service-grid base styles; later rules refine these components. */
.projects {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:50px 24px
}

.project a {
  display:block
}

.visual {
  aspect-ratio:4/3;
  background:#121212;
  position:relative;
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden
}

.visual:before {
  content:"";
  position:absolute;
  inset:0;
  opacity:.7;
  transition:.5s
}

.hmo:before {
  background:linear-gradient(135deg,#252525,#080808 55%,#471012)
}

.traces:before {
  background:radial-gradient(circle at 65% 35%,#5b1215,#171717 45%,#070707)
}

.boys:before {
  background:linear-gradient(155deg,#0a0a0a,#2e0b0d)
}

.recent:before {
  background:linear-gradient(100deg,#111,#351012,#0b0b0b)
}

.visual span,.visual strong {
  position:relative;
  z-index:1
}

.visual span {
  font-size:10px;
  letter-spacing:.2em
}

.visual strong {
  font-size:clamp(34px,4vw,72px);
  line-height:.9;
  letter-spacing:-.05em
}

.project:hover .visual:before {
  transform:scale(1.04);
  opacity:1
}

.meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:14px;
  border-top:1px solid #3a3a3a;
  margin-top:14px
}

.meta h3 {
  margin:0;
  font-size:16px
}

.meta p {
  margin:0;
  color:var(--muted);
  font-size:12px
}

.wide {
  grid-column:1/-1
}

.wide .visual {
  aspect-ratio:2.6/1
}

.text-link {
  display:inline-block;
  margin-top:55px;
  padding-bottom:5px;
  border-bottom:1px solid #666;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.15em
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line)
}

.service-grid>div {
  padding:32px 24px 50px 0;
  border-right:1px solid var(--line);
  min-height:280px
}

.service-grid>div+div {
  padding-left:24px
}

.service-grid b {
  color:var(--red);
  font-size:10px
}

.service-grid h3 {
  font-size:22px;
  margin:55px 0 15px
}

.service-grid p {
  color:var(--muted);
  font-size:14px
}


/* Biography, reviews, blog, contact, footer and reveal animation. */
.about {
  display:grid;
  grid-template-columns:1.45fr .55fr;
  gap:12vw
}

.about h2 {
  font-size:clamp(50px,7vw,100px)
}

.about-copy .large {
  font-size:clamp(21px,2vw,30px);
  max-width:850px
}

.about-copy>p:not(.eyebrow):not(.large) {
  max-width:720px;
  color:var(--muted)
}

.credentials {
  padding-top:75px
}

.credentials div {
  padding:17px 0;
  border-bottom:1px solid var(--line);
  font-weight:bold;
  font-size:13px
}

.quote {
  text-align:center;
  background:#0b0b0b
}

.quote blockquote {
  font-family:Georgia,serif;
  font-size:clamp(30px,4.2vw,64px);
  line-height:1.08;
  max-width:1200px;
  margin:0 auto 35px
}

.quote p {
  color:var(--muted);
  font-size:12px;
  letter-spacing:.12em
}

.journal-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line)
}

.journal-grid a {
  padding:25px 35px 40px 0;
  border-right:1px solid var(--line);
  min-height:240px
}

.journal-grid a+a {
  padding-left:35px
}

.journal-grid span,.journal-grid p {
  color:var(--muted);
  font-size:11px;
  letter-spacing:.1em
}

.journal-grid h3 {
  font-size:23px;
  line-height:1.15;
  margin:50px 0 25px
}

.journal-grid a:hover h3 {
  color:var(--red)
}

.contact {
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:hidden
}

.contact h2 {
  font-size:clamp(70px,10vw,150px)
}

.contact p {
  color:var(--muted);
  margin-bottom:35px
}

.contact-mark {
  font-family:serif;
  font-size:18vw;
  color:var(--red);
  opacity:.12;
  writing-mode:vertical-rl
}

footer {
  padding:28px var(--pad);
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:#777;
  font-size:10px;
  letter-spacing:.12em
}

.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease
}

.reveal.visible {
  opacity:1;
  transform:none
}


/* Tablet and phone layout overrides for the base styles. */
@media(max-width:850px) {
  .site-header {
    height:78px
  }

  .calligraphy {
    height:45px
  }

  .site-header nav {
    display:none;
    position:absolute;
    top:78px;
    left:0;
    right:0;
    background:#050505;
    padding:30px var(--pad);
    flex-direction:column;
    border-top:1px solid #222
  }

  .site-header nav.open {
    display:flex
  }

  .menu {
    display:block
  }

  .hero {
    padding-top:145px;
    min-height:90vh
  }

  .hero h1 {
    font-size:clamp(48px,13vw,76px)
  }

  .section-head {
    grid-template-columns:1fr;
    gap:25px
  }

  .projects {
    grid-template-columns:1fr
  }

  .wide {
    grid-column:auto
  }

  .wide .visual {
    aspect-ratio:4/3
  }

  .service-grid {
    grid-template-columns:1fr 1fr
  }

  .service-grid>div {
    min-height:220px
  }

  .about {
    grid-template-columns:1fr
  }

  .credentials {
    padding-top:10px
  }

  .journal-grid {
    grid-template-columns:1fr
  }

  .journal-grid a,.journal-grid a+a {
    padding:25px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
    min-height:0
  }

  .contact-mark {
    display:none
  }

  .meta {
    display:block
  }

  .meta p {
    margin-top:5px
  }

  footer {
    gap:20px;
    flex-direction:column
  }

}


/* Narrow phone overrides for the base styles. */
@media(max-width:520px) {
  .brand span {
    display:none
  }

  .service-grid {
    grid-template-columns:1fr
  }

  .service-grid>div,.service-grid>div+div {
    padding:25px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
    min-height:0
  }

  .service-grid h3 {
    margin:28px 0 10px
  }

  .hero h1 em {
    -webkit-text-stroke:.7px #d6d4cf
  }

}


/* Version 2: more red, simpler section typography. Hero lettering is unchanged. */
.site-header nav a {
  color:var(--red);
  transition:color .2s ease
}

.site-header nav a:hover,.site-header nav a:focus-visible {
  color:#fff
}

.menu {
  color:var(--red)
}

.section h2 {
  font-family:Helvetica,Arial,sans-serif;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:.94;
  color:var(--red)
}

.section-head>p,.about .eyebrow,.contact .eyebrow {
  color:var(--red)
}

.contact {
  background:radial-gradient(circle at 82% 52%,#26080a 0,#0b0b0b 38%,#050505 78%)
}


/* Sans-serif typography throughout; restrained review carousel. */
.quote .eyebrow {
  color:var(--red);
  margin:0 0 48px
}

.review-slider {
  min-height:clamp(200px,24vw,320px);
  display:grid;
  align-items:center
}

.review-slide {
  grid-area:1/1;
  margin:0
}

.review-slide[hidden] {
  display:none
}

.quote blockquote {
  font-family:"Arial Narrow",Helvetica,Arial,sans-serif;
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.12
}

.review-slide figcaption {
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted);
  text-transform:uppercase
}

.review-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-top:25px
}

.review-controls button {
  width:44px;
  height:44px;
  border:1px solid #555;
  background:transparent;
  color:var(--red);
  font:24px Helvetica,Arial,sans-serif;
  cursor:pointer
}

.review-controls button:hover,.review-controls button:focus-visible {
  border-color:var(--red);
  background:var(--red);
  color:#fff
}

.review-count {
  font-size:11px;
  letter-spacing:.16em;
  color:var(--muted)
}

.quote .text-link {
  margin-top:32px
}


/* Full-length client reviews */
.review-slider {
  min-height:440px;
  max-width:1100px;
  margin:auto
}

.quote blockquote {
  font-size:clamp(21px,2.35vw,34px);
  line-height:1.27;
  font-weight:500;
  letter-spacing:-.025em;
  margin:0 auto 26px
}

.review-slide figcaption a {
  text-decoration:underline;
  text-underline-offset:3px
}

.review-slide figcaption a:hover {
  color:var(--red)
}

@media(max-width:700px) {
  .review-slider {
    min-height:680px
  }

  .quote blockquote {
    font-size:clamp(18px,4.3vw,23px);
    line-height:1.35
  }

  .review-controls {
    gap:12px
  }

}


/* Book preview layout and its responsive cover. */
.book {
  background:#0b0b0b
}

.book-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,340px);
  align-items:center;
  gap:clamp(36px,7vw,110px);
  max-width:1330px;
  margin:auto
}

.book-copy .section-head {
  display:block;
  margin-bottom:50px
}

.book-copy .section-head h2 {
  font-size:clamp(50px,6vw,100px);
  margin-top:20px
}

.book-cover {
  display:block;
  max-width:340px;
  box-shadow:0 25px 60px rgba(0,0,0,.32);
  transition:transform .3s ease,box-shadow .3s ease
}

.book-cover img {
  display:block;
  width:100%;
  height:auto
}

.book-cover:hover,.book-cover:focus-visible {
  transform:translateY(-5px);
  box-shadow:0 30px 70px rgba(0,0,0,.42)
}

.book-intro {
  max-width:700px;
  color:#bbb9b4;
  font-size:clamp(18px,2vw,27px);
  line-height:1.4;
  margin:-25px 0 35px
}

.book-publisher {
  margin:-12px 0 35px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.08em
}

@media(max-width:850px) {
  .book-layout {
    grid-template-columns:1fr
  }

  .book-cover {
    width:min(65vw,310px)
  }

  .book-intro {
    margin:0 0 35px
  }

}


/* Inner pages */
.inner-header {
  position:relative;
  background:#050505
}


/* Inner-page hero dimensions and fixed/static photo underlays. */
.page-hero {
  min-height:50vh;
  padding-top:clamp(100px,10vw,170px);
  padding-bottom:clamp(75px,8vw,125px);
  border-top:0
}

.page-hero h1 {
  font-family:Helvetica,Arial,sans-serif;
  font-size:clamp(72px,12vw,180px);
  line-height:.87;
  letter-spacing:-.065em;
  margin:24px 0;
  color:var(--red)
}

.page-hero .lead {
  max-width:900px;
  font-size:clamp(22px,2.8vw,39px);
  line-height:1.2;
  letter-spacing:-.025em;
  margin:36px 0;
  color:#dfdedb
}

.page-hero .text-link {
  margin-top:20px
}

.page-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--bg)
}

.page-hero .hero-photo-underlay {
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.38;
  pointer-events:none
}

.page-hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.64) 45%,rgba(5,5,5,.18) 100%);
  pointer-events:none
}

html[data-theme="light"] .page-hero .hero-photo-underlay {
  opacity:.28
}

html[data-theme="light"] .page-hero::before {
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.28) 100%)
}

.hero .hero-photo-underlay {
  position:absolute;
  inset:96px 0 0;
  z-index:0;
  width:100%;
  height:calc(100% - 96px);
  object-fit:cover;
  object-position:center;
  opacity:.3;
  pointer-events:none
}

@media(max-width:850px) {
  .hero .hero-photo-underlay {
    top:78px;
    height:calc(100% - 78px)
  }

}

.hero:after {
  z-index:1
}

html[data-theme="light"] .hero .hero-photo-underlay {
  opacity:.22
}


/* Work filters and the older list/card primitives. */
.work-list {
  padding-top:100px
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:-20px 0 50px
}

.filters button {
  background:transparent;
  border:1px solid #555;
  color:#bdbbb6;
  padding:11px 17px;
  text-transform:uppercase;
  letter-spacing:.11em;
  font:11px Helvetica,Arial,sans-serif;
  cursor:pointer
}

.filters button:hover,.filters button:focus-visible,.filters button.active {
  border-color:var(--red);
  background:var(--red);
  color:#fff
}

.work-cards {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:60px 25px
}

.work-cards .visual {
  aspect-ratio:1.7/1
}

.work-cards .visual strong {
  font-size:clamp(29px,3vw,53px);
  max-width:90%
}

.filter-item[hidden] {
  display:none!important
}

.archive-intro {
  max-width:650px;
  color:var(--muted);
  margin:-30px 0 45px
}

.archive-list {
  padding:0;
  margin:0;
  list-style:none;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 35px
}

.archive-list li {
  border-bottom:1px solid var(--line);
  padding:18px 0;
  display:flex;
  gap:20px;
  align-items:baseline
}

.archive-list li>span {
  color:var(--red);
  font-size:11px;
  min-width:105px;
  text-transform:uppercase;
  letter-spacing:.08em
}

.archive-list a {
  font-size:17px
}

.archive-list a:hover {
  color:var(--red)
}


/* About biography, credits and prose columns. */
.prose-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:8vw
}

.prose-grid h2,.detail-columns h2,.service-row h2 {
  font-size:clamp(36px,5vw,70px)
}

.prose {
  max-width:720px;
  font-size:clamp(18px,1.7vw,24px);
  line-height:1.5;
  color:#d6d5d1
}

.prose p {
  margin:0 0 28px
}

.prose-grid .about-story-title {
  font-size:clamp(27px,3vw,42px);
  line-height:1.15;
  letter-spacing:-.035em
}

.about-story {
  font-size:clamp(17px,1.4vw,20px)
}

.about-story a {
  color:var(--text);
  border-bottom:1px solid var(--red)
}

.about-story a:hover {
  color:var(--red)
}

.credits-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px
}

.credits-grid h3 {
  font-size:24px
}

.credits-grid p {
  font-size:19px;
  line-height:1.6;
  color:var(--muted)
}


/* Services page rows and example project tiles. */
.service-list {
  padding-top:50px
}

.service-row {
  border-top:1px solid var(--line);
  padding:48px 0 65px;
  display:grid;
  grid-template-columns:70px minmax(180px,1fr) minmax(0,calc(3 * var(--portfolio-tile) + 28px));
  align-items:start;
  gap:25px
}

.service-projects-label {
  flex:0 0 100%;
  width:100%;
  color:var(--red);
  font:700 11px/1.4 Helvetica,Arial,sans-serif;
  letter-spacing:.16em;
  text-align:right;
  text-transform:uppercase
}

.service-all-films {
  display:table;
  margin:26px 0 0 auto;
  padding-bottom:5px;
  border-bottom:1px solid var(--red);
  color:var(--red);
  font:700 12px/1.5 Helvetica,Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase
}

.service-all-films:hover,.service-all-films:focus-visible {
  color:var(--text)
}

.service-row>span {
  color:var(--red);
  font-size:12px
}

.service-row h2 {
  margin:0
}

.service-row p {
  font-size:18px;
  color:var(--muted);
  max-width:670px;
  margin:16px 0 32px
}

.service-projects {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  gap:14px;
  width:100%;
  margin-left:auto
}

.service-project {
  display:block;
  flex:0 0 var(--portfolio-tile);
  width:var(--portfolio-tile);
  min-width:0
}

.service-project-image {
  display:block;
  aspect-ratio:3/2;
  overflow:hidden;
  background:#171717
}

.service-project-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease-out
}

.service-project:hover img,.service-project:focus-visible img {
  transform:scale(1.05)
}

.service-project-title {
  display:block;
  margin:12px 0 5px;
  font:700 clamp(15px,1.4vw,19px)/1.2 Helvetica,Arial,sans-serif
}

.service-project:hover .service-project-title,.service-project:focus-visible .service-project-title {
  color:var(--red)
}

.service-project-role {
  display:block;
  color:var(--muted);
  font:12px/1.35 Helvetica,Arial,sans-serif
}

@media(max-width:1250px) {
  .service-row {
    grid-template-columns:45px minmax(0,1fr)
  }

  .service-row .service-projects {
    grid-column:2;
    max-width:calc(3 * var(--portfolio-tile) + 28px)
  }

}

@media(max-width:520px) {
  .service-projects {
    gap:25px 14px
  }

  .service-project-title {
    font-size:14px
  }

  .service-project-role {
    font-size:11px
  }

  .service-row {
    padding:35px 0 50px
  }

  .service-row p {
    font-size:16px
  }

}


/* Feature film detail media, two-column copy and next-film panel. */
.project-detail {
  padding-top:0
}

.detail-visual {
  aspect-ratio:2.3/1;
  max-width:1500px;
  margin:auto
}

.detail-visual strong {
  font-size:clamp(50px,8vw,130px);
  max-width:800px
}

.detail-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  padding-top:75px
}

.detail-columns p:not(.eyebrow) {
  font-size:clamp(19px,2vw,28px);
  line-height:1.4;
  max-width:720px
}

.detail-columns .button {
  margin-top:20px
}

.contact-detail h2 {
  margin:0
}

.contact-detail>p {
  font-size:clamp(19px,2vw,28px);
  color:var(--muted);
  max-width:700px
}

.next-work {
  background:#0b0b0b
}

@media(max-width:850px) {
  .work-cards,.archive-list,.prose-grid,.credits-grid,.detail-columns {
    grid-template-columns:1fr
  }

  .page-hero {
    min-height:0
  }

  .work-cards .visual {
    aspect-ratio:4/3
  }

  .archive-list li>span {
    min-width:100px
  }

  .service-row {
    grid-template-columns:35px 1fr
  }

  .service-row .text-link {
    grid-column:2
  }

  .detail-visual {
    aspect-ratio:4/3
  }

  .detail-columns {
    padding-top:45px
  }

}

@media(max-width:520px) {
  .page-hero h1 {
    font-size:clamp(54px,16vw,90px);
    overflow-wrap:anywhere
  }

  .page-hero .lead {
    font-size:22px
  }

  .archive-list a {
    font-size:15px
  }

  .service-row {
    gap:8px
  }

  .filters {
    gap:7px
  }

  .filters button {
    padding:10px 11px
  }

  .detail-visual strong {
    font-size:40px
  }

}


/* Contact directly from the homepage */
.contact-email {
  display:block;
  width:max-content;
  margin:24px 0;
  font-size:clamp(18px,2vw,28px);
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:6px
}

.contact-email:hover {
  color:var(--red)
}

.social-links {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:35px
}

.social-links a {
  width:49px;
  height:49px;
  border:1px solid #666;
  display:grid;
  place-items:center;
  color:#f1f0ed;
  transition:background .2s,border-color .2s
}

.social-links a:hover,.social-links a:focus-visible {
  background:var(--red);
  border-color:var(--red)
}

.social-links svg {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.social-links .dot {
  fill:currentColor;
  stroke:none
}

.social-links .pond-icon {
  width:72px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap
}


/* Equal-size blog images and homepage service discipline list. */
.journal-grid a>img {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  background:#181818
}

@media(min-width:851px) {
  .journal-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .journal-grid a,.journal-grid a+a {
    padding-left:24px;
    padding-right:24px
  }

}

.services-intro {
  max-width:880px;
  margin:-20px 0 clamp(55px,7vw,105px);
  font-size:clamp(20px,2.1vw,30px);
  line-height:1.4;
  letter-spacing:-.025em;
  color:var(--text)
}

.services-disciplines {
  padding-top:30px;
  border-top:1px solid var(--line)
}

.discipline-row {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px clamp(15px,2vw,32px);
  margin:0 0 14px;
  padding:0;
  list-style:none
}

.discipline-row li {
  display:flex;
  align-items:baseline;
  gap:clamp(15px,2vw,32px);
  font:800 clamp(24px,3.2vw,54px)/1.12 Helvetica,Arial,sans-serif;
  letter-spacing:-.055em;
  text-transform:uppercase
}

.discipline-row li+li::before {
  content:'·';
  color:var(--red);
  font-size:.8em;
  line-height:1
}

.services .text-link {
  margin-top:45px
}

@media(max-width:600px) {
  .services-intro {
    margin-top:0
  }

  .discipline-row {
    display:block;
    margin-bottom:0
  }

  .discipline-row li {
    display:block;
    margin:0 0 12px;
    font-size:clamp(28px,8vw,42px)
  }

  .discipline-row li+li::before {
    content:none
  }

  .services-disciplines {
    border-top:0;
    padding-top:0
  }

  .services .text-link {
    margin-top:30px
  }

}

.journal-grid a h3 {
  margin-top:24px
}


/* Photo promotion panel. */
.photography-feature {
  background:linear-gradient(135deg,#111 0,#140a0b 65%,#080808 100%)
}

.photography-feature-inner {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:9vw;
  align-items:end;
  max-width:1200px
}

.photography-feature-inner p {
  font-size:clamp(22px,2.5vw,35px);
  line-height:1.25;
  margin:0;
  color:#deddd9
}

.photography-feature-inner .button {
  justify-self:start
}

@media(max-width:850px) {
  .photography-feature-inner {
    grid-template-columns:1fr;
    gap:25px
  }

}


/* Film archive cards; confirmed video thumbnails retain their original frames. */
.archive-list:has(.archive-card) {
  border-top:0;
  gap:38px 22px
}

.archive-card {
  padding:0!important;
  border:0!important;
  display:block!important
}

.archive-card>a {
  display:block
}

.archive-thumb {
  display:block;
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:radial-gradient(circle at 70% 45%,#381113,#161616 52%,#090909);
  border:1px solid #303030
}

.archive-thumb img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease
}

.archive-card:hover img {
  transform:scale(1.04)
}

.archive-caption {
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 14px;
  padding:16px 0;
  border-top:1px solid #444;
  margin-top:10px
}

.archive-caption small {
  grid-column:1/-1;
  color:var(--red);
  font:11px Helvetica,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase
}

.archive-caption strong {
  font:600 clamp(16px,1.7vw,22px) Helvetica,Arial,sans-serif;
  line-height:1.15
}

.archive-caption>span {
  color:var(--red)
}

@media(max-width:700px) {
  .archive-list:has(.archive-card) {
    grid-template-columns:1fr;
    gap:26px
  }

}


/* Documentaries, selected films and overlay */
.section-intro {
  max-width:760px;
  font-size:clamp(18px,2vw,27px);
  line-height:1.35;
  color:#bdbbb6;
  margin:-28px 0 50px
}

.film-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:50px 22px
}

.film-image {
  aspect-ratio:16/10;
  background:#1a1a1a;
  position:relative;
  overflow:hidden
}

.film-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s
}

.film-card a:hover img,.film-card a:focus-visible img {
  transform:scale(1.05)
}

.film-image-action {
  position:absolute;
  right:15px;
  bottom:15px;
  background:var(--red);
  padding:10px 12px;
  font-size:11px;
  letter-spacing:.11em;
  text-transform:uppercase
}

.film-card-meta {
  border-top:1px solid #555;
  margin-top:12px;
  padding-top:12px
}

.selected-grid .film-category {
  display:block;
  margin:0 0 7px;
  color:var(--red);
  font:700 11px/1.3 Helvetica,Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase
}

.film-card-meta h3 {
  font-size:clamp(20px,2vw,29px);
  line-height:1.1;
  margin:0 0 8px
}

.film-card-meta p {
  font-size:12px;
  color:var(--muted);
  margin:0;
  text-transform:uppercase;
  letter-spacing:.06em
}


/* Feature media and description, followed by reusable video-dialog styles. */
.documentary-media {
  max-width:1050px;
  margin:auto;
  position:relative
}

.documentary-media img {
  width:100%;
  max-height:560px;
  object-fit:cover;
  display:block;
  background:#121212
}

.inline-video iframe {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:0;
  background:#111
}

.inline-video-local img {
  aspect-ratio:16/9;
  object-fit:cover
}

.inline-video-local p {
  font-size:14px;
  line-height:1.5;
  color:var(--muted)
}

.documentary-media>.text-link {
  display:inline-block;
  margin-top:14px
}

[hidden] {
  display:none!important
}

.documentary-media .button {
  position:absolute;
  bottom:25px;
  left:25px;
  background:#050505dd;
  border-color:#aaa
}

.documentary-copy {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:7vw;
  margin-top:85px
}

.documentary-copy h2 {
  font-size:clamp(38px,5vw,72px);
  overflow-wrap:anywhere
}

.film-credit {
  font-size:15px;
  color:var(--muted)
}

.video-dialog {
  width:min(94vw,1100px,calc(167dvh - 267px));
  max-height:94dvh;
  border:1px solid #555;
  background:#080808;
  color:#fff;
  padding:16px 16px 8px
}

.video-dialog::backdrop {
  background:rgba(0,0,0,.9)
}

.video-dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:12px
}

.video-dialog h2 {
  font:600 clamp(18px,2vw,25px) Helvetica,Arial,sans-serif;
  margin:0
}

.video-close {
  font:34px Helvetica,Arial,sans-serif;
  background:none;
  color:#fff;
  border:0;
  cursor:pointer;
  padding:0 10px
}

.video-close:hover,.video-close:focus-visible,.video-external:hover {
  color:var(--red)
}

.video-frame {
  aspect-ratio:16/9;
  background:#111
}

.video-frame iframe {
  width:100%;
  height:100%;
  border:0;
  display:block
}

.video-frame:has(.video-local-note) {
  display:grid;
  place-items:center;
  padding:24px
}

.video-local-note {
  max-width:440px;
  text-align:center!important;
  font-size:16px!important;
  line-height:1.5;
  letter-spacing:normal!important
}

.video-dialog p {
  text-align:right;
  margin:8px 0 0;
  font-size:12px;
  letter-spacing:.08em
}

.video-dialog-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 22px;
  margin-top:12px;
  font-size:14px
}

.video-dialog-actions .video-external {
  margin-left:auto
}

.video-dialog-actions a {
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:4px
}

.video-dialog-actions a:hover,.video-dialog-actions a:focus-visible {
  color:var(--red)
}

.video-dialog-actions .video-related {
  font-weight:700
}

@media(max-width:900px) {
  .film-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .documentary-copy {
    grid-template-columns:1fr;
    gap:15px
  }

}

@media(max-width:570px) {
  .film-grid {
    grid-template-columns:1fr
  }

  .section-intro {
    margin:0 0 35px
  }

  .documentary-media .button {
    left:12px;
    bottom:12px;
    gap:20px
  }

  .video-dialog {
    padding:8px
  }

}


/* Compact archive, clearly separated by film type */
.archive-group {
  margin-top:75px
}

.archive-group:first-of-type {
  margin-top:50px
}

.archive-group-head {
  border-top:2px solid var(--red);
  padding:18px 0 28px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px
}

.archive-group-head h3 {
  font:800 clamp(30px,3.2vw,48px) Helvetica,Arial,sans-serif;
  letter-spacing:-.04em;
  color:var(--red);
  margin:0
}

.archive-group-head span {
  font-size:11px;
  letter-spacing:.16em;
  color:var(--muted)
}

.archive-group .archive-list {
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:27px 14px
}

.archive-group .archive-caption {
  padding-top:10px;
  margin-top:7px
}

.archive-group .archive-caption strong {
  font-size:clamp(14px,1.1vw,16px)
}

.archive-caption .film-role {
  grid-column:1/-1;
  color:var(--muted);
  font:500 12px/1.35 Helvetica,Arial,sans-serif;
  letter-spacing:0
}


/* Initial gallery-grid layout; later shared tile rules override it. */
.photo-grid {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:28px 14px
}

.photo-grid a {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 8px;
  align-items:start
}

.photo-grid img {
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  grid-column:1/-1;
  display:block;
  background:#161616
}

.photo-grid strong {
  font:600 14px/1.25 Helvetica,Arial,sans-serif
}

.photo-grid a>span {
  color:var(--red)
}

.photo-grid a:hover strong,.photo-grid a:focus-visible strong {
  color:var(--red)
}

@media(max-width:1200px) {
  .photo-grid {
    grid-template-columns:repeat(6,minmax(0,1fr))
  }

}

@media(max-width:850px) {
  .photo-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

}

@media(max-width:580px) {
  .photo-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px 12px
  }

  .photo-grid strong {
    font-size:14px
  }

}

@media(max-width:1200px) {
  .archive-group .archive-list {
    grid-template-columns:repeat(5,minmax(0,1fr))
  }

}

@media(max-width:950px) {
  .archive-group .archive-list {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

}

@media(max-width:700px) {
  .archive-group .archive-list {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px 12px
  }

}

@media(max-width:430px) {
  .archive-group .archive-list {
    grid-template-columns:1fr 1fr
  }

  .archive-group .archive-caption strong {
    font-size:14px
  }

}

.playlist-label {
  grid-column:1/-1;
  color:#d9d7d2;
  font:600 10px Helvetica,Arial,sans-serif;
  font-style:normal;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-left:2px solid var(--red);
  padding-left:8px;
  margin-top:4px
}


/* A consistent thumbnail size across the photography and film collections. */
.photo-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:28px 14px;
  max-width:1400px;
  margin-inline:auto
}

.photo-page,.work-page,.services-page,#work {
  --portfolio-tile:min(calc((100vw - 2 * var(--pad) - 70px)/6),calc((1400px - 70px)/6))
}

.photo-grid li {
  flex:0 0 var(--portfolio-tile);
  width:var(--portfolio-tile);
  min-width:0
}

.work-page .film-grid,.work-page .archive-group .archive-list {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  column-gap:14px;
  row-gap:32px;
  max-width:1400px;
  margin-inline:auto
}

.work-page .archive-group .archive-list {
  max-width:calc(4 * var(--portfolio-tile) + 42px)
}

.work-page .film-grid.documentary-grid,.work-page .film-grid.selected-grid {
  max-width:1400px
}

.work-page .film-card,.work-page .archive-card {
  flex:0 0 var(--portfolio-tile);
  width:var(--portfolio-tile);
  min-width:0
}

.work-page .film-image,.work-page .archive-thumb {
  aspect-ratio:3/2
}

.work-page .film-card-meta h3 {
  font-size:16px;
  line-height:1.2
}

.work-page .film-card-meta p {
  font-size:11px;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none
}

.work-page .film-image-action {
  right:5px;
  bottom:5px;
  padding:5px 6px;
  font-size:9px
}

.work-page .archive-thumb .film-image-action {
  right:5px;
  bottom:5px;
  padding:5px 6px;
  font-size:9px;
  color:#fff;
  z-index:1
}

#work .selected-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  column-gap:14px;
  row-gap:32px;
  max-width:1400px;
  margin-inline:auto
}

#work .selected-grid .film-card {
  flex:0 0 var(--portfolio-tile);
  width:var(--portfolio-tile);
  min-width:0
}

#work .selected-grid .film-image {
  aspect-ratio:3/2
}

#work .selected-grid .film-card-meta h3 {
  font-size:16px;
  line-height:1.2
}

#work .selected-grid .film-card-meta p {
  font-size:11px;
  line-height:1.35;
  letter-spacing:0;
  text-transform:none
}

#work .selected-grid .film-image-action {
  right:5px;
  bottom:5px;
  padding:5px 6px;
  font-size:9px
}

.work-page .archive-caption {
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 5px
}

.work-page .archive-caption strong {
  font-size:14px;
  overflow-wrap:anywhere
}

.work-page .archive-caption small {
  font-size:10px
}

.work-page .archive-caption .film-role {
  font-size:11px
}

@media(max-width:1200px) {
  .photo-page,.work-page,.services-page,#work {
    --portfolio-tile:calc((100vw - 2 * var(--pad) - 42px)/4)
  }

}

@media(max-width:850px) {
  .photo-page,.work-page,.services-page,#work {
    --portfolio-tile:calc((100vw - 2 * var(--pad) - 28px)/3)
  }

}

@media(max-width:580px) {
  .photo-page,.work-page,.services-page,#work {
    --portfolio-tile:calc((100vw - 2 * var(--pad) - 14px)/2)
  }

  .work-page .archive-group .archive-list,.work-page .film-grid,#work .selected-grid {
    row-gap:24px
  }

}

.site-header nav a,.site-header .menu {
  font-weight:800
}

.documentary-laurels {
  margin:65px auto 5px;
  max-width:1000px;
  text-align:center
}

.documentary-laurels img {
  display:block;
  max-width:100%;
  height:auto;
  max-height:320px;
  object-fit:contain;
  margin:auto
}


/* Gallery dialog controls and stage; the full-screen rules below override its initial sizing. */
.photo-dialog {
  width:min(96vw,1280px);
  height:min(92vh,950px);
  max-width:none;
  max-height:none;
  margin:auto;
  padding:14px;
  border:1px solid #555;
  background:#080808;
  color:var(--text)
}

.photo-dialog[open] {
  display:grid;
  grid-template-rows:auto minmax(0,1fr)
}

.photo-dialog::backdrop {
  background:rgba(0,0,0,.92)
}

.photo-dialog-toolbar {
  display:flex;
  align-items:center;
  gap:20px;
  padding:0 5px 12px;
  font:700 14px Helvetica,Arial,sans-serif
}

.photo-dialog-count {
  margin-left:auto;
  color:var(--muted);
  font-size:12px
}

.photo-close,.photo-prev,.photo-next {
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-family:Helvetica,Arial,sans-serif
}

.photo-close {
  font-size:32px;
  line-height:1;
  padding:0 7px
}

.photo-prev,.photo-next {
  font-size:48px;
  line-height:1;
  padding:8px
}

.photo-close:hover,.photo-prev:hover,.photo-next:hover,.photo-close:focus-visible,.photo-prev:focus-visible,.photo-next:focus-visible {
  color:var(--red)
}

.photo-stage {
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 50px;
  align-items:center;
  min-height:0
}

.photo-stage figure {
  min-height:0;
  height:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px
}

.photo-stage img {
  display:block;
  max-width:100%;
  max-height:calc(92vh - 115px);
  width:auto;
  height:auto;
  object-fit:contain
}

.photo-stage figcaption {
  color:var(--muted);
  font-size:13px;
  text-align:center
}

@media(max-width:580px) {
  .photo-dialog {
    padding:8px
  }

  .photo-stage {
    grid-template-columns:32px minmax(0,1fr) 32px
  }

  .photo-prev,.photo-next {
    font-size:34px;
    padding:2px
  }

  .photo-stage img {
    max-height:calc(92vh - 100px)
  }

  .photo-dialog-toolbar {
    gap:7px
  }

}


/* Full-screen gallery follows the live site's black canvas and compact toolbar. */
.photo-dialog {
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  margin:0;
  padding:0;
  border:0;
  background:#000
}

.photo-dialog[open] {
  display:grid;
  grid-template-rows:44px minmax(0,1fr)
}

.photo-dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:start;
  position:relative;
  z-index:2
}

.photo-dialog-navigation,.photo-dialog-actions {
  display:flex;
  align-items:center;
  height:44px;
  background:#151515;
  color:#f4f4f4
}

.photo-dialog-navigation {
  margin-left:auto;
  margin-right:auto
}

.photo-dialog-actions {
  position:absolute;
  right:0;
  top:0
}

.photo-dialog button {
  display:grid;
  place-items:center;
  min-width:43px;
  height:44px;
  padding:0 8px;
  border:0;
  background:transparent;
  color:#f4f4f4;
  font:20px/1 Arial,Helvetica,sans-serif;
  cursor:pointer
}

.photo-dialog button:hover,.photo-dialog button:focus-visible {
  background:#303030;
  color:#fff
}

.photo-dialog-count {
  min-width:68px;
  margin:0;
  text-align:center;
  color:#e3e3e3;
  font:12px Arial,Helvetica,sans-serif
}

.photo-dialog .photo-prev,.photo-dialog .photo-next {
  font-size:24px
}

.photo-dialog .photo-close {
  font-size:25px;
  font-weight:300
}

.photo-dialog .photo-slideshow,.photo-dialog .photo-fullscreen,.photo-dialog .photo-thumbnails {
  font-size:16px
}

.photo-stage {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  margin:0;
  padding:12px 20px 38px;
  position:relative
}

.photo-stage img {
  width:auto;
  height:auto;
  max-width:min(100%,1000px);
  max-height:calc(100dvh - 126px);
  object-fit:contain
}

.photo-stage figcaption {
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  padding:0 20px;
  color:#e5e5e5;
  font:13px Arial,Helvetica,sans-serif;
  text-align:center
}

.photo-filmstrip {
  position:absolute;
  z-index:3;
  bottom:42px;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:5px;
  overflow-x:auto;
  padding:8px 15px;
  background:#111e
}

.photo-filmstrip button {
  flex:0 0 90px;
  width:90px;
  height:62px;
  padding:2px;
  border:2px solid transparent
}

.photo-filmstrip button[aria-current="true"] {
  border-color:var(--red)
}

.photo-filmstrip img {
  width:100%;
  height:100%;
  object-fit:cover
}

.photo-stage img.photo-flipped,.photo-filmstrip img.photo-flipped {
  transform:scaleX(-1)
}

@media(max-width:650px) {
  .photo-dialog-navigation {
    margin-left:0;
    margin-right:auto
  }

  .photo-dialog-actions {
    position:static
  }

  .photo-dialog button {
    min-width:34px;
    padding:0 4px
  }

  .photo-dialog-count {
    min-width:52px
  }

  .photo-stage {
    padding:10px 8px 38px
  }

  .photo-stage img {
    max-width:100%;
    max-height:calc(100dvh - 112px)
  }

  .photo-filmstrip {
    justify-content:flex-start
  }

}


/* Individual festival laurels from the original homepage artwork. */
.recognition {
  background:#090909;
  padding-top:110px;
  padding-bottom:100px
}

.recognition-heading {
  margin-bottom:70px
}

.recognition-heading .eyebrow,.award-year {
  color:var(--red);
  font:800 12px/1.4 Helvetica,Arial,sans-serif;
  letter-spacing:.16em
}

.recognition-heading h2 {
  font:800 clamp(46px,7vw,110px)/.98 Helvetica,Arial,sans-serif;
  letter-spacing:-.055em;
  color:var(--red);
  margin:18px 0 0
}

.award-film {
  border-top:2px solid var(--red);
  padding:42px 0 70px
}

.award-film-heading {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:40px;
  align-items:end
}

.award-film-heading h3 {
  font:800 clamp(29px,4vw,58px)/1.03 Helvetica,Arial,sans-serif;
  letter-spacing:-.04em;
  margin:12px 0
}

.award-film-heading h3 a {
  color:#f5f3ee;
  text-decoration:none
}

.award-film-heading h3 a:hover {
  color:var(--red)
}

.award-film-heading h3 span {
  font-size:.5em;
  vertical-align:top
}

.award-film-heading p:not(.award-year) {
  color:#bdbab5;
  font-size:13px;
  line-height:1.6
}

.award-film-heading .award-summary {
  font:700 clamp(16px,2vw,25px)/1.35 Helvetica,Arial,sans-serif;
  color:#f5f3ee
}

.award-quotes {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
  margin:42px 0 12px
}

.award-quotes blockquote {
  margin:0;
  padding:24px 26px;
  border-left:3px solid var(--red);
  background:#161616;
  font:600 clamp(17px,1.7vw,24px)/1.4 Helvetica,Arial,sans-serif
}

.award-quotes cite {
  display:block;
  margin-top:18px;
  color:#aaa;
  font:700 11px/1.4 Helvetica,Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase
}

.award-laurels {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:15px;
  align-items:center;
  margin-top:38px
}

.award-laurels img {
  display:block;
  width:100%;
  height:140px;
  object-fit:contain
}

#documentaries .film-card-meta:has(time) {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:12px
}

#documentaries .film-card-meta time {
  color:var(--red);
  font:800 12px/1.5 Helvetica,Arial,sans-serif
}

#documentaries .film-card-meta:has(time) p {
  grid-column:1/-1
}

@media(max-width:850px) {
  .award-laurels {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .award-film-heading {
    grid-template-columns:1fr;
    gap:12px
  }

}

@media(max-width:580px) {
  .recognition {
    padding-top:70px;
    padding-bottom:50px
  }

  .award-quotes {
    grid-template-columns:1fr
  }

  .award-laurels {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
  }

  .award-laurels img {
    height:110px
  }

  .award-film {
    padding-bottom:45px
  }

}


/* Ease the outlined line's tracking so the R and A stay distinct. */
.hero h1 em {
  letter-spacing:-.012em;
  font-size:.96em
}


/* Quiet, one-time motion for the headline and work throughout the site. */
.hero .hero-line {
  display:block
}

@media(prefers-reduced-motion:no-preference) {
  .hero .hero-line {
    animation:hero-arrive .48s both ease-out
  }

  .hero .hero-line:nth-child(2) {
    animation-delay:.12s
  }

  .hero .hero-line:nth-child(3) {
    animation-delay:.24s
  }

  .motion-ready .motion-in {
    opacity:0;
    transform:translateY(12px);
    transition:opacity .42s ease-out,transform .42s ease-out
  }

  .motion-ready .motion-in.visible {
    opacity:1;
    transform:none
  }

  .award-laurels {
    animation:none
  }

  .motion-ready .award-film .award-laurels {
    opacity:0;
    transform:translateY(8px);
    transition:opacity .48s ease-out .12s,transform .48s ease-out .12s
  }

  .motion-ready .award-film.visible .award-laurels {
    opacity:1;
    transform:none
  }

  .photo-stage img.photo-enter {
    animation:gallery-arrive .22s ease-out both
  }

}

@keyframes hero-arrive {
  from {
    opacity:0;
    transform:translateY(12px)
  }

  to {
    opacity:1;
    transform:none
  }

}

@keyframes gallery-arrive {
  from {
    opacity:.45
  }

  to {
    opacity:1
  }

}

.photo-grid img {
  transition:transform .28s ease-out
}

.photo-grid a:hover img,.photo-grid a:focus-visible img {
  transform:scale(1.025)
}

.film-card .film-card-meta {
  transition:border-color .28s ease-out
}

.film-card a:hover .film-card-meta,.film-card a:focus-visible .film-card-meta {
  border-color:var(--red)
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }

  .reveal,.motion-in,.award-laurels {
    opacity:1!important;
    transform:none!important
  }

}


/* Keep gallery thumbnails beside the photograph, never over it. */
.photo-dialog {
  --gallery-strip-width:220px
}

.photo-filmstrip:not([hidden]) {
  top:44px;
  right:0;
  bottom:0;
  left:auto;
  width:var(--gallery-strip-width);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-content:start;
  justify-content:stretch;
  gap:6px;
  overflow-x:hidden;
  overflow-y:auto;
  padding:12px 9px;
  background:#111;
  border-left:1px solid #303030
}

.photo-filmstrip[hidden] {
  display:none
}

.photo-filmstrip button {
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  min-width:0;
  flex:none
}

.photo-dialog:has(.photo-filmstrip:not([hidden])) .photo-stage {
  width:calc(100% - var(--gallery-strip-width));
  margin-right:var(--gallery-strip-width)
}

@media(max-width:650px) {
  .photo-dialog {
    --gallery-strip-width:96px
  }

  .photo-filmstrip:not([hidden]) {
    grid-template-columns:1fr;
    padding:7px 5px
  }

  .photo-filmstrip button {
    aspect-ratio:3/2
  }

}

.photo-stage figcaption a {
  color:#fff;
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:3px
}


/* Optional light palette. All pages share this stylesheet and the same markup. */
.site-header nav {
  align-items:center
}

.site-header nav a,.site-header nav .theme-toggle {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  line-height:1
}

.site-header nav .theme-toggle {
  position:relative;
  top:-1px;
  gap:7px;
  padding:0;
  background:none;
  border:0;
  color:var(--red);
  font:800 11px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer
}

.theme-toggle-icon {
  display:inline-flex;
  align-items:center;
  font-size:15px;
  line-height:1
}

.site-header nav .theme-toggle:hover,.site-header nav .theme-toggle:focus-visible {
  color:var(--text)
}

.site-header nav .theme-toggle:focus-visible {
  outline:2px solid var(--red);
  outline-offset:5px
}

@media(max-width:850px) {
  .site-header nav {
    align-items:flex-start
  }

  .site-header nav .theme-toggle {
    top:0;
    padding:7px 0
  }

}


/* Light palette tokens and component-specific colour overrides. Add new components here for both themes. */
html[data-theme="light"] {
  color-scheme:light;
  --bg:#fff;
  --panel:#f5f5f3;
  --text:#111;
  --muted:#515151;
  --line:#d6d6d3
}

html:not([data-theme="light"]) {
  color-scheme:dark
}

html[data-theme="light"] .site-header {
  border-bottom-color:#d7d7d3
}

html[data-theme="light"] .site-header nav a:hover,html[data-theme="light"] .site-header nav a:focus-visible {
  color:#111
}

html[data-theme="light"] .site-header nav .theme-toggle:hover,html[data-theme="light"] .site-header nav .theme-toggle:focus-visible {
  color:#111
}

html[data-theme="light"] .inner-header,html[data-theme="light"] .site-header nav.open {
  background:#fff
}

html[data-theme="light"] .calligraphy {
  mix-blend-mode:normal
}

html[data-theme="light"] .menu {
  color:var(--red)
}

html[data-theme="light"] .hero {
  background:radial-gradient(circle at 78% 48%,#ededeb 0,#fafaf9 38%,#fff 72%)
}

html[data-theme="light"] .hero:after {
  background:linear-gradient(90deg,#fff 0,transparent 55%,rgba(255,255,255,.12))
}

html[data-theme="light"] .hero h1 em {
  -webkit-text-stroke-color:#222
}

html[data-theme="light"] .eyebrow,html[data-theme="light"] .section-head>p,html[data-theme="light"] .credentials>p {
  color:#555
}

html[data-theme="light"] .section-head>p,html[data-theme="light"] .about .eyebrow,html[data-theme="light"] .contact .eyebrow,html[data-theme="light"] .quote .eyebrow {
  color:var(--red)
}

html[data-theme="light"] .intro,html[data-theme="light"] .book-intro,html[data-theme="light"] .page-hero .lead,html[data-theme="light"] .prose,html[data-theme="light"] .photography-feature-inner p,html[data-theme="light"] .section-intro {
  color:#303030
}

html[data-theme="light"] .services-intro {
  color:#303030
}

html[data-theme="light"] .button,html[data-theme="light"] .filters button,html[data-theme="light"] .review-controls button {
  border-color:#888;
  color:var(--text)
}

html[data-theme="light"] .button:hover,html[data-theme="light"] .filters button:hover,html[data-theme="light"] .filters button:focus-visible,html[data-theme="light"] .filters button.active,html[data-theme="light"] .review-controls button:hover,html[data-theme="light"] .review-controls button:focus-visible {
  color:#fff
}

html[data-theme="light"] .meta,html[data-theme="light"] .film-card-meta {
  border-color:#c6c6c3
}

html[data-theme="light"] .visual {
  background:#f2f0ef
}

html[data-theme="light"] .visual:before {
  opacity:1
}

html[data-theme="light"] .hmo:before {
  background:linear-gradient(135deg,#f4f1ef,#eee 55%,#f8dfe0)
}

html[data-theme="light"] .traces:before {
  background:radial-gradient(circle at 65% 35%,#f5d8d9,#f5f5f3 58%,#fff)
}

html[data-theme="light"] .boys:before {
  background:linear-gradient(155deg,#fff,#f1dfe0)
}

html[data-theme="light"] .recent:before {
  background:linear-gradient(100deg,#f6f6f5,#f4ddde,#fff)
}

html[data-theme="light"] .quote,html[data-theme="light"] .book,html[data-theme="light"] .next-work,html[data-theme="light"] .recognition {
  background:#f6f6f4
}

html[data-theme="light"] .book-cover {
  box-shadow:0 25px 60px rgba(0,0,0,.17)
}

html[data-theme="light"] .contact {
  background:radial-gradient(circle at 82% 52%,#f9e5e6 0,#fafafa 42%,#fff 80%)
}

html[data-theme="light"] footer {
  color:#555
}

html[data-theme="light"] .social-links a {
  color:#111;
  border-color:#777
}

html[data-theme="light"] .social-links a:hover,html[data-theme="light"] .social-links a:focus-visible {
  color:#fff
}

html[data-theme="light"] .photography-feature {
  background:linear-gradient(135deg,#fff 0,#f9eeef 65%,#f6f6f4 100%)
}

html[data-theme="light"] .journal-grid a>img,html[data-theme="light"] .film-image,html[data-theme="light"] .documentary-media img {
  background:#eee
}

html[data-theme="light"] .archive-thumb {
  background:#eee;
  border-color:#ccc
}

html[data-theme="light"] .archive-caption {
  border-color:#aaa
}

html[data-theme="light"] .film-image-action {
  color:#fff
}

html[data-theme="light"] .playlist-label {
  color:#333
}

html[data-theme="light"] .award-film-heading h3 a,html[data-theme="light"] .award-film-heading .award-summary {
  color:#111
}

html[data-theme="light"] .award-film-heading p:not(.award-year),html[data-theme="light"] .award-quotes cite {
  color:#555
}

html[data-theme="light"] .award-quotes blockquote {
  background:#fff
}

html[data-theme="light"] .video-dialog,html[data-theme="light"] .photo-dialog {
  background:#fff;
  color:#111;
  border-color:#bbb
}

html[data-theme="light"] .video-dialog::backdrop,html[data-theme="light"] .photo-dialog::backdrop {
  background:rgba(255,255,255,.84)
}

html[data-theme="light"] .video-close {
  color:#111
}

html[data-theme="light"] .video-frame {
  background:#efefed
}

html[data-theme="light"] .documentary-media .button {
  background:#fff;
  border-color:#888;
  color:#111
}

html[data-theme="light"] .documentary-media .button:hover {
  background:var(--red);
  border-color:var(--red);
  color:#fff
}

html[data-theme="light"] .photo-dialog-navigation,html[data-theme="light"] .photo-dialog-actions {
  background:#f2f2ef;
  color:#111
}

html[data-theme="light"] .photo-dialog button {
  color:#111
}

html[data-theme="light"] .photo-dialog button:hover,html[data-theme="light"] .photo-dialog button:focus-visible {
  background:#e3e3df;
  color:#111
}

html[data-theme="light"] .photo-dialog-count,html[data-theme="light"] .photo-stage figcaption,html[data-theme="light"] .photo-stage figcaption a {
  color:#111
}

html[data-theme="light"] .photo-filmstrip:not([hidden]) {
  background:#f5f5f3;
  border-left-color:#ccc
}

html[data-theme="light"] .photo-filmstrip button[aria-current="true"] {
  border-color:var(--red)
}


/* Gallery introductions are live text so links work and both themes stay legible. */
.photo-stage img[hidden],.photo-stage .gallery-title-card[hidden] {
  display:none
}

.gallery-title-card {
  width:min(100%,820px);
  max-height:calc(100dvh - 110px);
  overflow-y:auto;
  padding:clamp(30px,5.5vw,72px);
  border-left:4px solid var(--red);
  color:var(--text);
  background:#111;
  box-shadow:0 24px 75px rgba(0,0,0,.3);
  font:clamp(16px,1.4vw,19px)/1.65 Helvetica,Arial,sans-serif;
  text-align:left
}

.gallery-title-content {
  max-width:660px
}

.gallery-title-kicker {
  display:block;
  margin-bottom:20px;
  color:#aaa;
  font:700 11px/1.4 Helvetica,Arial,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase
}

.gallery-title-content h2 {
  max-width:680px;
  margin:0 0 30px;
  padding-bottom:28px;
  border-bottom:1px solid #555;
  color:var(--red);
  font:800 clamp(36px,5vw,62px)/1.04 Helvetica,Arial,sans-serif;
  letter-spacing:-.045em;
  text-wrap:balance
}

.gallery-title-content p {
  margin:0 0 20px;
  color:#d4d2ce
}

.gallery-title-content p:first-of-type {
  color:var(--text);
  font-size:1.08em
}

.gallery-title-content p:last-child {
  margin-bottom:0
}

.gallery-title-content p:last-child:has(a):not(:first-of-type) {
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid #444
}

.gallery-title-content a {
  color:var(--red);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px
}

.gallery-title-content a::after {
  content:' ↗';
  font-size:.85em
}

.gallery-title-content a:hover,.gallery-title-content a:focus-visible {
  color:var(--text)
}

.photo-filmstrip .gallery-title-thumb {
  padding:5px;
  overflow:hidden;
  color:var(--text);
  background:var(--bg);
  font:700 11px/1.2 Helvetica,Arial,sans-serif;
  text-align:center;
  overflow-wrap:anywhere
}

html[data-theme="light"] .gallery-title-card {
  color:#111;
  background:#f5f4f1;
  box-shadow:0 24px 75px rgba(0,0,0,.11)
}

html[data-theme="light"] .gallery-title-kicker {
  color:#555
}

html[data-theme="light"] .gallery-title-content h2,html[data-theme="light"] .gallery-title-content p:last-child:has(a):not(:first-of-type) {
  border-color:#c6c4be
}

html[data-theme="light"] .gallery-title-content p {
  color:#414141
}

html[data-theme="light"] .gallery-title-content p:first-of-type {
  color:#111
}

html[data-theme="light"] .photo-filmstrip .gallery-title-thumb {
  color:#111;
  background:#fff
}

@media(max-width:650px) {
  .gallery-title-card {
    max-height:calc(100dvh - 95px);
    padding:26px 22px
  }

  .gallery-title-content h2 {
    margin-bottom:22px;
    padding-bottom:21px
  }

  .gallery-title-kicker {
    margin-bottom:15px
  }

  .photo-filmstrip .gallery-title-thumb {
    font-size:10px
  }

}


/* Shared page navigation, kept clear of full-screen media overlays. */
.back-to-top {
  position:fixed;
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  z-index:50;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid var(--red);
  border-radius:50%;
  background:var(--bg);
  color:var(--red);
  font:700 28px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:background .2s,color .2s,transform .2s,opacity .2s,visibility .2s
}

.back-to-top.is-visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto
}

.back-to-top:hover,.back-to-top:focus-visible {
  background:var(--red);
  color:#fff;
  transform:translateY(-3px)
}

.back-to-top:focus-visible {
  outline:2px solid var(--text);
  outline-offset:3px
}

body:has(dialog[open]) .back-to-top {
  display:none!important
}

@media(max-width:580px) {
  .back-to-top {
    right:max(14px,env(safe-area-inset-right));
    bottom:max(14px,env(safe-area-inset-bottom));
    width:44px;
    height:44px
  }

}


/* These six laurels are entirely white artwork on transparency. Keep coloured and dark laurels intact. */
html[data-theme="light"] .award-laurels img[src$="boys-04.png"],
html[data-theme="light"] .award-laurels img[src$="hmo-02.png"],
html[data-theme="light"] .award-laurels img[src$="hmo-06.png"],
html[data-theme="light"] .award-laurels img[src$="traces-01.png"],
html[data-theme="light"] .award-laurels img[src$="traces-02.png"],
html[data-theme="light"] .award-laurels img[src$="traces-07.png"] {
  filter:brightness(0)
}

html[data-theme="light"] .award-laurels img[src$="hmo-01.png"],
html[data-theme="light"] .award-laurels img[src$="hmo-07.png"] {
  filter:url("#hmo-laurel-light-text")
}


/* Blend the supplied white-background Sydney artwork into the light section. */
html[data-theme="light"] .award-laurels .sydney-laurel {
  mix-blend-mode:multiply;
  object-fit:cover;
  object-position:center
}


/* About: interviews from the original site, including its self-portrait. */
.interviews-layout {
  display:grid;
  grid-template-columns:minmax(240px,400px) minmax(0,1fr);
  gap:clamp(35px,7vw,110px);
  align-items:start
}

.interviews-photo {
  margin:0
}

.interviews-photo img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:400/266;
  object-fit:cover
}

.interviews-photo figcaption {
  margin-top:13px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.07em
}

.interviews-intro {
  font-size:clamp(18px,2vw,26px);
  line-height:1.35;
  margin:0 0 35px;
  max-width:650px
}

.interview-list {
  list-style:none;
  padding:0;
  margin:0;
  border-top:1px solid var(--line)
}

.interview-list li {
  border-bottom:1px solid var(--line)
}

.interview-list a {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:16px;
  padding:18px 0 21px
}

.interview-list a>span:first-child {
  grid-column:1/-1;
  color:var(--red);
  font:800 11px/1.4 Helvetica,Arial,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin-bottom:5px
}

.interview-list strong {
  font:600 clamp(17px,1.6vw,23px)/1.25 Helvetica,Arial,sans-serif
}

.interview-list a>span:last-child {
  color:var(--red);
  font-size:19px
}

.interview-list a:hover strong,.interview-list a:focus-visible strong {
  color:var(--red)
}

@media(max-width:850px) {
  .interviews-layout {
    grid-template-columns:1fr
  }

  .interviews-photo {
    max-width:400px
  }

}


/* Homepage hero on narrow screens: keep all three title lines inside the viewport.
   Constraining the flex item also lets the introduction wrap naturally. */
@media(max-width:850px) {
  .hero-copy {
    min-width:0;
    width:100%
  }

  .hero h1 {
    font-size:8vw
  }

  .hero .hero-line {
    white-space:nowrap
  }

}


/* Base recognition styles; the full-width feature-page overrides follow below. */
.documentary-recognition {
  margin-top:38px;
  padding-top:28px;
  border-top:1px solid var(--line)
}

.documentary-recognition .award-summary {
  font:700 clamp(17px,1.6vw,23px)/1.4 Helvetica,Arial,sans-serif;
  color:var(--text);
  margin:0 0 26px
}

.documentary-recognition .award-quotes {
  grid-template-columns:1fr;
  gap:18px;
  margin:26px 0
}

.documentary-recognition .award-quotes blockquote {
  font-size:clamp(17px,1.4vw,21px)
}

.documentary-recognition .award-laurels {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:26px
}

.documentary-recognition .award-laurels img {
  height:120px
}

@media(max-width:580px) {
  .documentary-recognition .award-laurels {
    gap:8px
  }

  .documentary-recognition .award-laurels img {
    height:100px
  }

}


/* Feature recognition spans the complete section width below the two-column film copy. */
.documentary-detail>.documentary-recognition {
  width:100%;
  margin-top:48px
}

.documentary-detail>.documentary-recognition .award-laurels {
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:15px;
  margin-top:38px
}

.documentary-detail>.documentary-recognition .award-laurels img {
  height:140px
}

.documentary-detail>.documentary-recognition .award-quotes {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px
}

@media(max-width:850px) {
  .documentary-detail>.documentary-recognition .award-laurels {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

}

@media(max-width:580px) {
  .documentary-detail>.documentary-recognition .award-laurels {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px
  }

  .documentary-detail>.documentary-recognition .award-laurels img {
    height:110px
  }

  .documentary-detail>.documentary-recognition .award-quotes {
    grid-template-columns:1fr
  }

}


/* Mobile-only fixed heading outlines avoid Android system-font contour seams.
   SVG is inline so currentColor follows the active theme; desktop retains text. */
.hero-mobile-outline {
  display:none;
  color:#d6d4cf;
}

html[data-theme="light"] .hero-mobile-outline {
  color:#222;
}

@media(max-width:850px) {
  .hero-desktop-outline {
    display:none;
  }

  .hero-mobile-outline {
    display:inline-block;
    width:9.5em;
    height:auto;
    max-width:100%;
    vertical-align:baseline;
    overflow:visible;
  }
}