/* Layout: David's jacket-yellow dossier on the left, a desk gradient taken from the reference art on the right,
   windows floating on it; clipped corners, no rounded cards. Single look per theme (Night City), no light mode.
   data-palette on <html> picks the theme: s1 = 第一季 · 夜城薄荷, s2 = 第二季 · 海报. Colours are sampled from
   参考图片/边缘行者1/OIF.webp and 参考图片/边缘行者2/OIF (1).webp; derived values are marked. */

@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url(/fonts/chakra-petch-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url(/fonts/chakra-petch-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(/fonts/barlow-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(/fonts/barlow-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(/fonts/barlow-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

/* ---------- theme s1 · 第一季 · 夜城薄荷 (default) ---------- */
:root {
  color-scheme: dark;

  /* David's jacket and the city shadow behind him */
  --dossier: #FADF21;
  --ink: #14121C;
  --ink-soft: #4A4116;                       /* secondary text on the dossier, 7.6:1 */
  --ink-rule: rgb(20 18 28 / 0.26);
  --trim: #395B57;
  --dossier-split-1: #C199CD;
  --dossier-split-2: #54A193;

  /* the city backdrop: mint down to periwinkle */
  --desk: linear-gradient(172deg, #8FE5C2 0%, #5ECBB2 26%, #54A193 50%, #948ABE 76%, #7C7BAE 100%);
  --bar: linear-gradient(90deg, #8FE5C2, #5ECBB2 45%, #948ABE);
  --desk-texture: repeating-linear-gradient(90deg, transparent 0 31px, rgb(255 255 255 / 0.09) 31px 32px);
  --desk-texture-size: auto;

  /* window glass: the deep night green of the same frame */
  --glass: #0C2015;
  --raised: #13301F;                         /* derived */
  --void: #06140D;                           /* derived */
  --line: #1D3B2C;                           /* derived */
  --line-hi: #395B57;
  --pale: #F2F7FF;
  --muted: #9FC9B8;

  --acc-1: #8FE5C2;                          /* city mint */
  --acc-2: #C199CD;                          /* Lucy's orchid */
  --acc-3: #FADF21;                          /* jacket yellow */
  --acc-4: #948ABE;                          /* far-city violet */
  --danger: #FF8FA3;                         /* derived, errors only */
  --net: #0C2015;
  --pulse: #C199CD;
  --shadow: rgb(6 20 13 / 0.45);

  --grain-opacity: 0.06;
  --scan-opacity: 0.10;
  --glitch-shift: 2px;

  /* Role aliases used across the stylesheets. They resolve per theme. */
  --yellow: var(--dossier);
  --navy: var(--glass);
  --cyan: var(--acc-1);
  --magenta: var(--acc-2);

  /* Context tokens. Surfaces that change the ground (dossier, title bars, top bar) redefine these. */
  --fg: var(--pale);
  --fg-2: var(--muted);
  --rule: var(--line);
  --surface: var(--void);
  --link: var(--acc-1);
  --link-hover: var(--acc-2);
  --focus: var(--dossier);
  --split-1: var(--acc-2);
  --split-2: var(--acc-1);

  --font-display: "Chakra Petch", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-body: "Barlow", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "PingFang SC", monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-lg: 1.0625rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.875rem;
  --t-3xl: clamp(2.125rem, 3.6vw, 3.25rem);

  --cut: 14px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- theme s2 · 第二季 · 海报 ---------- */
:root[data-palette="s2"] {
  /* the logo gold and its dark red underline */
  --dossier: #DEB93D;
  --ink-soft: #3B1D3B;                       /* 7.8:1 on the gold */
  --trim: #592017;
  --dossier-split-1: #D30B37;
  --dossier-split-2: #3A6583;

  /* the poster sky: blown-out cream, sky cyan, grey-violet city, deep night violet */
  --desk: linear-gradient(176deg, #FDF8B6 0%, #12BCE8 30%, #4C445C 64%, #201834 100%);
  --bar: linear-gradient(90deg, #FDF8B6, #12BCE8);
  --desk-texture: radial-gradient(rgb(20 18 28 / 0.2) 1px, transparent 1.6px); /* the poster's halftone */
  --desk-texture-size: 6px 6px;

  --glass: #161026;                          /* derived from #201834, one step darker */
  --raised: #221A36;                         /* derived */
  --void: #0E0A18;                           /* derived */
  --line: #2C2340;                           /* derived */
  --line-hi: #4C445C;
  --muted: #ADA6C2;

  --acc-1: #12BCE8;                          /* sky cyan */
  --acc-2: #E48927;                          /* flame orange */
  --acc-3: #FDF8B6;                          /* sky cream */
  --acc-4: #FF6B81;                          /* logo red, lifted for text on glass */
  --danger: #FF6B81;
  --net: #EA0F46;
  --pulse: #FDF8B6;
  --shadow: rgb(14 10 24 / 0.5);
  --split-1: #EA0F46;

  --grain-opacity: 0.12;
  --scan-opacity: 0.08;
  --glitch-shift: 1px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--void);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
/* Kept for screen readers when a small heading is switched off in admin. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--acc-2); color: var(--ink); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Public pages stand on the theme's desk gradient, with its texture over it. */
body.page-home,
body.page-article,
body.page-nf {
  background-color: var(--glass);
  background-image: var(--desk-texture), var(--desk);
  background-size: var(--desk-texture-size), auto;
  background-attachment: fixed;
}

.skip-link {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: var(--gutter-l);
  z-index: 200;
  padding: 8px 14px;
  background: var(--dossier);
  color: var(--ink);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- shared pieces ---------- */

.label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  line-height: 1.5;
  padding: 1px 8px;
  border: 1px solid var(--rule);
  color: var(--fg-2);
}

.lang { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-2); }
.lang a { color: var(--fg-2); text-decoration: none; padding: 2px 5px; }
.lang a[aria-current="true"] { color: var(--surface); background: var(--fg); }
.lang a:hover { color: var(--fg); text-decoration: underline; }
.lang a[aria-current="true"]:hover { color: var(--surface); text-decoration: none; }

.back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--t-sm); text-decoration: none; }

/* Chromatic split on display text. Animated slices only when the glitch effect is on. */
.rgb { position: relative; }
.fx-glitch .rgb { text-shadow: var(--glitch-shift) 0 var(--split-1), calc(var(--glitch-shift) * -1) 0 var(--split-2); }
.fx-glitch .rgb.is-glitching::before,
.fx-glitch .rgb.is-glitching::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  text-shadow: none;
}
.fx-glitch .rgb.is-glitching::before { color: var(--split-2); clip-path: inset(18% 0 58% 0); transform: translateX(-6px); animation: slice-a 0.36s steps(2) both; }
.fx-glitch .rgb.is-glitching::after { color: var(--split-1); clip-path: inset(62% 0 12% 0); transform: translateX(6px); animation: slice-b 0.36s steps(2) both; }
@keyframes slice-a { 0% { clip-path: inset(10% 0 70% 0); } 50% { clip-path: inset(40% 0 35% 0); } 100% { clip-path: inset(80% 0 4% 0); } }
@keyframes slice-b { 0% { clip-path: inset(70% 0 6% 0); } 50% { clip-path: inset(22% 0 60% 0); } 100% { clip-path: inset(4% 0 82% 0); } }

/* ---------- window chrome (home windows, article, 404) ---------- */

.win {
  --fg: var(--pale);
  --fg-2: var(--muted);
  --rule: var(--line);
  --link: var(--acc-1);
  --link-hover: var(--acc-2);
  --focus: var(--dossier);
  --win-cut: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--fg);
  /* drop-shadow follows the clipped outline of the frame inside */
  filter: drop-shadow(0 18px 30px var(--shadow));
}
.win__frame {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bar); /* shows as the 2px edge around the glass */
  clip-path: var(--win-cut);
}
.win__frame::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--glass);
  clip-path: var(--win-cut);
}
.win__bar {
  --fg: var(--ink);
  --fg-2: var(--ink);
  --link: var(--ink);
  --link-hover: var(--ink);
  --focus: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 9px;
  padding-left: 16px;
  padding-right: calc(12px + var(--cut) / 2);
  background: var(--bar);
  color: var(--fg);
}
.win__icon { flex: none; width: 10px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.win__name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; flex: 1; min-width: 0; font-size: inherit; font-weight: inherit; }
.win__file { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.win__title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; letter-spacing: 0.03em; }
.win__count { font-family: var(--font-mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- ambient effects ---------- */

.fx { position: fixed; inset: 0; pointer-events: none; display: none; }
.fx--neural { z-index: 0; opacity: 0.7; }
.fx--neural canvas { width: 100%; height: 100%; display: block; }
.fx-neural .fx--neural { display: block; }

.fx--scan {
  z-index: 90;
  opacity: var(--scan-opacity);
  background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--void) 2px 3px);
  mix-blend-mode: multiply;
}
.fx-scanlines .fx--scan { display: block; }

.fx--grain {
  inset: -6%;
  z-index: 91;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' fill='%23ffffff'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite;
}
.fx-grain .fx--grain { display: block; }
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-1%, 3%); }
  100% { transform: translate(0, 0); }
}

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