:root {
  --paper: #f2f1ec;
  --paper-soft: #e7e5de;
  --ink: #151513;
  --muted: #625f58;
  --line: rgba(21, 21, 19, 0.17);
  --line-strong: rgba(21, 21, 19, 0.68);
  --dark: #181816;
  --accent: #7c271f;
  --serif: "Noto Serif SC", "Songti SC", SimSun, serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --page: 1420px;
  --home-page: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section: clamp(5rem, 8.5vw, 8.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
::selection { color: var(--paper); background: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.site-header {
  display: flex;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--line);
}
.identity {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-decoration: none;
}
.identity::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  background: var(--accent);
  transform: rotate(45deg);
}
.identity small { color: var(--muted); font-family: var(--serif); font-size: 0.76rem; font-weight: 400; letter-spacing: 0; }
.home-header { display: grid; grid-template-columns: 1fr auto 1fr; }
.home-title { grid-column: 2; display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--muted); font-size: 0.67rem; font-weight: 400; letter-spacing: 0.2em; }
.home-title::before,
.home-title::after { content: ""; width: 1.25rem; height: 1px; background: var(--line); }

.home-page { min-height: 100svh; }
.home-main {
  position: relative;
  display: grid;
  min-height: calc(100svh - 4.5rem);
  align-items: center;
  padding: clamp(2rem, 4.5vh, 3.75rem) var(--gutter) clamp(3rem, 5vh, 4.25rem);
}
.home-grid {
  position: relative;
  display: grid;
  width: min(100%, var(--home-page));
  margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.45vw, 1.35rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}
.home-grid::before { content: ""; position: absolute; top: -1px; left: 0; width: 4.5rem; height: 3px; background: var(--accent); }
.category-card { position: relative; min-width: 0; color: var(--ink); text-decoration: none; }
.category-card:nth-child(2) { margin-top: 0; }
.media-frame { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.media-frame > img,
.media-frame > video,
.card-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-frame > img,
.media-frame > video { object-fit: cover; transition: transform 700ms var(--ease), opacity 260ms ease; }
.media-frame > video { z-index: 1; opacity: 0; }
.category-card.has-preview .media-frame > video { opacity: 1; }
.category-card.has-preview .media-frame > img { opacity: 0; }
.card-shade { z-index: 2; background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.2)); pointer-events: none; }
.category-card:hover .media-frame > img,
.category-card:hover .media-frame > video,
.category-card:focus-visible .media-frame > img,
.category-card:focus-visible .media-frame > video { transform: scale(1.018); }
.category-caption { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding: 1rem 0 0.85rem; border-bottom: 1px solid var(--line-strong); }
.category-caption::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width 420ms var(--ease); }
.category-card:hover .category-caption::after,
.category-card:focus-visible .category-caption::after { width: 3.5rem; }
.caption-primary { display: flex; align-items: baseline; gap: 0.8rem; font-family: var(--serif); }
.caption-primary b { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; color: var(--paper); background: var(--accent); font-family: var(--sans); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.05em; }
.caption-primary em { font-size: clamp(1.05rem, 1.35vw, 1.35rem); font-style: normal; }
.category-caption strong { display: grid; justify-items: end; color: var(--muted); font-size: 0.63rem; font-weight: 400; letter-spacing: 0.13em; }
.category-caption strong::after { content: "点击进入"; margin-top: 0.22rem; color: var(--accent); font-size: 0.56rem; letter-spacing: 0.08em; }
.home-page-count { position: absolute; right: var(--gutter); bottom: 1rem; margin: 0; color: var(--muted); font-size: 0.65rem; letter-spacing: 0.1em; }

.page-shell { width: min(100%, calc(var(--page) + 2 * var(--gutter))); margin: 0 auto; padding: 0 var(--gutter) clamp(5rem, 8vw, 8rem); }
.back-link { display: inline-flex; min-height: 44px; align-items: center; margin: clamp(1.5rem, 3vw, 2.75rem) 0 clamp(2.5rem, 5vw, 4.75rem); color: var(--muted); font-size: 0.7rem; letter-spacing: 0.1em; text-decoration: none; }
.back-link:hover { color: var(--ink); }
.eyebrow,
.page-index { margin: 0; color: var(--muted); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.08em; line-height: 1.35; }
.page-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 4.5rem minmax(20rem, 1.1fr) minmax(20rem, 0.9fr);
  gap: clamp(1.5rem, 3.6vw, 4rem);
  align-items: end;
  padding: clamp(2rem, 3.6vw, 3.2rem) 0 clamp(3rem, 5.5vw, 5.4rem);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(124, 39, 31, 0.025) 0, rgba(124, 39, 31, 0.025) 4.5rem, transparent 4.5rem);
}
.page-intro::before {
  content: attr(data-title);
  position: absolute;
  z-index: 0;
  right: -0.04em;
  bottom: -0.24em;
  color: transparent;
  font-family: var(--serif);
  font-size: clamp(8rem, 15vw, 15rem);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.08em;
  opacity: 0.07;
  pointer-events: none;
  -webkit-text-stroke: 1px var(--ink);
}
.page-intro::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: -1px;
  left: 0;
  width: clamp(3.5rem, 6vw, 6rem);
  height: 2px;
  background: var(--accent);
}
.page-intro > * { position: relative; z-index: 1; min-width: 0; }
.page-intro > div:nth-child(2) { padding-bottom: 0.2rem; }
.page-intro > div:nth-child(2)::after {
  content: "";
  display: block;
  width: clamp(2.5rem, 4vw, 4rem);
  height: 0.35rem;
  margin-top: clamp(1rem, 2vw, 1.65rem);
  background: var(--ink);
  box-shadow: clamp(2.8rem, 4.5vw, 4.5rem) 0 0 -0.12rem var(--accent);
}
.page-index {
  display: grid;
  width: 3.75rem;
  height: 3.75rem;
  place-items: center;
  align-self: start;
  margin-top: -0.08em;
  color: var(--paper);
  background: var(--accent);
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.08em;
}
.page-intro h1 { margin: 0.38rem 0 -0.06em; font-family: var(--serif); font-size: clamp(4.3rem, 7.7vw, 8rem); font-weight: 400; line-height: 0.92; letter-spacing: -0.045em; }
.aigc-page-intro h1 { letter-spacing: -0.075em; }
.intro-copy {
  position: relative;
  max-width: 31rem;
  padding: 1.25rem 1.1rem 1.1rem 1.55rem;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.intro-copy::before,
.intro-copy::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.intro-copy::before { top: -1px; left: 0; width: 3.25rem; border-top: 3px solid var(--accent); }
.intro-copy::after { top: 0; bottom: 0; left: 0; border-left: 1px solid var(--line); }
.intro-copy h2 { margin: 0 0 0.75rem; font-family: var(--serif); font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 400; line-height: 1.35; }
.intro-copy p { margin: 0.45rem 0; font-family: var(--serif); font-size: 1rem; line-height: 1.95; letter-spacing: 0.015em; text-wrap: pretty; }
.intro-copy span { display: inline-block; min-width: 5rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.08em; }

.work-list { display: grid; gap: clamp(3.5rem, 6vw, 6rem); padding-top: var(--section); counter-reset: documentary-work; }
.feature-work,
.aigc-feature { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(16rem, 0.65fr); gap: clamp(1.5rem, 3.5vw, 3.75rem); align-items: stretch; }
.feature-work { position: relative; grid-template-columns: 3.25rem minmax(0, 1.75fr) minmax(16rem, 0.65fr); counter-increment: documentary-work; padding-top: 1rem; border-top: 1px solid var(--line); }
.feature-work::before { content: "0" counter(documentary-work); display: grid; width: 2.15rem; height: 2.15rem; grid-column: 1; place-items: center; color: var(--accent); border: 1px solid var(--accent); font-size: 0.63rem; letter-spacing: 0.06em; }
.feature-work .player-frame { grid-column: 2; }
.feature-work .work-copy { grid-column: 3; }
.player-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; color: white; background: var(--dark); cursor: pointer; }
.player-frame img,
.player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-frame img { z-index: 0; object-fit: cover; transition: transform 550ms var(--ease), filter 300ms ease; }
.player-frame iframe { z-index: 3; background: #000; }
.player-frame::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 66%, rgba(0, 0, 0, 0.42)); pointer-events: none; }
.player-frame:hover img,
.player-frame:focus-visible img { transform: scale(1.018); }
.player-frame.is-loaded::after,
.player-frame.is-loaded .player-launch { display: none; }
.player-launch { position: absolute; z-index: 2; right: 1rem; bottom: 0.9rem; color: #fff; font-size: 0.72rem; letter-spacing: 0.08em; }
.work-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 0.15rem 0; }
.work-copy > p:first-child { margin: 0 0 clamp(1rem, 2vw, 1.6rem); color: var(--accent); font-size: 0.7rem; letter-spacing: 0.11em; }
.work-copy h2 { margin: 0 0 0.85rem; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.4rem); font-weight: 400; line-height: 1.18; letter-spacing: -0.015em; }
.work-copy h2::after { content: ""; display: block; width: 2.75rem; height: 2px; margin-top: 0.85rem; background: var(--accent); }
.work-copy p { max-width: 31rem; margin: 0.35rem 0; font-size: 0.98rem; line-height: 1.8; }
.work-copy > p:not(:first-child),
.official-copy,
.series-intro,
.section-heading p,
.drama-description {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.95;
  letter-spacing: 0.015em;
  text-wrap: pretty;
}
.work-copy > p:not(:first-child) { padding-top: 0.75rem; border-top: 1px solid var(--line); }
.work-copy a,
.external-link,
.series-watch-link { width: fit-content; margin-top: auto; padding: 1.15rem 0 0.18rem; border-bottom: 1px solid var(--line-strong); font-size: 0.78rem; text-decoration: none; transition: color 180ms ease, border-color 180ms ease; }
.work-copy a:hover,
.external-link:hover,
.series-watch-link:hover { color: var(--accent); border-color: var(--accent); }

.official-section,
.series-section,
.short-drama-section,
.short-account-section,
.aigc-feature-after-series { margin-top: var(--section); }
.short-drama-section { margin-top: clamp(3.75rem, 5.5vw, 5.5rem); }
.official-section,
.series-section,
.short-drama-section,
.aigc-feature-after-series { padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.official-section,
.series-section { display: grid; grid-template-columns: 4.5rem minmax(20rem, 1.1fr) minmax(20rem, 0.9fr); column-gap: clamp(1.5rem, 3.6vw, 4rem); }
.official-section > .eyebrow,
.series-section > .eyebrow { grid-column: 1; padding-top: 0.65rem; color: var(--accent); }
.official-section > h2,
.series-section > h2 { grid-column: 2; }
.official-section > .official-intro,
.series-section > .series-intro { grid-column: 3; align-self: end; }
.official-section > .official-copy { grid-column: 3; }
.official-grid,
.two-up,
.series-impact { grid-column: 1 / -1; }
.official-section > h2,
.series-section > h2 { margin: 0.55rem 0 clamp(2rem, 4vw, 3.5rem); font-family: var(--serif); font-size: clamp(2.7rem, 4.6vw, 5rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; }
.official-intro { display: grid; max-width: 54rem; grid-template-columns: 5.6rem 1fr; gap: 1rem; align-items: baseline; margin: 0 0 clamp(2rem, 4vw, 3.5rem); padding: 0.85rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 0.96rem; line-height: 1.75; }
.official-intro span { color: var(--accent); font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; }
.official-copy { max-width: 42rem; margin: calc(-1 * clamp(1.5rem, 3vw, 2.6rem)) 0 2rem; color: #4f4c46; font-size: 0.96rem; line-height: 1.75; }
.official-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 1.5vw, 1.4rem); }
.official-card { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; color: white; background: var(--dark); text-decoration: none; }
.official-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.5)); }
.official-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.official-card span { position: absolute; z-index: 1; right: 1.15rem; bottom: 1rem; left: 1.15rem; font-family: var(--serif); font-size: clamp(1rem, 1.5vw, 1.35rem); }
.official-card span::after { content: "点击观看"; display: block; margin-top: 0.25rem; font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.08em; opacity: 0.78; }
.official-card:hover img,
.official-card:focus-visible img { transform: scale(1.02); }

.aigc-page-intro { grid-template-columns: 4.5rem minmax(20rem, 1.1fr) minmax(20rem, 0.9fr); }
.series-intro { position: relative; max-width: 46rem; margin: 0 0 clamp(2rem, 4vw, 3.5rem); padding: 1rem 0 0.9rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.series-intro::before { content: ""; position: absolute; top: -1px; left: 0; width: 3.25rem; height: 3px; background: var(--accent); }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); }
.series-card { display: flex; min-width: 0; flex-direction: column; }
.episode-title { display: flex; align-items: baseline; gap: 0.85rem; margin: 0 0 0.9rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.episode-title p { display: grid; min-width: 3.7rem; height: 1.7rem; place-items: center; margin: 0; color: var(--paper); background: var(--accent); font-size: 0.62rem; letter-spacing: 0.06em; }
.episode-title h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 400; }
.series-embed { aspect-ratio: 16 / 9; }
.episode-data,
.episode-platforms { display: grid; min-height: 9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.85rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.episode-data p,
.episode-platforms p { position: relative; display: grid; align-content: start; gap: 0.3rem; min-width: 0; margin: 0; padding: 0.85rem; border-right: 1px solid var(--line); }
.episode-data p:first-child,
.episode-platforms p:first-child { padding-left: 0; }
.episode-data p:last-child,
.episode-platforms p:last-child { padding-right: 0; border-right: 0; }
.episode-data span,
.episode-platforms span,
.account-data span,
.impact-metric span { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.07em; }
.episode-data strong,
.episode-platforms b { font-size: clamp(1.18rem, 1.7vw, 1.55rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.3; }
.episode-platforms small { font-size: 0.7rem; line-height: 1.55; }
.series-watch-link { display: inline-block; margin-top: 0.2rem; }
.series-impact { position: relative; margin-top: clamp(3.5rem, 6vw, 5.5rem); padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.series-impact::before { content: ""; position: absolute; top: -1px; left: 0; width: 4.5rem; height: 3px; background: var(--accent); }
.series-overview { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); margin-top: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.series-scope,
.impact-metric { min-height: 7rem; margin: 0; padding: 0.9rem 1rem 1rem; border-right: 1px solid var(--line); }
.series-scope { padding-left: 0; font-family: var(--serif); font-size: clamp(1.15rem, 1.65vw, 1.5rem); line-height: 1.35; }
.series-scope span { display: block; margin-top: 0.55rem; color: var(--muted); font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.04em; }
.impact-metric { position: relative; display: flex; flex-direction: column; justify-content: space-between; }
.impact-metric:last-child { padding-right: 0; border-right: 0; }
.impact-metric strong { font-size: clamp(1.45rem, 2.3vw, 2.25rem); font-weight: 400; letter-spacing: -0.05em; }
.aigc-feature { margin-top: var(--section); }
.video-placeholder { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--dark); }
.video-placeholder img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease), filter 300ms ease; }
.video-placeholder::after { content: "点击观看影片 ↗"; position: absolute; right: 1rem; bottom: 0.85rem; padding-bottom: 0.15rem; color: white; border-bottom: 1px solid rgba(255,255,255,0.72); font-size: 0.72rem; letter-spacing: 0.06em; }
.video-placeholder:hover img,
.video-placeholder:focus-visible img { transform: scale(1.018); filter: brightness(0.88); }
.recursion-copy { padding-top: 0.15rem; }
.aigc-feature-after-series { position: relative; }
.aigc-feature-after-series::before { content: "03"; position: absolute; top: -0.9rem; left: 0; display: grid; width: 2.15rem; height: 2.15rem; place-items: center; color: var(--paper); background: var(--accent); font-size: 0.63rem; letter-spacing: 0.06em; }

.section-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin: 0.55rem 0 clamp(2.5rem, 4vw, 3.75rem); }
.section-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.75rem, 5vw, 5.25rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; }
.section-heading p { position: relative; max-width: 31rem; margin: 0; padding: 1rem 0 0.9rem 1.4rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.section-heading p::before { content: "“"; position: absolute; top: 0.38rem; left: 0; color: var(--accent); font-family: var(--serif); font-size: 2rem; line-height: 1; }
.short-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.35vw, 1.25rem); }
.short-card { min-width: 0; text-decoration: none; }
.short-cover,
.more-work-card,
.account-data-block { aspect-ratio: 3 / 4; }
.short-cover { position: relative; display: block; overflow: hidden; color: white; background: var(--dark); }
.short-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.62)); }
.short-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.short-cover > span { position: absolute; z-index: 1; right: 0.9rem; bottom: 0.85rem; left: 0.9rem; display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.7rem; letter-spacing: 0.05em; }
.short-cover small { font-size: inherit; }
.short-video-card:hover img,
.short-video-card:focus-visible img { transform: scale(1.025); }
.more-work-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; color: var(--paper); background: var(--dark); text-align: center; transition: background 250ms ease; }
.more-work-card::before { content: "03"; position: absolute; top: 0.9rem; left: 0.9rem; color: #c78176; font-size: 0.65rem; letter-spacing: 0.08em; }
.more-work-card span { font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.more-work-card small { color: #bcb8af; font-size: 0.7rem; letter-spacing: 0.06em; }
.more-work-card:hover,
.more-work-card:focus-visible { background: #10100f; }
.account-data-block { position: relative; display: grid; min-width: 0; grid-template-rows: auto repeat(3, 1fr); padding: 0.95rem 1rem 0.7rem; background: transparent; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.account-data-block .eyebrow { padding-bottom: 0.65rem; border-bottom: 1px solid var(--line); }
.eyebrow-extra { color: #938f86; }
.account-data { position: relative; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.account-data:last-child { border-bottom: 0; }
.account-data strong { display: block; margin-top: 0.2rem; font-size: clamp(1.2rem, 1.8vw, 1.75rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1.1; }
.account-data.data-lead strong { font-size: clamp(1.9rem, 3vw, 3.1rem); }
.short-drama-section > .eyebrow { display: flex; align-items: center; gap: 1rem; }
.short-drama-section > .eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.drama-layout { display: grid; width: min(100%, 72rem); margin: 0 auto; grid-template-columns: minmax(26rem, 1fr) minmax(18rem, 23rem); grid-template-areas: "copy player"; gap: clamp(2.75rem, 5vw, 5rem); align-items: stretch; padding-top: 1.5rem; }
.drama-player { grid-area: player; display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--dark); }
.drama-copy { position: relative; isolation: isolate; grid-area: copy; display: flex; min-width: 0; overflow: hidden; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 3vw, 2.75rem) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.drama-copy::before { content: "AD"; position: absolute; z-index: -1; right: -0.05em; top: 31%; color: transparent; font-family: var(--serif); font-size: clamp(9rem, 16vw, 15rem); line-height: 0.8; opacity: 0.065; pointer-events: none; -webkit-text-stroke: 1px var(--ink); }
.drama-award { display: grid; width: min(100%, 35rem); grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.12rem; align-items: center; margin: 0 0 clamp(1.75rem, 3vw, 2.75rem); }
.drama-award::before { content: "奖"; display: grid; width: 2.8rem; height: 2.8rem; grid-row: 1 / 3; place-items: center; color: var(--paper); background: var(--accent); font-family: var(--serif); font-size: 1.25rem; line-height: 1; }
.drama-award span { color: var(--ink); font-family: var(--serif); font-size: clamp(0.95rem, 1.25vw, 1.15rem); letter-spacing: 0.02em; line-height: 1.4; }
.drama-award strong { width: fit-content; padding-bottom: 0.22rem; color: var(--accent); border-bottom: 1px solid currentColor; font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.6rem); font-weight: 500; letter-spacing: 0.025em; line-height: 1.35; }
.drama-copy h2 { max-width: 9ch; margin: 0; font-family: var(--serif); font-size: clamp(3.25rem, 5.4vw, 5.8rem); font-weight: 400; line-height: 1.06; letter-spacing: -0.04em; }
.drama-brief { position: relative; max-width: 36rem; margin-top: clamp(2rem, 3.5vw, 3.25rem); padding: 1.15rem 0 0; border-top: 1px solid var(--line-strong); }
.drama-format { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; }
.drama-description { max-width: 31rem; margin: 0; }
.drama-product-mark { display: none; }

.data-motion::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 650ms var(--ease) var(--stat-delay, 0ms); }
.data-motion.is-revealed::after { transform: scaleX(1); }

@media (max-width: 1100px) {
  .page-intro { grid-template-columns: 3rem minmax(16rem, 1fr) minmax(17rem, 0.8fr); gap: 1.5rem; }
  .feature-work,
  .aigc-feature { grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.65fr); }
  .feature-work { grid-template-columns: 2.25rem minmax(0, 1.45fr) minmax(15rem, 0.65fr); }
  .official-section,
  .series-section { grid-template-columns: 3rem minmax(16rem, 1fr) minmax(17rem, 0.8fr); gap: 1.5rem; }
  .series-overview { grid-template-columns: 1.25fr repeat(2, 1fr); }
  .series-scope { grid-row: span 2; }
  .impact-metric:nth-child(3) { border-right: 0; }
  .impact-metric:nth-child(n+4) { border-top: 1px solid var(--line); }
  .short-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  :root { --section: 4.5rem; }
  .home-page { min-height: auto; }
  .home-main { min-height: 0; align-items: start; padding-top: 1.5rem; }
  .home-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .category-card:nth-child(2) { margin-top: 0; }
  .media-frame { aspect-ratio: 4 / 5; }
  .home-page-count { display: none; }
  .page-intro,
  .aigc-page-intro { grid-template-columns: 2.25rem minmax(0, 1fr); align-items: start; }
  .page-intro .intro-copy { grid-column: 2; max-width: none; }
  .page-intro h1 { font-size: clamp(3.5rem, 15vw, 5.8rem); }
  .page-index { width: 2.25rem; height: 2.25rem; font-size: 0.62rem; }
  .page-intro::before { font-size: clamp(7rem, 22vw, 10rem); }
  .feature-work { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1.25rem; }
  .feature-work .player-frame,
  .feature-work .work-copy { grid-column: 2; }
  .feature-work::before { grid-column: 1; grid-row: 1; }
  .aigc-feature { grid-template-columns: 1fr; gap: 1.25rem; }
  .work-copy > p:first-child { margin-bottom: 1.25rem; }
  .work-copy a { margin-top: 1rem; }
  .official-section,
  .series-section { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .official-section > .eyebrow,
  .series-section > .eyebrow { grid-column: 1; }
  .official-section > h2,
  .series-section > h2,
  .official-section > .official-intro,
  .series-section > .series-intro,
  .official-section > .official-copy { grid-column: 2; }
  .official-grid,
  .two-up,
  .series-impact { grid-column: 1 / -1; }
  .official-copy { margin-left: 0; }
  .two-up { grid-template-columns: 1fr; gap: 3.5rem; }
  .section-heading { grid-template-columns: 1fr; gap: 1.25rem; }
  .drama-layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: 2rem; }
  .drama-award { margin-bottom: 2rem; }
  .drama-brief { margin-top: 2.5rem; padding-right: 0; }
  .drama-product-mark { display: none; }
}

@media (max-width: 600px) {
  .site-header { min-height: 4rem; }
  .home-header { grid-template-columns: 1fr auto; }
  .home-title { grid-column: 2; }
  .page-shell { padding-bottom: 4rem; }
  .back-link { margin-bottom: 2rem; }
  .page-intro,
  .aigc-page-intro { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 2.5rem; }
  .page-index { display: grid; position: absolute; top: 1.25rem; right: 0; }
  .page-intro { background: none; }
  .page-intro::before { right: -0.08em; bottom: -0.05em; font-size: 7rem; opacity: 0.045; }
  .page-intro > div:nth-child(2)::after { height: 0.25rem; }
  .intro-copy { max-width: none; padding-right: 0; }
  .page-intro .intro-copy { grid-column: 1; }
  .official-section,
  .series-section { display: block; }
  .official-section > .eyebrow,
  .series-section > .eyebrow { padding-top: 0; }
  .intro-copy p,
  .work-copy p,
  .series-intro,
  .section-heading p,
  .official-copy,
  .drama-description { font-size: 1rem; }
  .official-grid,
  .short-grid { grid-template-columns: 1fr; }
  .official-card { aspect-ratio: 16 / 11; }
  .official-intro { grid-template-columns: 1fr; gap: 0.35rem; }
  .series-overview { grid-template-columns: repeat(2, 1fr); }
  .series-scope { grid-column: 1 / -1; grid-row: auto; min-height: auto; padding: 0.9rem 0 1.25rem; border-right: 0; }
  .impact-metric { min-height: 5.25rem; }
  .impact-metric:nth-child(odd) { border-right: 0; }
  .impact-metric:nth-child(n+2) { border-top: 1px solid var(--line); }
  .episode-data,
  .episode-platforms { overflow-x: auto; grid-template-columns: repeat(3, minmax(8.5rem, 1fr)); }
  .drama-layout { grid-template-columns: 1fr; grid-template-areas: "player" "copy"; }
  .drama-player { width: min(100%, 24rem); margin: 0 auto; }
  .drama-copy h2 { font-size: clamp(2.7rem, 14vw, 4.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal-item { opacity: 1; transform: none; }
  .data-motion::after { transform: scaleX(1); }
}