:root {
  --bg: #ebebed;
  --ink: #3a3436;
  --sun: #eddf00;
  --fog: #a2a2a2;
  --display: "Romestone", "Oswald", sans-serif;
  --numeral: "Delirium", "Oswald", sans-serif;
  --small: "Oswald", "Segoe UI", sans-serif;
  --script: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: #d8d8d8;
  display: flex;
  justify-content: center;
  padding: 30px 12px;
  color: var(--ink);
}

.poster { position: relative; width: 564px; height: 846px; background: var(--bg); overflow: hidden; flex: 0 0 auto; }
.masthead {
  position: absolute;
  left: 27px; top: 27px;
  width: 510px; height: 90px;
  font: 400 90px/0.8 var(--display);
  letter-spacing: 0.96px;
  text-transform: uppercase;
}

.step-counter-word, .step-counter-num {
  position: absolute;
  left: 436px;
  width: 126px; height: 100px;
  font: 400 98.285px/1.053 var(--numeral);
  letter-spacing: 0.983px;
  transform: rotate(-90deg);
  transform-origin: left top;
}
.step-counter-word { top: 141px; color: var(--sun); }
.step-counter-num  { top: 254px; color: var(--ink); }
.step-counter-note {
  position: absolute; left: 529px; top: 238px;
  width: 228px; height: 42px;
  font: italic 400 10.342px/1.15 var(--script);
  transform: rotate(-90deg); transform-origin: left top;
}

.food-block { position: absolute; left: 28px; top: 133px; width: 384px; height: 134px; }

.food-block::before, .spots-block::before, .playlist-block::before,
.transit-block::before, .week-block::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 100%; height: 1.5px; background: var(--fog);
}
.week-block::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--fog); }

.block-heading { font: 400 32.563px/0.89 var(--display); letter-spacing: 0.326px; }
.food-block .block-heading {
  position: absolute; left: 0; top: 30px;
  width: 243px; height: 122px;
  font-size: 46.194px;
  text-transform: uppercase;
}

.food-dots i { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: var(--sun); }
.food-dots i:nth-child(1) { left: 185px; top: 19px; }
.food-dots i:nth-child(2) { left: 185px; top: 68px; }
.food-dots i:nth-child(3) { left: 261px; top: 19px; }
.food-dots i:nth-child(4) { left: 261px; top: 68px; }

.food-pic { position: absolute; z-index: 1; margin: 0; }
.food-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.food-pic-a { left: 161px; top: 20px; width: 53px; height: 43px; }
.food-pic-b { left: 161px; top: 66px; width: 58px; height: 49px; }
.food-pic-c { left: 230px; top: 20px; width: 69px; height: 42px; }
.food-pic-d { left: 230px; top: 72px; width: 64px; height: 37px; }

.food-key {
  position: absolute; left: 312px; top: 18px;
  width: 80px; height: 75px; padding-left: 22px;
  list-style: none;
  font: 400 15px/1.6 var(--small);
}

.spots-block { position: absolute; left: 28px; top: 267px; width: 214px; height: 149px; }
.spots-bars { position: absolute; left: 0; top: 19px; width: 214px; height: 70px; }
.bar { position: absolute; bottom: 0; width: 14px; height: var(--h, 0px); background: var(--sun); }
.bar:nth-child(1) { left: 18px; } .bar:nth-child(2) { left: 56px; }
.bar:nth-child(3) { left: 93px; } .bar:nth-child(4) { left: 130px; }
.bar:nth-child(5) { left: 165px; } .bar:nth-child(6) { left: 202px; }
.bar span {
  position: absolute; left: -16px; top: 69px;
  width: 61.5px; height: 13.667px;
  font: 400 11.711px/1.053 var(--small);
  text-transform: uppercase; white-space: nowrap;
  transform: rotate(-90deg); transform-origin: left top;
}
.spots-block .block-heading { position: absolute; left: 0; top: 100px; width: 171px; height: 38px; text-transform: uppercase; }
.block-note { font: italic 400 10.342px/1.15 var(--script); }
.spots-block .block-note { position: absolute; left: 98px; top: 105px; width: 122px; height: 42px; }

.playlist-block { position: absolute; left: 268px; top: 267px; width: 272px; height: 187px; }
.playlist-block .block-heading { position: absolute; left: 0; top: 13px; width: 171px; height: 75px; text-transform: uppercase; }
.playlist-rank {
  position: absolute; left: -5px; top: 90px;
  width: 94px; height: 75px; padding-left: 15.5px;
  font: 400 10.342px/1.4 var(--small); list-style-position: inside;
}
.playlist-pie { position: absolute; left: 96px; top: 12px; width: 170px; height: 174px; }
.playlist-pie svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.playlist-pie path { fill: var(--sun); stroke: var(--bg); stroke-width: 2; }
.pie-num { position: absolute; font-family: var(--numeral); line-height: 0.89; color: var(--ink); }
.pie-num-1 { left: 121px; top: 101.5px; font-size: 43px; }
.pie-num-2 { left: 37px; top: 105.6px; font-size: 37px; }
.pie-num-3 { left: 40.4px; top: 40.4px; font-size: 30px; }
.pie-num-4 { left: 83.9px; top: 23.8px; font-size: 27px; }
.pie-num-5 { left: 121.2px; top: 34.2px; font-size: 23px; }
.playlist-block .block-note { position: absolute; left: 0; top: 169px; width: 241px; height: 18px; }

.transit-block { position: absolute; left: 28px; top: 416px; width: 214px; height: 185px; }
.transit-rows { position: absolute; inset: 0; list-style: none; }
.transit-rows li {
  position: absolute; left: 0; height: 28px;
  font: 400 32.563px/0.89 var(--display);
  text-transform: uppercase;
}
.transit-rows li:nth-child(1) { top: 17px; }
.transit-rows li:nth-child(2) { top: 51px; }
.transit-rows li:nth-child(3) { top: 85px; }
.transit-rows li:nth-child(4) { top: 119px; }
.transit-rows span { position: relative; z-index: 2; }
.transit-rows i { position: absolute; top: 3px; z-index: 1; height: 28px; background: var(--sun); }
.transit-rows li:nth-child(1) i { left: 27px; width: 115px; }
.transit-rows li:nth-child(2) i { left: 56px; width: 117px; }
.transit-rows li:nth-child(3) i { left: 33px; width: 175px; }
.transit-rows li:nth-child(4) i { left: 27px; width: 64px; }
.transit-block .block-note { position: absolute; left: -1px; top: 157px; width: 241px; height: 18px; }

.eats-block {
  position: absolute; left: 269px; top: 476px;
  width: 266px; height: 125px;
  border: 1.5px solid var(--fog);
}
.eats-block .block-heading { position: absolute; left: 9px; top: 7px; width: 203px; height: 41px; text-transform: uppercase; }
.eats-note { position: absolute; left: 141px; top: 12px; width: 122px; height: 42px; }
.eats-grid {
  position: absolute; left: 18px; top: 54px;
  width: 244px; height: 68px;
  display: flex; justify-content: space-between; list-style: none;
}
.eats-grid li { position: relative; width: 25px; height: 68px; flex: 0 0 25px; }
.eats-stars {
  position: absolute; left: 14px; bottom: 7px;
  width: 11px; color: var(--sun);
  font: 12px/11px Arial, sans-serif;
  writing-mode: vertical-rl; text-orientation: upright;
}
.eats-name {
  position: absolute; left: 0px; top: 47px;
  width: 68px; height: 14px;
  font: 400 11.711px/1.053 var(--small);
  text-transform: uppercase; white-space: nowrap;
  transform: rotate(-90deg); transform-origin: left bottom;
}
.week-block { position: absolute; left: 28px; top: 601px; width: 508px; height: 118px; }
.week-block .block-heading { position: absolute; left: 2px; top: 18px; width: 171px; height: 38px; text-transform: uppercase; z-index: 2; }
.week-area { position: absolute; left: 2px; top: 28px; width: 507px; height: 90px; display: block; }
.week-fill { fill: var(--sun); }
.week-line { fill: none; stroke: none; }
.week-axis { position: absolute; left: 2px; top: 101px; width: 445px; height: 18px; list-style: none; }
.week-axis li { position: absolute; font: italic 400 10.342px/1.15 var(--script); }
.week-axis li:nth-child(1) { left: 0; }
.week-axis li:nth-child(2) { left: 121px; }
.week-axis li:nth-child(3) { left: 225px; }
.week-axis li:nth-child(4) { left: 329px; }
.week-axis li:nth-child(5) { left: 425px; }
.rhythm { position: absolute; left: 27px; top: 741px; width: 534px; height: 101px; }
.rhythm-time {
  position: absolute;
  font: 400 98.285px/1.053 var(--numeral);
  white-space: nowrap; color: var(--ink);
}
.rhythm-time:first-child { left: 0; top: 1px; width: 179px; }
.rhythm-time:last-child { left: 327px; top: 0; width: 207px; }
.rhythm-note {
  position: absolute; left: 178px; top: 22px;
  width: 135px; height: 50px;
  font: italic 400 10.342px/1.15 var(--script);
}
.rhythm-arrow {
  position: absolute; left: 0; top: 9px;
  width: 135px; height: 22px;
  font-style: normal; color: var(--fog);
  font-family: var(--small); font-size: 16px; text-align: center;
}

@media (max-width: 700px) {
  body { padding: 8px; overflow-x: auto; }
  .poster { transform: scale(0.62); transform-origin: top center; margin-bottom: -322px; }
}