@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;600;700&display=swap");

/* homepage only */

body.home {
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  color: #ddd;
}

.home-poster {
  position: relative;
  width: 100vw;
  max-width: 680px;
  height: 100svh;
  min-height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}

.poster-link {
  position: absolute;
  z-index: 10;
  color: #ddd;
  text-decoration: none;
  padding: 8px;
  margin: -8px;
}

.poster-link:hover {
  color: #fff;
}

.poster-ig {
  position: absolute;
  right: 7%;
  top: 5%;
  z-index: 20;
  display: block;
  width: clamp(24px, 6vmin, 32px);
  height: clamp(24px, 6vmin, 32px);
  border: 1px solid rgba(221, 221, 221, 0.82);
  border-radius: 30%;
  text-decoration: none;
}

.poster-ig::before {
  content: "";
  position: absolute;
  left: 26%;
  top: 26%;
  width: 42%;
  height: 42%;
  border: 1px solid rgba(221, 221, 221, 0.82);
  border-radius: 50%;
}

.poster-ig::after {
  content: "";
  position: absolute;
  right: 20%;
  top: 20%;
  width: 12%;
  height: 12%;
  background: rgba(221, 221, 221, 0.82);
  border-radius: 50%;
}

.poster-ig:hover,
.poster-ig:hover::before {
  border-color: #fff;
}

.poster-ig:hover::after {
  background: #fff;
}

.poster-main-name {
  position: absolute;
  left: 8%;
  top: 31.5%;
  z-index: 4;
  margin: 0;
  color: #e8e8e8;
  font-family: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(54px, 15.8vmin, 112px);
  line-height: 0.82;
  letter-spacing: 0.015em;
  font-weight: normal;
  transform: scaleX(0.86);
  transform-origin: left center;
}

.poster-bio {
  left: 7%;
  top: 22.5%;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(24px, 7.4vmin, 46px);
  line-height: 1;
  font-style: italic;
  letter-spacing: 0.42em;
  padding-bottom: 0.8svh;
  border-bottom: 1px solid rgba(221, 221, 221, 0.72);
}

.poster-publications {
  right: 7%;
  top: 18%;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 3vmin, 18px);
  line-height: 1;
  letter-spacing: 0.22em;
  font-weight: 300;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.poster-dispatches {
  left: 9%;
  top: 62.5%;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  font-size: clamp(11px, 3.3vmin, 21px);
  line-height: 1;
  letter-spacing: 0.34em;
  font-weight: 400;
}

.poster-dispatches::after {
  content: "";
  position: absolute;
  left: -1vw;
  right: -13vw;
  bottom: -1.4svh;
  height: 1px;
  background: rgba(221, 221, 221, 0.45);
  transform: rotate(4deg);
  pointer-events: none;
}

.poster-food {
  left: 53%;
  top: 62.5%;
  min-width: 120px;
  text-align: left;
}

.poster-food .food-small {
  display: block;
  margin-left: 2px;
  margin-bottom: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(14px, 4vmin, 28px);
  line-height: 1;
  font-style: italic;
  letter-spacing: 0.52em;
}

.poster-food .food-big {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(36px, 10.6vmin, 74px);
  line-height: 0.92;
}

.poster-misc {
  left: 7%;
  top: 76%;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  font-size: clamp(17px, 5vmin, 32px);
  line-height: 1;
  letter-spacing: 0.22em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 300;
}

.poster-contact {
  right: 7%;
  bottom: 7%;
  font-family: "Space Grotesk", Arial, Helvetica, sans-serif;
  font-size: clamp(13px, 4vmin, 28px);
  line-height: 1;
  letter-spacing: 0.44em;
  padding-bottom: 1.5svh;
  border-bottom: 1px solid rgba(221, 221, 221, 0.72);
  font-weight: 300;
}

.poster-decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.poster-circle {
  border: 1px solid rgba(221, 221, 221, 0.28);
  border-radius: 50%;
}

.poster-circle-name {
  left: -19%;
  top: 19%;
  width: clamp(230px, 72vmin, 330px);
  height: clamp(230px, 72vmin, 330px);
}

.poster-circle-dispatches {
  left: 4%;
  top: 60%;
  width: clamp(230px, 72vmin, 330px);
  height: clamp(100px, 28vmin, 160px);
  opacity: 0.58;
}

.poster-line {
  width: 1px;
  background: rgba(221, 221, 221, 0.32);
}

.poster-line-right {
  right: 25%;
  top: 25%;
  height: 47%;
}

.poster-line-diagonal {
  left: 42%;
  top: 59%;
  width: 64vw;
  height: 1px;
  transform: rotate(29deg);
  transform-origin: left center;
}

.poster-dot {
  width: clamp(8px, 2.5vmin, 12px);
  height: clamp(8px, 2.5vmin, 12px);
  border-radius: 50%;
  background: #ddd;
}

.poster-dot-one {
  left: 25%;
  top: 29%;
}

.poster-dot-two {
  right: 20%;
  top: 68%;
}