/* Taste refinement: approved ivory base, neutral type, one functional accent.
   Approved color concept for the public portfolio. */
:root {
  --paper: #f4f0e8;
  --surface: #faf8f3;
  --ink: #282b26;
  --body: #454840;
  --muted: #454840;
  --brand: #405b49;
  --brand-hover: #304638;
  --brand-soft: #e4e9df;
  --on-brand: #faf8f3;
  --line: #d3d2c8;
  color-scheme: light;
}
body { color: var(--body); }
h1,h2,h3,.wordmark { color: var(--ink); }
.header,.studio-top,.mobile-menu,.contact {
  background: var(--paper);
  color: var(--ink);
}
.desktop-nav,.hero-heading>p,.stage-item>p,.stage-footer,
.collection-heading>p,.services-intro>p,.contact-row>p,
.contact-actions,.footer { color: var(--muted); }
.hero h1 span { color: inherit; }
.header .button,.contact .button,.button {
  background: var(--brand);
  color: var(--on-brand);
}
.button-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.film-open,.archive-watch { background: var(--surface); color: var(--ink); }
.studio-film,.archive-picture,.portrait-main>img { background: #e4e1d8; }
.about-images { padding-bottom: 0; }
.preview-toggle { color: var(--muted); }
.filter-row button { color: var(--body); }
.filter-row button[aria-pressed=true] {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand);
}
.about-copy .about-lead { color: var(--ink); }
.about .text-link,.service-body .text-link { color: var(--brand); }
.service[open] h3 { color: var(--ink); }
.contact { border-top: 1px solid var(--line); }
.contact-details,.footer { border-color: var(--line); }
.contact-email { color: var(--ink); }
.viewer { background: var(--surface); }
.viewer::backdrop { background: rgba(28,32,27,.84); }
.viewer-stage { background: #282b26; }
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline-color: var(--brand);
}
.studio-top ::selection,.contact ::selection,::selection {
  background: var(--brand); color: var(--on-brand);
}
.studio-stage { scrollbar-color: var(--brand) var(--paper); }
@media(hover:hover) {
  .header .button:hover,.contact .button:hover,.button:hover {
    background: var(--brand-hover); color: var(--on-brand);
  }
  .studio-film:hover .film-open { background: var(--surface); color: var(--brand); }
  .contact .text-link:hover,.text-link:hover,.service summary:hover h3 { color: var(--brand); }
}

/* Comfortable reading sizes across desktop and mobile. */
.stage-footer { align-items: flex-start; gap: 24px; }
.stage-footer>p { max-width: 76ch; font-size: 16px; line-height: 1.75; }
.hero-heading>p,.collection-heading>p,.services-intro>p,
.service-body>p,.contact-row>p,.about-copy>p { font-size: 16px; line-height: 1.75; }
.desktop-nav,.stage-item>p,.preview-toggle,.text-link,.contact .text-link,
.filter-row button,.archive-meta,.result-count,.footer,.film-open,.archive-watch,
.header-cta,.menu-toggle,.archive-end .button,.viewer-top p,.viewer-close,
.viewer-bottom { font-size: 14px; }
.archive-meta { align-items: baseline; }
.archive-meta>span:first-child { overflow-wrap: anywhere; }
.archive-meta>span:last-child { flex-shrink: 0; }
@media(max-width:760px) {
  .stage-footer { flex-direction: column; gap: 8px; align-items: flex-start; }
  .stage-footer>p { max-width: 100%; }
  .header { gap: 12px; }
  .header-cta { padding-inline: 12px; gap: 8px; }
  .header-cta svg { display: none; }
  .archive-watch { padding: 7px 9px; }
  .archive-end { flex-wrap: wrap; }
}

/* Customer logos form a quiet banner between the hero and the work gallery. */
.client-banner { width: calc(100% - var(--gutter)*2); max-width: 1500px; margin: 12px auto 0; padding: 30px 0 34px; border-block: 1px solid var(--line); }
.client-banner>p { color: var(--muted); font-size: 14px; text-align: center; margin-bottom: 28px; }
.client-banner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px clamp(28px,6vw,90px); }
.client-banner li { flex: 0 0 140px; display: flex; align-items: center; justify-content: center; min-height: 64px; text-align: center; font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.client-banner img { width: 140px; height: 64px; object-fit: contain; }
.work-section { padding-top: clamp(60px,6vw,88px); }
@media(max-width:760px) { .client-banner { padding-block: 26px; } .client-banner ul { gap: 24px 30px; } .client-banner li { flex-basis: 115px; } .client-banner img { width: 115px; height: 56px; } }

/* Fill preview frames, including borders embedded in uploaded videos. */
.studio-film>img,.studio-film>video,.archive-picture:not(.still)>img { object-fit:cover; object-position:center; scale:var(--preview-scale,1); }

/* Keep inline video visible to Safari before playback; its poster covers loading. */
.studio-film>video{opacity:1}