/* ==========================================================================
   AYC KCL · pages.css
   只在 base.css 无法表达时使用；页面特有的组合布局放这里，并标明归属页面。
   ========================================================================== */

/* ===== 首页 ============================================================== */
.hero-home {
  padding-block: 0;
  border-bottom: 1px solid var(--line);
}
.hero-home__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: stretch;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
@media (max-width: 980px) {
  .hero-home__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}
.hero-home__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  justify-content: center;
}
.hero-home__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.hero-home__media {
  position: relative;
  min-height: 320px;
}
.hero-home__media .ph {
  height: 100%;
  aspect-ratio: auto;
}
.hero-home__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-home__ticks {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: var(--sp-4);
}
.hero-home__ticks span {
  display: block;
  width: 34px;
  height: 1px;
  background: var(--line-strong);
}
.hero-home__ticks span:nth-child(3n) {
  width: 20px;
  background: var(--accent);
}

/* 品牌声明条（三硬指标） */
.factbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
@media (max-width: 760px) {
  .factbar {
    grid-template-columns: minmax(0, 1fr);
  }
}
.factbar__item {
  background: var(--bg);
  padding: var(--sp-6) var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.factbar__k {
  font-family: var(--font-mono);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.factbar__t {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  max-width: 30ch;
}

/* 定制入口：左图文 / 右流程 */
.custom-entry {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 980px) {
  .custom-entry {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mini-steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.mini-step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.mini-step__n {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
}
.mini-step__t {
  font-weight: 600;
}
.mini-step__d {
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

/* ===== 作品列表 ========================================================== */
.works-grid {
  padding-top: var(--sp-7);
}
.load-more {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-8);
}
.load-more__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ===== 单品详情 ========================================================== */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 980px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pdp__gallery {
  display: grid;
  gap: var(--sp-3);
}
.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.pdp__thumb {
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.pdp__thumb:hover,
.pdp__thumb[aria-current="true"] {
  border-color: var(--accent);
}
.pdp__thumb .ph {
  aspect-ratio: 1;
  border: 0;
}
.pdp__buy {
  display: grid;
  gap: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
}
@media (max-width: 980px) {
  .pdp__buy {
    position: static;
  }
}
.pdp__price {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.qty {
  display: inline-flex;
  border: 1px solid var(--line-strong);
}
.qty button {
  width: 44px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.qty button:hover {
  background: var(--bg-2);
  color: var(--ink);
}
.qty input {
  width: 56px;
  height: 46px;
  border: 0;
  border-inline: 1px solid var(--line-strong);
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}
.pdp__assurance {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.assurance-row {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.assurance-row svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 4px;
  color: var(--accent);
}

/* ===== 定制页 ============================================================ */
.tier-table {
  font-size: var(--fs-sm);
}
.tier-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.tier-table td {
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tier-table tr:hover td {
  background: var(--bg-1);
}
.tier-table td:first-child {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--ink);
}
.tier-table .tier-price {
  font-family: var(--font-mono);
  color: var(--accent);
  white-space: nowrap;
}

/* 报价表单：分步 */
.quote-form {
  display: grid;
  gap: var(--sp-7);
}
.stepbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stepbar__item {
  background: var(--bg);
  padding: var(--sp-4) var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.stepbar__item[aria-current="step"] {
  background: var(--accent-soft);
  color: var(--ink);
}
.stepbar__n {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.form-grid .field--full {
  grid-column: 1 / -1;
}
@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fieldset {
  border: 1px solid var(--line);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-5);
  background: var(--bg-1);
}
.fieldset__legend {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  padding-inline: var(--sp-2);
}
.radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.radio-card {
  border: 1px solid var(--line);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.radio-card:hover {
  border-color: var(--line-strong);
}
.radio-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-card__t {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.radio-card__t::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease);
}
.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.radio-card:has(input:checked) .radio-card__t::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg);
}
.radio-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.radio-card__d {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ===== 工艺页 ============================================================ */
.craft-flow {
  display: grid;
  gap: 0;
}
.craft-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: var(--sp-7);
  border-top: 1px solid var(--line);
}
.craft-row:nth-child(even) .craft-row__media {
  order: 2;
}
@media (max-width: 860px) {
  .craft-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .craft-row:nth-child(even) .craft-row__media {
    order: 0;
  }
}
.craft-row__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.craft-row__n {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
}
.craft-row__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0;
}
.craft-list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.craft-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.craft-list li::before {
  content: "";
  width: 8px;
  height: 2px;
  background: var(--accent);
  margin-top: 0.75em;
}

/* ===== 文章详情 ========================================================== */
.article-head {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--line);
}
.article-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 980px) {
  .article-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
.article-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: grid;
  gap: var(--sp-4);
  border-left: 1px solid var(--line);
  padding-left: var(--sp-5);
}
@media (max-width: 980px) {
  .article-aside {
    position: static;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: var(--sp-5);
  }
}
.toc {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}
.toc a {
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.toc a:hover {
  color: var(--accent);
}

/* ===== 支持页 ============================================================ */
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.help-card {
  border: 1px solid var(--line);
  padding: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  background: var(--bg-1);
  transition: border-color var(--dur) var(--ease);
}
.help-card:hover {
  border-color: var(--accent-line);
}
.help-card svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

/* ===== 联系页 ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.contact-list {
  display: grid;
  gap: var(--sp-5);
}
.contact-list dt {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--sp-1);
}
.contact-list dd {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* ===== 品牌故事页 ======================================================== */
.timeline {
  display: grid;
  gap: 0;
  border-left: 1px solid var(--line);
  padding-left: var(--sp-6);
}
.timeline__item {
  position: relative;
  padding-bottom: var(--sp-7);
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-6) - 4px);
  top: 7px;
  width: 7px;
  height: 7px;
  background: var(--accent);
}
.timeline__year {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--accent);
  letter-spacing: 0.1em;
}
.timeline__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: 0;
  margin-block: var(--sp-2);
}
.timeline__body {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

/* ===== 404 =============================================================== */
.err-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 22vw, 14rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  user-select: none;
}

/* ===== 风格指南页 ======================================================== */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
}
.swatch {
  border: 1px solid var(--line);
  display: grid;
}
.swatch__chip {
  height: 74px;
}
.swatch__meta {
  padding: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-1);
}
.type-spec {
  display: grid;
  gap: var(--sp-5);
}
.type-spec__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: baseline;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 700px) {
  .type-spec__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}


/* ==========================================================================
   AYC KCL · pages.css 追加层 —— NASA-punk / 地形测绘语言（v0.4 survey restyle）
   --------------------------------------------------------------------------
   与 base.css 追加层同一套语言：发丝框 + 四角括号 + 刻度线 + 等宽微标签 +
   切角；橙色只用于状态·动作·数据。
   浅色主题安全：不使用 --tech-*（白基，浅色下不可见），改用 --line /
   --line-strong / --ink-3 或 color-mix(in srgb, var(--ink) N%, transparent) 派生。
   本层只追加，既有规则一条未删；修改到的变体（:has / [aria-current] 等）
   一律在其后按源序重新声明。
   ========================================================================== */

/* ===== P1 首页：Hero / 指标条 / 定制入口 / 作品网格 ===================== */
.hero-home {
  position: relative;
  border-bottom: 0;
}
.hero-home::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 30%, transparent) 0 1px,
    color-mix(in srgb, var(--ink) 13%, transparent) 1px 11px
  );
  pointer-events: none;
}
.hero-home__eyebrow {
  gap: var(--sp-3);
}
.hero-home__tag {
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.hero-home__ticks span {
  width: 40px;
  height: 1px;
  background-color: color-mix(in srgb, var(--ink) 34%, transparent);
}
.hero-home__ticks span:nth-child(3n) {
  width: 22px;
  background-color: var(--accent);
}

.factbar {
  gap: 1px;
  background-color: var(--line);
  border-block: 1px solid var(--line);
}
.factbar__item {
  background-color: color-mix(in srgb, var(--bg) 88%, transparent);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.factbar__k {
  font-family: var(--font-mono);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.factbar__t {
  color: var(--ink-2);
}

.mini-steps {
  border-top: 1px solid var(--line-strong);
}
.mini-step {
  border-bottom: 1px solid var(--line);
  min-height: 44px;
}
.mini-step__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.mini-step__t {
  letter-spacing: 0;
}
.mini-step__d {
  color: var(--ink-3);
}

.works-grid {
  padding-top: var(--sp-6);
}
.load-more {
  padding-top: var(--sp-7);
}
.load-more__hint {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ===== P2 单品详情：pdp 买卖面板 ======================================== */
.pdp__gallery {
  gap: var(--sp-3);
}
/* 买卖栏做成带角标的仪表面板（内含控件，故不加 clip-path 以免裁掉焦点环） */
.pdp__buy {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--bg-1) 88%, transparent);
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0);
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px, 13px 1px, 1px 13px,
    13px 1px, 1px 13px;
  background-position: left top, left top, right top, right top, left bottom,
    left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
@media (max-width: 980px) {
  .pdp__buy {
    position: static;
  }
}
.pdp__price {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.pdp__thumb {
  padding: 0;
  border: 1px solid var(--line);
  background-color: transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pdp__thumb:hover {
  border-color: var(--accent-line);
  background-color: var(--accent-soft);
}
.pdp__thumb[aria-current="true"] {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}
.pdp__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.qty {
  border: 1px solid var(--line-strong);
}
.qty button {
  width: 44px;
  height: 46px;
  color: var(--ink-2);
}
.qty button:hover {
  background-color: var(--accent-soft);
  color: var(--ink);
}
.qty input {
  height: 46px;
  border-inline: 1px solid var(--line-strong);
  background-color: transparent;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.pdp__assurance {
  border-top: 0;
  padding-top: var(--sp-5);
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 30%, transparent) 0 1px,
    color-mix(in srgb, var(--ink) 13%, transparent) 1px 11px
  );
  background-size: 100% 1px;
  background-position: left top;
  background-repeat: no-repeat;
  background-origin: border-box;
}
.assurance-row {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
.assurance-row svg {
  color: var(--accent);
}

/* ===== P3 定制页：档位表 / 报价表单 / 步骤条 ============================ */
.tier-table {
  font-size: var(--fs-sm);
}
.tier-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line-strong);
}
.tier-table td {
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.tier-table tr:hover td {
  background-color: var(--accent-soft);
}
.tier-table td:first-child {
  letter-spacing: 0;
  color: var(--ink);
}
.tier-table .tier-price {
  font-family: var(--font-mono);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.quote-form {
  display: grid;
  gap: var(--sp-7);
}
.stepbar {
  gap: 1px;
  background-color: var(--line);
  border: 1px solid var(--line);
}
.stepbar__item {
  padding: var(--sp-4);
  background-color: color-mix(in srgb, var(--bg) 88%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-height: 44px;
}
/* 变体按源序补回（本体重写了 background 与字体） */
.stepbar__item[aria-current="step"] {
  background-color: var(--accent-soft);
  color: var(--ink);
}
.stepbar__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.form-grid {
  gap: var(--sp-5);
}
.fieldset {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--bg-1) 88%, transparent);
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0);
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px, 13px 1px, 1px 13px,
    13px 1px, 1px 13px;
  background-position: left top, left top, right top, right top, left bottom,
    left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
.fieldset__legend {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding-inline: var(--sp-2);
}

.radio-cards {
  gap: var(--sp-3);
}
.radio-card {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--ink) 3%, transparent);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.radio-card:hover {
  border-color: var(--accent-line);
  background-color: var(--accent-soft);
}
.radio-card__t {
  letter-spacing: 0;
}
.radio-card__t::before {
  width: 12px;
  height: 12px;
  border: 1px solid var(--line-strong);
}
.radio-card__d {
  color: var(--ink-3);
}
/* 选中 / 焦点的 :has() 变体必须在本体之后重新声明 */
.radio-card:has(input:checked) {
  border-color: var(--accent);
  background-color: var(--accent-soft);
}
.radio-card:has(input:checked) .radio-card__t::before {
  background-color: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg);
}
.radio-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== P4 工艺页：流程行 / 清单 ======================================== */
.craft-flow {
  gap: 0;
}
.craft-row {
  border-top: 0;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 30%, transparent) 0 1px,
    color-mix(in srgb, var(--ink) 13%, transparent) 1px 11px
  );
  background-size: 100% 1px;
  background-position: left top;
  background-repeat: no-repeat;
  background-origin: border-box;
}
.craft-row__head {
  gap: var(--sp-3);
}
.craft-row__n {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.craft-row__title {
  letter-spacing: 0;
}
.craft-list li {
  color: var(--ink-2);
}
.craft-list li::before {
  background-color: var(--accent);
}

/* ===== P5 文章详情：标题区 / 正文栏 / 目录 ============================= */
.article-head {
  border-bottom: 0;
  position: relative;
  padding-bottom: var(--sp-7);
}
.article-head::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--ink) 30%, transparent) 0 1px,
    color-mix(in srgb, var(--ink) 13%, transparent) 1px 11px
  );
}
.article-head__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.article-body {
  align-items: start;
}
.article-aside {
  border-left: 1px solid var(--line);
  padding-left: var(--sp-5);
}
.toc {
  font-size: var(--fs-sm);
}
.toc a {
  display: block;
  min-height: 32px;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.toc a:hover {
  color: var(--accent);
}

/* ===== P6 支持页 / 联系页 =============================================== */
.support-grid {
  gap: var(--sp-4);
}
.help-card {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--bg-1) 88%, transparent);
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0);
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px, 13px 1px, 1px 13px,
    13px 1px, 1px 13px;
  background-position: left top, left top, right top, right top, left bottom,
    left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
.help-card:hover {
  border-color: var(--accent-line);
  background-color: var(--accent-soft);
}
.help-card svg {
  color: var(--accent);
}

.contact-grid {
  align-items: start;
}
.contact-list {
  gap: var(--sp-5);
}
.contact-list dt {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.contact-list dd {
  color: var(--ink-2);
}

/* ===== P7 品牌故事页：时间线 =========================================== */
.timeline {
  border-left: 1px solid var(--line-strong);
  padding-left: var(--sp-6);
}
.timeline__item {
  padding-bottom: var(--sp-7);
}
.timeline__item::before {
  width: 9px;
  height: 9px;
  background-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--bg);
}
.timeline__year {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.timeline__title {
  letter-spacing: 0;
}
.timeline__body {
  color: var(--ink-3);
}

/* ===== P8 404 ========================================================== */
.err-code {
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 1px var(--line-strong);
}

/* ===== P9 风格指南页：色板 / 字级 ====================================== */
.swatch-grid {
  gap: var(--sp-3);
}
.swatch {
  border: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--bg-1) 88%, transparent);
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ink) 34%, transparent) 0 0);
  background-size: 13px 1px, 1px 13px, 13px 1px, 1px 13px, 13px 1px, 1px 13px,
    13px 1px, 1px 13px;
  background-position: left top, left top, right top, right top, left bottom,
    left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
.swatch__chip {
  height: 74px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
.swatch__meta {
  padding: var(--sp-3);
  background-color: color-mix(in srgb, var(--bg-1) 70%, transparent);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.type-spec {
  gap: var(--sp-5);
}
.type-spec__row {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-5);
}

/* ===== P10 减少动态偏好：本层新增的过渡一律关闭 ======================== */
@media (prefers-reduced-motion: reduce) {
  .pdp__thumb,
  .radio-card,
  .qty button,
  .help-card,
  .toc a,
  .swatch,
  .hero-home__tag,
  .stepbar__item {
    transition: none;
  }
}