* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
.container { width: min(1200px, 94%); margin: 0 auto; }
.btn { display: inline-block; padding: .7rem 1.5rem; border: 1px solid var(--accent); color: var(--accent); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; transition: background .25s ease, color .25s ease; }
.btn:hover { background: var(--accent); color: #fff; }

/* ---------- 导航 ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h, 80px); }
.brand { display: inline-flex; align-items: center; font-family: var(--serif); font-weight: 700; color: var(--brand); letter-spacing: var(--brand-ls, .15em); font-size: var(--brand-size, 1.15rem); }
.brand::before { content: var(--brand-mark, none); color: var(--brand-mark-color, var(--accent)); font-size: 10px; margin-right: 8px; }
.brand::after { content: var(--brand-suffix, none); color: var(--brand-suffix-color, var(--accent)); font-size: 12px; margin-left: 6px; }
/* ---------- 通用区块 ---------- */
.section { position: relative; }
.section__title { font-family: var(--serif); font-weight: 600; font-size: var(--sec-title-size, 1.5rem); color: var(--sec-title-color, var(--title-color)); letter-spacing: .02em; margin-bottom: 1.4rem; }
.section__title em { font-style: italic; }
.section__title::after { content: ""; display: block; width: 60px; height: 2px; margin-top: 10px; background: var(--accent); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.4rem; }

/* 横向文字导航带 */
.strip { display: flex; flex-wrap: wrap; gap: var(--strip-gap, 10px 0); align-items: center; }
.strip .strip__item { font-family: var(--strip-font, var(--sans)); font-size: var(--strip-size, .9rem); color: var(--strip-color, var(--muted)); padding: .35rem .8rem; transition: color .2s ease; }
.strip .strip__item.is-active { color: var(--accent); }
.strip .strip__sep { color: var(--strip-sep, var(--line)); }
.strip--tags .strip__item { background: var(--tag-bg, rgba(184,134,11,.08)); color: var(--tag-color, #8b6914); border-radius: 999px; margin: 4px; }
.strip--tags .strip__item:hover { background: var(--accent); color: #fff; }
.strip--filters { border-bottom: 1px solid var(--line); }
.strip--filters .strip__item { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; position: relative; }
.strip--filters .strip__item.is-active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: -1px; height: 2px; background: var(--accent); }
.strip .filter-btn { border: none; background: none; cursor: pointer; font-family: inherit; font-weight: inherit; color: inherit; padding: .35rem .8rem; transition: color .2s ease; }
.strip--filters .filter-btn:hover { color: var(--accent); }

/* 精选横排大卡 */
.featured-row { display: grid; grid-template-columns: var(--featured-cols, repeat(3, 1fr)); gap: var(--card-gap, 24px); }
.feat-card { background: var(--card-bg, var(--surface)); border: 1px solid var(--card-border, rgba(0,0,0,.06)); border-radius: var(--card-radius, 0); overflow: hidden; box-shadow: var(--feat-shadow, 0 12px 40px rgba(0,0,0,.10)); transition: transform .35s ease, box-shadow .35s ease; }
.feat-card:hover { transform: translateY(-6px); box-shadow: var(--card-shadow, 0 18px 44px rgba(0,0,0,.16)); }
.feat-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.feat-card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, none); transition: transform .7s ease; }
.feat-card:hover .feat-card__media img { transform: scale(1.05); }
.feat-card__body { padding: 1.1rem 1.2rem 1.2rem; }
.feat-card__title { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; line-height: 1.4; color: var(--title-color); margin-bottom: .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feat-card__excerpt { font-size: .85rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 全宽精选大卡 */
.ride-card { position: relative; overflow: hidden; border-radius: var(--card-radius, 0); box-shadow: var(--card-shadow, 0 18px 44px rgba(0,0,0,.16)); }
.ride-card__media { aspect-ratio: var(--ride-ar, 16 / 7); }
.ride-card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, none); transition: transform .8s ease; }
.ride-card:hover .ride-card__media img { transform: scale(1.04); }
.ride-card__overlay { position: absolute; inset: 0; background: var(--ride-overlay, linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75) 100%)); }
.ride-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.8rem; }
.ride-card__title { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; color: #fff; margin-bottom: .4rem; }
.ride-card__excerpt { color: rgba(255,255,255,.85); font-size: .95rem; max-width: 70%; }
.ride-card .btn { margin-top: .8rem; border-color: rgba(255,255,255,.8); color: #fff; }

/* 文章网格 / 卡片 */
.cards { display: grid; grid-template-columns: var(--card-cols, repeat(3, 1fr)); gap: var(--card-gap, 28px); }
.card { background: var(--card-bg, var(--surface)); border: 1px solid var(--card-border, rgba(0,0,0,.06)); border-radius: var(--card-radius, 0); overflow: hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card:hover { transform: translateY(var(--lift, -6px)); box-shadow: var(--card-shadow, 0 18px 40px rgba(0,0,0,.12)); border-color: var(--accent); }
.card__media { overflow: hidden; aspect-ratio: var(--media-ar, 4 / 3); background: var(--surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, none); transition: transform .7s ease, filter .4s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--card-pad, 1.2rem 1.3rem 1.4rem); }
.card__date { display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.card__title { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; line-height: 1.4; color: var(--title-color); margin-bottom: .55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__excerpt { font-size: .88rem; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__more { display: inline-block; margin-top: .8rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* 横向滚动 */
.hscroll { display: flex; gap: var(--card-gap, 20px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; }
.hscroll .card, .hscroll .feat-card { flex: none; scroll-snap-align: start; }
.hscroll .feat-card { width: var(--hscroll-w, 340px); }
.hscroll::-webkit-scrollbar { height: 6px; }
.hscroll::-webkit-scrollbar-track { background: var(--line-soft, rgba(0,0,0,.06)); border-radius: 999px; }
.hscroll::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.hscroll { scrollbar-color: var(--accent) var(--line-soft, rgba(0,0,0,.06)); scrollbar-width: thin; }

/* 数据面板 */
.panels { display: grid; grid-template-columns: var(--panel-cols, repeat(3, 1fr)); gap: var(--panel-gap, 20px); }
.panel { background: var(--panel-bg, var(--surface)); border: 1px solid var(--panel-border, rgba(0,0,0,.06)); border-radius: var(--panel-radius, 0); padding: 1.2rem 1.3rem; }
.panel__label { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.panel__value { font-family: var(--panel-font, var(--sans)); font-size: 1.05rem; color: var(--panel-color, var(--accent)); font-weight: 600; }
.specs { display: grid; grid-template-columns: var(--spec-cols, repeat(4, 1fr)); gap: var(--panel-gap, 20px); }
.spec { text-align: center; }
.spec__num { font-family: var(--mono-font, ui-monospace, monospace); font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.spec__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }

/* 色板 / 成分 */
.swatch-list { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.swatch-item { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); }
.swatch-item .swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); }
.ingred-item { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.ingred-item::before { content: "•"; color: var(--accent); }

/* 圆形矩阵 */
.circles { display: grid; grid-template-columns: var(--circle-cols, repeat(3, 1fr)); gap: 48px; text-align: center; }
.circle-card__media { width: var(--circle-size, 180px); height: var(--circle-size, 180px); margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: var(--circle-shadow, inset 0 0 0 1px rgba(0,0,0,.08)); }
.circle-card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, none); transition: transform .7s ease; }
.circle-card:hover .circle-card__media img { transform: scale(1.08); }
.circle-card__title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--title-color); margin-top: .9rem; }
.circle-card__excerpt { font-size: .82rem; color: var(--muted); margin-top: .3rem; }

/* 步骤 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap, 24px); }
.step { background: var(--step-bg, var(--surface)); border-radius: 24px; padding: 1.5rem; box-shadow: var(--step-shadow, 0 10px 30px rgba(0,0,0,.05)); text-align: center; }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .9rem; margin-bottom: .7rem; }
.step__title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--title-color); margin-bottom: .3rem; }
.step__desc { font-size: .85rem; color: var(--muted); }

/* 双栏精选 */
.split { display: grid; grid-template-columns: 3fr 2fr; gap: var(--col-gap, 28px); align-items: stretch; }
.split__media { border-radius: var(--card-radius, 0); overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, none); }
.split__body { display: flex; flex-direction: column; justify-content: center; padding: 1.2rem; }
.split__body h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: var(--title-color); margin-bottom: .6rem; }
.split__body p { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }

/* 满宽水平卡 */
.hcard { display: grid; grid-template-columns: 35% 65%; background: var(--card-bg, var(--surface)); border-bottom: 2px solid var(--line); transition: border-color .25s ease; }
.hcard:hover { border-bottom-color: var(--accent); }
.hcard__media { aspect-ratio: 1 / 1; overflow: hidden; }
.hcard__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, none); transition: filter .3s ease; }
.hcard__body { display: flex; flex-direction: column; justify-content: center; padding: 1.1rem 1.4rem; }
.hcard__title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--title-color); margin-bottom: .3rem; }
.hcard__excerpt { font-size: .85rem; color: var(--muted); }

/* 重叠网格 */
.overlap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.overlap-card { background: var(--card-bg, rgba(255,255,255,.85)); border: 1px solid var(--line); border-radius: var(--card-radius, 0); overflow: hidden; }
.overlap-card:nth-child(3n+2) { transform: translateY(40px); }
.overlap-card:nth-child(3n+3) { transform: translateY(-20px); }
.overlap-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.overlap-card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter, none); transition: transform .6s ease; }
.overlap-card:hover .overlap-card__media img { transform: scale(1.05); }
.overlap-card__body { padding: 1rem 1.1rem; }
.overlap-card__title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--title-color); }

/* 时间轴 */
.timeline { display: flex; justify-content: space-between; gap: 20px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--line); }
.tl-item { position: relative; padding-top: 24px; }
.tl-item::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 2px solid var(--accent); border-radius: 50%; background: var(--bg); }
.tl-item b { display: block; font-size: 1.1rem; color: var(--accent); }
.tl-item span { font-size: .8rem; color: var(--muted); }

/* 时间轴(横线连接-年份) */
.timeline-years { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; position: relative; }
.timeline-years::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.timeline-years b { font-size: 1.05rem; color: var(--accent); }
.timeline-years span { font-size: .75rem; color: var(--muted); }

/* 侧栏分区 */
.side-layout { display: grid; grid-template-columns: var(--side-cols, 1fr 3fr); gap: var(--col-gap, 40px); }
.side-layout .side-nav { border-right: 1px solid var(--line); padding-right: 1.6rem; }
.side-layout .side-nav a { display: block; padding: .45rem 0; font-size: .85rem; color: var(--muted); transition: color .2s ease; }
.side-layout .side-nav a:hover, .side-layout .side-nav a.is-active { color: var(--accent); }
.side-layout .side-main { min-width: 0; }

/* 其他 */
.quote-block { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--title-color); line-height: 1.7; position: relative; padding-left: 2rem; }
.quote-block::before { content: "“"; position: absolute; left: 0; top: -10px; font-size: 2.4rem; color: var(--accent); opacity: .5; }
.quote-block cite { display: block; font-style: normal; font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; }
.icon-row { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.icon-item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--icon-size, .9rem); color: var(--icon-color, var(--muted)); transition: color .2s ease; }
.icon-item:hover { color: var(--accent); }
.icon-item .ico { font-size: 1.05rem; }

/* 日志 */
.logs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--panel-gap, 20px); }
.log { border: 1px solid var(--panel-border, rgba(0,0,0,.06)); background: var(--panel-bg, var(--surface)); border-radius: var(--panel-radius, 0); padding: 1rem 1.1rem; }
.log b { display: block; color: var(--accent); font-size: .9rem; margin-bottom: .2rem; }
.log span { font-size: .82rem; color: var(--muted); }

/* ---------- 首页 hero ---------- */
.hero {
  position: relative; display: flex; align-items: var(--hero-align, center);
  justify-content: var(--hero-justify, center); text-align: var(--hero-text, center);
  min-height: var(--hero-h, 60vh); background-size: cover; background-position: center;
  background-color: var(--bg); overflow: hidden; border-radius: var(--hero-radius, 0);
  margin: var(--nav-h, 80px) var(--hero-mx, 0) 0; color: inherit;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-overlay, linear-gradient(180deg, rgba(10,9,7,.35), rgba(10,9,7,.75)));
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; padding: 90px 24px 70px; max-width: 900px; display: flex; flex-direction: column; align-items: var(--hero-inner-align, center); justify-content: center; }
.hero-kicker { font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--hero-sub); opacity: .85; margin-bottom: 1.2rem; }
.hero-title { font-family: var(--serif); font-style: var(--hero-italic, italic); font-weight: 700; font-size: var(--hero-size, 3.6rem); line-height: 1.12; color: var(--hero-color, #fff); position: relative; display: inline-block; }
.hero-title::after {
  content: ""; position: absolute; left: var(--line-x, 50%); transform: translateX(var(--line-tx, -50%));
  bottom: -16px; width: var(--line-w, 80px); height: var(--line-h, 2px);
  background: var(--line-color, var(--accent));
}
.hero-sub { margin-top: 2.2rem; font-size: 1rem; font-weight: 300; letter-spacing: .12em; color: var(--hero-sub); }
.hero-cta { display: inline-block; margin-top: 2rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.7); padding: .6rem 1.4rem; transition: background .25s ease, color .25s ease; cursor: pointer; }
.hero:hover .hero-cta { background: #fff; color: var(--bg); }

/* ---------- 主内容区 ---------- */
.content { padding: var(--content-pad, 60px) 0 80px; }

/* ---------- 详情页 ---------- */
.page { padding-top: var(--nav-h, 80px); }
.backbar { display: flex; justify-content: space-between; align-items: center; padding: .8rem 0; font-size: .84rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.backbar a:hover { color: var(--accent); }
.article { padding-bottom: 4rem; }
.article__hero { position: relative; overflow: hidden; margin-bottom: 1.8rem; border-radius: var(--article-hero-r, 0); }
.article__hero img { width: 100%; height: 50vh; object-fit: cover; filter: var(--img-filter, none); }
.article__hero::after { content: ""; position: absolute; inset: 0; background: var(--article-hero-overlay, transparent); }
.article__date { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.article__title { font-family: var(--serif); font-weight: 700; font-size: 2.2rem; line-height: 1.25; color: var(--title-color); margin: .6rem 0 1.1rem; position: relative; }
.article__title::after { content: ""; position: absolute; left: 0; bottom: -12px; width: 60px; height: 2px; background: var(--accent); }
.article__body { margin-top: 1.8rem; font-size: 1.02rem; }
.article__body p { margin-bottom: 1.3rem; color: var(--body-text, var(--text)); }
.article__info { margin-top: 2rem; }
.info-grid { display: grid; grid-template-columns: var(--info-cols, repeat(4, 1fr)); gap: var(--panel-gap, 16px); }
.info-grid .panel__label { font-size: .68rem; }
.article__related { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.article__related .section__title { font-size: 1.15rem; margin-bottom: 1rem; }
.related-grid { display: grid; grid-template-columns: var(--related-cols, repeat(3, 1fr)); gap: 16px; }
.rel-card { display: flex; gap: 14px; align-items: center; padding: .55rem .6rem; border-radius: 8px; transition: background .2s ease; }
.rel-card:hover { background: var(--rel-hover, rgba(184,134,11,.08)); }
.rel-card__thumb { width: 70px; height: 70px; border-radius: var(--thumb-r, 10px); object-fit: cover; flex: none; filter: var(--img-filter, none); }
.rel-card__title { font-family: var(--serif); font-weight: 600; font-size: .92rem; line-height: 1.4; color: var(--title-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-card__date { font-size: .7rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.rel-list .rel-card { padding: .7rem 0; border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06)); border-radius: 0; }
.rel-list .rel-card:last-child { border-bottom: none; }
.rel-circles { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.rel-circles::-webkit-scrollbar { display: none; }
.rel-circles .rel-card { flex-direction: column; text-align: center; width: 120px; scroll-snap-align: start; flex: none; }
.rel-circles .rel-card__thumb { width: 80px; height: 80px; border-radius: 50%; }
.article__foot { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.rel-text { display: block; padding: .6rem 0; font-family: var(--serif); font-weight: 600; font-size: .95rem; color: var(--title-color); border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06)); transition: color .2s ease; }
.rel-text:hover { color: var(--accent); }
.rel-text small { display: block; font-family: var(--sans); font-weight: 300; font-size: .72rem; color: var(--muted); }
.rel-text:last-child { border-bottom: none; }

/* 详情页双栏底部区（specs + related） */
.detail-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; margin-top: 2rem; }

/* ---------- 页脚 ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--footer-bg, var(--bg-soft)); padding: 3rem 0 1.6rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; padding-bottom: 2.2rem; }
.footer-brand p { margin-top: .9rem; color: var(--muted); font-size: .9rem; max-width: 360px; }
.footer-col h4 { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--title-color); margin-bottom: 1rem; }
.footer-col a { display: block; color: var(--muted); font-size: .9rem; margin-bottom: .5rem; transition: color .2s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--line-soft, rgba(0,0,0,.06)); padding-top: 1.2rem; text-align: center; color: var(--muted); font-size: .8rem; opacity: .8; }

/* ---------- 信息页 ---------- */
.legal { padding: 7rem 0 5rem; }
.legal .container { max-width: 820px; }
.legal__title { font-family: var(--serif); font-weight: 700; font-size: 2.4rem; color: var(--title-color); text-align: center; }
.legal__title::after { content: ""; display: block; width: 80px; height: 2px; margin: 18px auto 0; background: var(--accent); }
.legal__lede { margin-top: 1.5rem; text-align: center; color: var(--muted); }
.legal__content { margin-top: 2.6rem; color: var(--text); }
.legal__content h2 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; color: var(--title-color); margin: 2rem 0 .7rem; }
.legal__content p { margin-bottom: 1rem; }
.legal__content ul { margin: 0 0 1.1rem 1.3rem; }
.legal__content li { margin-bottom: .35rem; }
.legal__content a { color: var(--accent); text-decoration: underline; }
.legal__contact { margin-top: 2.4rem; padding: 1.3rem 1.5rem; border: 1px solid var(--line); background: var(--surface); text-align: center; }
.legal__contact a { color: var(--accent); text-decoration: underline; }

/* ---------- 动效：入场 ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.section { animation: riseIn .7s ease both; }
.hero { animation: fadeIn .8s ease both; }
@media (prefers-reduced-motion: reduce) { .section, .hero { animation: none; } }

/* ---------- 平板 ---------- */
@media (max-width: 1024px) {
  .cards, .featured-row, .circles, .overlap-grid { grid-template-columns: repeat(2, 1fr); }
  .hcard { grid-template-columns: 1fr; }
  .hcard__media { aspect-ratio: 16 / 10; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
  .container { width: 94%; }
  .nav { height: var(--nav-h, 72px); }
  .brand { font-size: calc(var(--brand-size, 1.15rem) * .9); letter-spacing: .08em; }
  .hero { min-height: 68vh; align-items: center; border-radius: var(--hero-radius-m, var(--hero-radius, 0)); }
  .hero-inner { padding: 110px 16px 80px; }
  .hero-title { font-size: calc(var(--hero-size, 3.6rem) * .58); }
  .hero-sub { font-size: .88rem; letter-spacing: .08em; }
  .hero-kicker { letter-spacing: .18em; }
  .content { padding: 40px 0 56px; }
  .section__title { font-size: calc(var(--sec-title-size, 1.5rem) * .86); }
  .split, .side-layout, .detail-split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cards, .featured-row, .circles, .overlap-grid, .logs, .steps { grid-template-columns: 1fr; }
  .overlap-card:nth-child(n) { transform: none; }
  .side-layout .side-nav { border-right: none; padding-right: 0; margin-bottom: 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem; }
  .side-layout .side-nav .section__title { width: 100%; }
  .side-layout .side-nav a { padding: .3rem .7rem; border: 1px solid var(--line-soft); margin-right: .4rem; font-size: .8rem; }
  .panels, .specs { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline, .timeline-years { flex-direction: column; gap: 1.2rem; }
  .timeline::before { display: none; }
  .tl-item { padding-top: 0; padding-left: 24px; }
  .tl-item::before { top: 4px; left: 0; }
  .icon-row { justify-content: flex-start; flex-wrap: wrap; gap: .9rem 1.4rem; }
  .swatch-list { gap: 1rem; }
  .strip { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .strip .strip__item { white-space: nowrap; }
  .hcard__body { padding: 1rem 1.1rem 1.1rem; }
  .hscroll .feat-card { width: var(--hscroll-w-m, 260px); }
  .hscroll .feat-card__media { aspect-ratio: 16 / 11; }
  .hero-cta { margin-top: 1.6rem; }
  .article { padding-bottom: 3rem; }
  .article__title { font-size: 1.6rem; }
  .article__hero img { height: 38vh; }
  .article__body { font-size: .96rem; line-height: 1.7; }
  .backbar { font-size: .78rem; }
  .detail-split { gap: 24px; margin-top: 1.6rem; }
  .related-grid { grid-template-columns: 1fr; gap: 8px; }
  .rel-card { padding: .4rem 0; gap: 12px; }
  .rel-card__thumb { width: 56px; height: 56px; }
  .rel-card__title { font-size: .88rem; }
  .legal { padding: 5.5rem 0 3.5rem; }
  .legal__title { font-size: 1.9rem; }
  .legal__content { font-size: .95rem; }
  .footer-grid { padding-bottom: 1.6rem; }
  .site-footer { padding: 2.2rem 0 1.2rem; }
}

/* ---------- 小屏手机 ---------- */
@media (max-width: 420px) {
  .brand { font-size: calc(var(--brand-size, 1.15rem) * .78); }
  .hero-title { font-size: calc(var(--hero-size, 3.6rem) * .5); }
  .panels, .specs, .info-grid { grid-template-columns: 1fr; }
  .ride-card__body { padding: 1.1rem 1.2rem 1.2rem; }
  .ride-card__title { font-size: 1.3rem; }
  .ride-card__excerpt { max-width: 100%; }
  .hero-cta { padding: .55rem 1.1rem; font-size: .72rem; }
}


:root {
  --bg: #f0f8fa;
  --bg-soft: #e2f1f5;
  --surface: #ffffff;
  --text: #4a6a7a;
  --muted: #5a8a9a;
  --title-color: #1a5a6a;
  --accent: #2a7a8a;
  --brand: #2a7a8a;
  --brand-ls: .12em;
  --brand-size: 1.25rem;
  --brand-mark: none;
  --brand-suffix: "☀";
  --brand-suffix-color: #f4d03f;
  --nav-bg: rgba(240,248,250,.85);
  --line: rgba(42,122,138,.3);
  --line-soft: rgba(42,122,138,.14);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --img-filter: brightness(1.1) saturate(1.1) contrast(.95);
  --card-cols: 1fr;
  --card-bg: #fff;
  --card-border: rgba(42,122,138,.12);
  --card-radius: 20px;
  --card-pad: 1.2rem 1.3rem 1.3rem;
  --card-shadow: 0 16px 40px rgba(42,122,138,.12);
  --lift: -6px;
  --media-ar: 16 / 9;
  --ride-ar: 16 / 9;
  --ride-overlay: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.6) 100%);
  --hero-h: 50vh;
  --hero-radius: 0;
  --hero-overlay: linear-gradient(90deg, rgba(10,40,50,.35), rgba(10,40,50,.65));
  --hero-color: #fff;
  --hero-italic: normal;
  --hero-size: 3.4rem;
  --hero-sub: #e0f0f5;
  --hero-text: left;
  --hero-justify: flex-start;
  --hero-align: center;
  --hero-inner-align: flex-start;
  --line-color: rgba(255,255,255,.4);
  --line-w: 120px;
  --line-h: 2px;
  --nav-h: 72px;
  --icon-color: #5a8a9a;
  --icon-size: .9rem;
  --content-pad: 40px;
  --panel-bg: #fff;
  --panel-border: rgba(42,122,138,.15);
  --panel-radius: 16px;
  --tag-bg: #2a7a8a;
  --tag-color: #fff;
  --thumb-r: 14px;
  --footer-bg: #e2f1f5;
  --dot: "☀";
  --article-hero-r: 0;
  --info-cols: repeat(3, 1fr);
  --rel-hover: rgba(42,122,138,.06);
}
.brand::after { content: " ☀"; font-size: .9rem; }
.hero-title::after { border-bottom: 2px dashed rgba(255,255,255,.4); height: 0; background: none; }
.hero-title { text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.card:hover .card__media img { filter: none; transform: scale(1.03); }
.card:hover { transform: translateY(-6px) rotate(1deg); }
.card__title { color: #1a5a6a; }
.hcard { background: #fff; border-radius: 20px; border-bottom: none; overflow: hidden; box-shadow: 0 16px 40px rgba(42,122,138,.10); }
.hcard__media { aspect-ratio: 16 / 9; }
.hcard:hover { transform: translateY(-6px) rotate(1deg); border-bottom: none; }
.icon-row { height: 80px; justify-content: center; align-items: center; }
.info-grid .panel { background: #e2f1f5; border-radius: 16px; }
@media (max-width: 960px) { :root { --info-cols: repeat(3, 1fr); } }
@media (max-width: 640px) { :root { --info-cols: 1fr; } }