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

body {
  background: #d4d4d4;
  display: flex;
  justify-content: center;
  padding: 24px 12px;
  font-family: "Oswald", sans-serif;
  color: #2b2729;
}

.poster {
  position: relative;
  width: 564px;
  height: 846px;
  background: #ececec;
  overflow: hidden;
  flex-shrink: 0;
}

/* ============ 顶部报头 ============ */
.masthead {
  position: absolute;
  left: 28px; top: 26px;
  font-family: "Bebas Neue", "Oswald", sans-serif;
  font-size: 70px;
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: -1px;
  white-space: nowrap;
}

/* 步数竖排 */
.steps-word, .steps-num {
  position: absolute;
  right: 26px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 72px;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.steps-word { top: 20px; color: #EDDF00; }
.steps-num  { top: 155px; color: #2b2729; }
.steps-note {
  position: absolute;
  right: 6px; top: 25px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 9px;
  writing-mode: vertical-rl;
  color: #555;
}

/* ============ 食物区 ============ */
.food {
  position: absolute;
  left: 28px; top: 138px;
  width: 508px; height: 120px;
  border-top: 1.5px solid #b5b5b5;
}
.food-title {
  position: absolute; left: 0; top: 28px;
  width: 185px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  line-height: 0.9;
  text-transform: uppercase;
}
.dots i {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #EDDF00;
}
.dots i:nth-child(1) { left: 195px; top: 22px; }
.dots i:nth-child(2) { left: 195px; top: 72px; }
.dots i:nth-child(3) { left: 275px; top: 22px; }
.dots i:nth-child(4) { left: 275px; top: 72px; }
.pic { position: absolute; z-index: 1; object-fit: cover; }
.pic-a { left: 196px; top: 28px; width: 50px; height: 36px; }
.pic-b { left: 196px; top: 78px; width: 54px; height: 40px; }
.pic-c { left: 278px; top: 28px; width: 60px; height: 36px; }
.pic-d { left: 278px; top: 78px; width: 56px; height: 36px; }
.food-list {
  position: absolute; left: 370px; top: 22px;
  list-style: disc;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
}

/* ============ 热地点柱状图 ============ */
.spots {
  position: absolute;
  left: 28px; top: 268px;
  width: 220px; height: 180px;
}
.bars {
  position: absolute; left: 0; top: 10px;
  width: 220px; height: 80px;
}
.bar {
  position: absolute; bottom: 0;
  width: 14px;
  background: #EDDF00;
}
.bar-jacobs   { left: 6px;  height: 78px; }
.bar-soda     { left: 42px; height: 68px; }
.bar-dwinelle { left: 78px; height: 30px; }
.bar-cheit    { left: 114px; height: 14px; }
.bar-mlk      { left: 150px; height: 22px; }
.bar-kresge   { left: 186px; height: 10px; }
.bar span {
  position: absolute;
  left: 50%; bottom: -26px;
  transform: translateX(-50%) rotate(-90deg);
  transform-origin: center center;
  font-size: 10px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #2b2729;
  letter-spacing: 0.5px;
}
.spots-title {
  position: absolute; left: 0; top: 132px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 32px;
  line-height: 0.9;
  text-transform: uppercase;
}
.spots-note {
  position: absolute; left: 95px; top: 137px;
  width: 125px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 11px;
  line-height: 1.3;
  color: #444;
}

/* ============ 歌单饼图 ============ */
.playlists {
  position: absolute;
  left: 270px; top: 268px;
  width: 266px; height: 190px;
}
.playlists-title {
  position: absolute; left: 0; top: 6px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 32px;
  line-height: 0.9;
  text-transform: uppercase;
}
.pie {
  position: absolute; left: 120px; top: 0;
  width: 150px; height: 155px;
}
.pie svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pie path { fill: #EDDF00; stroke: #ececec; stroke-width: 2; }
.pie b {
  position: absolute;
  font-family: "Bebas Neue", sans-serif;
  color: #2b2729;
  line-height: 1;
}
.pie .n1 { left: 108px; top: 88px; font-size: 38px; }
.pie .n2 { left: 30px;  top: 92px; font-size: 34px; }
.pie .n3 { left: 34px;  top: 30px; font-size: 26px; }
.pie .n4 { left: 74px;  top: 14px; font-size: 24px; }
.pie .n5 { left: 110px; top: 26px; font-size: 20px; }
.playlists-list {
  position: absolute; left: 0; top: 95px;
  width: 115px;
  padding-left: 16px;
  font-size: 10.5px;
  line-height: 1.55;
  font-weight: 300;
}
.playlists-note {
  position: absolute; left: 0; top: 178px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 11px;
  color: #444;
}

/* ============ 出行方式 ============ */
.transit {
  position: absolute;
  left: 28px; top: 460px;
  width: 220px; height: 150px;
}
.transit-list { list-style: none; }
.transit-list li {
  position: absolute; left: 0;
  height: 30px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
  z-index: 1;
}
.transit-list li:nth-child(1) { top: 0; }
.transit-list li:nth-child(2) { top: 38px; }
.transit-list li:nth-child(3) { top: 76px; }
.transit-list li:nth-child(4) { top: 114px; }
.transit-list i {
  position: absolute; height: 22px;
  background: #EDDF00;
  z-index: 0;
}
.transit-list li:nth-child(1) i { left: 30px; top: 4px; width: 110px; }
.transit-list li:nth-child(2) i { left: 62px; top: 4px; width: 110px; }
.transit-list li:nth-child(3) i { left: 36px; top: 4px; width: 170px; }
.transit-list li:nth-child(4) i { left: 30px; top: 4px; width: 55px; }
.transit-note {
  position: absolute; left: 0; top: 148px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 11px;
  color: #444;
}

/* ============ 餐厅评分 ============ */
.eats {
  position: absolute;
  left: 270px; top: 475px;
  width: 266px; height: 128px;
  border: 1.5px solid #b5b5b5;
}
.eats-title {
  position: absolute; left: 10px; top: 8px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  line-height: 0.9;
  text-transform: uppercase;
}
.eats-note {
  position: absolute; left: 160px; top: 10px;
  width: 100px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 10.5px;
  line-height: 1.25;
  color: #444;
}
.eats-grid {
  position: absolute; left: 16px; top: 50px;
  width: 234px; height: 68px;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
.eats-grid li {
  position: relative;
  width: 24px; height: 68px;
}
.stars {
  position: absolute; left: 0; bottom: 4px;
  color: #EDDF00;
  font: 10px/9px Arial, sans-serif;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 1px;
}
.name {
  position: absolute; left: 13px; top: 50px;
  font-size: 9.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  letter-spacing: 0.5px;
}

/* ============ 每周时间 ============ */
.week {
  position: absolute;
  left: 28px; top: 615px;
  width: 508px; height: 110px;
  border-top: 1.5px solid #b5b5b5;
  border-bottom: 1.5px solid #b5b5b5;
}
.week-title {
  position: absolute; left: 2px; top: 12px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  line-height: 0.9;
  text-transform: uppercase;
  z-index: 2;
}
.week-chart {
  position: absolute; left: 2px; top: 42px;
  width: 504px; height: 60px;
}
.week-chart path { fill: #EDDF00; }
.week-days {
  position: absolute; left: 2px; top: 96px;
  width: 500px;
  list-style: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 10px;
}
.week-days li { position: absolute; }
.week-days li:nth-child(1) { left: 4px; }
.week-days li:nth-child(2) { left: 128px; }
.week-days li:nth-child(3) { left: 248px; }
.week-days li:nth-child(4) { left: 352px; }
.week-days li:nth-child(5) { left: 460px; }

/* ============ 底部作息 ============ */
.foot {
  position: absolute;
  left: 28px; top: 745px;
  width: 508px; height: 90px;
}
.foot span {
  position: absolute;
  font-family: "Bebas Neue", sans-serif;
  font-size: 76px;
  line-height: 1;
  white-space: nowrap;
}
.foot .wake  { left: 0;   top: 5px; }
.foot .sleep { left: 300px; top: 5px; }
.foot p {
  position: absolute; left: 165px; top: 30px;
  width: 140px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 11px;
  line-height: 1.3;
  color: #444;
}