/* One full-screen image. The quote is part of the artwork, so the frame keeps it whole:
   wide screens fill edge to edge, narrow/portrait screens show the full picture on the dusk tone. */
:root { color-scheme: dark; --dusk: #1a1d24; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--dusk); }

main, figure { height: 100%; margin: 0; }
figure { display: grid; place-items: center; overflow: hidden; }

picture, img { display: block; width: 100%; height: 100%; }
img { object-fit: cover; object-position: 50% 50%; }

/* the quote spans about 65% of the image width: below 16:10 the cover crop would cut it */
@media (max-aspect-ratio: 16/10) {
  img { position: relative; object-fit: contain; }
  /* the space above and below is filled with the same scene, blurred and dimmed */
  figure { position: relative; }
  figure::before {
    content: ""; position: absolute; inset: -40px;
    background: url("images/cliffhouse-800.jpg") center / cover no-repeat;
    filter: blur(28px) brightness(.5) saturate(1.1);
  }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}