/* One house, explored room by room. The photographs carry the feature. */
.miami { --miami-ink:#26352e; --miami-sage:#c9d4c0; background:var(--miami-ink); color:var(--paper); padding:90px var(--gutter) 72px; overflow:clip; }
.miami-heading { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:40px; margin-bottom:42px; }
.miami .eyebrow { color:var(--miami-sage); margin-bottom:20px; }
.miami-heading h2 { font-size:clamp(88px,12vw,184px); line-height:.9; letter-spacing:-.065em; }
.miami-intro { max-width:380px; justify-self:end; padding-bottom:6px; }
.miami-intro h3 { font:400 clamp(24px,2.6vw,38px)/1.22 var(--display); letter-spacing:-.02em; margin-bottom:16px; }
.miami-intro p { font-size:12px; line-height:1.9; color:var(--miami-sage); max-width:340px; }
.miami-exhibit { display:grid; grid-template-columns:minmax(0,1fr) minmax(185px,23%); gap:24px; align-items:start; }
.miami-room { min-width:0; }
.miami-frame { display:block; position:relative; overflow:hidden; background:#a49786; aspect-ratio:1.5; }
.miami-frame > img { width:100%; height:100%; object-fit:cover; }
.miami-frame::after { content:''; position:absolute; inset:55% 0 0; pointer-events:none; background:linear-gradient(transparent,rgba(17,26,21,.55)); }
.miami-photo-label { position:absolute; bottom:24px; left:26px; z-index:1; font-size:10px; letter-spacing:.15em; }
.miami-expand { position:absolute; bottom:18px; right:20px; z-index:1; width:44px; height:44px; display:grid; place-items:center; background:var(--paper); color:var(--miami-ink); border-radius:50%; font-size:23px; }
.miami-rooms { display:flex; justify-content:space-between; gap:10px; margin-top:17px; border-bottom:1px solid #657165; }
.miami-rooms button { position:relative; background:none; border:0; padding:12px 0 17px; font-size:12px; color:var(--miami-sage); }
.miami-rooms button::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--paper); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease-out); }
.miami-rooms button[aria-pressed=true] { color:#fff; }
.miami-rooms button[aria-pressed=true]::after,.miami-rooms button:hover::after { transform:scaleX(1); }
.miami-room-note { min-height:46px; margin-top:17px; color:var(--miami-sage); font-size:11px; line-height:1.8; }
.miami-film { padding-top:56px; }
.miami-film-cover { position:relative; display:block; aspect-ratio:9/16; overflow:hidden; background:#b99c7b; }
.miami-film-cover > img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.miami-film-cover::after { content:''; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(17,26,21,.65)); pointer-events:none; }
.miami-film-cover:hover > img { transform:scale(1.05); }
.miami-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:66px; height:66px; border:1px solid rgba(255,255,255,.8); border-radius:50%; display:grid; place-items:center; background:rgba(38,53,46,.25); backdrop-filter:blur(5px); z-index:1; }
.miami-play svg { width:18px; height:22px; margin-left:4px; fill:#fff; }
.miami-film-tag { position:absolute; bottom:20px; left:18px; right:18px; display:flex; justify-content:space-between; z-index:1; font-size:9px; letter-spacing:.13em; color:#fff; }
.miami-film-title { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:15px; font-size:13px; }
.miami-film > p { margin-top:8px; font-size:10px; line-height:1.8; color:var(--miami-sage); }
.miami-film-credit { display:inline-block; font-size:9px; line-height:1.7; margin-top:10px; color:var(--miami-sage); text-decoration:underline; text-underline-offset:3px; }
.miami-footer { display:flex; justify-content:space-between; align-items:center; gap:28px; border-top:1px solid #657165; padding-top:26px; margin-top:28px; }
.miami-footer p { font-size:12px; color:var(--miami-sage); }
.miami-footer .text-link { color:var(--paper); font-size:12px; }
.miami a:focus-visible,.miami button:focus-visible { outline-color:var(--miami-sage); }
.miami-footer .text-link:hover,.miami-film-title:hover { color:#fff; }
.miami-film-dialog { border:0; padding:0; width:min(480px,calc(100vw - 28px)); max-width:none; max-height:calc(100dvh - 28px); background:var(--miami-ink,#26352e); color:var(--paper); overflow:auto; }
.miami-film-dialog::backdrop { background:rgba(12,22,16,.88); backdrop-filter:blur(8px); }
.miami-film-top { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 18px; }
.miami-film-top h2 { font:400 16px/1.4 var(--sans); letter-spacing:0; }
.miami-film-close { border:0; background:none; color:inherit; min-height:40px; padding:5px 0 5px 15px; font-size:12px; }
.miami-film-dialog video { display:block; width:100%; height:min(69dvh,720px); background:#101b14; object-fit:contain; }
.miami-film-bottom { padding:16px 18px 20px; font-size:10px; line-height:1.8; color:#c9d4c0; }
.miami-film-bottom a { text-decoration:underline; text-underline-offset:3px; }
.miami-film-bottom p + p { margin-top:9px; }
.miami-video-error { color:#fff; }
.miami-film-dialog :focus-visible { outline-color:#c9d4c0; }
.project-dialog[data-project="miami"] .dialog-top { position:sticky; top:0; z-index:2; background:var(--paper); }
.project-dialog[data-project="miami"] .dialog-thumbnails { max-height:180px; overflow-y:auto; padding:6px; margin-left:-6px; margin-right:-6px; }
@media(max-width:1000px) { .miami-exhibit { gap:18px; grid-template-columns:minmax(0,1fr) 23%; } .miami-film { padding-top:36px; } .miami-rooms button { font-size:11px; } .miami-photo-label { left:18px; bottom:21px; } }
@media(max-width:760px) {
  .miami { padding-top:64px; padding-bottom:52px; }
  .miami-heading { gap:28px; margin-bottom:29px; grid-template-columns:1fr; }
  .miami-heading h2 { font-size:clamp(83px,18vw,130px); }
  .miami-intro { max-width:none; justify-self:start; }
  .miami-intro h3 { font-size:28px; margin-bottom:12px; }
  .miami-intro p { max-width:430px; }
  .miami-exhibit { grid-template-columns:1fr; gap:24px; }
  .miami-frame { aspect-ratio:1.15; }
  .miami-rooms { gap:14px; flex-wrap:wrap; justify-content:flex-start; border:0; margin-top:12px; row-gap:0; }
  .miami-rooms button { font-size:12px; padding:10px 0; }
  .miami-room-note { min-height:0; margin-top:17px; }
  .miami-film { display:grid; grid-template-columns:minmax(110px,32%) minmax(0,1fr); column-gap:24px; padding:25px 0 0; border-top:1px solid #657165; align-content:center; }
  .miami-film-cover { grid-row:1 / 5; aspect-ratio:9/13; }
  .miami-film-title { align-self:end; margin:0; font-size:16px; line-height:1.4; }
  .miami-film > p { align-self:start; font-size:11px; }
  .miami-film-credit { margin-top:12px; font-size:9px; align-self:start; }
  .miami-film-tag { bottom:12px; left:12px; right:12px; font-size:8px; }
  .miami-film-tag span:first-child { display:none; }
  .miami-play { width:46px; height:46px; }
  .miami-play svg { width:13px; height:17px; }
  .miami-footer { align-items:flex-start; flex-direction:column; gap:15px; margin-top:25px; padding-top:20px; }
}
@media(min-width:1800px) { .miami { padding-left:max(var(--gutter),calc((100vw - 1624px)/2)); padding-right:max(var(--gutter),calc((100vw - 1624px)/2)); } }
@media print { .miami { background:#fff; color:#252925; } .miami-rooms,.miami-film-dialog { display:none; } }