@font-face {
  font-family: 'Romestone';
  src: url('../fonts/romestone.ttf');
}
@font-face {
  font-family: 'Delirium';
  src: url('../fonts/DELIRIUM.ttf');
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald.ttf');
}
@font-face {
  font-family: 'Playfair';
  src: url('../fonts/Playfair-Italic.ttf');
}

body {
  margin: 0;
  background: #d9d9dc;
  font-family: Oswald, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.poster {
  position: relative;
  width: 564px;
  height: 846px;
  background: #EBEBED;
  overflow: hidden;
}

.title {
  position: absolute;
  left: 28px;
  top: 26px;
  font-family: Romestone, serif;
  font-size: 96px;
  color: #3A3436;
  line-height: 0.92;
  transform: scaleX(1.04);
  transform-origin: left top;
}

.line {
  position: absolute;
  height: 1.5px;
  background: #A2A2A2;
}
.line1 { left: 28px; top: 133px; width: 384px; }
.line2 { left: 28px; top: 267px; width: 214px; }
.line3 { left: 268px; top: 267px; width: 272px; }
.line4 { left: 28px; top: 416px; width: 214px; }
.line5 { left: 28px; top: 601px; width: 214px; }
.line6 { left: 28px; top: 718px; width: 508px; }

.steps {
  position: absolute;
  left: 441px;
  top: 240px;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.steps-inner {
  transform: scaleX(0.728);
  transform-origin: left top;
}
.s-lbl {
  position: absolute;
  left: 130px; top: 0;
  font-size: 74px;
  color: #EDDF00;
  line-height: 0.82;
  white-space: nowrap;
}

.s-num {
  position: absolute;
  left: 0; top: 0;
  font-size: 74px;
  color: #3A3436;
  line-height: 0.82;
  white-space: nowrap;
}

.steps-cap {
  position: absolute;
  left: 515px;
  top: 240px;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.steps-cap-inner {
  font-family: Playfair, serif;
  font-style: italic;
  font-size: 19px;
  color: #3A3436;
  white-space: nowrap;
  transform: scaleX(0.55);
  transform-origin: left top;
}

.goods {
  position: absolute;
  left: 29px;
  font-family: Delirium, sans-serif;
  font-size: 55px;
  color: #3A3436;
  transform: scaleX(0.75);
  transform-origin: left top;
}
.g1 { top: 150px; }
.g2 { top: 202px; }

.dot {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #EDDF00;
}
.food {
  position: absolute;
  object-fit: fill;
}

.goods-list {
  position: absolute;
  left: 350px;
  top: 156px;
  font-size: 14px;
  color: #3A3436;
  list-style: none;
  margin: 0;
  padding: 0;
}
.goods-list li {
  padding-left: 18px;
  margin-bottom: 6px;
  position: relative;
}

.goods-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3A3436;
  transform: translateY(-50%);
}

.vbar {
  position: absolute;
  width: 12px;
  background: #EDDF00;
}
.vlabel {
  position: absolute;
  font-size: 12px;
  color: #3A3436;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}
.vlabel.gray { color: #6A6A6A; }

.small-title {
  position: absolute;
  left: 28px;
  top: 369px;
  font-family: Delirium, sans-serif;
  font-size: 39px;
  color: #3A3436;
  transform: scaleX(0.8);
  transform-origin: left top;
}

.note {
  position: absolute;
  font-family: Playfair, serif;
  font-style: italic;
  color: #3A3436;
}
.note-hot { left: 128px; top: 371px; font-size: 13px; width: 150px; line-height: 0.9; transform: scaleX(0.78); transform-origin: left top; }

.plist {
  position: absolute;
  left: 268px;
  font-family: Delirium, sans-serif;
  font-size: 39px;
  color: #3A3436;
}
.p1 { top: 278px; transform: scaleX(0.8); transform-origin: left top; }
.p2 { top: 320px; transform: scaleX(0.77); transform-origin: left top; }

.pie { position: absolute; }

.pnum {
  position: absolute;
  font-family: Oswald, sans-serif;
  line-height: 1;
  color: #3A3436;
}
.n1 { left: 488px; top: 394px; font-size: 36px; transform: translate(-50%,-50%); }
.n2 { left: 406px; top: 397px; font-size: 31px; transform: translate(-50%,-50%); }
.n3 { left: 408px; top: 329px; font-size: 25px; transform: translate(-50%,-50%); }
.n4 { left: 452px; top: 311px; font-size: 24px; transform: translate(-50%,-50%); }
.n5 { left: 487px; top: 321px; font-size: 19px; transform: translate(-50%,-50%); }

.legend {
  position: absolute;
  left: 268px;
  top: 360px;
  font-size: 12px;
  color: #3A3436;
  list-style: none;
  margin: 0;
  padding: 0;
  transform: scaleX(0.88);
  transform-origin: left top;
}
.legend li { white-space: nowrap; line-height: 1.4; }
.note-spotify { left: 269px; top: 454px; font-size: 11px; }

.hbar {
  position: absolute;
  height: 28px;
  background: #EDDF00;
}
.hlabel {
  position: absolute;
  left: 28px;
  font-family: Romestone, serif;
  font-size: 28px;
  line-height: 1;
  color: #3A3436;
}
.note-trans { left: 27px; top: 576px; font-size: 14px; white-space: nowrap; transform: scaleX(0.76); transform-origin: left top; }

.eat-box {
  position: absolute;
  left: 269.5px; top: 476.5px;
  width: 265px; height: 124px;
  border: 1.5px solid #A2A2A2;
}
.eat-title {
  position: absolute;
  left: 280px; top: 486px;
  font-family: Delirium, sans-serif;
  font-size: 39px;
  color: #3A3436;
  transform: scaleX(0.83);
  transform-origin: left top;
}
.note-eat { left: 412px; top: 488px; font-size: 11px; width: 122px; line-height: 1.1; }

.rest { position: absolute; }
.rest-inner {
  position: absolute;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.rest-name {
  position: absolute;
  left: 0; top: 0;
  font-size: 12px;
  color: #3A3436;
  white-space: nowrap;
}
.stars {
  position: absolute;
  left: 0; top: 17px;
  color: #EDDF00;
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.stars .half {
  display: inline-block;
  width: 0.52em;
  overflow: hidden;
}

.week {
  position: absolute;
  left: 28px;
  font-family: Delirium, sans-serif;
  font-size: 39px;
  color: #3A3436;
}
.w1 { top: 622px; transform: scaleX(0.82); transform-origin: left top; }
.w2 { top: 664px; transform: scaleX(0.77); transform-origin: left top; }
.area { position: absolute; }
.day {
  position: absolute;
  font-family: Playfair, serif;
  font-style: italic;
  font-size: 13px;
  color: #3A3436;
}

.big-time {
  position: absolute;
  top: 744px;
  font-family: Delirium, sans-serif;
  font-size: 97px;
  color: #3A3436;
  line-height: 1;
  transform: scaleX(1.06);
  transform-origin: left top;
}
.wake { left: 28px; }
.sleep { left: 356px; }
.arrow { position: absolute; }
.note-wake { font-size: 13px; white-space: nowrap; }