/*
  A 计划 · What's inside 之后的两节，按设计图 P13「邮票收藏」：
    ② .taste  左字右图；右边一枚齿孔邮票里装三条口味刻度（圆点是从侧花样里裁出的厚涂颜料点）
    ③ .story  浅亚麻色整宽带；四枚方邮票串成横向时间线（数字压在颜料点上，第 4 枚放 logo）
  邮票齿孔：背景用一圈 radial-gradient 小圆孔平铺（round），中间再铺一块实色盖住，只在边上露出齿孔。
  尺寸都按宽度（vw / rem）取值；左右边线沿用 --gutter。
*/

/* ---------- stamp (perforated card) ---------- */
.stamp {
  --hole: 6px;
  --stamp-paper: #FFF9EF;
  position: relative;
  display: block;
  padding: calc(var(--hole) * 2.6);
  background:
    radial-gradient(var(--hole), #0000 97%, var(--stamp-paper)) round calc(-1.5 * var(--hole)) calc(-1.5 * var(--hole)) / calc(3 * var(--hole)) calc(3 * var(--hole)),
    linear-gradient(var(--stamp-paper) 0 0) no-repeat 50% / calc(100% - 3 * var(--hole)) calc(100% - 3 * var(--hole));
  filter: drop-shadow(0 2px 3px rgb(110 70 25 / 0.18));
}

/* thin marigold frame just inside the perforation */
.stamp::before {
  content: "";
  position: absolute;
  inset: calc(var(--hole) * 2.6 - 6px);
  border: 2px solid #E9AF45;
  pointer-events: none;
}

/* ---------- ② the taste ---------- */
.taste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  column-gap: clamp(2rem, 5vw, 6rem);
  width: var(--container);
  margin: clamp(2.5rem, 4.5vw, 5rem) auto 0;
  padding: clamp(2.5rem, 4.5vw, 5rem) 0 clamp(3rem, 5.5vw, 6rem);
  border-top: 1px solid var(--hairline);
}

.taste .section-lead {
  max-width: 30em;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: clamp(1.25rem, 2vw, 2rem);
  padding: 0 1.4rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.scales {
  display: grid;
  gap: clamp(0.5rem, 0.8vw, 0.85rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.scale {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  padding: clamp(0.6rem, 1vw, 1rem) clamp(0.75rem, 1.4vw, 1.5rem);
  border: 1px dashed rgb(201 150 70 / 0.45);
  background: rgb(255 252 245 / 0.6);
  text-align: left;
}

/* the same folk spray as in the stamp corners, before each label */
.scale::before {
  content: "";
  flex: none;
  width: clamp(1rem, 1.35vw, 1.4rem);
  height: clamp(1.8rem, 2.4vw, 2.5rem);
  background: url("../assets/img/stamps/spray.webp") center / contain no-repeat;
}

.scale__name {
  flex: 1;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.875rem);
  font-style: italic;
  line-height: 1.1;
}

.scale__dots {
  display: flex;
  gap: clamp(0.3rem, 0.5vw, 0.55rem);
}

.scale__dots i {
  width: clamp(1.5rem, 2.4vw, 2.6rem);
  aspect-ratio: 1;
  background: url("../assets/img/ornaments/dot.webp") center / contain no-repeat;
}

/* dots past the level: a pale cream bead of the same size, as in the design */
.scale__dots[data-level="3"] i:nth-child(n + 4),
.scale__dots[data-level="4"] i:nth-child(n + 5) {
  background: radial-gradient(circle at 36% 30%, #FFFDF7 0%, #F1E7D6 55%, #DCCDB4 100%);
  border-radius: 50%;
  box-shadow: 0 2px 3px rgb(110 70 25 / 0.18);
  transform: scale(0.86);
}

/* ---------- ③ its story ---------- */
.story {
  padding: clamp(3rem, 5.5vw, 6rem) 0 clamp(3.25rem, 6vw, 6.5rem);
  background: linear-gradient(180deg, #F3E7D4 0%, #EFE1CB 100%);
  text-align: center;
}

.story__inner {
  width: var(--container);
  margin: 0 auto;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 3rem);
  margin: clamp(2rem, 3.5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  --stamp-size: clamp(6.5rem, 10vw, 10rem);
}

/* the thread joining the stamp centres (12.5% … 87.5%), with a small dot halfway between each pair */
.timeline::before {
  content: "";
  position: absolute;
  top: calc(var(--stamp-size) / 2.07);
  left: 12.5%;
  right: 12.5%;
  height: 10px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle, #E9AF45 0 4px, transparent 4.5px) 0 50% / calc(100% / 3) 10px repeat-x,
    linear-gradient(#E9AF45 0 0) 0 50% / 100% 2px no-repeat;
}

.timeline__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* each stamp is an HD stamp image (assets/img/stamps/, from generate_assets.py --set stamps), both drawn into the
   same slightly-wide box (1.035 : 1) so they match; the number sits in the empty centre of the halo (49.5%, 48.9%) */
.timeline .stamp--square {
  width: var(--stamp-size);
  height: calc(var(--stamp-size) / 1.035);
  padding: 0;
  background: url("../assets/img/stamps/stamp-halo.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 5px rgb(110 70 25 / 0.2));
}

.timeline .stamp--square::before {
  content: none;
}

.timeline__step:last-child .stamp--square {
  background-image: url("../assets/img/stamps/stamp-plain.webp");
}

/* number disc: flat painted terracotta like the halo dabs (no gloss), centred on the halo's measured centre
   (49.59%, 48.69% of the stamp image, see tools/prepare_assets.py); the cream numeral is centred on its glyph,
   not its line box: --num-lift raises it by the measured gap (≤1px) between the font's line box and the digit */
.timeline__num {
  --num-lift: 0.02em;
  position: absolute;
  left: 49.59%;
  top: 48.69%;
  display: grid;
  place-items: center;
  width: 35%;
  aspect-ratio: 1;
  padding-bottom: var(--num-lift);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 42%, #E66A20 0%, #DA5A1B 58%, #C24A17 100%);
  box-shadow: inset 0 0 0 1.5px rgb(150 52 12 / 0.35);
  color: #FFF3DF;
  font-family: var(--serif);
  font-size: calc(var(--stamp-size) * 0.27);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.timeline__logo {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 58%;
  height: auto;
  transform: translate(-50%, -50%);
}

.timeline__step b {
  margin-top: clamp(0.9rem, 1.4vw, 1.4rem);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1.2;
}

.timeline__text {
  max-width: 16em;
  margin-top: 0.35rem;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.35;
  color: var(--ink-soft);
}

/* ---------- tablet & phone ---------- */
@media (max-width: 1023px) {
  .taste {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.25rem;
    text-align: center;
  }

  .taste .section-lead {
    margin-inline: auto;
  }

  .taste .stamp {
    width: min(100%, 34rem);
    margin: 0 auto;
  }

  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }

  .timeline::before {
    content: none;
  }

}

@media (max-width: 599px) {
  .scale {
    padding-inline: 0.6rem;
  }

  .scale__dots i {
    width: 1.35rem;
  }

}