@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Grenze+Gotisch:wght@500;600;700&display=swap');

:root {
  --black: #151515;
  --orange: #f47b20;
  --paper: #f2f0e9;
  --gray: #777;
  --line: rgba(21, 21, 21, .25);
}

* { box-sizing: border-box; }

html { background: var(--black); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--black);
  background: var(--black);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; }

.poster-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 30px 4vw 24px;
  overflow: hidden;
}

#dither-canvas {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}

.masthead, .site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.wordmark { font-family: 'Grenze Gotisch', Georgia, serif; font-size: 24px; font-weight: 600; letter-spacing: -.06em; text-decoration: none; text-transform: none; }
.masthead-meta { display: flex; gap: 38px; color: #aaa; }
.edition { color: var(--orange); }

.composition {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 110px 3.5vw 92px;
  overflow: visible;
  color: var(--paper);
  background: var(--black);
  isolation: isolate;
}

.composition-topline, .composition-bottomline { position: absolute; right: 3.5vw; left: 3.5vw; display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.composition-topline { top: 30px; }
.composition-bottomline { bottom: 30px; align-items: end; }
.crosshair { color: var(--orange); }.crosshair i { display: inline-block; width: 7px; height: 7px; margin: 0 3px; border: 1px solid currentColor; border-radius: 50%; }

.image-field { position: absolute; top: 16%; right: 5%; z-index: 1; width: 53%; height: 65%; overflow: hidden; background: var(--black); transform: rotate(2.5deg); }
#image-canvas { display: block; width: 100%; height: 100%; }

.composition-copy { position: relative; z-index: 2; width: 58%; padding-top: 5%; }
.kicker { display: flex; align-items: center; gap: 15px; margin: 0 0 24px; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .14em; }.kicker span { color: var(--paper); }
h1 { margin: 0; font-family: 'Barlow Condensed', Impact, sans-serif; font-size: clamp(3.5rem, 8.5vw, 8rem); font-weight: 800; line-height: .78; letter-spacing: -.045em; }.period { color: var(--orange); } h1 span { color: transparent; -webkit-text-stroke: 2px var(--paper); }
.subline { margin: 30px 0 0 5px; color: var(--orange); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 900; letter-spacing: -.02em; }
.annotation { color: var(--gray); font-size: 9px; line-height: 1.5; }.arrow { margin: 0 12% 0 auto; color: var(--orange); font-size: 29px; line-height: .7; }.index { color: var(--paper); font-size: 9px; letter-spacing: .11em; }
.registration { position: absolute; z-index: 4; color: var(--orange); font-size: 26px; }.registration-one { top: 17%; left: 2%; }.registration-two { right: 2%; bottom: 22%; font-size: 19px; }

.site-footer { padding-top: 0; }.site-footer nav { display: flex; gap: 24px; }.site-footer a { text-decoration: none; }.site-footer a:hover { color: var(--orange); }.site-footer a span { color: var(--orange); }

@media (max-width: 700px) {
  .poster-shell { padding: 20px 18px 18px; }.masthead-meta span:first-child { display: none; }.masthead-meta { gap: 0; }.wordmark { font-size: 14px; }
  .composition { padding: 110px 20px 92px; }.composition-topline { top: 22px; }.composition-bottomline { right: 20px; bottom: 22px; left: 20px; }
  .image-field { top: 37%; right: 3%; width: 94%; height: 38%; transform: rotate(1.5deg); }.composition-copy { width: 100%; padding-top: 26%; } h1 { font-size: clamp(3.25rem, 16vw, 6rem); }.subline { margin-top: 24px; }
  .annotation { max-width: 130px; }.arrow { margin-right: auto; margin-left: 9%; }.index { display: none; }.registration-one { top: 13%; }.registration-two { bottom: 25%; }
  .site-footer { align-items: end; font-size: 9px; }.site-footer > span { max-width: 100px; }.site-footer nav { flex-direction: column; gap: 5px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) { #dither-canvas { opacity: .25; } }