.dv-main {
  --dv-ink: #1c201b;
  --dv-subtle: #555a50;
  --dv-border: #c3c2b7;
  --dv-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: clamp(40px, 5.6vw, 96px) clamp(20px, 5vw, 80px) 0;
  box-sizing: border-box;
  color: var(--dv-ink);
}
.dv-main *, .dv-viewer * { box-sizing: border-box; }
.dv-kicker, .dv-rule, .dv-photo figcaption, .dv-viewer button, .dv-tools > span, .dv-controls > span {
  font: 500 11px/1.4 var(--dv-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.dv-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; }
.dv-kicker a { color: var(--dv-subtle); text-decoration: underline; text-underline-offset: 3px; }
.dv-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 30%); gap: 36px; align-items: end; margin: clamp(25px, 5vw, 85px) 0 clamp(26px, 3.5vw, 56px); }
.dv-intro h1 {
  margin: 0; font: normal 400 clamp(55px, 8.4vw, 138px)/.92 Georgia, "Times New Roman", serif;
  letter-spacing: -.077em; overflow-wrap: break-word;
}
.dv-intro p { margin: 0; max-width: 34ch; font: 400 clamp(15px, 1.35vw, 20px)/1.45 Arial, sans-serif; }
.dv-rule { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--dv-border); padding-top: 13px; color: var(--dv-subtle); }
.dv-sheet, .dv-films { margin-top: clamp(25px, 3.5vw, 52px); }
.dv-row { display: flex; gap: clamp(12px, 1.8vw, 30px); align-items: flex-start; margin-bottom: clamp(22px, 3vw, 48px); }
.dv-photo { flex: var(--ratio) 1 0; min-width: 0; margin: 0; }
.dv-single .dv-photo { max-width: min(100%, calc(var(--ratio) * 76vh)); }
.dv-open { position: relative; display: block; overflow: hidden; background: #ddddd3; color: #151a15; }
.dv-main a:focus-visible, .dv-viewer button:focus-visible { outline: 3px solid #946044; outline-offset: 4px; }
.dv-open img { display: block; width: 100%; height: auto; }
.dv-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f7f5ee; font: 22px/1 Arial, sans-serif; opacity: 0; }
.dv-open:hover .dv-zoom, .dv-open:focus-visible .dv-zoom { opacity: 1; }
.dv-photo figcaption { padding-top: 8px; color: var(--dv-subtle); font-size: 10px; }
.dv-next { border-top: 1px solid var(--dv-border); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; text-decoration: none; color: var(--dv-ink); margin: clamp(45px, 7vw, 115px) 0; padding-top: 20px; }
.dv-next > span:last-child { font: italic 400 clamp(30px, 5vw, 75px)/1.03 Georgia, serif; letter-spacing: -.05em; }
.dv-next i { font: 400 .65em/1 Arial, sans-serif; vertical-align: middle; }
.dv-next:hover > span:last-child { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 1px; }

.dv-viewer { background: #131612; color: #f7f5ee; width: 100%; height: 100%; max-width: none; max-height: none; inset: 0; margin: 0; padding: max(14px, env(safe-area-inset-top)) max(15px, 3vw) max(15px, env(safe-area-inset-bottom)); box-sizing: border-box; border: 0; }
.dv-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.dv-viewer::backdrop { background: #131612; }
body.dv-viewing { overflow: hidden; }
.dv-tools, .dv-controls { display: flex; align-items: center; }
.dv-tools { justify-content: space-between; }
.dv-tools > span { max-width: 65%; }
.dv-viewer button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: transparent; color: inherit; cursor: pointer; padding: 8px 12px; border: 1px solid #64675f; border-radius: 99px; min-height: 44px; min-width: 44px; }
.dv-viewer button:hover { border-color: currentColor; }
.dv-tools b { font: 24px/1 Arial, sans-serif; }
.dv-stage { display: grid; place-items: center; height: 100%; min-height: 0; }
.dv-stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.dv-controls { gap: 15px; justify-content: center; }
.dv-controls button { font: 22px/1 Arial, sans-serif; }
.dv-controls button[hidden] { display: none; }
.dv-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px) clamp(20px, 2vw, 32px); }
.dv-film { min-width: 0; }
.dv-film:first-child { grid-column: 1 / -1; }
.dv-film-screen { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; background: #20231d; border: 0; color: #f7f5ee; }
.dv-film-link { display: grid; place-items: center; overflow: hidden; text-decoration: none; position: relative; }
.dv-film-link img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv-play { z-index: 1; border: 1px solid #f7f5ee; background: #171a15a8; border-radius: 50%; width: clamp(48px, 6vw, 82px); height: clamp(48px, 6vw, 82px); display: grid; place-items: center; padding-left: 3px; font: 18px/1 Arial, sans-serif; }
.dv-film-caption { display: flex; align-items: baseline; gap: 16px; padding-top: 12px; }
.dv-film-caption .dv-kicker { white-space: nowrap; color: var(--dv-subtle); }
.dv-film-caption h2 { margin: 0; font: 400 clamp(22px, 2.2vw, 38px)/1.18 Georgia, serif; letter-spacing: -.035em; }
@media (max-width: 660px) {
  .dv-intro { grid-template-columns: 1fr; gap: 19px; }
  .dv-intro p { max-width: 40ch; }
  .dv-row { flex-direction: column; gap: 22px; }
  .dv-photo, .dv-single .dv-photo { width: 100%; max-width: none; }
  .dv-films { grid-template-columns: 1fr; }
  .dv-next { flex-direction: column; gap: 9px; }
}