/* Archive layer for the static copy of the Squarespace portfolio (v1).
   Replaces what Squarespace's runtime JS used to do, and adds the archive banner. */

/* Headings were set in Orpheus Pro, an Adobe Fonts face licensed through
   Squarespace that can't be self-hosted. Cormorant Garamond (OFL) stands in. */
@font-face {
  font-family: 'Archive Heading';
  src: url('/archive/v1/_archive/fonts/cormorant-garamond-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archive Heading';
  src: url('/archive/v1/_archive/fonts/cormorant-garamond-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
:root {
  --heading-font-font-family: 'Archive Heading', 'orpheus-pro', Georgia, serif;
}

/* Grid gallery: column layout was set inline by Squarespace JS */
.gallery-grid[data-columns] .gallery-grid-wrapper {
  display: grid;
  grid-template-columns: repeat(var(--archive-cols, 3), 1fr);
  gap: var(--archive-gap, 0.5vw);
  padding: 0 var(--archive-gap, 0.5vw);
  box-sizing: border-box; /* the side padding was making it wider than the page */
}

/* Archive banner: a red bar along the bottom of every page. It can't be closed
   or collapsed, so it's always clear this is the old site. */
.archive-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 20px;
  background: #C63A17;
  color: #FFFFFF;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.archive-banner__title { font-weight: 600; }
.archive-banner__years { flex: 1; min-width: 12ch; opacity: 0.85; }
.archive-banner a {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid #FFFFFF;
  white-space: nowrap;
}
.archive-banner a:hover,
.archive-banner a:focus-visible { color: #191919; border-bottom-color: #191919; }
.archive-banner a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
/* Room at the bottom of the page so the bar never covers the site's footer */
body { padding-bottom: var(--archive-banner-h, 48px) !important; }
@media (max-width: 600px) {
  /* Two lines on a phone: the title, then both links */
  .archive-banner { padding: 10px 16px; gap: 6px 18px; font-size: 11px; }
  .archive-banner__title { flex-basis: 100%; }
  .archive-banner__years { display: none; }
}

/* Previous / Next project links at the foot of a project: on a phone the
   project name couldn't shrink, so the arrow poked past the screen edge. */
@media (max-width: 767px) {
  .item-pagination-link .pagination-title-wrapper { min-width: 0; }
  .item-pagination-link .item-pagination-title { overflow-wrap: anywhere; }
}

/* Squarespace scroll animations: blocks start at opacity 0 and wait for the
   runtime JS to reveal them in view. With the JS gone they'd stay hidden, so
   show them in their final state. */
.image-block-outer-wrapper[class*="animation-"] .image-block-wrapper,
.image-block-outer-wrapper[class*="animation-"] .image-caption-wrapper,
.image-block-outer-wrapper[class*="animation-"] .image-cap,
.image-block-outer-wrapper[class*="animation-"] .image-title-wrapper,
.image-block-outer-wrapper[class*="animation-"] .image-subtitle-wrapper,
.image-block-outer-wrapper[class*="animation-"] .image-button-wrapper,
.image-block-outer-wrapper[class*="animation-"] .image-inset,
.image-block-outer-wrapper[class*="animation-"] .sqs-dynamic-text-container {
  opacity: 1 !important;
  transform: none !important;
}