/* layout — 章节、卡片轨道、页脚 */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--bone);
  color: var(--night);
  font-size: var(--fs-small);
}

.skip-link:focus { top: 1rem; }

main {
  position: relative;
  z-index: 2;
}

/* 章节：总高约 600vh */
.chapter { position: relative; }

/* 高度 = 100vh 的粘滞内容 + 镜头停留的时间 */
.chapter--porch { min-height: 100vh; }
.chapter--fire  { min-height: 170vh; }
.chapter--beans { min-height: 220vh; }
.chapter--cup   { min-height: 160vh; }
.chapter--home  { min-height: 180vh; }

.chapter__inner {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(4rem, 9vh, 6rem);
}

.chapter--beans .chapter__inner,
.chapter--home .chapter__inner {
  justify-content: flex-start;
  gap: clamp(2rem, 5vh, 3.4rem);
}

/* 这两章的卡片加起来远高于一屏，粘滞会把下半截永久挡在视口外，
   改成随内容滚动——背景镜头照样按进度走。 */
.chapter--beans .chapter__inner,
.chapter--home .chapter__inner {
  position: static;
  min-height: 0;
  padding-top: clamp(7rem, 16vh, 10rem);
  padding-bottom: clamp(3rem, 7vh, 4.5rem);
}

.chapter--home .chapter__inner {
  padding-bottom: clamp(2rem, 4vh, 3rem);
}

/* 烘焙度标尺 */
.roast-scale {
  margin-top: clamp(2rem, 5vh, 3.6rem);
  max-width: 22rem;
}

.roast-scale__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  letter-spacing: .3em;
  color: var(--ink-32);
}

.roast-scale__bar {
  position: relative;
  margin-top: .7rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(244, 237, 227, .35), rgba(227, 168, 91, .8));
}

.roast-scale__mark {
  position: absolute;
  left: var(--pos, 38%);
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(227, 168, 91, .75);
}

.roast-scale__caption {
  margin-top: 1rem;
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  color: var(--ink-50);
}

/* 冲煮参数 */
.tech-line {
  margin-top: clamp(2rem, 4.5vh, 3.2rem);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-family: var(--latin);
  font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.3rem);
  letter-spacing: .2em;
  color: var(--ink-90);
  font-variant-numeric: tabular-nums;
}

.tech-line i {
  width: 26px;
  height: 1px;
  background: var(--rule);
}

/* 单一产地轨道 */
.origin-rail {
  display: flex;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-inline: calc(-1 * var(--gutter));
  padding: 1.4rem var(--gutter) 2.2rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* 没有 scroll-padding 的话，吸附点按 padding box 算，
     首张卡会被滚掉 gutter 那一截，贴着屏幕边 */
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.origin-rail::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 auto;
  width: clamp(15rem, 23vw, 19rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  scroll-snap-align: start;
}

.card__figure {
  position: relative;
  height: clamp(9rem, 21vh, 14rem);
  margin: 0;
}

/* 作为网格项时百分比 max-height 解析不出来（图会顶穿卡片），
   改用绝对定位，让包含块变成 figure 的确定高度。 */
.card__figure img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .6));
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
}

/* 拼配档案卡 */
.blend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.2vw, 2.2rem);
  margin-inline: calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
}

.card--blend {
  width: auto;
  gap: .8rem;
}

.card--blend .card__figure {
  height: clamp(10rem, 20vh, 13.5rem);
  padding: 14px;
  background: var(--plate, #F6F0E4);
}

.card--blend .card__figure img { filter: none; }

/* 页脚 */
.site-footer {
  position: relative;
  /* 高于固定标题栏与章节轨：滚到最后时它们该让位，别压在页脚上 */
  z-index: 22;
  padding: clamp(4rem, 10vh, 7rem) var(--gutter) clamp(3rem, 7vh, 5rem);
  border-top: 1px solid var(--rule);
  background: var(--night);
}

.site-footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  gap: .55rem;
}

.site-footer__brand {
  font-family: var(--latin);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: .04em;
  color: var(--bone);
}

.site-footer__line {
  font-family: var(--latin);
  font-size: .68rem;
  letter-spacing: .38em;
  color: var(--ink-50);
}

.site-footer__note,
.site-footer__colophon {
  margin-top: 1.2rem;
  max-width: 40em;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--ink-32);
}

.site-footer__colophon a { border-bottom: 1px solid currentColor; }

.noscript-note {
  position: relative;
  z-index: 3;
  padding: 1rem var(--gutter);
  background: var(--coffee);
  color: var(--bone);
  font-size: var(--fs-small);
  text-align: center;
}

/* 宽屏时章节轨是竖的，正文得给它的走道让开。
   卡片轨道本来就有 -gutter 的外扩，跟着 inner 一起收进来就行。 */
@media (min-width: 901px) {
  .chapter__inner {
    padding-right: calc(var(--gutter) + var(--rail));
  }
}

/* 响应式 */
@media (max-width: 1100px) {
  .blend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .chapter__title { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .chapter__lede { font-size: .95rem; line-height: 1.95; }

  .blend-grid {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    padding-bottom: 1.2rem;
  }

  .blend-grid::-webkit-scrollbar { display: none; }
  .card--blend { width: min(76vw, 20rem); scroll-snap-align: start; }

  .card { width: min(72vw, 17rem); }

  .tech-line { gap: .7rem; font-size: .9rem; }
  .tech-line i { width: 16px; }
}