@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500&family=Playfair+Display:ital@1&display=swap");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: #d8d8dc;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
}

:root {
  --paper: #ebebed;
  --ink: #3a3436;
  --yellow: #eddf00;
  --gray: #a2a2a2;
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --normal: "Oswald", "Arial Narrow", sans-serif;
  --italic: "Playfair Display", Georgia, serif;
}

.poster {
  position: relative;
  width: 564px;
  height: 846px;
  flex: 0 0 564px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.main-title {
  position: absolute; top: 13px; left: 27px;
  width: 505px; height: 121px; margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400; font-size: 96px; line-height: 1; letter-spacing: 1px;
  white-space: nowrap; transform: scaleX(0.62) scaleY(1.1); transform-origin: left top;
}

.steps-word {
  position: absolute; left: 490px; top: 20px; width: 100px; height: 126px;
  font-family: var(--display); font-size: 58px; color: var(--yellow); line-height: 1;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.steps-number {
  position: absolute; left: 490px; top: 110px; width: 100px; height: 126px;
  font-family: var(--display); font-size: 58px; color: var(--ink); line-height: 1;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.steps-caption {
  position: absolute; left: 545px; top: 20px; margin: 0; width: 15px; height: 228px;
  font-family: var(--italic); font-size: 8px; line-height: 1.1;
  writing-mode: vertical-rl; transform: rotate(180deg);
}

.rule { position: absolute; height: 1.5px; background: var(--gray); }
.rule-top { left: 28px; top: 145px; width: 384px; }
.rule-hot { left: 28px; top: 280px; width: 214px; }
.rule-playlist { left: 268px; top: 280px; width: 272px; }
.rule-transport { left: 28px; top: 430px; width: 214px; }
.rule-week { left: 28px; top: 600px; width: 214px; }

.goods-title {
  position: absolute; left: 28px; top: 165px; width: 160px; margin: 0;
  font-family: var(--display); font-size: 24px; font-weight: 400;
  line-height: 1.05; word-wrap: break-word;
}
.food-list {
  position: absolute; left: 360px; top: 165px; margin: 0;
  padding-left: 22px; font-family: var(--normal); font-size: 15px; line-height: 1.6;
}
.food-box { position: absolute; width: 70px; height: 50px; }
.figs-box { left: 200px; top: 165px; }
.salmon-box { left: 275px; top: 165px; }
.eggs-box { left: 200px; top: 215px; }
.avocado-box { left: 275px; top: 215px; }

.yellow-circle {
  position: absolute; top: 0; right: 0; width: 42px; height: 42px;
  border-radius: 50%; background: var(--yellow); z-index: 1;
}

.food-photo {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 58px; height: 44px; object-fit: cover;
  display: block;
  font-size: 0; 
}
.figs-box .food-photo { width: 53px; height: 43px; }
.salmon-box .food-photo { width: 69px; height: 42px; }
.eggs-box .food-photo { width: 58px; height: 49px; }
.avocado-box .food-photo { top: 4px; width: 64px; height: 37px; }

.hot-chart { position: absolute; left: 28px; top: 296px; width: 214px; height: 69px; }
.hot-bar { position: absolute; bottom: 0; background: var(--yellow); }
.hot1 { left: 18px; width: 12px; height: 69px; }
.hot2 { left: 56px; width: 12px; height: 61px; }
.hot3 { left: 93px; width: 13px; height: 29px; }
.hot4 { left: 130px; width: 12px; height: 13px; }
.hot5 { left: 165px; width: 12px; height: 21px; }
.hot6 { left: 202px; width: 12px; height: 9px; }

.hot-name {
  position: absolute; bottom: 0; font-family: var(--normal); font-size: 9.5px;
  line-height: 1; white-space: nowrap; transform: rotate(-90deg); transform-origin: left bottom;
}
.hn1 { left: 11px; } .hn2 { left: 49px; color: #666; } .hn3 { left: 86px; }
.hn4 { left: 123px; } .hn5 { left: 158px; } .hn6 { left: 195px; }

.hot-title {
  position: absolute; left: 28px; top: 380px; margin: 0;
  font-family: var(--display); font-size: 30px; font-weight: 400; line-height: 1;
}
.hot-caption { position: absolute; left: 126px; top: 385px; width: 125px; }
.italic { margin: 0; font-family: var(--italic); font-style: italic; font-size: 9px; line-height: 1.15; }

.playlist-title {
  position: absolute; left: 268px; top: 296px; margin: 0;
  font-family: var(--display); font-size: 28px; font-weight: 400; line-height: 0.95;
}
.playlist-list {
  position: absolute; left: 263px; top: 368px; width: 105px; margin: 0;
  padding-left: 16px; font-family: var(--normal); font-size: 9px; line-height: 1.45;
}
.spotify { position: absolute; left: 268px; top: 446px; }

.pie-chart-box {
  position: absolute; left: 367px; top: 300px; width: 167px; height: 167px;
  border-radius: 50%; overflow: hidden;
}
.pie-chart-box img { width: 100%; height: 100%; object-fit: cover; display: block; font-size: 0; }

.transport-title {
  position: absolute; left: 28px; top: 445px; z-index: 3; margin: 0;
  font-family: var(--display); font-size: 28px; font-weight: 400; line-height: 1.25;
}
.transport-chart { position: absolute; left: 55px; top: 448px; }
.transport-bar { position: absolute; height: 28px; background: var(--yellow); }
.bus { top: 0; left: 0; width: 115px; }
.scooter { top: 34px; left: 29px; width: 117px; }
.foot { top: 68px; left: 6px; width: 175px; }
.car { top: 102px; left: 0; width: 64px; }
.transport-caption { position: absolute; left: 28px; top: 568px; width: 240px; }

.restaurant-box {
  position: absolute; left: 269px; top: 488px; width: 266px; height: 125px;
  border: 1px solid var(--gray);
}
.restaurant-title {
  position: absolute; left: 9px; top: 7px; margin: 0;
  font-family: var(--display); font-size: 26px; font-weight: 400; white-space: nowrap;
}
.restaurant-caption { position: absolute; left: 140px; top: 11px; width: 118px; font-size: 8px; }
.restaurant-data {
  position: absolute; left: 8px; right: 5px; bottom: 5px; height: 66px;
  display: flex; justify-content: space-between;
}
.restaurant-item { position: relative; width: 29px; height: 66px; }
.restaurant-name {
  position: absolute; left: 0; bottom: 0; height: 61px;
  font-family: var(--normal); font-size: 8px; line-height: 1;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
}
.stars {
  position: absolute; left: 14px; bottom: 0; color: var(--yellow);
  font-size: 12px; line-height: 0.88; writing-mode: vertical-rl; transform: rotate(180deg);
}

.weekly-title {
  position: absolute; left: 30px; top: 615px; z-index: 3; margin: 0;
  font-family: var(--display); font-size: 27px; font-weight: 400; line-height: 0.92;
}
.weekly-chart-box {
  position: absolute; left: 30px; top: 665px; width: 507px; height: 90px; overflow: hidden;
}
.weekly-chart-box img { width: 100%; height: 100%; object-fit: fill; display: block; font-size: 0; }

.weekday {
  position: absolute; top: 765px; z-index: 4;
  font-family: var(--italic); font-size: 9px; font-style: italic;
}
.day-m { left: 30px; } .day-t { left: 151px; } .day-w { left: 255px; }
.day-th { left: 359px; } .day-f { left: 455px; }

.wake-time, .sleep-time {
  position: absolute; top: 795px;
  font-family: var(--display); font-size: 72px; line-height: 1;
  letter-spacing: -1px; white-space: nowrap;
  transform: scaleX(0.8); transform-origin: left top;
}
.wake-time { left: 27px; }
.sleep-time { left: 354px; }

.time-caption {
  position: absolute; left: 205px; top: 817px; width: 140px;
  display: flex; flex-direction: column; gap: 12px;
  font-family: var(--italic); font-size: 8px; font-style: italic;
}

.arrow {
  position: absolute; left: 75px; top: 10px;
  width: 55px; height: 1.5px; background: #999;
}
.arrow::after {
  content: ''; position: absolute; right: -1px; top: -4px;
  width: 9px; height: 9px; border-top: 1.5px solid #999;
  border-right: 1.5px solid #999; transform: rotate(45deg);
}

@media (max-width: 700px) {
  body { 
    justify-content: center; 
    padding: 0; 
    overflow-x: hidden; 
  }
  .poster {
    transform: scale(0.7);
    transform-origin: top center;
  }
}