:root {
  --poster-red: #ff4c22;
  --type-red: #5e170c;
}

@font-face {
  font-family: "Editorial New";
  src: url("assets/fonts/EditorialNew-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Cardone";
  src: url("assets/fonts/CardoneTrial-ThinItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 100;
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: white;
  color: var(--type-red);
  font-family: "DM Sans", Arial, sans-serif;
}

.poster {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.event-copy {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 20px 25px 28px;
  background-color: var(--poster-red);
  font-family: "Arial Black", Arial, sans-serif;
}

.holepunch {
  position: absolute;
  z-index: 10;
  width: 23px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 5px 5px 9px rgba(0, 0, 0, .10), 2px 2px 0 rgba(255, 255, 255, .18);
  transform: translate(-50%, -50%) scale(0);
  animation: punch .22s cubic-bezier(.2, .9, .25, 1.25) forwards;
  pointer-events: none;
}

.holepunch-chad {
  background: var(--poster-red);
  box-shadow: 1px 2px 3px rgba(94, 23, 12, .22);
  transform: translate(-50%, -50%) scale(1);
  animation: none;
}

@keyframes punch {
  to { transform: translate(-50%, -50%) scale(1); }
}

h1,
.venue,
footer { position: relative; z-index: 2; margin: 0; font-weight: 500; letter-spacing: -0.065em; }

h1 {
  display: none;
}

.exhibition-title {
  position: absolute;
  z-index: 4;
  top: 13%;
  left: 6%;
  width: 90%;
  margin: 0;
  color: var(--type-red);
  font-family: "Cardone", serif;
  font-size: clamp(2rem, min(6.5vw, 11vh), 8rem);
  font-style: italic;
  font-weight: 100;
  letter-spacing: 0em;
  line-height: .82;
  text-align: left;
  white-space: nowrap;
}

.hero-photo {
  position: absolute;
  z-index: 1;
  top: 20%;
  right: 11%;
  width: 56%;
  height: 59%;
  object-fit: cover;
  object-position: 54% center;
}

.event-brand {
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 25px;
  width: 3.2664vw;
  min-width: 25px;
  aspect-ratio: 516 / 437;
  outline: none;
}

.event-logo {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  transition: opacity 180ms ease;
}

.event-logo-chair { opacity: 1; }
.event-logo-wordmark { opacity: 0; }

.event-brand:hover .event-logo-chair,
.event-brand:focus-visible .event-logo-chair { opacity: 0; }

.event-brand:hover .event-logo-wordmark,
.event-brand:focus-visible .event-logo-wordmark { opacity: 1; }

.event-brand:focus-visible::after {
  content: "";
  position: absolute;
  inset: -4px;
  width: calc(100% * 2262 / 516);
  border: 2px solid currentColor;
  pointer-events: none;
}

.photographs {
  position: absolute;
  top: 93px;
  left: min(31.1vw, 516px);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.photo {
  width: 129px;
  height: 186px;
  background-image: url("assets/reference.png");
  background-repeat: no-repeat;
  background-size: 1656px 1088px;
}

.photo-one { background-position: -516px -93px; }
.photo-two { background-position: -654px -93px; }

.venue {
  position: absolute;
  z-index: 2;
  left: 6%;
  bottom: 5%;
  max-width: 90%;
  font-size: clamp(1.08rem, min(3.2vw, 5.6vh), 3.76rem);
  line-height: .86;
  text-transform: uppercase;
}

.rsvp-link {
  display: inline-block;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
}

.time-range {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .12em;
  white-space: nowrap;
}

.time-rule {
  flex: 1 1 auto;
  min-width: 1em;
  border-top: .09em solid currentColor;
}

footer {
  position: absolute;
  bottom: 29px;
  left: 25px;
  right: 25px;
  display: flex;
  gap: clamp(20px, 4.8vw, 80px);
  font-size: clamp(.8rem, 1.12vw, 1.25rem);
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.caption-board {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .85fr);
  align-items: start;
  gap: clamp(10px, 1.15vw, 20px);
  padding: 14px 14px 24px;
  overflow: hidden;
}

.caption {
  min-width: 0;
  color: var(--type-red);
  font-family: Arial, sans-serif;
  font-size: clamp(.48rem, min(1.02vw, 1.45vh), 1.08rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.caption-one,
.caption-two,
.caption-three,
.caption-four { margin-top: 0; }

.caption p { margin: 0 0 1.35em; }

.caption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .12em;
}

.instagram-link {
  position: absolute;
  z-index: 11;
  right: 14px;
  bottom: 10px;
  color: var(--type-red);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: clamp(.5rem, .72vw, .78rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.instagram-link:hover,
.instagram-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: .14em;
}

.caption-image {
  display: block;
  width: 100%;
  max-height: 28vh;
  height: auto;
  object-fit: contain;
  object-position: left top;
  margin-bottom: 12px;
}

@media (max-width: 760px) {
  html,
  body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
  .poster {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 100svh auto;
  }
  .event-copy { height: 100svh; min-height: 100svh; padding: 12px; }
  .exhibition-title { top: 15%; font-size: clamp(2.1rem, 9.75vw, 3.3rem); }
  .hero-photo { top: 25%; right: 6%; width: 68%; height: 54%; }
  .event-brand { top: 18px; left: 18px; width: 3.2664vw; min-width: 16px; }
  .venue { bottom: 2.5%; left: 6%; max-width: 92%; font-size: clamp(1.17rem, 5.7vw, 1.62rem); }
  .rsvp-link { display: inline-flex; min-height: 40px; align-items: center; padding-right: .4em; }
  footer { left: 18px; right: 18px; bottom: 18px; display: grid; gap: 3px; font-size: .82rem; white-space: normal; }
  .caption-board {
    min-width: 0;
    min-height: 100svh;
    height: auto;
    gap: 4px;
    padding: 6px 5px 28px;
    overflow: visible;
  }
  .caption { font-size: clamp(.52rem, 2.2vw, .72rem); line-height: 1.08; }
  .caption p { margin-bottom: .8em; }
  .caption-image { max-height: 24vh; margin-bottom: 5px; }
  .instagram-link { right: 6px; bottom: 5px; font-size: clamp(.42rem, 1.3vw, .58rem); }
  .caption-one,
  .caption-two,
  .caption-three,
  .caption-four { margin-top: 0; }
}