/* ============================================================
   安信娱乐 ANXIN ENTERTAINMENT
   01 / tokens.css — 设计变量 · 基础重置 · 排版基座
   设计系统：PROJECTION 24 · 放映机房
   ============================================================ */

:root {
  /* 机房底色：放映窗口关闭后的暗场 */
  --ink: #07080a;
  --ink-2: #0b0e12;
  --ink-3: #10151b;
  --ink-4: #161d25;

  /* 结构线：机身缝隙与齿孔边 */
  --line: #232c37;
  --line-soft: #171e26;

  /* 银幕与光束 */
  --screen: #f3ecdd;
  --screen-2: #d6cdbb;
  --beam: #f2a33c;
  --beam-2: #ffcf8a;
  --beam-dim: rgba(242, 163, 60, .14);
  --cue: #e2452f;
  --cool: #7fd8c4;

  /* 文字层级 */
  --text: #e9e3d6;
  --text-2: #a9a59b;
  --text-3: #76746c;

  /* 字体：标题用无衬线重量，标签用等宽时间码 */
  --f-body: "PingFang SC", "Microsoft YaHei UI", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Courier New", monospace;

  --shell-w: 1280px;
  --pad: clamp(18px, 4vw, 48px);
  --radius: 2px;
  --ease: cubic-bezier(.22, .68, .24, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: #2a333e var(--ink);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.78;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 左侧片盒齿孔：宽屏时出现，纯装饰 */
@media (min-width: 1200px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0 auto 0 0;
    width: 14px;
    z-index: 60;
    pointer-events: none;
    background-color: #050608;
    border-right: 1px solid #141a21;
    background-image: radial-gradient(circle at 7px 11px, #1d252e 3.2px, transparent 3.7px);
    background-size: 14px 24px;
  }
}

/* 全站胶片颗粒：极低透明度，避免影响阅读 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--screen);
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 5.2vw, 64px); line-height: 1.04; font-weight: 800; }
h2 { font-size: clamp(26px, 3.1vw, 40px); }
h3 { font-size: 19px; line-height: 1.35; }
h4 { font-size: 15px; letter-spacing: .06em; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

button { font: inherit; color: inherit; }

::selection { background: var(--beam); color: #1b1205; }

:focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 3px;
}

/* 等宽标签：时间码、卷号、状态 */
.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  color: var(--text-2);
}

.dim { color: var(--text-3); }
.beam { color: var(--beam); }
.cue { color: var(--cue); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  padding: 10px 18px;
  background: var(--beam);
  color: #1b1205;
  font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }