/* Homepage contact links and the return link within the film stage. */
.work-stage-bottom { position: relative; z-index: 1; width: var(--page-width); max-width: 2280px; margin: 0 auto; display: flex; justify-content: flex-end; padding: 0 0 6px; }
.stage-back-to-top { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0 10px 16px; font-family: var(--heading-font); font-size: 12px; color: var(--muted); text-decoration: none; cursor: pointer; }
.stage-back-to-top:hover { color: var(--ink); }

.preview-toggle .preview-icon { display: block; width: 18px; height: 18px; fill: currentColor; }
.work-main.previews-paused .project-preview { opacity: 0; visibility: hidden; }

/* A soft beige frame around a charcoal film stage, with three true widescreen cards per row. */
.beige-film-page {
  color-scheme: light;
  --page-width: 90%;
  --ink: #8f6334;
  --body-ink: #8f6334;
  --muted: #8f6334;
  --accent: #704923;
  --line: rgb(143 99 52 / 25%);
  --highlight: rgb(143 99 52 / 10%);
  background: radial-gradient(ellipse 65% 170px at 85% 0, rgb(255 255 255 / 45%), transparent 80%), radial-gradient(ellipse 65% 140px at 15% 100%, rgb(233 223 206 / 55%), transparent 80%), linear-gradient(110deg, #e9dfce, #f2eee5 55%, #eee7d9);
  color: var(--ink);
}
.beige-film-page .work-page > .site-header,
.beige-film-page .work-page > .site-footer,
.beige-film-page .work-page .work-section,
.beige-film-page .work-stage-bottom { max-width: 2280px; }
.beige-film-page .site-header { padding: 24px 0; }
.beige-film-page .site-logo { filter: none; }
.beige-film-page .site-header nav a { color: var(--muted); }
.beige-film-page .site-header nav a:hover,
.beige-film-page .site-header nav a[aria-current] { color: var(--ink); }
.beige-film-page .skip-link { background: #eee7d9; }
.beige-film-page .work-main { background: #242624; }
.beige-film-page .film-rail { opacity: .48; }
.beige-film-page .film-glow { opacity: .45; }
.beige-film-page .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.beige-film-page .project-image { aspect-ratio: 16 / 9; min-height: 0; border-radius: 6px; }
.beige-film-page .project-image img { object-fit: cover; }
.beige-film-page .project-image.portrait-source img { object-fit: contain; }
.beige-film-page .project-caption { padding: 12px 2px 0; text-align: center; }
.beige-film-page .project-title { font-size: clamp(15px, 1.05vw, 19px); line-height: 1.4; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.beige-film-page .site-footer { color: var(--muted); }
@media (max-width: 1000px) {
  .beige-film-page { --page-width: calc(100% - var(--gutter) * 2); }
  .beige-film-page .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .beige-film-page .site-header { padding: 16px 0; }
  .beige-film-page .portfolio-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .beige-film-page .project-image { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (orientation: portrait) and (max-width: 1000px) {
  .beige-film-page .portfolio-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Warm, readable typography within the darker film stage. */
.beige-film-page .work-main { --ink: #eee4cf; --muted: #cbbda6; --accent: #d2b88c; --line: rgb(210 184 140 / 25%); --highlight: rgb(210 184 140 / 10%); color: var(--ink); }
.beige-film-page .work-main .work-tabs button[aria-selected="true"], .beige-film-page .work-main .project-title { color: var(--ink); }
/* Compact portrait cards share rows with the remaining widescreen films. */
.beige-film-page .mixed-format-grid {
  --portrait-height: min(500px, 33vw, calc(100svh - 230px));
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.beige-film-page .mixed-format-grid .project { width: calc((100% - 48px) / 3); }
.beige-film-page .mixed-format-grid .portrait-project { width: calc(var(--portrait-height) * var(--card-ratio)); max-width: 100%; }
.beige-film-page .mixed-format-grid .portrait-project .project-image { aspect-ratio: var(--card-ratio); }
.beige-film-page .mixed-format-grid .portrait-project .project-image img { object-fit: contain; }
@media (max-width: 1000px) {
  .beige-film-page .mixed-format-grid { --portrait-height: min(420px, calc(100svh - 210px)); }
  .beige-film-page .mixed-format-grid .project:not(.portrait-project) { width: calc((100% - 24px) / 2); }
}
@media (max-width: 640px), (orientation: portrait) and (max-width: 1000px) {
  .beige-film-page .mixed-format-grid .project:not(.portrait-project) { width: 100%; }
  .beige-film-page .mixed-format-grid .portrait-project { margin-inline: auto; }
}
.beige-film-page .film-glow { background: radial-gradient(ellipse 35% 38% at 0% 100%, rgb(192 132 55 / 24%), transparent 78%), radial-gradient(ellipse 28% 32% at 100% 0%, rgb(191 148 74 / 18%), transparent 80%); }

/* Photography follows the original image rather than the video frame. */
.beige-film-page .project-image.photo-source { aspect-ratio: auto; background: transparent; }
.beige-film-page .project-image.photo-source img { position: relative; display: block; width: 100%; height: auto; object-fit: contain; }

@media (min-width: 1001px) {
  .beige-film-page .mixed-format-grid .fashion-project {
    width: min(calc(var(--portrait-height) * var(--card-ratio)), calc((100% - var(--fashion-gaps)) * var(--card-ratio) / var(--fashion-ratio-sum)));
  }
}

/* Keep tall photography covers complete and within one viewport. */
.beige-film-page .portrait-photo-project { width: min(100%, calc(min(500px, calc(100svh - 260px)) * var(--photo-ratio))); justify-self: center; }
@media (max-width: 640px), (orientation: portrait) and (max-width: 1000px) {
  .beige-film-page .portrait-photo-project { width: min(100%, calc(min(420px, calc(100svh - 230px)) * var(--photo-ratio))); }
}

.beige-film-page .single-line-title .project-title { display: block; white-space: nowrap; font-size: clamp(12px, .85vw, 16px); }

/* Match the first three Photography cards on desktop without changing galleries. */
@media (min-width: 1001px) {
  .beige-film-page .uniform-photo-cover .project-image.photo-source { aspect-ratio: 3 / 2; }
  .beige-film-page .uniform-photo-cover .project-image.photo-source img { width: 100%; height: 100%; object-fit: cover; }
}

/* Keep the closing Content portrait films together on desktop. */
.portrait-closing-row { display: contents; }
@media (min-width: 1001px) {
  .beige-film-page .mixed-format-grid .portrait-closing-row {
    display: flex;
    flex: 0 0 100%;
    gap: 24px;
    align-items: flex-start;
  }
  .beige-film-page .mixed-format-grid .portrait-closing-row .portrait-project {
    width: min(calc(var(--portrait-height) * var(--card-ratio)), calc((100% - (var(--closing-count) - 1) * 24px) / var(--closing-count)));
    flex-shrink: 0;
  }
}

.commercial-content-section { margin-top: 64px; }
.commercial-content-heading { font-family: var(--heading-font); font-weight: 400; font-size: clamp(22px, 2vw, 30px); border-top: 1px solid var(--line); padding-top: 28px; margin: 0 0 28px; }
@media (min-width: 1001px) {
  .beige-film-page .fashion-grid .project:not(.portrait-project) { width: 100%; }
}

/* Keep a complete Fashion landscape card and its title within a desktop screen. */
@media (min-width: 1001px) {
  .beige-film-page .fashion-grid .project:not(.portrait-project) .project-button {
    display: block;
    width: min(100%, calc((100svh - 260px) * 16 / 9));
    margin-inline: auto;
  }
}