/* Public platform — follows the resource homepage's visual structure. */
body.pp-page {
  --pp-bg: #f7f6f1;
  --pp-surface: #fff;
  --pp-ink: #202b33;
  --pp-muted: #727a7f;
  --pp-line: rgba(32, 43, 51, .13);
  --pp-blue: #4d687c;
  --pp-blue-deep: #2f4d61;
  --pp-warm: #9f7350;
  --pp-pagination-accent: #887465;
  --pp-ease: cubic-bezier(.22, 1, .36, 1);
  color: var(--pp-ink);
  background: var(--pp-bg);
  overflow-x: clip;
}

.pp-page,
.pp-page *,
.pp-page *::before,
.pp-page *::after { box-sizing: border-box; }
.pp-page [hidden] { display: none !important; }
.pp-page :where(a, button, input) { -webkit-tap-highlight-color: transparent; }

.pp-main { min-height: 100vh; }

.pp-hero {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  isolation: isolate;
}

.pp-hero-background {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 49%;
  filter: saturate(.76) contrast(.95) brightness(1.02);
  transform: scale(1.015);
}

.pp-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(247, 246, 241, .95) 0%, rgba(247, 246, 241, .87) 34%, rgba(247, 246, 241, .36) 61%, rgba(247, 246, 241, .06) 100%),
    linear-gradient(180deg, rgba(247, 246, 241, .02) 48%, rgba(247, 246, 241, .56) 100%);
  content: "";
}

.pp-hero-layout {
  display: grid;
  min-height: 310px;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: clamp(60px, 9vw, 128px);
  padding-block: 18px 36px;
}

.pp-hero-copy { max-width: 650px; animation: pp-enter 700ms var(--pp-ease) both; }
.pp-kicker { margin: 0 0 18px; color: var(--pp-warm); font-size: 11px; font-weight: 750; letter-spacing: .12em; }

.pp-hero h1 {
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  font-size: clamp(42px, 4.4vw, 56px);
  font-weight: 570;
  letter-spacing: -.06em;
  line-height: 1.08;
}

.pp-hero-lead { max-width: 38em; margin: 16px 0 0; color: #5f686e; font-size: 14px; line-height: 1.8; }
body.pp-page .pp-category-band {
  position: relative;
  z-index: 4;
  display: flex;
  width: max-content;
  max-width: calc(100% - 48px);
  min-height: 68px;
  align-items: center;
  gap: 18px;
  margin: -18px auto 0;
  padding: 9px 11px 9px 19px;
  overflow: hidden;
  border: 1px solid rgba(32, 43, 51, .08);
  border-radius: 21px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 20px 58px rgba(36, 48, 56, .1);
  backdrop-filter: blur(16px);
}

.pp-category-label { display: grid; flex: 0 0 auto; gap: 4px; padding-right: 18px; border-right: 1px solid var(--pp-line); }
.pp-category-label small { color: #999fa3; font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
.pp-category-label strong { font: 620 15px/1.2 "Noto Serif SC", "Songti SC", STSong, serif; white-space: nowrap; }
.pp-category-scroll { display: flex; width: max-content; max-width: 100%; min-width: 0; flex: 0 1 auto; align-items: center; justify-content: center; gap: 9px; margin-block: -7px; padding-block: 7px; overflow-x: auto; scrollbar-width: none; }
.pp-category-scroll::-webkit-scrollbar { display: none; }
.pp-category-scroll button {
  --pp-filter-color: var(--pp-blue-deep);
  display: inline-flex;
  width: 122px;
  min-width: 122px;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--pp-filter-color) 18%, transparent);
  border-radius: 14px !important;
  color: var(--pp-filter-color);
  background: color-mix(in srgb, var(--pp-filter-color) 7%, transparent);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  text-align: center;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 260ms var(--pp-ease);
}
.pp-category-scroll button:hover { border-color: color-mix(in srgb, var(--pp-filter-color) 32%, transparent); background: color-mix(in srgb, var(--pp-filter-color) 13%, transparent); transform: translateY(-1px); }
.pp-category-scroll button[aria-pressed="true"] { border-color: transparent; color: #fff; background: var(--pp-filter-color); box-shadow: 0 10px 24px color-mix(in srgb, var(--pp-filter-color) 22%, transparent); }
.pp-category-scroll b { color: currentColor; font: 500 9px/1 Georgia, serif; opacity: .68; }

.pp-archive-section { padding-block: 28px 64px; }
.pp-archive-head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--pp-line); }
.pp-archive-status { flex: 0 0 auto; color: var(--pp-muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pp-archive-tools { display: flex; width: min(100%, 460px); align-items: end; justify-content: flex-end; gap: 18px; }
.pp-search { display: flex; min-width: 0; flex: 1 1 320px; align-items: center; gap: 10px; border-bottom: 1px solid var(--pp-line); }
.pp-search img { width: 17px; height: 17px; opacity: .55; }
.pp-search input { width: 100%; height: 48px; border: 0; outline: 0; color: var(--pp-ink); background: transparent; font: inherit; font-size: 12px; }
.pp-search:focus-within { border-color: var(--pp-blue); }
.pp-page-size { display: inline-flex; height: 48px; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--pp-muted); font-size: 10px; white-space: nowrap; }
.pp-select-wrap { position: relative; display: inline-flex; align-items: center; }
.pp-page-size select { height: 34px; min-width: 76px; padding: 0 30px 0 11px; border: 1px solid var(--pp-line); border-radius: 11px !important; outline: 0; color: var(--pp-ink); background: var(--pp-surface); cursor: pointer; font: inherit; font-size: 10px; font-weight: 650; appearance: none; -webkit-appearance: none; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.pp-page-size select:hover { border-color: color-mix(in srgb, var(--pp-blue) 38%, transparent); }
.pp-page-size select:focus-visible { border-color: var(--pp-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-blue) 13%, transparent); }
.pp-select-wrap img { position: absolute; right: 10px; width: 14px; height: 14px; pointer-events: none; opacity: .66; transition: transform 180ms ease, opacity 180ms ease; }
.pp-select-wrap:focus-within img { opacity: .9; transform: translateY(1px); }

.pp-grid { position: relative; min-height: 1px; }
.pp-card,
body.pp-page .pp-grid > .pp-card { --pp-category: var(--pp-blue); position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(32, 43, 51, .085); border-radius: 22px !important; background: #fff; box-shadow: 0 10px 30px rgba(36, 48, 56, .045); animation: pp-enter 560ms var(--pp-ease) both; animation-delay: calc(var(--pp-index, 0) * 42ms); transition: transform 340ms var(--pp-ease), box-shadow 240ms ease, border-color 240ms ease; }
.pp-card::before { position: absolute; z-index: 2; inset: 0 18px auto; height: 4px; border-radius: 999px; background: var(--pp-category); content: ""; }
.pp-card:hover { border-color: color-mix(in srgb, var(--pp-category) 30%, transparent); box-shadow: 0 19px 46px rgba(36, 48, 56, .095); transform: translateY(-3px); }
.pp-card-link { display: grid; overflow: hidden; border-radius: inherit; grid-template-rows: auto auto; color: var(--pp-ink); text-decoration: none; }
.pp-card figure { position: relative; width: 100%; aspect-ratio: 2.35 / 1; min-height: 0; margin: 0; overflow: hidden; border-radius: 21px 21px 0 0; background: #e8e8e4; }
.pp-card figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.96); transition: transform 650ms var(--pp-ease); }
.pp-card:hover figure img { transform: scale(1.028); }
.pp-card figure span { position: absolute; bottom: 14px; left: 14px; padding: 6px 9px; border-radius: 999px; color: #fff; background: var(--pp-category); box-shadow: 0 7px 18px color-mix(in srgb, var(--pp-category) 32%, transparent); font-size: 8px; backdrop-filter: blur(8px); }
.pp-card-body { display: flex; min-width: 0; flex-direction: column; padding: 22px 24px 21px; border-radius: 0 0 21px 21px; }
.pp-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; color: #92989c; font-size: 9px; }
.pp-card-meta time { color: var(--pp-category); font-weight: 720; font-variant-numeric: tabular-nums; }
.pp-card-meta span::before { margin-right: 9px; color: #c3c6c8; content: "·"; }
.pp-card h3 { display: -webkit-box; overflow: hidden; margin: 17px 0 11px; font-family: "Noto Serif SC", "Songti SC", STSong, serif; font-size: 21px; font-weight: 650; letter-spacing: -.018em; line-height: 1.42; text-wrap: wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pp-card p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--pp-muted); font-size: 10px; line-height: 1.78; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pp-loading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pp-loading span { min-height: 286px; border-radius: 15px; background: linear-gradient(105deg, #ecebe6 18%, #f9f8f4 38%, #ecebe6 58%); background-size: 220% 100%; animation: pp-shimmer 1.6s linear infinite; }
.pp-empty { padding: 78px 24px; border: 1px solid var(--pp-line); border-radius: 15px; background: #fff; text-align: center; }
.pp-empty small { color: var(--pp-warm); font-size: 8px; letter-spacing: .18em; }
.pp-empty h3 { margin: 13px 0 8px; font: 600 25px/1.3 "Noto Serif SC", "Songti SC", STSong, serif; }
.pp-empty p { margin: 0; color: var(--pp-muted); font-size: 11px; }

@keyframes pp-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pp-shimmer { to { background-position: -220% 0; } }

html[data-theme="dark"] body.pp-page { --pp-bg: #161b1f; --pp-surface: #1d2429; --pp-ink: #edf0f2; --pp-muted: #a4abb0; --pp-line: rgba(231, 237, 240, .13); --pp-blue: #91aabd; --pp-blue-deep: #7592a8; --pp-warm: #d1a27b; --pp-pagination-accent: #b79a84; }
html[data-theme="dark"] .pp-hero::after { background: linear-gradient(90deg, rgba(22, 27, 31, .96) 0%, rgba(22, 27, 31, .84) 44%, rgba(22, 27, 31, .27) 78%, rgba(22, 27, 31, .1) 100%), linear-gradient(180deg, transparent 55%, rgba(22, 27, 31, .72)); }
html[data-theme="dark"] .pp-hero-lead { color: #a7afb4; }
html[data-theme="dark"] :is(.pp-category-band, .pp-card, .pp-empty, .pp-pagination) { background: rgba(29, 36, 41, .95); }
html[data-theme="dark"] .pp-category-scroll button[aria-pressed="true"] { color: #fff; background: var(--pp-filter-color); }
html[data-theme="dark"] .pp-loading span { background: linear-gradient(105deg, #20282d 18%, #2b343a 38%, #20282d 58%); background-size: 220% 100%; }
html[data-theme="dark"] .pp-select-wrap img { filter: invert(1); }
html[data-theme="dark"] .pp-page-nav img { filter: invert(1); }

@media (max-width: 980px) {
  .pp-hero-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
  .pp-category-label { padding-right: 14px; }
  .pp-category-scroll button { width: 112px; min-width: 112px; }
}

@media (max-width: 760px) {
  .pp-hero { min-height: 0; }
  .pp-hero-layout { min-height: 0; grid-template-columns: 1fr; gap: 0; padding-block: 42px 64px; }
  .pp-hero-background { object-position: 68% 49%; }
  .pp-hero::after { background: linear-gradient(90deg, rgba(247, 246, 241, .94) 0%, rgba(247, 246, 241, .8) 50%, rgba(247, 246, 241, .34) 100%), linear-gradient(180deg, rgba(247, 246, 241, .08) 48%, rgba(247, 246, 241, .64) 100%); }
  .pp-hero h1 { font-size: 44px; }
  .pp-hero-lead { font-size: 13px; }
  body.pp-page .pp-category-band { width: calc(100% - 24px); max-width: none; min-height: 62px; margin: -22px auto 0; padding: 10px; border-radius: 18px; }
  .pp-category-label { display: none; }
  .pp-category-scroll { display: flex; width: 100%; justify-content: flex-start; gap: 7px; overflow-x: auto; }
  .pp-category-scroll button { width: auto; min-width: max-content; justify-content: flex-start; }
  .pp-archive-section { padding-block: 30px 40px; }
  .pp-archive-head { min-height: 0; align-items: stretch; flex-direction: column; gap: 10px; margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; }
  .pp-archive-tools { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0; padding: 6px; border: 1px solid rgba(32, 43, 51, .09); border-radius: 16px; background: rgba(255, 255, 255, .88); box-shadow: 0 12px 34px rgba(36, 48, 56, .06); }
  .pp-search { height: 42px; flex-basis: auto; gap: 8px; padding: 0 12px 0 8px; border-right: 1px solid var(--pp-line); border-bottom: 0; }
  .pp-search input { height: 42px; font-size: 12px; }
  .pp-page-size { height: 42px; gap: 6px; padding: 0 4px 0 10px; font-size: 9px; }
  .pp-page-size select { height: 34px; min-width: 76px; padding: 0 29px 0 11px; border: 1px solid rgba(32, 43, 51, .1); border-radius: 11px !important; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 13px rgba(36, 48, 56, .045); font-size: 10px; }
  .pp-select-wrap img { right: 9px; width: 13px; height: 13px; }
  .pp-grid,
  .pp-loading { grid-template-columns: 1fr; }
  .pp-grid { display: grid; gap: 18px; }
  .pp-grid > .pp-card { position: relative !important; top: auto !important; left: auto !important; width: auto !important; }
  .pp-card-link { grid-template-columns: 1fr; }
  .pp-card figure { height: auto; min-height: 0; border-radius: 21px 21px 0 0; }
  .pp-card-body { padding: 20px 18px; }
  .pp-card h3 { font-size: 18px; -webkit-line-clamp: 3; }
  .pp-card p { -webkit-line-clamp: 2; }
}

@media (max-width: 480px) {
  .pp-card-link { grid-template-columns: 1fr; }
  .pp-card figure { height: auto; min-height: 0; border-radius: 21px 21px 0 0; }
  .pp-archive-tools { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-search { min-width: 0; flex-basis: auto; }
  .pp-page-size { justify-content: flex-end; }
}

@media (max-width: 360px) {
  .pp-page-size > span { display: none; }
  .pp-page-size { padding-left: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-page *, .pp-page *::before, .pp-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}