.art-page{height:100vh;height:100dvh;overflow:hidden;background:#fff;color:var(--ink)}
.art-page .masthead{background:var(--paper)}
.art-scroll{position:fixed;inset:var(--frame);overflow-y:auto;overscroll-behavior:contain;z-index:1;padding:0 var(--carousel-edge) 8vh}

.art-intro{width:50%;margin:0 auto;padding:calc(var(--head-h) + 36px) 0 clamp(46px,5vw,72px);font-size:clamp(10px,.76vw,12px);font-weight:300;line-height:1.58;letter-spacing:.025em;text-align:left;text-transform:none}
.art-intro p{margin:0}
.art-statement{width:50%;margin:0 auto;padding:clamp(36px,4.5vw,72px) 0 clamp(64px,9vw,128px);font-size:clamp(13px,1.02vw,16px);font-weight:300;line-height:1.58;letter-spacing:.025em;text-align:left;text-transform:none}
.art-statement p{margin:0 0 1.55em}
.art-statement p:first-child{font-size:clamp(16px,1.3vw,20px);line-height:1.45;margin-bottom:clamp(42px,5vw,72px)}

.art-project{border-top:1px solid var(--ink);padding-top:11px}
.art-controls{display:flex;align-items:flex-start;gap:5px;height:var(--control-h);margin:0 0 8px}
.art-controls svg{width:8.25px;height:9.75px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:square;stroke-linejoin:miter}
.art-controls .play-icon{display:none;fill:currentColor;stroke:none}
.art-controls.paused .pause-icon{display:none}
.art-controls.paused .play-icon{display:block}

.art-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;height:min(780px,calc(100dvh - var(--head-h) - 150px));min-height:300px}
.art-photo,.art-right,.art-film{position:relative;min-width:0;height:100%;background:var(--paper)}
.art-photo{overflow:hidden}
.art-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity .5s linear}
.art-photo img.active{opacity:1}
.art-right{display:flex;align-items:center;justify-content:center;overflow:visible}
.art-film{display:flex;align-items:center;justify-content:center;overflow:visible}
.art-film video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:var(--paper)}
.art-secondary-photo{position:relative;display:none;width:100%;height:100%;overflow:hidden;background:var(--paper)}
.art-secondary-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;opacity:0;transition:opacity .5s linear}
.art-secondary-photo img.active{opacity:1}
.art-media.photo-pair-project .art-film{display:none}
.art-media.photo-pair-project .art-secondary-photo{display:block}
.art-media.portrait-film .art-film{justify-content:flex-end}
.art-media.portrait-film .art-film video{width:auto!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center!important}
.art-media.film-only-project{grid-template-columns:1fr}
.art-media.film-only-project>.art-photo{display:none}
.art-media.film-only-project .art-film video{width:100%!important;height:100%!important}

/* Same caption hierarchy and offset as Photo Architecture. */
.art-meta{margin-top:18px;color:var(--ink);font-size:10px;font-weight:300;line-height:1.25;letter-spacing:.04em;text-transform:none;white-space:nowrap}
.art-meta strong{font-weight:600}
.art-meta span{font-weight:300}

@media (min-width:641px){
  .art-scroll{display:grid;grid-template-columns:minmax(230px,32%) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(42px,6vw,110px);align-items:start;padding:var(--head-h) var(--pad-x) 0}
  .art-intro{grid-column:1;grid-row:1;width:auto;margin:calc(var(--control-h) - 4px) 0 0;padding:0;font-size:clamp(13px,1.02vw,16px);text-align:justify}
  .art-statement{grid-column:1;grid-row:1;width:auto;margin:clamp(190px,24vh,310px) 0 0;padding:0;text-align:justify}
  .art-statement p,.art-statement p:first-child{font-size:clamp(10px,.76vw,12px);line-height:1.58;margin-bottom:clamp(13px,1.02vw,16px)}
  .art-project{grid-column:2;grid-row:1;display:grid;grid-template-rows:var(--control-h) minmax(0,1fr) auto;justify-items:center;align-content:start;height:calc(100dvh - var(--frame) * 2 - var(--head-h) - 26px);min-height:0;border:0;padding:0}
  .art-controls,.art-media,.art-meta{width:var(--art-table-width,100%);max-width:100%;justify-self:center}
  .art-controls{grid-row:1;align-self:start;margin:0}
  .art-media{grid-row:2;grid-template-columns:var(--art-photo-column,1fr) var(--art-film-column,1fr);height:var(--art-table-height,auto);min-height:0;align-self:start}
  .art-photo img{object-position:left center}
  .art-secondary-photo img{object-position:right center}
  .art-meta{grid-row:3;margin-top:18px;overflow:visible}
  .art-media.film-only-project{grid-template-columns:1fr;width:var(--art-table-width,100%);height:var(--art-table-height,auto);align-self:start}
  .art-media.film-only-project,.art-media.film-only-project .art-right,.art-media.film-only-project .art-film{min-height:0;max-height:100%;overflow:hidden}
  .art-media.film-only-project+.art-meta{width:var(--art-table-width,100%)}
}

@media (max-width:640px){
  .art-page{height:100svh}
  .art-page .masthead{position:fixed;z-index:3}
  .art-scroll{top:calc(var(--frame) + var(--head-h));right:var(--frame);bottom:var(--frame);left:var(--frame);padding:0 var(--pad-x) 60px}
  .art-intro{width:auto;margin:0;padding:9px 0 18px;font-size:13px;line-height:1.52}
  .art-statement{width:auto;margin:0;padding:18px 0 var(--carousel-edge);font-size:9.5px;line-height:1.55}
  .art-statement p,.art-statement p:first-child{font-size:9.5px;line-height:1.55;margin-bottom:13px}
  .art-project{border:0;padding:0}
  .art-controls{display:flex!important;height:18px;margin:0 0 8px}
  .art-media{height:calc(100svh - var(--head-h) - 116px);min-height:0;gap:8px}
  .art-photo,.art-right,.art-film,.art-secondary-photo{min-height:0}
  .art-meta{margin-top:7px;font-size:8.5px;line-height:1.35;letter-spacing:.04em}
}

@media (prefers-reduced-motion:reduce){.art-photo img{transition:none}}