:root {
  --bg: #EBEBED;
  --ink: #3A3436;
  --yellow: #EDDF00;
  --rule: #A2A2A2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
}

.poster {
  position: relative;
  width: min(100vw, calc(100dvh * 1133 / 1696));
  aspect-ratio: 1133 / 1696;
  overflow: hidden;
  container-type: inline-size;
  background: var(--bg);
  border-top: .18cqw solid #292629;
}

.display {
  margin: 0;
  color: var(--ink);
  font-family: 'League Gothic', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: .008em;
}

.condensed {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 400;
}

.serif {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}

.rule {
  position: absolute;
  height: .17cqw;
  min-height: 1px;
  background: var(--rule);
}

.hero {
  position: absolute;
  left: 4.95%;
  top: 1.8%;
  width: 70%;
  height: 10.2%;
  overflow: visible;
  font-size: 19cqw;
  line-height: .98;
  letter-spacing: .005em;
  transform: scaleX(.61);
  transform-origin: left top;
}

.rule-title { left: 4.95%; top: 15.72%; width: 67.85%; }

.steps-art {
  position: absolute;
  display: block;
}

.steps-art { left: 77.669%; top: 3.247%; width: 13.063%; height: 25.266%; }

.steps-note {
  position: absolute;
  left: 93.55%;
  top: 28.55%;
  width: 38%;
  height: 1.5%;
  transform: rotate(-90deg);
  transform-origin: left top;
  font-size: 2.3cqw;
  line-height: 1;
  white-space: nowrap;
}

.goods-title {
  position: absolute;
  left: 5%;
  top: 17.8%;
  width: 30%;
  font-size: 9cqw;
  line-height: .91;
  letter-spacing: -.012em;
  transform: scaleX(.62);
  transform-origin: left top;
}

.food {
  position: absolute;
  overflow: hidden;
}

.food img {
  display: block;
  width: 100%;
  height: 100%;
}

.food-figs { left: 33.1862%; top: 17.7476%; width: 12.3566%; height: 5.5425%; }
.food-salmon { left: 45.5428%; top: 17.7476%; width: 13.4157%; height: 5.5425%; }
.food-eggs { left: 33.8923%; top: 23.5849%; width: 11.6505%; height: 5.5425%; }
.food-avocado { left: 45.6311%; top: 23.5849%; width: 13.3275%; height: 5.5425%; }

.goods-list {
  position: absolute;
  left: 61.05%;
  top: 17.25%;
  margin: 0;
  padding-left: 2.3%;
  font-size: 3.05cqw;
  line-height: 1.4;
}

.goods-list li { padding-left: .15em; }
.rule-goods { left: 4.95%; top: 31.45%; width: 90.1%; }

.hotspots {
  position: absolute;
  left: 5%;
  top: 33.52%;
  width: 42.9%;
  height: 16.25%;
}

.spot {
  position: absolute;
  left: var(--x);
  bottom: 47.6%;
  width: 4.6%;
  height: var(--h);
}

.spot i {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--yellow);
}

.spot-label {
  position: absolute;
  bottom: 47.6%;
  left: calc(var(--label-x) + .86cqw);
  width: max-content;
  height: 1.72cqw;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 1.72cqw;
  line-height: 1;
  white-space: nowrap;
}

.hotspots-title {
  position: absolute;
  left: 0;
  top: 61.1%;
  font-size: 6cqw;
  line-height: .9;
  transform: scaleX(.65);
  transform-origin: left top;
}

.hotspots-note {
  position: absolute;
  left: 40.5%;
  top: 63.8%;
  font-size: 2.12cqw;
  line-height: 1.13;
  white-space: nowrap;
}

.rule-hotspots { left: 4.95%; top: 49.18%; width: 38%; }

.playlist-title {
  position: absolute;
  z-index: 3;
  left: 47.35%;
  top: 32.95%;
  font-size: 6cqw;
  line-height: .98;
}

.playlist-title span {
  display: block;
  transform-origin: left top;
}

.playlist-title span:first-child { transform: scaleX(.62); }
.playlist-title span:last-child { transform: scaleX(.68); }

.playlist {
  position: absolute;
  left: 47.35%;
  top: 42.22%;
  margin: 0;
  padding-left: 2.15%;
  font-size: 2.18cqw;
  line-height: 1.26;
}

.playlist li { padding-left: .2em; }

.spotify-note {
  position: absolute;
  left: 47.55%;
  top: 51.72%;
  font-size: 2.05cqw;
  line-height: 1;
}

.pie {
  position: absolute;
  left: 64.95%;
  top: 33.57%;
  width: 29.55%;
  aspect-ratio: 1;
}

.pie svg { display: block; width: 100%; height: 100%; }

.pie-number {
  position: absolute;
  z-index: 1;
  font-size: 4.8cqw;
  line-height: 1;
}

.pie-three { left: 21%; top: 20%; }
.pie-four { left: 47.5%; top: 9%; }
.pie-five { left: 69.5%; top: 15%; }
.pie-one { left: 70%; top: 55%; }
.pie-two { left: 21%; top: 61%; }

.transport {
  position: absolute;
  left: 5.15%;
  top: 51.55%;
  width: 39%;
  height: 19.35%;
}

.transport-row {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4.85cqw;
  display: flex;
  align-items: stretch;
}

.transport-row span {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  font-size: 5.7cqw;
  line-height: .9;
  transform: scaleX(.56);
  transform-origin: left top;
}

.transport-row i {
  position: absolute;
  z-index: 0;
  top: 0;
  display: block;
  height: 100%;
  background: var(--yellow);
}

.row-bus { top: 0; }
.row-bus i { left: 10.9%; width: 52.5%; }
.row-scooter { top: 5.95cqw; }
.row-scooter span { font-size: 5.55cqw; transform: scaleX(.6); }
.row-scooter i { left: 25.8%; width: 54%; }
.row-foot { top: 11.9cqw; }
.row-foot i { left: 15.5%; width: 80%; }
.row-car { top: 17.85cqw; }
.row-car i { left: 12.5%; width: 29.3%; }

.transport-note {
  position: absolute;
  left: 0;
  top: 24.1cqw;
  font-size: 2.12cqw;
  line-height: 1;
  white-space: nowrap;
}

.restaurants {
  position: absolute;
  z-index: 2;
  left: 47.75%;
  top: 56.18%;
  width: 46.8%;
  height: 14.83%;
  border: .15cqw solid var(--rule);
}

.restaurant-title {
  position: absolute;
  z-index: 4;
  left: 1.4%;
  top: 2.4%;
  font-size: 7.7cqw;
  line-height: .92;
  transform: scaleX(.51);
  transform-origin: left top;
}

.restaurant-note {
  position: absolute;
  top: 10.5%;
  left: 53.2%;
  font-size: 2.05cqw;
  line-height: 1.08;
  white-space: nowrap;
}

.ratings {
  position: absolute;
  left: 1.1%;
  right: .8%;
  top: 47%;
  height: 48%;
  display: flex;
  justify-content: space-between;
}

.rating {
  position: relative;
  width: 12%;
  height: 100%;
}

.venue {
  position: absolute;
  left: calc(50% + .89cqw);
  bottom: 0;
  width: max-content;
  height: 1.78cqw;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-size: 1.78cqw;
  line-height: 1;
  white-space: nowrap;
}

.stars {
  position: absolute;
  right: -2%;
  bottom: 0;
  color: var(--yellow);
  font-family: Arial, sans-serif;
  font-size: 2.65cqw;
  line-height: .98;
  text-align: center;
}

.wake-time,
.sleep-time {
  position: absolute;
  top: 87%;
  font-size: 17cqw;
  line-height: .94;
  letter-spacing: .012em;
  transform: scaleX(.74);
  transform-origin: left top;
}

.wake-time { left: 5.55%; }
.sleep-time { left: 62.7%; }

.time-a {
  display: inline-block;
  width: 3.884cqw;
  height: 13.0627cqw;
  vertical-align: baseline;
}

.sleep-arrow {
  position: absolute;
  left: 36.45%;
  top: 91.18%;
  width: 24.7%;
  height: 2.5%;
  overflow: visible;
}

.sleep-note {
  position: absolute;
  left: 36.5%;
  top: 89.78%;
  z-index: 1;
  font-size: 2.15cqw;
  line-height: 1.85;
  white-space: nowrap;
}

.commitments-title {
  position: absolute;
  left: 5.55%;
  top: 72.95%;
  z-index: 2;
  font-size: 6.7cqw;
  line-height: .91;
  transform: scaleX(.55);
  transform-origin: left top;
}

.area-chart {
  position: absolute;
  left: 5.7%;
  top: 74.16%;
  width: 89.3%;
  height: 10.65%;
  overflow: visible;
}

.day {
  position: absolute;
  z-index: 2;
  top: 83.18%;
  font-size: 2cqw;
  line-height: 1;
}

.day-m { left: 5.6%; }
.day-t { left: 27.2%; }
.day-w { left: 45.4%; }
.day-th { left: 63.7%; }
.day-f { left: 81.4%; }