/* Design language per DESIGN.md (lowesinnovationlabs.com, style reference only).
   Editorial: enormous fluid display type, tight tracking, square corners,
   per-section data-theme swapping, fast easeOutCubic motion.
   No webfonts (Google Fonts blocked in mainland China); every figure tabular-nums. */

:root {
  --paper: #FAFAFA;
  --ink: #000000;
  --light: #EFEEEB;
  --beige: #DAD5C7;
  --gray: #D9D9D9;
  /* #B0A9A9 on #FAFAFA is only 2.21:1 — darkened to ~5.9:1 for WCAG AA text. */
  --gray-dark: #66605A;
  --primary: #1657E8;
  --primary-light: #BBE2FF;
  /* 中文金融惯例：红涨绿跌；两个色都在纸面上过 WCAG AA */
  --up: #C62828;
  --down: #0F7B4F;

  --fs-h1: clamp(40px, 6vw, 88px);
  --fs-h2: clamp(30px, 4vw, 64px);
  --fs-h3: clamp(22px, 2.8125vw, 45px);
  --fs-num: clamp(26px, 3vw, 40px);
  --fs-med: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 12px;

  --margin: 1.25rem;
  --header-h: 5.375rem;
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --theme-text: var(--ink);
  --theme-bg: var(--paper);
}

[data-theme="light"]   { --theme-text: var(--ink); --theme-bg: var(--light); }
[data-theme="primary"] { --theme-text: #FFFFFF;    --theme-bg: var(--primary); }

@media (min-width: 1000px) { :root { --header-h: 6.75rem; } }

* { box-sizing: border-box; }

html { color-scheme: light; scroll-behavior: smooth; }
:target, section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 50; text-decoration: none;
}
.skip:focus { left: var(--margin); top: 10px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.shell {
  max-width: 1240px; margin: 0 auto;
  padding-inline: max(var(--margin), env(safe-area-inset-left)) max(var(--margin), env(safe-area-inset-right));
}

section { background: var(--theme-bg); color: var(--theme-text); }
.band { padding: clamp(48px, 7vw, 104px) 0; }

/* ---------- type ---------- */

h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 {
  font-size: var(--fs-h1); font-weight: 700;
  letter-spacing: -0.03em; line-height: 0.95;
}
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
h3 { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.02em; line-height: 1.05; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-dark); margin: 0 0 clamp(20px, 3vw, 36px);
}
[data-theme="primary"] .eyebrow { color: rgba(255, 255, 255, 0.65); }

.lede { font-size: var(--fs-med); line-height: 1.45; max-width: 46ch; margin: clamp(24px, 3vw, 40px) 0 0; }
.lede a { text-underline-offset: 2px; }

.meta-line {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--gray-dark); margin: clamp(24px, 3vw, 36px) 0 0;
  font-variant-numeric: tabular-nums;
}

/* ---------- header ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--gray);
}
.topbar .shell { display: flex; align-items: baseline; gap: 14px; width: 100%; }
.wordmark { font-weight: 700; letter-spacing: -0.02em; font-size: var(--fs-med); text-decoration: none; }
.wordmark-sub { font-size: var(--fs-small); color: var(--gray-dark); }
.topbar nav { margin-left: auto; display: flex; gap: 22px; }
.topbar nav a {
  font-size: 0.875rem; text-decoration: none; color: var(--gray-dark);
  display: inline-flex; align-items: center; min-height: 44px;  /* 触控目标 ≥44px */
  transition: color .15s var(--ease);
}
.topbar nav a:hover { color: var(--ink); }

/* ---------- asset panels ---------- */

.assets { display: grid; gap: 0; }
.asset { padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--gray); }
.asset:first-child { border-top: 0; padding-top: clamp(24px, 3vw, 40px); }

.asset-head {
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  align-items: flex-end; justify-content: space-between;
}
.asset-head .en { color: var(--gray-dark); font-weight: 500; font-size: 0.65em; margin-left: 8px; }
.contract { font-size: var(--fs-small); color: var(--gray-dark); margin: 10px 0 0; }

.price-block { text-align: right; }
.price {
  margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
}
.price .unit { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 400; color: var(--gray-dark); margin-left: 8px; letter-spacing: 0; }
.change { margin: 8px 0 0; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.change.up { color: var(--up); }
.change.down { color: var(--down); }
.change .date { color: var(--gray-dark); }

/* big-number indicators */
.metrics {
  display: grid; grid-template-columns: 0.75fr 1.05fr 0.9fr 1.5fr;
  margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--gray);
}
.metric { padding: 18px 20px 0 0; min-width: 0; }
.metric + .metric { border-left: 1px solid var(--gray); padding-left: 20px; }
.metric dt { font-size: var(--fs-small); color: var(--gray-dark); margin-bottom: 8px; }
.metric dd {
  margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: var(--fs-num); letter-spacing: -0.02em; line-height: 1.05;
  white-space: nowrap;
}
.metric dd.up { color: var(--up); }
.metric dd.down { color: var(--down); }
/* 区间值更长，单独降一档字号避免溢出右缘 */
.metric dd.m-band { font-size: clamp(20px, 2.4vw, 30px); }
@media (max-width: 720px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { padding: 16px 16px 0 0; }
  .metric + .metric { border-left: 0; padding-left: 0; }
  .metric:nth-child(even) { border-left: 1px solid var(--gray); padding-left: 16px; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--light); margin-top: 16px; }
  .price-block { text-align: left; }
}

/* chart header: pill chips + calibration tag */
.chart-head {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin-top: clamp(28px, 4vw, 40px);
}
.chips { display: inline-flex; gap: 8px; }
.chips button {
  font: inherit; font-size: var(--fs-small); font-family: var(--font-mono);
  display: inline-flex; align-items: center; min-height: 44px;  /* 触控目标 ≥44px */
  padding: 9px 18px; line-height: 1.5; cursor: pointer; border-radius: 4em;  /* pill: the one round shape */
  background: transparent; color: var(--gray-dark);
  border: 1px solid var(--gray);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.chips button:hover { color: var(--ink); border-color: var(--gray-dark); }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--gray-dark); background: var(--light);
  border-radius: 4em; padding: 8px 14px; white-space: nowrap;
}

.chart-slot { margin-top: clamp(20px, 3vw, 32px); }
svg.chart { width: 100%; height: auto; display: block; }

/* horizon-end quantiles */
.quantiles {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--gray);
}
.quantiles div { padding: 14px 14px 0 0; min-width: 0; }
.quantiles div + div { border-left: 1px solid var(--light); padding-left: 14px; }
.quantiles dt { font-size: 11px; color: var(--gray-dark); margin-bottom: 5px; font-family: var(--font-mono); }
.quantiles dd {
  margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quantiles .mid dd { color: var(--primary); }
@media (max-width: 560px) {
  .quantiles dd { font-size: 12px; }
  .quantiles div { padding-right: 8px; }
  .quantiles div + div { padding-left: 8px; }
}

.asset-foot { font-size: var(--fs-small); color: var(--gray-dark); margin: clamp(20px, 3vw, 28px) 0 0; }

/* ---------- method / about / disclaimer ---------- */

/* method: 发线行取代点号列表，标签列 + 正文列 */
.method-list { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--gray); }
.mrow {
  display: grid; grid-template-columns: 120px 1fr; gap: 12px 28px;
  padding: 20px 0; border-bottom: 1px solid var(--gray);
}
.mrow h3 {
  margin: 0; font-size: var(--fs-small); font-weight: 600; line-height: 1.7;
  letter-spacing: 0.02em; color: var(--gray-dark);
}
.mrow p { margin: 0; max-width: 68ch; color: rgba(0, 0, 0, 0.72); line-height: 1.7; }
.mrow p b { color: var(--ink); font-weight: 600; }
.mrow code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: rgba(0, 0, 0, 0.06); padding: 2px 6px;
}
.mrow a { color: var(--primary); text-decoration: none; }
.mrow a:hover { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) {
  .mrow { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
}

.about-p { color: rgba(0, 0, 0, 0.72); max-width: 68ch; margin: clamp(24px, 3vw, 36px) 0 0; }
.about-p a { color: var(--primary); text-decoration: none; }
.about-p a:hover { text-decoration: underline; text-underline-offset: 2px; }

.disclaimer .lede { max-width: 56ch; }
.disclaimer b { font-weight: 650; }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--gray);
  padding: 36px 0 max(56px, env(safe-area-inset-bottom));
  font-size: var(--fs-small); color: var(--gray-dark);
}
.foot p { margin: 6px 0; }
.foot a { text-underline-offset: 2px; transition: color .15s var(--ease); }
.foot a:hover { color: var(--ink); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .asset.reveal { animation: rise .35s var(--ease) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}