:root {
  --night: #070a2a;
  --orange: #ff5a36;
  --ticket: #ffd166;
  --paper: #f4eedc;
  --slate: #91a4c1;
  --ink: #10162e;
  --line: rgb(145 164 193 / 34%);
}

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
html { overflow-x: clip; background: var(--night); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.72;
}
a, button, select, summary { min-height: 44px; }
a, summary { display: inline-flex; align-items: center; }
:focus-visible { outline: 3px solid var(--ticket); outline-offset: 4px; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration-thickness: .12em; text-underline-offset: .18em; }
a:hover { color: var(--ticket); }
.skip-link { position: absolute; z-index: 3; top: -5rem; left: 1rem; padding: .65rem 1rem; color: var(--night); background: var(--ticket); }
.skip-link:focus { top: 1rem; }

.site-header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 2rem; padding: 1rem max(1rem, calc((100vw - 76rem) / 2)); border-bottom: 1px solid var(--line); background: #090d34; }
.site-masthead { display: flex; align-items: center; gap: .7rem; }
.site-masthead p { margin: 0; color: var(--slate); }
.site-masthead .site-name { color: var(--paper); font-size: 1.15rem; font-weight: 800; letter-spacing: .16em; writing-mode: vertical-rl; animation: sign-in .45s both; }
.site-masthead p:last-child { max-width: 8rem; font-size: .78rem; letter-spacing: .08em; animation: subtitle-in .55s .12s both; }
.desktop-nav, .site-footer nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.desktop-nav a, .site-footer a { display: inline-flex; align-items: center; padding: .1rem .15rem; }
.desktop-nav a[aria-current="page"], .site-footer a[aria-current="page"] { color: var(--ticket); border-bottom: 2px solid var(--orange); }
.mobile-nav { display: none; }
.mobile-nav summary { padding: .55rem .75rem; color: var(--night); background: var(--ticket); cursor: pointer; }
.mobile-nav nav { display: grid; padding: .5rem; background: #111947; }
.mobile-nav a { padding: .45rem; }

main { width: min(100% - 2rem, 76rem); margin: 0 auto; padding: 1.5rem 0 3rem; }
.breadcrumb { color: var(--slate); font-size: .88rem; }
.breadcrumb span { margin-left: .4rem; }
.page-heading { position: relative; margin: 1.5rem 0 2rem; padding: clamp(1.35rem, 4vw, 3.5rem); overflow: hidden; border-inline-start: .65rem solid var(--orange); background: linear-gradient(128deg, #0e154c, #1c275d); }
.page-heading::after { position: absolute; top: 0; right: 1.1rem; width: 2.5rem; height: 100%; content: ""; opacity: .8; background: radial-gradient(circle at center, var(--night) 0 .23rem, transparent .25rem) center / 100% 1rem repeat-y; animation: ticket-in .5s .2s both; }
.page-heading .issue, .section-heading > p, .film-number, .issue { margin: 0; color: var(--ticket); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.2; }
h1 { max-width: 15ch; margin: .45rem 0 .85rem; font-size: clamp(2.25rem, 6vw, 5.3rem); letter-spacing: .04em; }
h2 { font-size: clamp(1.35rem, 3vw, 2.2rem); }
.page-intro { max-width: 48rem; margin: 0; font-size: 1.08rem; }

.program-board { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.8fr) minmax(14rem, .8fr); gap: 1.25rem; align-items: start; }
.opening-note, .program-side { padding: 1.25rem; border-top: 4px solid var(--ticket); background: #101949; }
.opening-note { color: var(--paper); }
.program-side { border-top-color: var(--orange); color: var(--slate); }
.program-schedule { min-width: 0; }
.program-list, .film-list, .topic-list, .article-list, .watch-list { display: grid; gap: 1px; margin: 0; padding: 0; }
.program-list { list-style: none; border-top: 1px solid var(--line); }
.program-list li { position: relative; padding: 1.1rem 1rem 1.1rem 4rem; border-bottom: 1px solid var(--line); }
.program-list li::before { position: absolute; top: 1.3rem; left: 1rem; width: 2.1rem; height: 1px; content: ""; background: var(--orange); }
.program-list h2, .film-card h2, .topic-section h2, .editorial-article h2, .watch-record h2 { margin: .35rem 0 .65rem; }

.reading-note, .statement, .source-register, .catalog-controls, .feature-section, .not-found, .topic-section, .editorial-article { margin: 1.5rem 0; padding: clamp(1.1rem, 3vw, 2rem); border-top: 4px solid var(--ticket); background: var(--paper); color: var(--ink); }
.reading-panel { background: var(--paper); color: var(--ink); }
.topic-list, .article-list { gap: 1rem; }
.topic-section, .editorial-article { margin: 0; border-top-color: var(--orange); }
.editorial-byline { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; font-weight: 800; }
.editorial-standfirst { padding-left: 1rem; border-left: 3px solid var(--orange); font-size: 1.08rem; font-weight: 700; }
.editorial-boundary { padding: .65rem .8rem; border: 1px solid #73342a; background: #fff8e8; }
.feature-section { border-top-color: var(--orange); }
.label { display: inline-block; margin: 0 .45rem .25rem 0; padding: .1rem .45rem; color: var(--night); font-size: .82rem; font-weight: 800; }
.label-fact { background: var(--ticket); }
.label-editorial { background: #c7d6f0; }
.label-status { background: #d7e8d1; }
.label-adult, .label-pending { color: #fff; background: #73342a; }
.label-verified { background: #b9dfa6; }

.catalog-controls form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: end; }
label { display: grid; gap: .25rem; font-weight: 800; }
input, select, button { min-height: 44px; padding: .45rem .6rem; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); background: #fffdf6; font: inherit; }
button { color: var(--night); background: var(--orange); font-weight: 800; cursor: pointer; }
button[data-catalog-clear] { background: var(--ticket); }
[data-catalog-count] { margin: 1rem 0 0; font-weight: 800; }
.film-list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.film-card { padding: 1.25rem; border-inline-start: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0c1240; }
.film-card:nth-child(4n + 1) { border-top: 4px solid var(--orange); }
.film-card:nth-child(4n + 2) { border-top: 4px solid var(--ticket); }
.film-card:nth-child(4n + 3) { border-top: 4px solid var(--slate); }
.film-card:nth-child(4n) { border-top: 4px solid #d18bc0; }
.film-tags { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.film-tags > span:not(.label) { padding: .1rem .4rem; border: 1px solid var(--line); color: var(--slate); font-size: .86rem; }
.film-tags .label-neutral { color: var(--paper); background: #283766; }
.source-list { padding-left: 1.2rem; }
.source-list a { overflow-wrap: anywhere; }
.source-list li + li { margin-top: .5rem; }

.watch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.watch-record { padding: 1.25rem; border-inline-start: .5rem solid var(--orange); background: #111947; }
.watch-record:nth-child(even) { border-inline-start-color: var(--ticket); }
.watch-record .label { color: var(--ink); }
.site-footer { padding: 2rem max(1rem, calc((100vw - 76rem) / 2)); border-top: 4px solid var(--orange); color: var(--paper); background: #090d34; }
.site-footer p { max-width: 60rem; color: var(--slate); }

@keyframes sign-in { from { opacity: 0; transform: translateY(-.7rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes subtitle-in { from { opacity: 0; transform: translateX(-.5rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes ticket-in { from { opacity: 0; transform: translateX(1rem); } to { opacity: .8; transform: translateX(0); } }

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr; }
  .site-masthead .site-name { writing-mode: horizontal-tb; }
  .site-masthead p:last-child { max-width: none; }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .program-board { grid-template-columns: 1fr; }
  .program-side { display: flex; gap: .8rem; align-items: baseline; }
  .program-side p { margin: 0; }
  .film-list, .watch-list, .catalog-controls form { grid-template-columns: 1fr; }
  main { width: min(100% - 1.25rem, 76rem); }
  .page-heading { padding: 1.25rem; }
  body { overflow-x: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}