/* JKL v11 — 产品中心 × 社群档案 */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --line: rgba(30, 42, 74, .13);
  --surface: rgba(255, 253, 246, .88);
  --shadow-sm: 0 8px 24px rgba(30, 42, 74, .07);
  --shadow-md: 0 18px 54px rgba(30, 42, 74, .12);
}

/* Emil design engineering：明确属性、短反馈、可中断 */
.btn {
  transition: transform 160ms var(--ease-out), box-shadow 220ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.btn:active,
.nav-toggle:active,
.copy-btn:active,
.text-link:active,
.issue-preview:active,
.product-card:active { transform: scale(.97); }
.copy-btn { transition: transform 140ms var(--ease-out), border-color 180ms ease, color 180ms ease; }
.hero-inner > * { animation-duration: 560ms; animation-timing-function: var(--ease-out); }
.hero-inner > *:nth-child(1) { animation-delay: 20ms; }
.hero-inner > *:nth-child(2) { animation-delay: 80ms; }
.hero-inner > *:nth-child(3) { animation-delay: 140ms; }
.hero-inner > *:nth-child(4) { animation-delay: 200ms; }
.hero-inner > *:nth-child(5) { animation-delay: 260ms; }
.reveal {
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

.gateway-grid { display: grid; gap: 1.35rem; }
.gateway-card {
  min-height: 32rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.gateway-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad-brand);
}
.gateway-product { background: linear-gradient(145deg, rgba(195,148,53,.08), transparent 55%), var(--surface); }
.gateway-community { background: linear-gradient(145deg, rgba(30,95,214,.07), transparent 55%), var(--surface); }
.gateway-index {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .24em;
  color: var(--gold-ink);
  margin-bottom: 1.25rem;
}
.gateway-card h3 { font-size: clamp(1.45rem, 3vw, 2rem); margin: 1.15rem 0 .8rem; max-width: 18em; }
.gateway-card > p { color: var(--text-dim); max-width: 37em; }
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: .2rem .65rem;
  margin: 0 .35rem .3rem 0;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.status-ready { color: #245b3a; background: #edf7f0; border-color: #b9ddc5; }
.status-pilot { color: #7a5819; background: #fff7df; border-color: #ead399; }
.status-community { color: #174f9d; background: #edf4ff; border-color: #bed2f2; }
.gateway-list { width: 100%; list-style: none; margin: 1.4rem 0 1.7rem; }
.gateway-list li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: .7rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.gateway-list strong { color: var(--ink); }
.gateway-list span { color: var(--text-dim); font-size: .92rem; }
.text-link,
.card-action {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--ink);
  font-weight: 600;
  margin-top: auto;
  transition: transform 180ms var(--ease-out), color 180ms ease;
}
.text-link span { color: var(--gold-ink); }

.issue-preview-grid { display: grid; gap: 1rem; }
.issue-preview {
  display: block;
  min-height: 17rem;
  padding: 1.45rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease-out), box-shadow 220ms ease, border-color 180ms ease;
}
.issue-preview h3 { font-size: 1.18rem; margin: 1.25rem 0 .65rem; }
.issue-preview p { color: var(--text-dim); font-size: .92rem; }
.issue-no { font-family: var(--font-mono); color: var(--blue); font-weight: 700; }
.issue-kind { float: right; font-size: .73rem; color: var(--gold-ink); border: 1px solid var(--gold-soft); border-radius: 999px; padding: .1rem .55rem; }
.issue-preview .card-action { margin-top: 1.4rem; font-size: .86rem; color: var(--gold-ink); }
.section-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.3rem; }
.section-actions > span { max-width: 36rem; color: var(--text-dim); font-size: .85rem; }

/* 独立页面骨架 */
.subpage .site-nav { position: fixed; }
.subpage main { padding-top: var(--nav-h); }
.subpage-nav .nav-links a[aria-current="page"] { color: var(--gold-ink); }
.page-hero {
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(44rem 24rem at 100% 0, rgba(30,95,214,.08), transparent 66%),
    radial-gradient(38rem 22rem at 0 100%, rgba(195,148,53,.09), transparent 68%);
  border-bottom: 1px solid var(--gold-soft);
}
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .4rem; color: var(--text-dim); font-size: .82rem; margin-bottom: 1.3rem; }
.breadcrumbs a { color: var(--text-dim); }
.page-hero h1 { font-size: clamp(2.15rem, 7vw, 4.6rem); max-width: 15em; letter-spacing: -.02em; }
.page-hero .lead { margin-top: 1rem; max-width: 43rem; font-size: clamp(1rem, 2.3vw, 1.2rem); color: var(--text-dim); }
.hero-meta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.hero-meta span { padding: .35rem .7rem; border-left: 2px solid var(--gold); color: var(--ink); font-size: .86rem; background: rgba(255,253,246,.68); }
.page-section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.page-section + .page-section { border-top: 1px solid var(--line); }
.section-heading-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.section-heading-row p { max-width: 34rem; color: var(--text-dim); }

.product-grid { display: grid; gap: 1.25rem; }
.product-card {
  display: flex;
  flex-direction: column;
  min-height: 29rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease-out), box-shadow 220ms ease, border-color 180ms ease;
}
.product-card .product-code { font-family: var(--font-mono); color: var(--gold-ink); font-size: .75rem; letter-spacing: .16em; }
.product-card h2 { font-size: 1.65rem; margin: 1.15rem 0 .5rem; }
.product-card .product-promise { color: var(--text-dim); min-height: 5.2rem; }
.product-facts { list-style: none; margin: 1.2rem 0 1.7rem; }
.product-facts li { padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.product-facts strong { color: var(--ink); }
.product-card .card-action { margin-top: auto; }
.readiness-note { margin-top: 1.5rem; padding: 1.1rem 1.2rem; border-left: 3px solid var(--gold); background: var(--paper-warm); color: var(--text-dim); font-size: .9rem; }

.detail-hero { padding-bottom: 3.6rem; }
.detail-hero .status-pill { margin-top: 1.2rem; }
.detail-layout { display: grid; gap: 2rem; }
.detail-main > section + section { margin-top: 3.5rem; }
.detail-main h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1rem; }
.detail-main h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.detail-main p + p { margin-top: .8rem; }
.detail-side { align-self: start; }
.side-card { padding: 1.35rem; border: 1px solid var(--gold-soft); border-radius: 8px; background: var(--paper-warm); }
.side-card + .side-card { margin-top: 1rem; }
.side-card h2, .side-card h3 { font-size: 1.08rem; margin-bottom: .7rem; }
.side-card p, .side-card li { font-size: .87rem; color: var(--text-dim); }
.side-card ul { list-style: none; }
.side-card li { padding: .38rem 0; border-bottom: 1px solid rgba(129,96,32,.15); }
.side-card .btn { width: 100%; margin-top: 1rem; }
.feature-grid { display: grid; gap: .9rem; }
.feature-item { padding: 1.15rem; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.52); }
.feature-item .feature-no { font-family: var(--font-mono); color: var(--blue); font-size: .75rem; }
.feature-item p { color: var(--text-dim); font-size: .9rem; }
.process-list { counter-reset: steps; list-style: none; }
.process-list li { counter-increment: steps; display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); }
.process-list li::before { content: counter(steps, decimal-leading-zero); font-family: var(--font-mono); color: var(--gold-ink); font-weight: 700; }
.process-list p { color: var(--text-dim); font-size: .9rem; }
.media-frame { margin-top: 1.2rem; padding: .45rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); }
.media-frame img { width: 100%; height: auto; border-radius: 6px; }
.media-caption { margin-top: .7rem; color: var(--text-dim); font-size: .8rem; }
.media-grid { display: grid; gap: 1rem; }
.principle-box { padding: 1.3rem; border-left: 3px solid var(--blue); background: rgba(30,95,214,.055); }
.principle-box strong { color: var(--ink); }

.issue-grid { display: grid; gap: 1.15rem; }
.issue-card {
  display: flex;
  flex-direction: column;
  min-height: 21rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease-out), box-shadow 220ms ease, border-color 180ms ease;
}
.issue-card h2 { margin: 1.1rem 0 .7rem; font-size: 1.35rem; }
.issue-card p { color: var(--text-dim); font-size: .92rem; }
.issue-card .card-action { margin-top: auto; padding-top: 1.3rem; }
.archive-list { list-style: none; border-top: 1px solid var(--line); }
.archive-list li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.archive-list .topic-num { font-weight: 700; }
.archive-list span:last-child { color: var(--text-dim); }

.photo-wall { display: grid; gap: .9rem; }
.photo-slot {
  min-height: 13rem;
  border: 1px dashed rgba(30,95,214,.3);
  border-radius: 9px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.3rem;
  color: var(--text-dim);
  background:
    linear-gradient(135deg, rgba(30,95,214,.035) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(315deg, rgba(195,148,53,.05) 25%, transparent 25%) 0 0 / 18px 18px,
    #fffdf8;
}
.photo-slot strong { display: block; color: var(--ink); margin-bottom: .35rem; }
.consent-banner { margin-top: 1.2rem; display: grid; gap: .6rem; padding: 1.2rem; border: 1px solid var(--gold-soft); background: var(--paper-warm); }
.consent-banner strong { color: var(--ink); }
.consent-banner p { color: var(--text-dim); font-size: .88rem; }
.issue-article { max-width: 48rem; }
.issue-article .summary { font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); border-left: 2px solid var(--gold); padding-left: 1rem; }
.takeaway-list { list-style: none; margin-top: 1rem; }
.takeaway-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.takeaway-list strong { display: block; color: var(--ink); margin-bottom: .2rem; }
.takeaway-list span { color: var(--text-dim); }
.next-prev { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

.compact-footer { margin-top: 0; }

@media (hover: hover) and (pointer: fine) {
  .gateway-card:hover,
  .issue-preview:hover,
  .product-card:hover,
  .issue-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(30,95,214,.34); }
  .text-link:hover,
  .card-action:hover { transform: translateX(3px); }
}

@media (hover: none) {
  .card-classic:hover,
  .card-glass:hover,
  .badge:hover { transform: none; }
}

@media (min-width: 720px) {
  .issue-preview-grid,
  .product-grid,
  .issue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-wall { grid-template-columns: 1.25fr .75fr .75fr; }
}

@media (min-width: 920px) {
  .gateway-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 4rem; }
  .detail-side { position: sticky; top: calc(var(--nav-h) + 1.4rem); }
}

@media (max-width: 719px) {
  .gateway-card { min-height: auto; }
  .gateway-list li { grid-template-columns: 1fr; gap: .15rem; }
  .page-hero h1 { font-size: 2.35rem; }
  .archive-list li { grid-template-columns: 3.6rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .nav-toggle:active,
  .copy-btn:active,
  .text-link:active,
  .issue-preview:active,
  .product-card:active { transform: none; }
}