/* Fonts the Squarespace stylesheet asks for by name, self-hosted.
   Source Sans Pro is now published as Source Sans 3 (same design).
   trajan-pro-3 (the site title) came from a Typekit kit tied to the old domain;
   Cinzel is the closest free match. */
@font-face { font-family: "Source Sans Pro"; src: url(/fonts/source-sans-3.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans Pro"; src: url(/fonts/source-sans-3-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url(/fonts/source-code-pro.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Abel"; src: url(/fonts/abel.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "trajan-pro-3"; src: url(/fonts/cinzel.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* Squarespace's image loader sized these with script; plain CSS does the same job. */
.image-block-wrapper.has-aspect-ratio img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.content-fill { position: relative; overflow: hidden; }
.content-fill img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sqs-gallery-block-stacked .image-wrapper img { display: block; width: 100%; height: auto; cursor: zoom-in; }

/* Video block */
.sqs-video-wrapper.vv-video { position: relative; height: 0; overflow: hidden; cursor: pointer; }
.vv-video .sqs-video-overlay, .vv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vv-video .sqs-video-overlay img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gallery page: two columns, 20px gutters, stills at their own 2.35:1 */
.vv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vv-grid img { display: block; width: 100%; height: auto; cursor: zoom-in; }
@media screen and (max-width: 640px) { .vv-grid { grid-template-columns: 1fr; } }

.vv-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.vv-lightbox img { max-width: 94vw; max-height: 94vh; }

/* Header: the template's script laid the four nav links out two either side of the
   title. A grid does it here: [1fr][link][link][title][link][link][1fr]. */
@media screen and (min-width: 770px) {
  #header .header-inner { display: grid; grid-template-columns: 1fr auto auto auto auto auto 1fr; align-items: center; column-gap: 20px; }
  #header #headerNav, #header #mainNavWrapper, #header #mainNavigation { display: contents; }
  #header #siteTitleWrapper { grid-column: 4; grid-row: 1; position: static; transform: none; left: auto; max-width: none; margin: 0 10px; }
  #mainNavigation .collection:nth-child(1) { grid-column: 2; grid-row: 1; }
  #mainNavigation .collection:nth-child(2) { grid-column: 3; grid-row: 1; }
  #mainNavigation .collection:nth-child(3) { grid-column: 5; grid-row: 1; }
  #mainNavigation .collection:nth-child(4) { grid-column: 6; grid-row: 1; }
  #header .mobile-nav-toggle-label { display: none; }
}