/* typography — 字体、色板、排版尺度 */

@font-face {
  font-family: "Noto Serif SC";
  src: url("../assets/fonts/noto-serif-sc-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif SC";
  src: url("../assets/fonts/noto-serif-sc-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --night: #0A0806;
  --coffee: #2B1A12;
  --copper: #B87333;
  --amber: #E3A85B;
  --bone: #F4EDE3;
  --night-blue: #16202A;
  --brick: #B03A2B;

  --ink-90: rgba(244, 237, 227, .90);
  --ink-70: rgba(244, 237, 227, .70);
  --ink-50: rgba(244, 237, 227, .50);
  --ink-32: rgba(244, 237, 227, .32);
  --rule: rgba(244, 237, 227, .14);

  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --latin: "Cormorant Garamond", "Times New Roman", serif;

  --fs-display: clamp(2.7rem, 7vw, 6.9rem);
  --fs-h3: clamp(1.22rem, 1.7vw, 1.6rem);
  --fs-lede: clamp(.98rem, 1.02vw, 1.12rem);
  --fs-body: .86rem;
  --fs-small: .78rem;
  --fs-micro: .66rem;

  --tracking-latin: .24em;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  /* 宽屏时右侧给固定章节轨留出的走道，正文不许压到编号上 */
  --rail: 5.5rem;
  --maxw: 1380px;
}

body {
  min-height: 100vh;
  background: var(--night);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.latin {
  font-family: var(--latin);
  font-weight: 600;
  font-style: normal;
  letter-spacing: var(--tracking-latin);
  text-transform: uppercase;
  font-size: .78em;
}

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: .75em;
  font-size: var(--fs-micro);
  letter-spacing: .32em;
  color: var(--ink-50);
}

.eyebrow__num {
  font-family: var(--latin);
  font-weight: 600;
  font-size: 1.15em;
  letter-spacing: .12em;
  color: var(--brick);
}

.chapter__title {
  margin-top: clamp(1.4rem, 3vh, 2.6rem);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: .01em;
  color: var(--bone);
  text-wrap: balance;
}

.chapter__lede {
  margin-top: clamp(1.6rem, 3.4vh, 2.8rem);
  max-width: 31em;
  font-size: var(--fs-lede);
  line-height: 2.05;
  color: var(--ink-70);
  text-wrap: pretty;
}

.chapter__meta {
  margin-top: clamp(1.8rem, 4vh, 3.2rem);
  font-family: var(--latin);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .38em;
  color: var(--ink-32);
}

.story {
  margin-top: clamp(1.6rem, 3.4vh, 2.6rem);
  max-width: 34em;
  display: grid;
  gap: 1.05em;
}

.story p {
  font-size: var(--fs-lede);
  line-height: 2.05;
  color: var(--ink-70);
  text-wrap: pretty;
}

.story p:first-child::first-letter {
  float: left;
  font-family: var(--latin);
  font-weight: 600;
  font-size: 3.1em;
  line-height: .86;
  padding: .06em .12em 0 0;
  color: var(--amber);
}

/* 产品卡文字 */
.card__index {
  font-family: var(--latin);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .3em;
  color: var(--accent, var(--amber));
}

.card__name {
  margin-top: .5rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .015em;
}

.card__latin {
  margin-top: .3rem;
  font-family: var(--latin);
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--ink-32);
}

.card__tagline {
  margin-top: .6rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-70);
}

.spec {
  margin-top: clamp(.8rem, 1.6vh, 1.1rem);
  display: grid;
  gap: .34rem;
}

.spec > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(244, 237, 227, .07);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.spec dt {
  flex: 0 0 auto;
  color: var(--ink-32);
  letter-spacing: .1em;
}

.spec dd {
  text-align: right;
  color: var(--ink-90);
}

.card__sca {
  margin-top: .55rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--latin);
  font-size: .62rem;
  letter-spacing: .24em;
  color: var(--ink-32);
}

.card__sca strong {
  font-family: var(--latin);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: .02em;
  color: var(--accent, var(--amber));
  font-variant-numeric: tabular-nums;
}

.notes {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .85rem;
  font-size: var(--fs-small);
  color: var(--ink-70);
}

.notes li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.notes li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, var(--amber));
}

.card__weight {
  margin-top: auto;
  padding-top: .5rem;
  font-family: var(--latin);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .26em;
  color: var(--ink-32);
}