/* 1. 本地字体：不需要安装，也不需要访问在线字体服务。 */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/Anton-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/BarlowCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 2. 全局变量及公共样式。与课堂的 :root / var() 写法对应。 */
/* 原稿比例：564 × 846。所有元素按画布比例定位，缩放不改变排版。 */
:root {
  --display-font: "Anton", Impact, sans-serif;
  --body-font: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --caption-font: "Instrument Serif", Georgia, serif;
  --paper: #ebebed;
  --ink: #393436;
  --yellow: #e9e04b;
  --line: #a2a2a2;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 30px 20px;
  background: #f5f5f5;
  color: var(--ink);
}
.poster {
  position: relative;
  width: min(100%, 774px);
  aspect-ratio: 564 / 846;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  container-type: inline-size;
}
.section { display: contents; }
/* --x/--y 为原稿坐标；--w/--h 为元素宽高。 */
.placed {
  position: absolute;
  left: calc(var(--x) / 564 * 100%);
  top: calc(var(--y) / 846 * 100%);
  width: calc(var(--w) / 564 * 100%);
  height: calc(var(--h) / 846 * 100%);
  margin: 0;
}
/* .text 是真正的 HTML 文字。--size 为原画布字号；--stretch 控制窄体程度。
   根据替代字体的字面大小微调位置，避免字体自带的留白改变原海报布局。 */
.type { font-weight: 400; }
.text {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: max-content;
  font-family: var(--font, var(--body-font));
  font-size: calc(var(--size) / 564 * 100cqw);
  line-height: var(--leading, 1);
  font-weight: 400;
  transform-origin: top left;
  transform: translateY(calc(var(--offset) / 564 * 100cqw)) scaleX(var(--stretch, 1));
}
.text > span { display: block; white-space: nowrap; }
.rotated {
  position: absolute;
  left: 0;
  top: 100%;
  transform: rotate(-90deg);
}
.steps { color: var(--yellow); }
.type[class*="caption"] .text { font-style: italic; }
.bar, .food-disc, .star, .area-chart { background: var(--yellow); }
.rule { background: var(--line); }
.food-disc { border-radius: 50%; }
.food { object-fit: cover; filter: grayscale(1); }
.rating-frame { border: 0.18cqw solid var(--line); }
.star {
  clip-path: polygon(50% 0%,65% 33%,100% 38%,75% 64%,81% 100%,50% 82%,19% 100%,25% 64%,0% 38%,35% 33%);
}
.star-cover { background: var(--paper); }
/* 五条分界线保持相同粗细。 */
.pie { border-radius: 50%; background: var(--yellow); overflow: hidden; }
.pie span {
  position: absolute; left: 48.5%; top: 51.5%;
  width: 54%; height: 1.6%; background: var(--paper);
  transform-origin: 0 50%; transform: translateY(-50%) rotate(var(--angle));
}
.time-arrow { background: var(--line); border-radius: 2px; }
.time-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 2.6cqw;
  height: 2.6cqw;
  border-right: 0.5cqw solid var(--line);
  border-top: 0.5cqw solid var(--line);
  border-radius: 0.3cqw;
  transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 600px) { body { padding: 12px 8px; } }
@media print {
  @page { size: 188mm 282mm; margin: 0; }
  html, body { margin: 0; padding: 0; background: var(--paper); }
  .poster { width: 188mm; height: 282mm; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* 3. 各文字的字体、字号及字宽。可按 class 名查找并调整。 */
.title { --font: var(--display-font); --size: 95.0036; --stretch: 0.52751; --offset: -6.0327; --leading: 1.12000; }
.steps { --font: var(--display-font); --size: 81.6800; --stretch: 0.58935; --offset: -4.5332; --leading: 1.12000; }
.step-count { --font: var(--display-font); --size: 81.6877; --stretch: 0.52575; --offset: -4.5337; --leading: 1.12000; }
.steps-caption { --font: var(--caption-font); --size: 10.6209; --stretch: 1.19693; --offset: -0.9771; --leading: 1.12000; }
.foods-title { --font: var(--display-font); --size: 44.5057; --stretch: 0.49008; --offset: -2.4701; --leading: 1.12000; }
.food-list { --font: var(--body-font); --size: 16.9626; --stretch: 0.98236; --offset: -3.2229; --leading: 1.35000; }
.jacobs { --font: var(--body-font); --size: 13.6740; --stretch: 0.95681; --offset: -2.6254; --leading: 1.12000; }
.soda { --font: var(--body-font); --size: 13.5105; --stretch: 0.99896; --offset: -2.5940; --leading: 1.12000; }
.dwinelle { --font: var(--body-font); --size: 13.5516; --stretch: 0.92373; --offset: -2.7103; --leading: 1.12000; }
.cheit { --font: var(--body-font); --size: 13.5105; --stretch: 0.94695; --offset: -2.5940; --leading: 1.12000; }
.mlk { --font: var(--body-font); --size: 13.5105; --stretch: 0.97961; --offset: -2.5940; --leading: 1.12000; }
.kresge { --font: var(--body-font); --size: 13.5268; --stretch: 0.94433; --offset: -2.5971; --leading: 1.12000; }
.spots-title { --font: var(--display-font); --size: 32.0540; --stretch: 0.51099; --offset: -1.7790; --leading: 1.12000; }
.spots-caption { --font: var(--caption-font); --size: 10.6414; --stretch: 1.19681; --offset: -0.9790; --leading: 1.12000; }
.playlists-title { --font: var(--display-font); --size: 31.0938; --stretch: 0.52635; --offset: -1.7257; --leading: 1.12000; }
.playlist-list { --font: var(--body-font); --size: 10.2042; --stretch: 1.08844; --offset: -1.9388; --leading: 1.35000; }
.playlist-caption { --font: var(--caption-font); --size: 10.4171; --stretch: 1.23421; --offset: -0.9584; --leading: 1.12000; }
.slice-1 { --font: var(--display-font); --size: 36.4000; --stretch: 0.46753; --offset: -2.3114; --leading: 1.12000; }
.slice-2 { --font: var(--display-font); --size: 31.2121; --stretch: 0.54713; --offset: -1.8883; --leading: 1.12000; }
.slice-3 { --font: var(--display-font); --size: 25.0746; --stretch: 0.55704; --offset: -1.5672; --leading: 1.12000; }
.slice-4 { --font: var(--display-font); --size: 22.8293; --stretch: 0.61768; --offset: -1.4497; --leading: 1.12000; }
.slice-5 { --font: var(--display-font); --size: 19.1798; --stretch: 0.54618; --offset: -1.2179; --leading: 1.12000; }
.transport-labels { --font: var(--display-font); --size: 31.9635; --stretch: 0.48823; --offset: -1.7740; --leading: 1.06371; }
.transport-caption { --font: var(--caption-font); --size: 10.7930; --stretch: 1.16762; --offset: -0.9930; --leading: 1.12000; }
.ratings-title { --font: var(--display-font); --size: 32.0540; --stretch: 0.52767; --offset: -1.7790; --leading: 1.12000; }
.ratings-caption { --font: var(--caption-font); --size: 10.6363; --stretch: 1.18936; --offset: -0.9785; --leading: 1.12000; }
.great-china { --font: var(--body-font); --size: 13.5268; --stretch: 0.98308; --offset: -2.5971; --leading: 1.12000; }
.oasis { --font: var(--body-font); --size: 13.5268; --stretch: 0.99980; --offset: -2.5971; --leading: 1.12000; }
.angelines { --font: var(--body-font); --size: 13.5268; --stretch: 0.96347; --offset: -2.5971; --leading: 1.12000; }
.imm-thai { --font: var(--body-font); --size: 13.5516; --stretch: 1.01971; --offset: -2.7103; --leading: 1.12000; }
.la-vals { --font: var(--body-font); --size: 13.5105; --stretch: 0.98352; --offset: -2.5940; --leading: 1.12000; }
.la-note { --font: var(--body-font); --size: 13.5105; --stretch: 0.93715; --offset: -2.5940; --leading: 1.12000; }
.jupiters { --font: var(--body-font); --size: 13.6740; --stretch: 0.92061; --offset: -2.6254; --leading: 1.12000; }
.sizzling { --font: var(--body-font); --size: 13.5268; --stretch: 0.96785; --offset: -2.5971; --leading: 1.12000; }
.week-title { --font: var(--display-font); --size: 31.0222; --stretch: 0.53416; --offset: -1.7217; --leading: 1.12000; }
.monday { --font: var(--body-font); --size: 10.5340; --stretch: 1.82221; --offset: -2.1068; --leading: 1.12000; }
.tuesday { --font: var(--body-font); --size: 12.0706; --stretch: 1.64674; --offset: -2.4141; --leading: 1.12000; }
.wednesday { --font: var(--body-font); --size: 10.5340; --stretch: 1.56642; --offset: -2.1068; --leading: 1.12000; }
.thursday { --font: var(--body-font); --size: 12.0706; --stretch: 1.42560; --offset: -2.4141; --leading: 1.12000; }
.friday { --font: var(--body-font); --size: 10.4601; --stretch: 1.65681; --offset: -2.0920; --leading: 1.12000; }
.wake-time { --font: var(--display-font); --size: 81.9973; --stretch: 0.62038; --offset: -4.5508; --leading: 1.12000; }
.sleep-time { --font: var(--display-font); --size: 82.4653; --stretch: 0.62857; --offset: -4.9892; --leading: 1.12000; }
.sleep-caption { --font: var(--caption-font); --size: 10.1931; --stretch: 1.25235; --offset: -0.9887; --leading: 2.40000; }

/* 4. 元素位置：沿用初稿 564 × 846 的坐标，统一移入 CSS。 */
.title { --x:27; --y:29.2969; --w:378.9206; --h:81.7031; }
.rule-1 { --x:28; --y:132.25; --w:384; --h:1.5; }
.steps { --x:440.4483; --y:29.1176; --w:71.5517; --h:106; }
.step-count { --x:440.4484; --y:149; --w:80.299; --h:95; }
.steps-caption { --x:526.7782; --y:31.103; --w:10.2385; --h:210.7968; }
.foods-title { --x:28; --y:154.4373; --w:145.8956; --h:88.8334; }
.food-disc-1 { --x:213; --y:152; --w:42; --h:42; }
.food-disc-2 { --x:213; --y:201; --w:42; --h:42; }
.food-disc-3 { --x:289; --y:152; --w:42; --h:42; }
.food-disc-4 { --x:289; --y:201; --w:42; --h:42; }
.food-1 { --x:189; --y:153; --w:53; --h:43; }
.food-2 { --x:189; --y:199; --w:58; --h:49; }
.food-3 { --x:258; --y:153; --w:69; --h:42; }
.food-4 { --x:258; --y:205; --w:64; --h:37; }
.food-list { --x:348.5254; --y:155.85; --w:59.1882; --h:84.27; }
.rule-2 { --x:28; --y:266.25; --w:214; --h:1.5; }
.rule-3 { --x:268; --y:266.25; --w:272; --h:1.5; }
.bar-1 { --x:46; --y:286; --w:12; --h:69; }
.bar-2 { --x:84; --y:294; --w:12; --h:61; }
.bar-3 { --x:121; --y:326; --w:13; --h:29; }
.bar-4 { --x:158; --y:342; --w:12; --h:13; }
.bar-5 { --x:193; --y:334; --w:12; --h:21; }
.bar-6 { --x:230; --y:346; --w:12; --h:9; }
.jacobs { --x:31.4319; --y:296.9255; --w:9.7906; --h:58.5745; }
.soda { --x:69.4319; --y:306.6293; --w:9.6735; --h:48.8707; }
.dwinelle { --x:106.5139; --y:312.363; --w:9.4861; --h:43.137; }
.cheit { --x:143.4319; --y:330.1045; --w:9.6735; --h:25.3955; }
.mlk { --x:178.4319; --y:306.5042; --w:9.6735; --h:48.9958; }
.kresge { --x:215.4319; --y:322.0326; --w:9.6852; --h:33.4674; }
.spots-title { --x:28; --y:370.1115; --w:87.0883; --h:28.0793; }
.spots-caption { --x:125.6587; --y:373.7781; --w:119.0415; --h:22.1661; }
.rule-4 { --x:28; --y:415.25; --w:214; --h:1.5; }
.playlists-title { --x:268; --y:283.1115; --w:91.9613; --h:62.0633; }
.playlist-list { --x:268.1171; --y:360.623; --w:76.9912; --h:64.4701; }
.playlist-caption { --x:268; --y:437.9126; --w:77.836; --h:10.0317; }
.pie-1 { --x:365.6653; --y:283.0393; --w:169.9711; --h:169.9711; }
.slice-1 { --x:485.1786; --y:379.196; --w:5.633; --h:31.304; }
.slice-2 { --x:401.2857; --y:383.7069; --w:8.436; --h:26.936; }
.slice-3 { --x:404.3929; --y:318.5528; --w:6.9; --h:21.84; }
.slice-4 { --x:447.8929; --y:302.1654; --w:6.966; --h:19.656; }
.slice-5 { --x:485.1786; --y:312.4346; --w:5.175; --h:16.744; }
.transport-labels { --x:28; --y:436.2864; --w:49.8125; --h:129.9043; }
.bar-7 { --x:55; --y:436; --w:115; --h:28; }
.bar-8 { --x:84; --y:470; --w:117; --h:28; }
.bar-9 { --x:61; --y:504; --w:175; --h:28; }
.bar-10 { --x:55; --y:538; --w:64; --h:28; }
.transport-caption { --x:26.6484; --y:575.5506; --w:203.8662; --h:10.3937; }
.rule-5 { --x:28; --y:600.25; --w:214; --h:1.5; }
.rating-frame-1 { --x:269; --y:476; --w:266; --h:124; }
.ratings-title { --x:279; --y:487.1115; --w:123.9106; --h:28.0793; }
.ratings-caption { --x:410.6587; --y:490.7781; --w:112.2726; --h:22.1661; }
.great-china { --x:280.4319; --y:532.0952; --w:9.6852; --h:58.4048; }
.oasis { --x:312.4319; --y:536.2143; --w:9.6852; --h:54.2857; }
.angelines { --x:344.4319; --y:540.2592; --w:9.6852; --h:50.2408; }
.imm-thai { --x:376.5139; --y:549.3619; --w:9.4861; --h:41.1381; }
.la-vals { --x:408.4319; --y:526.5941; --w:9.6735; --h:64.4059; }
.la-note { --x:440.4319; --y:555.4598; --w:9.6735; --h:35.5402; }
.jupiters { --x:472.4319; --y:547.7874; --w:9.7906; --h:42.7126; }
.sizzling { --x:504.4319; --y:519.531; --w:9.6852; --h:71.469; }
.star-1 { --x:293.2937; --y:580; --w:11.4127; --h:9.9496; }
.star-2 { --x:293.2937; --y:569; --w:11.4127; --h:9.9496; }
.star-3 { --x:293.2937; --y:557; --w:11.4127; --h:10.8541; }
.star-4 { --x:293.2937; --y:546; --w:11.4127; --h:9.9496; }
.star-5 { --x:325.2937; --y:580; --w:11.4127; --h:9.9496; }
.star-6 { --x:325.2937; --y:569; --w:11.4127; --h:9.9496; }
.star-7 { --x:325.2937; --y:557; --w:11.4127; --h:10.8541; }
.star-8 { --x:325.2937; --y:546; --w:11.4127; --h:9.9496; }
.star-9 { --x:357.2937; --y:580; --w:11.4127; --h:9.9496; }
.star-10 { --x:357.2937; --y:569; --w:11.4127; --h:9.9496; }
.star-11 { --x:357.2937; --y:557; --w:11.4127; --h:10.8541; }
.star-12 { --x:357.2937; --y:546; --w:11.4127; --h:9.9496; }
.star-13 { --x:389.2937; --y:580; --w:11.4127; --h:9.9496; }
.star-14 { --x:389.2937; --y:569; --w:11.4127; --h:9.9496; }
.star-15 { --x:389.2937; --y:557; --w:11.4127; --h:10.8541; }
.star-16 { --x:389.2937; --y:546; --w:11.4127; --h:9.9496; }
.star-17 { --x:389.2937; --y:535; --w:11.4127; --h:9.9496; }
.star-18 { --x:421.2937; --y:580; --w:11.4127; --h:9.9496; }
.star-19 { --x:421.2937; --y:569; --w:11.4127; --h:9.9496; }
.star-20 { --x:421.2937; --y:557; --w:11.4127; --h:10.8541; }
.star-21 { --x:421.2937; --y:546; --w:11.4127; --h:9.9496; }
.star-22 { --x:453.2937; --y:580; --w:11.4127; --h:9.9496; }
.star-23 { --x:453.2937; --y:569; --w:11.4127; --h:9.9496; }
.star-24 { --x:453.2937; --y:557; --w:11.4127; --h:10.8541; }
.star-25 { --x:453.2937; --y:546; --w:11.4127; --h:9.9496; }
.star-26 { --x:485.2937; --y:580; --w:11.4127; --h:9.9496; }
.star-27 { --x:485.2937; --y:569; --w:11.4127; --h:9.9496; }
.star-28 { --x:485.2937; --y:557; --w:11.4127; --h:10.8541; }
.star-29 { --x:516.2937; --y:580; --w:11.4127; --h:9.9496; }
.star-30 { --x:516.2937; --y:569; --w:11.4127; --h:9.9496; }
.star-31 { --x:516.2937; --y:557; --w:11.4127; --h:10.8541; }
.star-32 { --x:516.2937; --y:546; --w:11.4127; --h:9.9496; }
.star-cover-1 { --x:325; --y:542; --w:12; --h:9; }
.star-cover-2 { --x:357; --y:542; --w:12; --h:9; }
.star-cover-3 { --x:516; --y:541; --w:12; --h:9; }
.star-cover-4 { --x:389; --y:531; --w:12; --h:9; }
.area-chart-1 { --x:30; --y:629; --w:507; --h:90; clip-path:polygon(13.0049% 81.7778%,0% 100%,100% 100%,84.8126% 70.2222%,74.4828% 0%,61.2808% 33.3333%,54.2857% 51.5556%,49.9507% 51.5556%,47.3892% 73.7778%,41.1823% 81.7778%,38.4236% 70.2222%,34.1872% 33.3333%,30.8374% 12.8889%,28.2759% 42.6667%,17.931% 89.3333%,13.0049% 81.7778%); }
.week-title { --x:30; --y:622.2705; --w:121.6134; --h:61.9203; }
.monday { --x:29.6484; --y:705.6779; --w:10.0007; --h:7.3738; }
.tuesday { --x:151; --y:704.5506; --w:8.408; --h:8.4494; }
.wednesday { --x:255; --y:705.6779; --w:10.2799; --h:7.3738; }
.thursday { --x:359; --y:704.5506; --w:15.401; --h:8.4494; }
.friday { --x:454.638; --y:705.6779; --w:7.0015; --h:7.3221; }
.rule-6 { --x:28; --y:717.25; --w:508; --h:1.5; }
.wake-time { --x:27; --y:746.4483; --w:153.93; --h:72.2396; }
.sleep-time { --x:354; --y:745.4483; --w:182.4596; --h:72.2396; }
.sleep-caption { --x:204.1002; --y:764.7781; --w:105.0197; --h:34.2385; }
.time-arrow-1 { --x:205; --y:780; --w:135; --h:2.5; }
.pie-divider-1 { --angle:-64deg; }
.pie-divider-2 { --angle:-36deg; }
.pie-divider-3 { --angle:98deg; }
.pie-divider-4 { --angle:195deg; }
.pie-divider-5 { --angle:254deg; }