@font-face {
  font-family: "Signifier";
  src: url("type/signifier-regular-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ground: #c9b494;
  --ink: #2f2821;
  --plate: #ffffff;
  --size: 20px;
  --leading: 1.6;
  --edge-x: 40px;
  --edge-y: 32px;

  --collage-width: 90vw;
  --collage-ratio: 1296 / 323;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: var(--edge-y) var(--edge-x);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: "Signifier", "Iowan Old Style", Palatino, "Palatino Linotype",
    Georgia, ui-serif, serif;
  font-style: italic;
  font-size: var(--size);
  line-height: var(--leading);
}

p {
  margin: 0;
}

.row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.row p {
  white-space: nowrap;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.statement {
  margin-bottom: 80px;
  text-align: center;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:focus-visible {
  outline: none;
}

/* Collage ------------------------------------------------------------------ */

.collage {
  position: relative;
  width: var(--collage-width);
  aspect-ratio: var(--collage-ratio);
  isolation: isolate;
}

.plate,
.shot {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
}

.plate {
  background: var(--plate);
}

/* Multiply over the white plates makes the overlaps composite like stacked
   transparencies instead of occluding one another. */
.shot {
  object-fit: cover;
  mix-blend-mode: multiply;
}

.slot-newspaper {
  --l: 0%;
  --t: 17.9567%;
  --w: 26.8519%;
  --h: 71.517%;
}

.slot-denver {
  --l: 23.3025%;
  --t: 0%;
  --w: 37.5772%;
  --h: 100%;
}

.slot-tshirt {
  --l: 56.25%;
  --t: 8.9783%;
  --w: 29.1667%;
  --h: 77.709%;
}

.slot-pig {
  --l: 84.4136%;
  --t: 3.4056%;
  --w: 15.5864%;
  --h: 94.4272%;
}

/* The Figma frame is a fixed landscape composition. On anything narrow or
   portrait the row flattens to an illegible strip, so it folds into a cluster. */
@media (max-width: 900px), (max-aspect-ratio: 5 / 4) {
  :root {
    --edge-x: 22px;
    --edge-y: 24px;
    --collage-width: 92vw;
    --collage-ratio: 1 / 1;
  }

  .statement {
    margin-bottom: 20px;
  }

  .slot-denver {
    --l: 8%;
    --t: 4%;
    --w: 60%;
    --h: 39.78%;
  }

  .slot-newspaper {
    --l: 0%;
    --t: 34%;
    --w: 52%;
    --h: 34.48%;
  }

  .slot-pig {
    --l: 62%;
    --t: 20%;
    --w: 28%;
    --h: 42.14%;
  }

  .slot-tshirt {
    --l: 40%;
    --t: 52%;
    --w: 54%;
    --h: 35.8%;
  }
}

@media (max-width: 380px) {
  :root {
    --size: 17px;
  }

  .row {
    gap: 1rem;
  }
}