/* ===== 1. 原海报的特殊字形 =====
   字体文件放在 assets 文件夹中，无需联网。
   这是从原图整理的字形子集，只包含海报用到的特殊文字。
   修改文字时，子集中没有的字符会使用后面的备用字体。 */
@font-face {
    font-family: "Poster Heading";
    src: url("https://res.cloudinary.com/vsyiadip/raw/upload/v1790235093/poster-heading.ttf") format("truetype");
}


@font-face {
    font-family: "Poster Numbers";
    src: url("https://res.cloudinary.com/vsyiadip/raw/upload/v1790235093/poster-numbers.ttf") format("truetype");
}


/* ===== 2. 基础样式 ===== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #ebebed;
    color: #3a3436;
}

h1, h2, p {
    margin: 0;
}

h1, h2 {
    font-family: "Poster Heading", "Arial Narrow", sans-serif;
    font-weight: normal;
}

h2 {
    font-size: 28px;
    line-height: 34px;
}


/* 外框使用相对定位；内部用 left 和 top 对照海报放置。
   为了方便初学者理解，保持原始 564 × 846 像素尺寸。 */
.poster {
    position: relative;
    width: 564px;
    height: 846px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #ebebed;
}

.note {
    font-family: "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
    line-height: 12px;
}

.yellow {
    color: #eddf00;
}


/* ===== 3. 顶部标题和步数 ===== */
.main-title {
    position: absolute;
    left: 28px;
    top: 29px;
    font-size: 82px;
    line-height: 82px;
    white-space: nowrap;
}

.top-line {
    position: absolute;
    left: 28px;
    top: 132px;
    width: 384px;
    height: 1.5px;
    background-color: #a2a2a2;
}

.steps {
    position: absolute;
    left: 440px;
    top: 242px;
    font-family: "Poster Numbers", sans-serif;
    font-size: 71.5px;
    line-height: 71.5px;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: left top;
}

.steps-note {
    position: absolute;
    left: 527px;
    top: 242px;
    width: 220px;
    transform: rotate(-90deg);
    transform-origin: left top;
}


/* ===== 4. 食物区 ===== */
.food {
    position: absolute;
    left: 28px;
    top: 153px;
    width: 384px;
    height: 95px;
}

.food h2 {
    position: absolute;
    top: -3px;
    font-size: 39px;
    line-height: 49px;
}

.food-picture {
    position: absolute;
    width: 69px;
    height: 49px;
}

.food-circle {
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #eddf00;
}

.food-picture img {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}

.figs {
    left: 161px;
    top: -1px;
    width: 66px;
}

.figs img {
    width: 53px;
    height: 43px;
}

.salmon {
    left: 230px;
    top: -1px;
    width: 73px;
}

.salmon img {
    width: 69px;
    height: 42px;
}

.eggs {
    left: 161px;
    top: 48px;
    width: 66px;
}

.eggs img {
    top: -2px;
    width: 58px;
    height: 49px;
}

.avocado {
    left: 230px;
    top: 48px;
    width: 73px;
}

.avocado img {
    top: 4px;
    width: 64px;
    height: 37px;
}

.food-list {
    position: absolute;
    left: 317px;
    top: -4px;
    margin: 0;
    padding-left: 17px;
    font-family: "Agency FB", "Arial Narrow", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
}


/* ===== 5. 地点柱状图 ===== */
.hot-spots {
    position: absolute;
    left: 28px;
    top: 266px;
    width: 214px;
    height: 151px;
    border-top: 1.5px solid #a2a2a2;
    border-bottom: 1.5px solid #a2a2a2;
}

.place {
    position: absolute;
    top: 19px;
    width: 30px;
    height: 69px;
}

.place span {
    position: absolute;
    left: 1px;
    bottom: -13px;
    font-family: "Arial Narrow", sans-serif;
    font-size: 12px;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: left top;
}

.bar {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    background-color: #eddf00;
}

.place-one {
    left: 0;
}
 .place-one .bar {
    height: 69px;
}

.place-two {
    left: 38px;
}
 .place-two .bar {
    height: 61px;
}

.place-three {
    left: 75px;
}
 .place-three .bar {
    height: 29px;
    width: 13px;
}

.place-four {
    left: 112px;
}
 .place-four .bar {
    height: 13px;
}

.place-five {
    left: 147px;
}
 .place-five .bar {
    height: 21px;
}

.place-six {
    left: 184px;
}
 .place-six .bar {
    height: 9px;
}

.hot-spots h2 {
    position: absolute;
    left: 0;
    top: 100px;
}

.hot-spots .note {
    position: absolute;
    left: 98px;
    top: 105px;
    width: 125px;
}


/* ===== 6. 歌单与饼图 ===== */
.playlists {
    position: absolute;
    left: 268px;
    top: 266px;
    width: 272px;
    height: 188px;
    border-top: 1.5px solid #a2a2a2;
}

.playlists h2 {
    position: absolute;
    left: 0;
    top: 13px;
}

.playlists ol {
    position: absolute;
    left: 0;
    top: 89px;
    margin: 0;
    padding-left: 12px;
    font-family: "Arial Narrow", sans-serif;
    font-size: 11px;
    line-height: 14px;
}

.playlists .note {
    position: absolute;
    left: 0;
    top: 168px;
}

.pie {
    position: absolute;
    left: 367px;
    top: 284px;
    width: 167px;
    height: 168px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #eddf00;
}

/* 五条分隔线从同一个圆心旋转出去。 */
.pie-line {
    position: absolute;
    left: 81px;
    top: 88px;
    width: 100px;
    height: 3px;
    background-color: #ebebed;
    transform-origin: left center;
}

.pie-line-one {
    transform: rotate(98deg);
}

.pie-line-two {
    transform: rotate(195deg);
}

.pie-line-three {
    transform: rotate(254deg);
}

.pie-line-four {
    transform: rotate(293deg);
}

.pie-line-five {
    transform: rotate(323deg);
}

.pie-number {
    position: absolute;
    font-family: "Poster Numbers", sans-serif;
    line-height: 1;
}

.number-one {
    left: 118px;
    top: 95px;
    font-size: 31px;
}

.number-two {
    left: 35px;
    top: 100px;
    font-size: 27px;
}

.number-three {
    left: 38px;
    top: 35px;
    font-size: 22px;
}

.number-four {
    left: 81px;
    top: 18px;
    font-size: 20px;
}

.number-five {
    left: 118px;
    top: 29px;
    font-size: 18px;
}


/* ===== 7. 出行方式 ===== */
.transport {
    position: absolute;
    left: 28px;
    top: 436px;
    width: 214px;
    height: 166px;
    border-bottom: 1.5px solid #a2a2a2;
}

.transport-row {
    position: absolute;
    left: 0;
    width: 214px;
    height: 28px;
}

.transport h2 {
    line-height: 28px;
}

.transport-bar {
    position: absolute;
    top: 0;
    height: 28px;
    background-color: #eddf00;
}

.bus {
    top: 0;
}
 .bus .transport-bar {
    left: 27px;
    width: 115px;
}

.scooter {
    top: 34px;
}
 .scooter .transport-bar {
    left: 56px;
    width: 117px;
}

.foot {
    top: 68px;
}
 .foot .transport-bar {
    left: 33px;
    width: 175px;
}

.car {
    top: 102px;
}
 .car .transport-bar {
    left: 27px;
    width: 64px;
}

.transport .note {
    position: absolute;
    left: 0;
    top: 140px;
    white-space: nowrap;
}


/* ===== 8. 餐厅评分 ===== */
.restaurants {
    position: absolute;
    left: 269px;
    top: 476px;
    width: 266px;
    height: 125px;
    border: 1px solid #a2a2a2;
}

.restaurants h2 {
    position: absolute;
    left: 9px;
    top: 7px;
}

.restaurants > .note {
    position: absolute;
    left: 141px;
    top: 13px;
    white-space: nowrap;
}

.restaurant {
    position: absolute;
    bottom: 9px;
    width: 26px;
    height: 74px;
}

.restaurant > span {
    position: absolute;
    left: 0;
    bottom: -12px;
    font-family: "Arial Narrow", sans-serif;
    font-size: 12px;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: left top;
}

.restaurant b {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 11px;
    font-weight: normal;
    color: #eddf00;
    overflow-wrap: anywhere;
}

/* 最上面一颗显示半颗星。 */
.restaurant i {
    display: block;
    height: 6px;
    overflow: hidden;
    font-style: normal;
}

.restaurant-one {
    left: 9px;
}
 .restaurant-two {
    left: 41px;
}

.restaurant-three {
    left: 73px;
}
 .restaurant-four {
    left: 105px;
}

.restaurant-five {
    left: 137px;
}
 .restaurant-six {
    left: 169px;
}

.restaurant-seven {
    left: 201px;
}
 .restaurant-eight {
    left: 233px;
}


/* ===== 9. 每周时间分布 ===== */
.weekly {
    position: absolute;
    left: 28px;
    top: 622px;
    width: 508px;
    height: 97px;
    border-bottom: 1.5px solid #a2a2a2;
}

.weekly h2 {
    position: absolute;
    left: 2px;
    top: -3px;
    z-index: 1;
}

/* polygon 的每一对百分比分别表示一个拐点的横向和纵向位置。
   这是本页唯一需要不规则轮廓的图形。 */
.area-chart {
    position: absolute;
    left: 2px;
    bottom: 0;
    width: 507px;
    height: 90px;
    background-color: #eddf00;
    clip-path: polygon(0% 100%, 13% 82%, 18% 90%, 29% 43%, 31% 13%, 35% 38%, 38% 66%, 41% 82%, 47.5% 74%, 50% 52%, 54% 52%, 61% 33%, 74.5% 0%, 85% 70%, 100% 100%);
}

.day {
    position: absolute;
    bottom: 2px;
    font-family: "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
}

.monday {
    left: 2px;
}
 .tuesday {
    left: 123px;
}
 .wednesday {
    left: 227px;
}
 .thursday {
    left: 331px;
}
 .friday {
    left: 427px;
}


/* ===== 10. 底部时间 ===== */
.sleep {
    position: absolute;
    left: 28px;
    top: 745px;
    width: 510px;
    height: 74px;
}

.wake-time, .bed-time {
    position: absolute;
    top: 0;
    font-family: "Poster Numbers", sans-serif;
    font-size: 71.5px;
    line-height: 73px;
    word-spacing: 13px;
    white-space: nowrap;
}

.wake-time {
    left: 0;
}
 .bed-time {
    right: 0;
}

.sleep-notes {
    position: absolute;
    left: 177px;
    top: 18px;
    width: 135px;
}

.sleep-notes .note {
    white-space: nowrap;
}

.arrow {
    position: relative;
    height: 3px;
    margin: 6px 0 4px;
    background-color: #a2a2a2;
}

.arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -6px;
    width: 13px;
    height: 13px;
    border-top: 3px solid #a2a2a2;
    border-right: 3px solid #a2a2a2;
    transform: rotate(45deg);
}