:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #262626;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-size: 1rem; }
img { display: block; max-width: 100%; }

.home { background: #355522; }
.landing { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.landing-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.landing-brand { position: absolute; top: 8.921svh; left: 50%; width: 23.516%; margin: 0; transform: translateX(-50%); line-height: 0; }
.landing-brand img { width: 100%; height: auto; }

.collection {
  --gutter: clamp(.625rem, .954vw, 1.5rem);
  --page-padding: clamp(1.25rem, 2.96663vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1.2em;
  padding: calc(var(--page-padding) + 1.2em) var(--page-padding) var(--page-padding);
  font-size: clamp(1rem, 1.2855vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
}
.collection-brand { grid-column: 1 / span 2; }
.collection-title { grid-column: 3 / span 8; margin: 0; font: inherit; }
.collection-figure { grid-column: 3 / span 8; margin: 0; min-width: 0; }
.collection-image { width: 100%; height: auto; background: #000; }
.collection-caption { margin-top: 1.2em; }
.collection-caption p { margin: 0; }
.collection-caption p + p { margin-top: var(--gutter); }

.not-found { display: grid; min-height: 100vh; place-content: center; padding: 2rem; text-align: center; }
.not-found h1 { margin: 0 0 1.5rem; font-size: 1.25rem; font-weight: 400; }
.not-found a { color: inherit; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible { outline: 2px solid #272679; outline-offset: 6px; }

@media (max-width: 640px) {
  .landing-brand { top: 7svh; width: min(70%, 350px); }
  .collection { grid-template-columns: 1fr; row-gap: 1.25rem; padding-top: 2rem; }
  .collection-brand, .collection-title, .collection-figure { grid-column: 1; }
  .collection-title { margin-top: .75rem; }
}