.page-products{
  --p-soft-line: rgba(138,151,166,.18);
  --p-gold-line: rgba(242,200,121,.22);
  --p-body-text: rgba(245,239,228,.78);
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(95% 60% at 100% 0%, rgba(122,31,43,.30), transparent 62%),
    radial-gradient(70% 50% at 0% 30%, rgba(15,42,42,.55), transparent 70%),
    var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  padding-bottom: clamp(1rem, 4vw, 2rem);
}

.page-products .p-block{
  position: relative;
  padding-block: clamp(2.4rem, 6vw, 4.4rem);
}

.page-products .p-crumb{
  margin-bottom: clamp(1.2rem, 3vw, 2rem);
}

/* ---------- 首屏 ---------- */
.page-products .p-hero{
  position: relative;
  padding-block: clamp(1.2rem, 3vw, 2.2rem) clamp(2rem, 5vw, 3.6rem);
}

.page-products .p-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 82% 4%, rgba(217,154,78,.16), transparent 62%),
    radial-gradient(60% 50% at 4% 96%, rgba(78,18,27,.42), transparent 68%);
  pointer-events: none;
}

.page-products .p-seam{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62%;
  width: 8px;
  background: linear-gradient(180deg,
    rgba(242,200,121,0) 0%,
    rgba(242,200,121,.42) 14%,
    rgba(217,154,78,.18) 58%,
    rgba(242,200,121,0) 100%);
  filter: blur(3px);
  pointer-events: none;
}

.page-products .p-hero-grid{
  position: relative;
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.4rem);
}

.page-products .p-title{
  margin: .7rem 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.05rem, 7.2vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--cream);
}

.page-products .p-title span{
  display: block;
  margin-top: .38em;
  font-size: .46em;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--gold);
}

.page-products .p-lede{
  max-width: 33em;
  margin-top: clamp(1rem, 2.4vw, 1.5rem);
  color: var(--p-body-text);
  font-size: clamp(1rem, 1.4vw, 1.06rem);
  line-height: 1.9;
}

.page-products .p-actions{
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}

.page-products .p-facts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--p-gold-line);
}

.page-products .p-fact dt{
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--mist);
}

.page-products .p-fact dd{
  margin: .32rem 0 0;
  font-size: clamp(.86rem, 2vw, 1rem);
  line-height: 1.4;
  color: var(--gold);
  overflow-wrap: anywhere;
}

.page-products .p-hero-figure{
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--p-gold-line);
  background: var(--ink-2);
}

.page-products .p-hero-figure img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.page-products .p-hero-figure .frame-caption{
  display: block;
  padding: .8rem 1rem;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--mist);
  background: rgba(11,22,34,.72);
}

/* ---------- 章节头 ---------- */
.page-products .p-head{
  display: grid;
  gap: .55rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--p-soft-line);
}

.page-products .p-head--band{
  border-top: 0;
  padding-top: 0;
}

.page-products .p-index{
  color: var(--gold);
  font-size: .78rem;
  letter-spacing: .22em;
}

.page-products .p-h2{
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.6vw, 2.2rem);
  line-height: 1.3;
  color: var(--cream);
}

.page-products .p-note{
  max-width: 46em;
  margin: 0;
  color: var(--p-body-text);
  font-size: .97rem;
  line-height: 1.85;
}

/* ---------- 板块筛选 ---------- */
.page-products .board-filter{
  position: relative;
  margin-top: clamp(1.4rem, 3.4vw, 2.2rem);
}

.page-products .board-radio,
.page-products .rec-radio{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-products .board-pills,
.page-products .rec-pills{
  gap: .5rem;
  flex-wrap: wrap;
}

.page-products .board-pills .pill,
.page-products .rec-pills .pill{
  display: inline-block;
  padding: .46rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--p-soft-line);
  background: transparent;
  color: var(--mist);
  font-size: .88rem;
  line-height: 1.5;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.page-products .board-pills .pill:hover,
.page-products .rec-pills .pill:hover{
  color: var(--cream);
  border-color: var(--p-gold-line);
}

.page-products #board-all:checked ~ .board-pills label[for="board-all"],
.page-products #board-theme:checked ~ .board-pills label[for="board-theme"],
.page-products #board-member:checked ~ .board-pills label[for="board-member"],
.page-products #board-festival:checked ~ .board-pills label[for="board-festival"],
.page-products #board-version:checked ~ .board-pills label[for="board-version"],
.page-products #board-city:checked ~ .board-pills label[for="board-city"],
.page-products #board-archive:checked ~ .board-pills label[for="board-archive"]{
  background: var(--wine);
  border-color: var(--wine);
  color: var(--cream);
  box-shadow: var(--shadow-wine);
}

.page-products #rec-date:checked ~ .rec-pills label[for="rec-date"],
.page-products #rec-board:checked ~ .rec-pills label[for="rec-board"]{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

.page-products .board-radio:focus-visible ~ .board-pills,
.page-products .rec-radio:focus-visible ~ .rec-pills{
  outline: 1px dashed var(--gold);
  outline-offset: 5px;
  border-radius: var(--r-pill);
}

.page-products .board-list{
  display: grid;
  gap: clamp(1.3rem, 3vw, 2.4rem);
  margin-top: clamp(1.4rem, 3.4vw, 2.2rem);
}

.page-products #board-theme:checked ~ .board-list .board-item:not([data-board="theme"]),
.page-products #board-member:checked ~ .board-list .board-item:not([data-board="member"]),
.page-products #board-festival:checked ~ .board-list .board-item:not([data-board="festival"]),
.page-products #board-version:checked ~ .board-list .board-item:not([data-board="version"]),
.page-products #board-city:checked ~ .board-list .board-item:not([data-board="city"]),
.page-products #board-archive:checked ~ .board-list .board-item:not([data-board="archive"]){
  display: none;
}

.page-products .board-item{
  display: grid;
  gap: clamp(1rem, 2.6vw, 1.8rem);
  padding-bottom: clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px solid var(--p-soft-line);
}

.page-products .board-no{
  margin: 0;
  color: var(--gold);
  font-size: .78rem;
  letter-spacing: .2em;
}

.page-products .board-head{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .55rem;
}

.page-products .board-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  border: 1px solid var(--p-gold-line);
  background: rgba(242,200,121,.07);
  color: var(--gold);
}

.page-products .board-icon svg{
  width: 1.35rem;
  height: 1.35rem;
}

.page-products .board-name{
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--cream);
}

.page-products .board-desc{
  margin: .9rem 0 0;
  max-width: 40em;
  color: var(--p-body-text);
  font-size: .98rem;
  line-height: 1.9;
}

.page-products .board-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1rem 0 0;
}

.page-products .board-figure{
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--p-gold-line);
  background: var(--ink-2);
}

.page-products .board-figure img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .board-figure--tall img{ aspect-ratio: 3 / 4; }
.page-products .board-figure--square img{ aspect-ratio: 4 / 3; }
.page-products .board-figure--wide img{ aspect-ratio: 3 / 2; }

/* ---------- 节奏带 ---------- */
.page-products .p-band{
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(1.4rem, 4vw, 2.8rem);
}

.page-products .p-band--green{
  background:
    radial-gradient(120% 100% at 6% 0%, rgba(242,200,121,.12), transparent 58%),
    var(--green);
  border: 1px solid var(--p-gold-line);
}

.page-products .p-rhythm{
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin: clamp(1.4rem, 3.4vw, 2.2rem) 0 0;
  padding: 0;
}

.page-products .p-rhythm li{
  padding-top: 1rem;
  border-top: 1px solid var(--p-gold-line);
}

.page-products .p-rhythm-k{
  display: block;
  color: var(--gold);
  font-size: .8rem;
  letter-spacing: .16em;
}

.page-products .p-rhythm h3{
  margin: .5rem 0 .35rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--cream);
}

.page-products .p-rhythm p{
  margin: 0;
  color: rgba(245,239,228,.74);
  font-size: .94rem;
  line-height: 1.8;
}

/* ---------- 记录区 ---------- */
.page-products .p-record-grid{
  display: grid;
  gap: clamp(1.8rem, 4vw, 2.8rem);
  margin-top: clamp(1.4rem, 3.4vw, 2.2rem);
}

.page-products .p-field-list{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
}

.page-products .p-field-list li{
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem .7rem;
  border-radius: var(--r-md);
  background: var(--ink-2);
  border: 1px solid var(--p-soft-line);
  font-size: .9rem;
  color: var(--cream);
}

.page-products .p-field-list .mono{
  color: var(--gold);
  font-size: .75rem;
  letter-spacing: .1em;
}

.page-products .p-aside-text{
  margin: 1.1rem 0 0;
  color: var(--p-body-text);
  font-size: .94rem;
  line-height: 1.9;
}

.page-products .p-record-figure{
  margin: 1.3rem 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--p-soft-line);
}

.page-products .p-record-figure img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-products .record-area{
  position: relative;
  min-width: 0;
}

.page-products .record-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  margin: 1.1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--p-gold-line);
}

.page-products .rec{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  padding: .95rem .5rem;
  border-bottom: 1px solid var(--p-soft-line);
  outline: none;
  transition: background var(--t) var(--ease);
}

.page-products .rec:hover,
.page-products .rec:focus{
  background: rgba(18,34,50,.85);
}

.page-products .rec:focus-visible{
  outline: 1px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

.page-products .rec-name{
  flex: 1 1 100%;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--cream);
}

.page-products .rec-date{
  color: var(--gold);
  font-size: .82rem;
  letter-spacing: .08em;
}

.page-products .rec-board{
  font-size: .78rem;
}

.page-products .rec-state{
  font-size: .8rem;
  color: var(--mist);
  letter-spacing: .06em;
}

.page-products .rec-detail{
  flex: 1 1 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  color: var(--mist);
  font-size: .88rem;
  line-height: 1.75;
  transition: max-height var(--t) var(--ease), opacity var(--t) var(--ease), margin-top var(--t) var(--ease);
}

.page-products .rec:hover .rec-detail,
.page-products .rec:focus .rec-detail{
  max-height: 6rem;
  opacity: 1;
  margin-top: .35rem;
}

.page-products #rec-board:checked ~ .record-list .rec--theme{ order: 1; }
.page-products #rec-board:checked ~ .record-list .rec--member{ order: 2; }
.page-products #rec-board:checked ~ .record-list .rec--festival{ order: 3; }
.page-products #rec-board:checked ~ .record-list .rec--version{ order: 4; }
.page-products #rec-board:checked ~ .record-list .rec--city{ order: 5; }
.page-products #rec-board:checked ~ .record-list .rec--archive{ order: 6; }

/* ---------- 设备与入口 ---------- */
.page-products .p-device-grid{
  display: grid;
  gap: clamp(1.4rem, 3.6vw, 2.4rem);
  margin-top: clamp(1.4rem, 3.4vw, 2.2rem);
}

.page-products .p-device-card{
  background: linear-gradient(155deg, var(--wine) 0%, var(--wine-dark) 68%);
  border: 1px solid rgba(242,200,121,.28);
  border-radius: var(--r-xl);
  padding: clamp(1.3rem, 3.4vw, 2rem);
  box-shadow: var(--shadow-wine);
}

.page-products .p-version{
  margin: .5rem 0 .3rem;
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: .02em;
}

.page-products .p-device-note{
  margin: 0;
  color: rgba(245,239,228,.82);
  font-size: .86rem;
  line-height: 1.8;
}

.page-products .p-device-list{
  list-style: none;
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: 0;
}

.page-products .p-device-list li{
  padding-left: 1rem;
  border-left: 2px solid var(--p-gold-line);
  color: var(--p-body-text);
  font-size: .96rem;
  line-height: 1.85;
}

.page-products .p-device-list strong{
  display: block;
  margin-bottom: .18rem;
  color: var(--cream);
  font-weight: 700;
}

.page-products .p-inline-links{
  margin: 1.2rem 0 0;
  color: var(--mist);
  font-size: .92rem;
  line-height: 1.9;
}

.page-products .p-inline-links a{
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--p-gold-line);
}

.page-products .p-inline-links a:hover{
  color: var(--amber);
  border-bottom-color: var(--amber);
}

/* ---------- 使用场景 ---------- */
.page-products .p-scenes{
  display: grid;
  gap: 0;
  margin-top: clamp(1.4rem, 3.4vw, 2.2rem);
}

.page-products .p-scene{
  display: grid;
  gap: .3rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--p-soft-line);
}

.page-products .p-scene-no{
  margin: 0;
  color: var(--gold);
  font-size: .78rem;
  letter-spacing: .2em;
}

.page-products .p-scene h3{
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--cream);
}

.page-products .p-scene p{
  margin: 0;
  color: var(--p-body-text);
  font-size: .95rem;
  line-height: 1.9;
}

/* ---------- 结尾 ---------- */
.page-products .p-outro{
  position: relative;
  margin-top: clamp(1.6rem, 4vw, 3rem);
  padding-block: clamp(2rem, 5.5vw, 3.4rem);
  border-top: 1px solid var(--p-gold-line);
  background: radial-gradient(85% 130% at 82% 0%, rgba(122,31,43,.34), transparent 62%);
}

.page-products .p-outro-inner{
  display: grid;
  gap: clamp(1.2rem, 3vw, 1.8rem);
}

.page-products .p-outro-text{
  max-width: 42em;
  margin: .8rem 0 0;
  color: var(--p-body-text);
  font-size: .96rem;
  line-height: 1.9;
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px){
  .page-products .p-head{
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: start;
    column-gap: 1.2rem;
  }

  .page-products .p-head .p-note{
    grid-column: 2;
  }

  .page-products .p-rhythm{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.6rem;
  }

  .page-products .p-field-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .rec{
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
  }

  .page-products .rec-name{
    flex: none;
  }

  .page-products .rec-detail{
    grid-column: 1 / -1;
    flex: none;
  }

  .page-products .p-scene{
    grid-template-columns: 3.4rem minmax(0, 1fr) minmax(0, 1.5fr);
    column-gap: 1rem;
    align-items: start;
    padding-block: 1.5rem;
  }

  .page-products .p-scene-no{
    padding-top: .2rem;
  }

  .page-products .p-outro-inner{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (min-width: 960px){
  .page-products .p-hero-grid{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2vw, 1.8rem);
    row-gap: clamp(1.6rem, 3vw, 2.6rem);
  }

  .page-products .p-hero-copy{
    grid-column: 1 / 8;
    grid-row: 1;
  }

  .page-products .p-facts{
    grid-column: 9 / 13;
    grid-row: 1;
    align-self: end;
    grid-template-columns: 1fr;
    gap: .55rem;
  }

  .page-products .p-fact{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: .45rem;
    border-bottom: 1px dashed var(--p-soft-line);
  }

  .page-products .p-fact dd{
    margin: 0;
    text-align: right;
  }

  .page-products .p-hero-figure{
    grid-column: 4 / 13;
    grid-row: 2;
  }

  .page-products .p-rhythm{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .p-record-grid{
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 4vw, 3.2rem);
  }

  .page-products .p-device-grid{
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
  }

  .page-products .board-item{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.2rem, 2.4vw, 2rem);
    align-items: start;
  }

  .page-products .board-body{
    grid-column: 1 / 8;
  }

  .page-products .board-item.has-figure .board-body{
    grid-column: 1 / 7;
  }

  .page-products .board-figure{
    grid-column: 8 / 13;
    margin-top: clamp(1rem, 2.4vw, 2.2rem);
  }

  .page-products .board-item[data-board="version"] .board-figure{
    grid-column: 7 / 12;
  }
}

@media (min-width: 1200px){
  .page-products .p-seam{
    left: var(--band);
    width: 10px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products .rec,
  .page-products .rec-detail,
  .page-products .board-pills .pill,
  .page-products .rec-pills .pill{
    transition-duration: 1ms;
  }
}
<<<END>>>