/* Landscape artwork, editorial actions and genuine wide-screen coverage. */
.hero-photo {
  z-index: 1;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .65s;
}
.hero-photo.visible { opacity: 1; }
.filmstrip-track { animation: none; }
.motion-paused .filmstrip { overflow-x: auto; }
:root {
  --pad: clamp(20px, 1.4vw, 72px);
}
.hero-center {
  padding-bottom: 20px;
}
.hero-title {
  width: min(78vw, 154.5svh);
}
.hero-description {
  font-size: clamp(26px, 2.5svh, 40px);
  line-height: 1.08;
  margin-top: clamp(16px, 1.7svh, 28px);
}
.hero-note {
  font-size: clamp(23px, 2.4svh, 35px);
}
.filmstrip-group {
  display: flex;
  flex-shrink: 0;
}
.filmstrip-item {
  width: clamp(270px, 22vw, 390px);
}
.filmstrip-item[data-category] > img,
.project-card[data-category] .project-visual > img {
  object-position: center;
}
.project-visual,
.project-card:nth-child(5n+3) .project-visual,
.project-card:nth-child(5n+4) .project-visual {
  aspect-ratio: 1.6;
}
.project-card:hover .project-visual > img {
  transform: none;
  filter: brightness(.93);
}
.project-visual::after {
  position: absolute;
  inset: 0;
  border: 1px solid var(--yellow);
  opacity: 0;
  content: '';
  transition: opacity .2s;
  pointer-events: none;
}
.project-card:hover .project-visual::after,
.project-card:focus-visible .project-visual::after {
  opacity: .65;
}
.project-caption {
  width: 100%;
  min-height: 33px;
  margin-top: 5px;
  align-items: center;
}
.project-sequence {
  font-family: var(--hand);
  color: #aaa99f;
  font-size: 20px;
}
.project-action {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 13px;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .015em;
  white-space: nowrap;
}
.project-action > svg {
  width: 32px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.project-action > span {
  position: relative;
}
.project-action > span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 3px;
  background: var(--yellow);
  clip-path: polygon(0 45%, 92% 0, 100% 40%, 6% 100%);
  opacity: 0;
  transition: opacity .2s;
}
.project-card:hover .project-action,
.project-card:focus-visible .project-action {
  color: var(--yellow);
}
.project-card:hover .project-action > span::after,
.project-card:focus-visible .project-action > span::after {
  opacity: 1;
}
.menu-row {
  height: clamp(60px, 8svh, 116px);
}
.menu-word {
  font-size: clamp(46px, min(5.1vw, 7.7svh), 116px);
}
.menu-brand {
  width: clamp(210px, 17svh, 300px);
}
.about-statement {
  max-width: calc(100% - 4vw);
  font-size: clamp(60px, 7.7vw, 260px);
}
.about-frame {
  aspect-ratio: auto;
  height: clamp(340px, 51svh, 800px);
}
.about-frame .brand-mark {
  width: min(75%, 105svh);
}
.director-ref-list {
  max-width: none;
}
.director-ref-row h2 {
  font-size: clamp(60px, 8vw, 180px);
}
@media (min-width: 2200px) {
  .site-header .header-logo,
  .dialog-header .header-logo {
    width: clamp(72px, 5.5svh, 90px);
  }
  .work-top h1 {
    font-size: clamp(90px, 7.5svh, 130px);
  }
  .work-controls {
    padding-block: 30px;
  }
  .category-filters {
    gap: 18px 35px;
  }
  .category-filters button,
  .type-filters button {
    font-size: 14px;
  }
  .work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 70px 36px;
  }
  .portfolio-flow {
    gap: 65px 40px;
  }
  .portfolio-flow::before {
    display: none;
  }
  .portfolio-flow .project-card,
  .portfolio-flow .project-card:nth-child(odd) {
    margin-top: 0;
    padding-top: 76px;
  }
  .portfolio-flow .project-card:nth-child(3n+2) {
    margin-top: 75px;
  }
  .portfolio-flow .project-visual,
  .portfolio-flow .project-card:nth-child(5n+3) .project-visual,
  .portfolio-flow .project-card:nth-child(5n+4) .project-visual,
  .portfolio-flow .project-caption {
    width: 100%;
  }
  .portfolio-flow .project-info,
  .portfolio-flow .project-card:nth-child(odd) .project-info {
    align-items: flex-start;
    text-align: left;
  }
  .project-info h2,
  .portfolio-flow .project-info h2 {
    font-size: 19px;
  }
  .project-info > span,
  .portfolio-flow .project-info > span {
    font-size: 28px;
  }
  .project-action {
    font-size: 12px;
  }
  .project-action > svg {
    width: 38px;
    height: 30px;
  }
  .about-statement br {
    display: none;
  }
  .about-blurb {
    max-width: 850px;
    font-size: 34px;
  }
  .contact-page > h1 {
    font-size: clamp(230px, 12vw, 420px);
  }
  .contact-details {
    gap: clamp(60px, 4vw, 180px);
  }
  .contact-details p {
    font-size: 34px;
  }
}
@media (min-width: 3800px) {
  .work-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 44px;
  }
  .portfolio-flow .project-card:nth-child(3n+2) {
    margin-top: 0;
  }
  .portfolio-flow .project-card:nth-child(4n+2),
  .portfolio-flow .project-card:nth-child(4n+4) {
    margin-top: 75px;
  }
}
@media (max-width: 1000px) {
  .hero-title {
    width: min(85vw, 154.5svh);
  }
}
@media (max-width: 600px) {
  :root { --pad: 13px; }
  .hero-center { padding-bottom: 0; }
  .hero-title { width: min(93vw, 154.5svh); }
  .hero-description { font-size: 23px; margin-top: 20px; }
  .hero-note { font-size: 21px; }
  .menu-row { height: clamp(50px, 7.7svh, 65px); }
  .menu-word { font-size: clamp(36px, 10.3vw, 60px); }
  .menu-brand { width: 154px; }
  .portfolio-flow .project-visual,
  .portfolio-flow .project-card:nth-child(5n+3) .project-visual,
  .portfolio-flow .project-card:nth-child(5n+4) .project-visual {
    aspect-ratio: 1.35;
  }
  .project-action { font-size: 9px; gap: 5px; }
  .project-action > svg { width: 24px; height: 23px; }
  .project-sequence { font-size: 17px; }
  .project-caption { min-height: 30px; }
  .about-statement { font-size: 12.6vw; max-width: 100%; }
  .about-frame { height: 255px; }
  .about-frame .brand-mark { width: 78%; }
  .director-ref-row h2 { font-size: 16.3vw; }
}
@media (max-height: 650px) and (min-width: 601px) {
  .hero-center { padding-bottom: 100px; }
  .hero-title { width: min(60vw, 111svh); }
  .hero-description { font-size: 21px; margin-top: 5px; }
  .hero-note { font-size: 20px; margin-top: 8px; }
  .menu-brand { width: 120px; }
  .menu-row { height: 11svh; min-height: 0; }
  .menu-word { font-size: 8svh; }
}