/* 本地字体，无须联网。两套字体均附带开源许可证。 */
@font-face{
  font-family:Six Caps;
  src:url('assets/SixCaps.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}

@font-face{
  font-family:Barlow Condensed;
  src:url('assets/BarlowCondensed-Medium.ttf') format('truetype');
  font-weight:500;
  font-display:swap
}

/* 换配色时，优先修改这里。没有给海报添加紫色边框。 */
:root{
  --paper:#ebebed;
  --ink:#393536;
  --yellow:#e8e300;
  --rule:#aaa9a8
}

*{
  box-sizing:border-box
}

html{
  background:#d8d8d8
}

body{
  margin:0;
  padding:24px 16px;
  display:flex;
  justify-content:center;
  color:var(--ink);
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-weight:500
}

.poster-frame{
  position:relative;
  width:min(750px,100%);
  aspect-ratio:750 / 1110;
  flex-shrink:0
}

/* 在 750 × 1110 画布上用像素定位，script.js 负责整张等比例缩放。 */
.poster{
  position:absolute;
  top:0;
  left:0;
  width:750px;
  height:1110px;
  background:var(--paper);
  overflow:hidden;
  transform:scale(var(--scale,1));
  transform-origin:top left
}

h1,h2,p,ul,ol{
  margin:0
}

h1,h2{
  font-family:'Six Caps',Impact,sans-serif;
  font-weight:700;
  line-height:1.08
}

.note{
  font-family:'Times New Roman',serif;
  font-size:15px;
  font-style:italic;
  font-weight:400;
  line-height:1.1
}

.accent{
  color:var(--yellow)
}

/* 上方标题、食物、竖排步数 */
.masthead{
  position:absolute;
  left:40px;
  top:29px;
  width:505px;
  height:150px;
  border-bottom:2px solid var(--rule)
}

.masthead h1{
  font-size:126px;
  line-height:1;
  white-space:nowrap;
  letter-spacing:.8px;
  transform:scaleX(1.045);
  transform-origin:left
}

.food-section{
  position:absolute;
  left:40px;
  top:201px;
  width:505px;
  height:127px
}

.food-section h2{
  font-size:58px;
  line-height:1.1;
  letter-spacing:.2px
}

.food-pictures{
  position:absolute;
  left:209px;
  top:0;
  width:192px;
  height:124px
}

/* 仅保留原食品照片后面的黄色圆形，位置不变。 */
.food-circle{
  position:absolute;
  left:34px;
  top:3px;
  width:55px;
  height:55px;
  border-radius:50%;
  background:var(--yellow)
}

.food-circle:nth-child(even){
  left:134px
}

.food-circle:nth-child(n+3){
  top:68px
}

.food-list{
  position:absolute;
  left:416px;
  top:1px;
  padding-left:20px;
  font-size:23px;
  line-height:1.38
}

.food-list li{
  padding-left:3px
}

.food-list li::marker{
  font-size:14px
}

.steps-section{
  position:absolute;
  left:573px;
  top:323px;
  width:283px;
  height:143px;
  transform:rotate(-90deg);
  transform-origin:top left
}

.steps-line{
  display:flex;
  gap:3px;
  align-items:baseline;
  font-family:'Six Caps',Impact,sans-serif;
  font-size:116px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transform:scaleX(1.22);
  transform-origin:left
}

.steps-section .note{
  margin-top:8px;
  font-size:14px;
  white-space:nowrap
}

/* 左侧柱状图 */
.hotspots{
  position:absolute;
  left:40px;
  top:353px;
  width:282px;
  height:198px;
  border-top:2px solid var(--rule);
  border-bottom:2px solid var(--rule)
}

.hotspot-chart{
  position:absolute;
  top:23px;
  left:3px;
  right:0;
  height:91px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end
}

.hotspot{
  display:flex;
  gap:5px;
  align-items:flex-end;
  height:100%
}

.hotspot span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:16px;
  line-height:17px
}

.hotspot i{
  display:block;
  width:16px;
  height:var(--bar);
  background:var(--yellow)
}

.hotspot-caption{
  position:absolute;
  left:0;
  top:132px;
  display:flex;
  gap:15px;
  align-items:center
}

.hotspot-caption h2{
  font-size:41px;
  white-space:nowrap
}

.hotspot-caption .note{
  white-space:nowrap;
  font-size:14px
}

/* 歌单饼图 */
.playlists{
  position:absolute;
  left:355px;
  top:353px;
  width:358px;
  height:252px;
  border-top:2px solid var(--rule);
  padding-top:16px
}

.playlists h2{
  font-size:42px;
  line-height:1.06
}

.playlists ol{
  padding-left:14px;
  margin-top:13px;
  font-size:15px;
  line-height:1.23
}

.playlists>.note{
  margin-top:12px
}

.pie-chart{
  position:absolute;
  width:224px;
  height:224px;
  left:129px;
  top:20px;
  overflow:visible
}

.pie-chart path{
  fill:var(--yellow);
  stroke:var(--paper);
  stroke-width:3.5;
  stroke-linejoin:round
}

.pie-chart text{
  font-family:'Six Caps',Impact,sans-serif;
  font-weight:700;
  font-size:37px;
  fill:var(--ink);
  text-anchor:middle;
  dominant-baseline:central
}

/* 出行方式的四根横条 */
.transport{
  position:absolute;
  left:40px;
  top:572px;
  width:282px;
  height:222px;
  border-bottom:2px solid var(--rule)
}

.transport-row{
  height:45px;
  display:flex;
  gap:8px;
  align-items:center
}

.transport-row span{
  font-family:'Six Caps',Impact,sans-serif;
  font-weight:700;
  font-size:43px;
  line-height:1
}

.transport-row i{
  display:block;
  width:var(--bar);
  height:37px;
  background:var(--yellow)
}

.transport>.note{
  margin-top:7px;
  font-size:14px;
  white-space:nowrap
}

/* 餐厅评分 */
.restaurants{
  position:absolute;
  left:357px;
  top:628px;
  width:350px;
  height:165px;
  border:1.5px solid var(--rule);
  padding:9px 11px
}

.restaurant-heading{
  display:flex;
  gap:12px;
  align-items:center
}

.restaurant-heading h2{
  font-size:40px;
  white-space:nowrap
}

.restaurant-heading .note{
  font-size:14px;
  white-space:nowrap
}

.ratings{
  position:absolute;
  left:12px;
  right:10px;
  bottom:12px;
  height:96px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end
}

.rating{
  position:relative;
  display:flex;
  align-items:flex-end;
  width:32px;
  height:96px
}

.rating>span{
  position:absolute;
  left:17px;
  bottom:0;
  transform:rotate(-90deg);
  transform-origin:left bottom;
  font-size:16px;
  line-height:17px;
  white-space:nowrap
}

.rating b{
  display:block;
  margin-left:18px;
  width:15px;
  color:var(--yellow);
  font-family:Arial,sans-serif;
  font-size:17px;
  line-height:14px;
  overflow-wrap:anywhere;
  font-weight:400
}

/* 时间投入面积图 */
.commitments{
  position:absolute;
  left:40px;
  top:813px;
  width:668px;
  height:135px
}

.commitments h2{
  position:absolute;
  left:3px;
  top:0;
  font-size:41px;
  z-index:1;
  line-height:1.08
}

.area-chart{
  position:absolute;
  left:0;
  bottom:0;
  width:668px;
  height:126px
}

.area-chart polygon{
  fill:var(--yellow)
}

.area-chart line{
  stroke:var(--rule);
  stroke-width:2
}

.weekdays{
  position:absolute;
  left:3px;
  right:98px;
  bottom:5px;
  display:flex;
  justify-content:space-between;
  font-size:14px
}

/* 最底部的大时间与箭头 */
.sleep-section{
  position:absolute;
  left:40px;
  top:969px;
  right:40px;
  height:111px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.wake-time,.bed-time{
  font-family:'Six Caps',Impact,sans-serif;
  font-weight:700;
  font-size:113px;
  line-height:1;
  white-space:nowrap;
  transform:scaleX(1.32)
}

.wake-time{
  transform-origin:left
}
.bed-time{
  transform-origin:right
}

.sleep-caption{
  width:180px;
  padding-top:10px
}

.sleep-caption .note{
  font-size:14px;
  white-space:nowrap
}

.arrow{
  position:relative;
  width:176px;
  height:4px;
  background:var(--rule);
  margin:7px 0
}

.arrow::after{
  content:'';
  position:absolute;
  right:0;
  top:-8px;
  width:19px;
  height:19px;
  border-top:4px solid var(--rule);
  border-right:4px solid var(--rule);
  transform:rotate(45deg);
  border-radius:2px
}

@media(max-width:500px){
  body{
    padding:12px 8px
  }

}

@page{
  size:750px 1110px;
  margin:0
}

@media print{
  html,body{
    background:var(--paper);
    padding:0;
    margin:0
  }
  .poster-frame{
    width:750px;
    height:1110px
  }
  .poster{
    transform:none;
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact
  }

}