@font-face {
  font-family: "Anton";
  src: url("./assets/fonts/Anton-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Permanent Marker";
  src: url("./assets/fonts/PermanentMarker-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #111310;
  --paper: #eeeee4;
  --paint: #ed292e;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --brush: "Permanent Marker", "Segoe Print", cursive;
}

* { box-sizing: border-box; }

html { min-width: 280px; background: var(--ink); }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--display);
  isolation: isolate;
}

button { font: inherit; }

button:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 8px;
}

.backdrop, .wall-grain, .edge-wear {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.backdrop { z-index: -3; overflow: hidden; background: #171c13; }

.backdrop video, .video-still {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.09);
  filter: blur(6px) saturate(0.48) brightness(0.8);
}

.video-still {
  background: url("./assets/video-poster.jpg") center / cover no-repeat;
}

.frost {
  position: absolute;
  inset: 0;
  background: rgb(19 24 15 / 16%);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.darkness {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(7 9 7 / 37%), rgb(7 9 7 / 10%) 65%, rgb(7 9 7 / 42%)),
    linear-gradient(0deg, rgb(7 9 7 / 80%), transparent 33%, transparent 70%, rgb(7 9 7 / 65%));
}

.wall-grain {
  z-index: -2;
  opacity: 0.23;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.edge-wear {
  z-index: -1;
  box-shadow: inset 0 0 120px 22px rgb(0 0 0 / 45%);
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgb(0 0 0 / 5%) 5px 6px);
}

.ink-filters { position: absolute; width: 0; height: 0; overflow: hidden; }

.site-shell {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: 2100px;
  padding: clamp(24px, 3.5vw, 64px) clamp(24px, 5.4vw, 104px) 30px;
  margin: 0 auto;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.video-controls { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }

.control {
  position: relative;
  z-index: 0;
  min-height: 48px;
  padding: 8px 5px;
  border: 0;
  background: none;
  color: var(--paper);
  font-size: clamp(1.5rem, 1.7vw, 1.75rem);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.control::after {
  content: "";
  position: absolute;
  inset: auto 1px 3px;
  height: 3px;
  background: var(--paint);
  transform: rotate(-3deg) scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.control:hover::after, .control:focus-visible::after { transform: rotate(-3deg) scaleX(1); }

.sound-control { padding: 10px 15px; transform: rotate(2deg); }

.sound-control::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px -4px;
  background: var(--paint);
  clip-path: polygon(1% 10%, 17% 3%, 37% 9%, 67% 2%, 98% 6%, 96% 29%, 100% 56%, 97% 89%, 76% 95%, 45% 91%, 21% 98%, 2% 92%, 4% 67%, 0 43%);
  filter: url("#brushed-edge");
}

.poster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.24fr);
  align-items: center;
  gap: 3.5vw;
  flex: 1;
  padding: clamp(60px, 8vh, 120px) 0 64px;
}

.headline-wrap { position: relative; min-width: 0; transform: rotate(-2deg); }

.headline {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 15.45vw, 18rem);
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -0.025em;
  filter: url("#worn-ink");
}

.headline-word { display: block; width: fit-content; }

.american { position: relative; z-index: 2; }
.american .initial { color: var(--paint); }

.idiot {
  color: var(--paper);
  font-size: 1.58em;
  line-height: 0.96;
  margin-left: -0.015em;
  margin-top: 0.025em;
  letter-spacing: -0.03em;
}

.full-stop { margin-left: -0.06em; }
.idiot .initial { color: var(--paint); }

.paint-slash {
  position: absolute;
  top: 1%;
  left: -2.5%;
  width: 8%;
  height: 80%;
  background: rgb(238 238 228 / 4%);
  transform: rotate(21deg);
  filter: url("#brushed-edge");
}

.paint-underline {
  position: absolute;
  left: 0;
  bottom: -13px;
  width: 76%;
  height: clamp(8px, 1.1vw, 18px);
  background: var(--paint);
  transform: rotate(-1.7deg);
  clip-path: polygon(0 26%, 8% 12%, 20% 28%, 35% 9%, 52% 21%, 81% 0, 99% 22%, 98% 71%, 74% 85%, 50% 78%, 31% 100%, 10% 81%, 1% 100%);
  filter: url("#brushed-edge");
}

.rebel-note {
  position: relative;
  padding: 0 0 36px;
  font-family: var(--brush);
  font-size: clamp(2.75rem, 4.6vw, 5.5rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  transform: rotate(-9deg) translateY(6px);
  filter: url("#worn-ink");
}

.rebel-note span { display: block; }
.rebel-note span:nth-child(1) { color: var(--paint); }
.rebel-note span:nth-child(2) { padding-left: 3%; }
.rebel-note span:nth-child(3) { transform: rotate(4deg); }

.scrawled-cross {
  position: absolute;
  right: 14%;
  bottom: -30px;
  width: 74px;
  height: 74px;
  transform: rotate(7deg);
}

.scrawled-cross::before, .scrawled-cross::after {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 10px;
  background: var(--paint);
  clip-path: polygon(0 19%, 18% 0, 44% 28%, 79% 8%, 100% 31%, 94% 71%, 66% 92%, 26% 76%, 1% 100%);
  filter: url("#brushed-edge");
  transform: rotate(44deg);
}

.scrawled-cross::after { transform: rotate(-42deg); }

.poster-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; }

.footer-note {
  font-family: var(--brush);
  font-size: clamp(1.75rem, 2.5vw, 3rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
  transform: rotate(-2deg);
  filter: url("#worn-ink");
}

.paint-bars { display: flex; gap: 9px; padding-right: 6px; transform: rotate(16deg); }
.paint-bars i { display: block; width: 10px; height: 40px; background: var(--paint); filter: url("#brushed-edge"); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.video-unavailable #background-video { opacity: 0; }

.illustrated .masthead { justify-content: space-between; }
.stencil-stamps { display: flex; align-items: center; }
.stencil-stamps img { width: 88px; height: 88px; object-fit: contain; margin: -18px 0; transform: rotate(-11deg); }
.illustrated .poster { grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); column-gap: 1.5vw; row-gap: 24px; padding-top: 60px; padding-bottom: 40px; }
.illustrated .headline-wrap { grid-column: 1; grid-row: 1; z-index: 2; }
.illustrated .headline { font-size: clamp(4rem, min(15.45vw, 22svh), 18rem); }
.art-panel { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 0 -22%; width: 123%; position: relative; min-width: 0; align-self: center; }
.hero-art { display: block; width: 100%; height: clamp(440px, 63svh, 700px); object-fit: contain; transform: rotate(4deg); filter: drop-shadow(0 10px 16px rgb(0 0 0 / 25%)); }
.illustrated .rebel-note { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 0.25em; padding: 0; font-size: clamp(2rem, 3.25vw, 4rem); transform: rotate(-4deg); z-index: 2; }
.illustrated .rebel-note span:nth-child(2) { padding: 0; }
.illustrated .scrawled-cross { display: none; }
.footer-stencil { width: 75px; height: 75px; object-fit: contain; transform: rotate(13deg); margin: -10px 0; }

@media (min-width: 1800px) {
  .poster { gap: 90px; }
}

@media (max-width: 850px) {
  .site-shell { padding: 28px 6vw; }
  .poster { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 68px 0 46px; }
  .headline { font-size: clamp(4rem, 18.2vw, 9.5rem); }
  .idiot { font-size: 1.6em; }
  .rebel-note { display: flex; justify-content: flex-end; gap: 0.28em; padding: 0 6px 0 0; font-size: clamp(1.8rem, 5vw, 2.6rem); transform: rotate(-5deg); }
  .rebel-note span:nth-child(2) { padding-left: 0; }
  .scrawled-cross { display: none; }
  .paint-underline { width: 80%; }
  .footer-note { font-size: clamp(1.5rem, 4.5vw, 2rem); }
  .paint-bars { gap: 6px; }
  .paint-bars i { width: 7px; height: 30px; }
  .illustrated .poster { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 610px; padding-top: 64px; padding-bottom: 24px; }
  .illustrated .headline-wrap { align-self: start; }
  .illustrated .headline { font-size: clamp(4rem, 18.2vw, 9.5rem); }
  .illustrated .art-panel { position: absolute; grid-column: auto; grid-row: auto; top: 30%; right: 0; width: 65%; height: 55%; margin: 0; }
  .hero-art { height: 100%; }
  .illustrated .rebel-note { grid-row: 3; justify-content: flex-start; flex-wrap: wrap; font-size: clamp(1.65rem, 5vw, 2.4rem); }
  .stencil-stamps img { width: 64px; height: 64px; margin: -10px 0; }
  .footer-stencil { width: 60px; height: 60px; }
}

@media (max-width: 460px) {
  .masthead { gap: 16px; flex-wrap: wrap; }
  .video-controls { gap: 16px; }
  .control { font-size: 1.5rem; }
  .sound-control { padding: 10px; }
  .headline { font-size: 18.2vw; }
  .poster { padding-top: 74px; }
  .rebel-note { font-size: clamp(1.65rem, 7vw, 2.4rem); flex-wrap: wrap; }
  .poster-footer { gap: 16px; }
  .footer-note { font-size: clamp(1.5rem, 5.3vw, 2rem); }
  .stencil-stamps img { width: 50px; height: 50px; margin: 0; }
  .illustrated .masthead { gap: 10px; }
  .illustrated .poster { min-height: 600px; padding-top: 46px; }
  .illustrated .headline { font-size: 18.2vw; }
  .illustrated .art-panel { top: 32%; height: 53%; }
  .footer-stencil { width: 52px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .control::after { transition: none; }
}