:root {
  color-scheme: dark;
  --ink: var(--sws-text, #f3f2ee);
  --paper: var(--sws-text, #f3f2ee);
  --muted: var(--sws-text-soft, #b8bec5);
  --line: var(--sws-line, rgba(217, 226, 235, .12));
  --line-strong: var(--sws-line-strong, rgba(217, 226, 235, .24));
  --surface: var(--sws-surface, #111820);
  --surface-soft: var(--sws-surface-strong, #19222c);
  --accent: var(--sws-accent, #ef9c60);
  --header-height: 80px;
  --serif: "Songti SC", "Noto Serif SC", STSong, serif;
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--sws-canvas, #080b10);
  color: var(--ink);
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; transition: transform var(--sws-motion-fast, 160ms) ease, color 160ms ease, border-color 160ms ease; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0) scale(.98); }
:focus-visible { outline: 2px solid var(--sws-focus, #8cbaff); outline-offset: 4px; }
.show-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px clamp(24px, 4vw, 72px) 0; }
.show-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.show-intro strong { color: var(--ink); margin-right: 14px; font-size: 15px; }
.show-intro a { color: var(--accent); font-size: 13px; white-space: nowrap; }
.show-intro a:hover { text-decoration: underline; text-underline-offset: 5px; }
[hidden] { display: none !important; }

.work-card-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: radial-gradient(circle at 22% 18%, rgba(242, 140, 40, .28), transparent 36%), var(--surface-soft);
  color: rgba(255, 255, 255, .22);
  font-family: "Songti SC", "Noto Serif SC", STSong, serif;
  font-size: clamp(72px, 10vw, 172px);
}

a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  left: 18px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: #0a0c0e;
}

.skip-link:focus { top: 12px; }

.show-header {
  position: sticky; top: 0; z-index: 40; height: var(--header-height);
  display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(240px, 1fr);
  align-items: center; gap: 24px; padding: 0 clamp(22px, 4vw, 72px);
  border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(18px); transition: height 180ms ease;
}

.show-header.is-scrolled {
  height: 68px; background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.show-brand, .show-footer > div {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.show-brand img, .show-footer img {
  display: block;
  border-radius: 8px;
}

.show-nav { display: flex; align-items: center; gap: 46px; }

.show-nav a {
  position: relative;
  padding: 28px 0 25px;
  color: #c9c6c0;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.show-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 18px;
  height: 1px;
  background: var(--accent);
  transition: left 180ms ease, right 180ms ease;
}

.show-nav a:hover, .show-nav a:focus-visible, .show-nav a.is-active { color: #fff; }
.show-nav a:hover::after, .show-nav a:focus-visible::after, .show-nav a.is-active::after { left: 0; right: 0; }

.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }

.header-actions button, .header-actions a {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 0 20px;
  cursor: pointer;
}

.text-action, .menu-action { background: transparent; color: #d9d5cf; }
.text-action:hover, .text-action:focus-visible { border-color: var(--line-strong); }
.create-action { display: inline-flex; align-items: center; border-color: rgba(242, 140, 40, 0.72) !important; color: var(--accent); }
.create-action:hover, .create-action:focus-visible { background: var(--accent); color: #08090a; }
.menu-action { display: none; }

.hero {
  position: relative; isolation: isolate; min-height: min(780px, 84svh);
  overflow: hidden; margin: 24px clamp(16px, 3vw, 48px) 0;
  border: 1px solid var(--line); border-radius: 24px; background: var(--surface-soft);
}

.hero-media, .hero-shade { position: absolute; inset: 0; }

.hero-media {
  z-index: -2;
  background: center / cover no-repeat url("/assets/images/show/hero-jingyu.webp");
  transform: scale(1.015);
  transition: opacity 360ms ease, transform 6s ease;
}

.hero.is-changing .hero-media { opacity: 0.32; transform: scale(1.05); }
.hero-media.is-placeholder {
  background:
    radial-gradient(circle at 68% 28%, rgba(242, 140, 40, .22), transparent 32%),
    linear-gradient(135deg, #171a1f, var(--surface) 62%);
}

.hero-shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(3, 5, 7, 0.98) 0%, rgba(3, 5, 7, 0.88) 24%, rgba(3, 5, 7, 0.34) 51%, rgba(3, 5, 7, 0.12) 100%), linear-gradient(0deg, rgba(4, 6, 8, 0.68) 0%, transparent 42%);
}

.hero-content {
  width: min(570px, 48vw); margin-left: clamp(30px, 5.4vw, 96px);
  padding: clamp(64px, 10vh, 120px) 0 110px;
}

.eyebrow, .section-index {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 28px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }

.hero-kicker { margin: 0 0 12px; color: #aaa59e; font-size: 13px; letter-spacing: 0.15em; }

.hero h1 {
  margin: 0;
  font-family: "Songti SC", "Noto Serif SC", STSong, serif;
  font-size: clamp(54px, 6vw, 94px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.06;
}

.hero-author { margin: 24px 0 0; color: #b3aea6; font-size: clamp(18px, 1.5vw, 25px); letter-spacing: 0.1em; }

.hero-summary {
  max-width: 470px;
  margin: 44px 0 0;
  color: #b9b5ae;
  font-size: 15px;
  line-height: 2;
}

.hero-link {
  margin-top: 44px;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 0 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.hero-link:hover, .hero-link:focus-visible { border-bottom-color: var(--accent); color: var(--accent); }

.hero-pager {
  position: absolute;
  left: 50%;
  bottom: 32px;
  display: flex;
  gap: 12px;
  transform: translateX(-50%);
}

.hero-page {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 180ms ease, border-radius 180ms ease, background 180ms ease;
}

.hero-page.is-active { width: 34px; border-radius: 8px; background: var(--accent); }
.hero-playback {
  min-height: 36px;
  margin-left: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(8,10,12,.54);
  color: #d8d5cf;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(14px);
}
.hero-playback:hover,
.hero-playback:focus-visible { border-color: var(--accent); color: #fff; }

.discover {
  max-width: 1680px; margin: 0 auto; padding: 88px clamp(24px, 4vw, 72px) 100px;
}

.discover-heading {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 58px;
}

.section-index { margin-bottom: 16px; color: #807a71; }
.discover-heading h2, .show-value h2 { margin: 0; font-family: "Songti SC", "Noto Serif SC", STSong, serif; font-size: clamp(34px, 4vw, 62px); font-weight: 400; line-height: 1.25; }
.discover-heading > p { max-width: 520px; margin: 0 0 8px; color: var(--muted); line-height: 1.9; }



.category-tabs {
  display: flex; gap: 10px; overflow-x: auto; margin-bottom: 24px;
  padding: 0 0 14px; border-bottom: 1px solid var(--line); scrollbar-width: thin;
}

.category-tabs::-webkit-scrollbar { display: none; }

.category-tabs button {
  position: relative; flex: 0 0 auto; min-height: 40px; border: 1px solid transparent;
  border-radius: 12px; padding: 0 14px; background: var(--surface-soft); color: var(--muted); cursor: pointer;
}

.category-tabs button::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--accent); transition: left 180ms ease, right 180ms ease; }
.category-tabs button:hover, .category-tabs button:focus-visible, .category-tabs button.is-active { color: #fff; }
.category-tabs button:hover::after, .category-tabs button:focus-visible::after, .category-tabs button.is-active::after { left: 0; right: 0; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.work-card {
  border: 1px solid var(--line); border-radius: 20px;
  position: relative;
  grid-column: span 4;
  min-height: clamp(360px, 38vw, 570px);
  overflow: hidden;
  background: var(--surface-soft);
  cursor: pointer;
  transition: opacity 220ms ease, transform 260ms ease;
}

.work-card-wide { grid-column: span 6; min-height: clamp(360px, 34vw, 520px); }
.work-card[hidden] { display: none; }
.work-card:hover, .work-card:focus-visible { transform: translateY(-6px); outline: 1px solid rgba(242, 140, 40, 0.65); outline-offset: 0; }
.work-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.2,1), filter 300ms ease; }
.work-card:hover img, .work-card:focus-visible img { transform: scale(1.035); filter: brightness(0.78); }

.work-card::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(0deg, rgba(3, 5, 7, 0.94), transparent);
  pointer-events: none;
}

.work-card-copy { position: absolute; z-index: 2; inset: auto 24px 24px; }
.work-card-copy p { margin: 0 0 8px; color: #cbc5bc; font-size: 11px; letter-spacing: .12em; }
.work-card-copy h3 { margin: 0 0 8px; font-family: "Songti SC", "Noto Serif SC", STSong, serif; font-size: clamp(28px, 2.4vw, 42px); font-weight: 400; }
.work-card-copy span { color: #8f8a82; font-size: 12px; }
.gallery-status {
  min-height: 24px;
  margin: 0 0 22px;
  color: #8f8a82;
  font-size: 12px;
  letter-spacing: .04em;
}
.empty-state { padding: 80px 0; color: var(--muted); text-align: center; }
.load-more {
  display: block;
  min-width: 150px;
  min-height: 46px;
  margin: 42px auto 0;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: #e5e1db;
  cursor: pointer;
}
.load-more:hover,
.load-more:focus-visible { border-color: var(--accent); color: var(--accent); }
.load-more:disabled { cursor: wait; opacity: .56; }

.show-value {
  border-top: 1px solid var(--line);
  padding: 110px clamp(24px, 9vw, 160px) 124px;
  background: #0b0d10;
}

.show-value h2 { max-width: 980px; }
.value-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 64px; background: var(--line); }
.value-list article { min-height: 190px; padding: 34px; background: #0b0d10; }
.value-list strong { display: block; margin-bottom: 18px; font-size: 19px; }
.value-list p { margin: 0; color: var(--muted); line-height: 1.8; }
.show-value > a { display: inline-flex; margin-top: 48px; border: 1px solid var(--accent); padding: 15px 24px; color: var(--accent); }
.show-value > a:hover, .show-value > a:focus-visible { background: var(--accent); color: #08090a; }

.show-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  padding: 42px clamp(24px, 4vw, 72px);
  border-top: 1px solid var(--line);
  color: #858079;
  font-size: 13px;
}

.show-footer > div { font-size: 15px; color: #c8c4bd; }
.show-footer > p { margin: 0; }
.show-footer nav { justify-self: end; display: flex; gap: 28px; }
.show-footer a:hover, .show-footer a:focus-visible { color: #fff; }

dialog {
  width: min(820px, calc(100vw - 36px));
  border: 1px solid var(--line-strong);
  padding: 0;
  background: var(--surface-soft);
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.65);
}

dialog::backdrop { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(8px); }
.search-dialog-inner { padding: 34px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.dialog-heading h2 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: 38px; font-weight: 400; }
.dialog-heading button, .preview-copy button { border: 1px solid var(--line-strong); padding: 10px 16px; background: transparent; color: #ddd9d2; cursor: pointer; }
.search-dialog label { display: block; margin-bottom: 12px; color: #aaa59e; }
.search-dialog input { width: 100%; border: 1px solid var(--line-strong); border-radius: 0; padding: 18px; background: var(--surface); color: #fff; outline: none; }
.search-dialog input:focus { border-color: var(--accent); }
.search-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.search-submit:hover,
.search-submit:focus-visible { background: var(--accent); color: #08090a; }
.search-results { min-height: 92px; padding: 28px 0 0; color: var(--muted); line-height: 1.8; }
.search-result-button { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 16px 0; background: transparent; color: #eee9e1; text-align: left; cursor: pointer; }
.search-result-button:hover,
.search-result-button:focus-visible { color: var(--accent); }

.preview-dialog { width: min(1040px, calc(100vw - 36px)); }
.preview-shell { display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 560px; }
.preview-shell > img { width: 100%; height: 100%; object-fit: cover; }
.preview-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 70px); }
.preview-copy > p:first-child { color: var(--accent); font-size: 12px; letter-spacing: .16em; }
.preview-copy h2 { margin: 10px 0; font-family: "Songti SC", STSong, serif; font-size: clamp(40px, 5vw, 70px); font-weight: 400; }
.preview-copy span { color: #aaa59e; }
.preview-copy > p:not(:first-child) { margin: 44px 0; color: var(--muted); line-height: 1.9; }
.preview-copy > div { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.preview-copy a { border: 1px solid var(--accent); padding: 11px 16px; color: var(--accent); }

@media (max-width: 980px) {
  :root { --header-height: 68px; }
  .show-header { grid-template-columns: 1fr auto; gap: 14px; }
  .show-nav { position: fixed; inset: var(--header-height) 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 24px 24px; border-bottom: 1px solid var(--line); background: rgba(7,9,11,.98); }
  .show-nav.is-open { display: flex; }
  .show-nav a { padding: 16px 0; }
  .show-nav a::after { bottom: 8px; }
  .text-action { display: none; }
  .menu-action { display: block; }
  .hero { min-height: min(660px, calc(100svh - var(--header-height))); }
  .hero-content { width: min(620px, calc(100% - 48px)); margin-left: 24px; padding-top: 80px; }
  .hero-shade { background: linear-gradient(90deg, rgba(3,5,7,.97), rgba(3,5,7,.7) 58%, rgba(3,5,7,.28)), linear-gradient(0deg, rgba(3,5,7,.8), transparent); }
  .discover { padding-top: 72px; }
  .discover-heading { grid-template-columns: 1fr; gap: 24px; }
  .work-card, .work-card-wide { grid-column: span 6; }
  .value-list { grid-template-columns: 1fr; }
  .show-footer { grid-template-columns: 1fr; }
  .show-footer nav { justify-self: start; }
  .preview-shell { grid-template-columns: 1fr; }
  .preview-shell > img { max-height: 44vh; }
}

@media (max-width: 640px) {
  .show-header { padding: 0 16px; }
  .show-brand span { font-size: 17px; }
  .show-brand img { width: 32px; height: 32px; }
  .create-action { min-height: 36px; padding-inline: 12px; font-size: 12px; }
  .header-actions button { padding-inline: 12px; }
  .hero { min-height: min(610px, calc(100svh - var(--header-height))); }
  .hero-content { width: calc(100% - 40px); margin-left: 20px; padding: 64px 0 96px; }
  .show-intro { padding-top: 20px; gap: 12px; align-items: flex-start; }
  .show-intro p { display: grid; gap: 6px; }
  .show-intro a { font-size: 11px; }
  .hero-summary { margin-top: 32px; font-size: 14px; line-height: 1.85; }
  .hero-link { margin-top: 34px; }
  .discover { padding: 72px 16px 84px; }
  .work-grid { gap: 12px; }
  .work-card, .work-card-wide { grid-column: 1 / -1; min-height: 430px; }
  .show-value { padding: 78px 20px 88px; }
  .show-footer { padding: 36px 20px; }
  .preview-dialog { max-height: calc(100vh - 24px); overflow: auto; }
}

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