@font-face {
  font-family: "Parkly XW";
  src: url("../fonts/Parkly-ExtraWide.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Parkly Wide";
  src: url("../fonts/Parkly-Wide.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Parkly Cond";
  src: url("../fonts/Parkly-Condensed.woff2") format("woff2");
  font-display: swap;
}

:root {
  --paper: #F3E9D2;
  --pine: #1F3D2B;
  --rust: #C2603D;
  --gold: #E0A458;
  --dusk: #41678B;

  /* Derived tints — extra screens pulled from the same inks. */
  --pine-deep: #142A1D;
  --pine-light: #35604A;
  --gold-deep: #C08A3E;
  --dusk-deep: #2E4A66;

  /* Text-only ink: a deeper rust for small copy. --rust on --paper is 3.46:1,
     under WCAG AA's 4.5:1 for normal text (its 3:1-only uses — shadows,
     outlines, borders — are unaffected and keep using --rust). This is
     4.86:1 on --paper. */
  --rust-ink: #A6482B;

  --sans: "Helvetica Neue", Arial, sans-serif;

  /* Shared page measure. The masthead rules, the poster row and the colophon
     rule must all share one value or the three horizontal rules stop lining
     up. Widened at the same breakpoint that goes to four posters across. */
  --measure: 44rem;
}

@media (min-width: 80rem) {
  :root { --measure: 90rem; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 5vw, 4rem) 3rem;
  background: var(--paper);
  color: var(--pine);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.masthead {
  max-width: var(--measure);
  margin: 0 auto clamp(2rem, 6vw, 4rem);
  text-align: center;
  border-bottom: 6px solid var(--pine);
  padding-bottom: 0.6rem;
  position: relative;
}

/* The second rule of the period double-rule. */
.masthead::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 2px;
  background: var(--pine);
}

.masthead__kicker {
  margin: 0 0 0.4em;
  font-family: "Parkly Cond", var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--rust-ink);
  font-size: clamp(0.7rem, 2vw, 1rem);
}

.masthead__word {
  margin: 0;
  font-family: "Parkly XW", var(--sans);
  text-transform: uppercase;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.02em;
  font-size: clamp(2.6rem, 13vw, 9rem);
}

/* A centred wrap rather than a grid, so a part-full last row centres itself
   instead of hanging left. That is what lets any number of posters look
   deliberate: five reads as four and one, not as a row with a gap in it.
   Each basis is an exact share of the row, so a full row still spans the
   measure precisely and its edges stay flush with the masthead and colophon
   rules. Row counts step 1 -> 2 -> 4. */
.posters {
  --gap: clamp(1.25rem, 3vw, 2.25rem);
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.poster { flex: 0 1 100%; }

@media (min-width: 36rem) {
  .poster { flex-basis: calc((100% - var(--gap)) / 2); }
}

@media (min-width: 80rem) {
  .poster { flex-basis: calc((100% - 3 * var(--gap)) / 4); }
}

.poster {
  display: flex;
  flex-direction: column;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  text-decoration: none;
  color: var(--paper);
  background: var(--pine);
  border: 5px solid var(--pine);
  /* Offset shadow: the misregistration of a hand-pulled print. */
  box-shadow: 7px 7px 0 var(--rust);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.poster:hover {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--rust);
}

.poster:focus-visible {
  outline: 4px solid var(--rust);
  outline-offset: 4px;
}

.poster__scene {
  flex: 0 0 60%;
  width: 100%;
  min-height: 0;
  display: block;
}

.poster__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9rem 1rem;
  text-align: center;
}

.poster__name {
  margin: 0;
  font-family: "Parkly Wide", var(--sans);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
}

.poster__tag {
  margin: 0;
  font-family: "Parkly Cond", var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.35;
  color: var(--gold);
  font-size: clamp(0.62rem, 1.4vw, 0.78rem);
  min-height: 2.7em;
}

.poster__byline {
  margin: 0;
  padding: 0.55rem 0.5rem;
  background: var(--pine-deep);
  color: var(--paper);
  font-family: "Parkly Cond", var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  text-align: center;
  font-size: clamp(0.55rem, 1.2vw, 0.7rem);
}

.colophon {
  max-width: var(--measure);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--pine);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-family: "Parkly Cond", var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(0.6rem, 1.3vw, 0.75rem);
}

.colophon p { margin: 0; }

.colophon__mail {
  color: var(--rust-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--rust);
}

.colophon__mail:hover { color: var(--pine); border-color: var(--pine); }

.colophon__mail:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
}

/* Paper tooth. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .poster { transition: none; }
  .poster:hover { transform: none; }
}