/* Night shift: the Field Guide poster. Warm charcoal, #F6BE3B yellow, condensed headings, spaced-caps labels, the /// mark and diagonal stripes. */
@font-face { font-family: "Big Shoulders Display"; font-weight: 600; font-display: swap; src: url(/static/fonts/big-shoulders-display-600.woff2) format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-display: swap; src: url(/static/fonts/big-shoulders-display-800.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url(/static/fonts/atkinson-hyperlegible-400.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url(/static/fonts/atkinson-hyperlegible-700.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(/static/fonts/jetbrains-mono-400.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(/static/fonts/jetbrains-mono-500.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --head: "Big Shoulders Display", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --body: "Atkinson Hyperlegible", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", "Noto Sans Mono CJK SC", monospace;
  --bg: #16130f; --panel: #1f1b16; --chip: #231f19; --field: #100e0b; --top-bg: rgb(22 19 15 / .92);
  --ink: #ede6d6; --muted: #a59b88; --link: #f6be3b; --accent: #f6be3b; --accent-ink: #f6be3b; --on-accent: #17140f;
  --hl: #2c261e; --hair: #3a3227; --focus: rgb(246 190 59 / .22); --ok: #8cbf6e; --ok-bg: #1f2a18;
  --rule: 1px solid #3b3328; --rule-strong: 2px solid #f6be3b; --card-border: 1px solid #332c22; --chip-border: 1px solid #332c22; --field-border: 1px solid #5a4f3e;
  --radius: 6px; --shadow: 0 12px 30px rgb(0 0 0 / .45);
}
body { background-image: radial-gradient(circle at 15% -10%, rgb(246 190 59 / .07), transparent 40%), radial-gradient(circle at 100% 0%, rgb(214 120 60 / .05), transparent 35%); background-attachment: fixed; }
h1, h2, h3, .hub-t, .brand-text b { text-transform: uppercase; letter-spacing: .02em; }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] .hub-t { letter-spacing: .05em; }
.brand-mark { border-radius: 4px; background: repeating-linear-gradient(-45deg, #f6be3b 0 6px, #17140f 6px 9px); color: transparent; position: relative; }
.brand-mark::after { content: "SL"; position: absolute; inset: 3px; display: grid; place-items: center; background: #f6be3b; color: #17140f; border-radius: 2px; }
.hero h1 { font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: .95; }
.hero-k::before { content: "/// "; letter-spacing: 0; }
.search input { background: var(--field); }
.hub { position: relative; overflow: hidden; }
.hub::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity .2s; }
.hub:hover::before { opacity: 1; }
.hub-t { font-size: 1.5rem; font-weight: 800; }
.chip { transition: border-color .15s, background .15s; }
.chip .q { color: var(--accent); }
.bucket-h { color: var(--ink); }
.bucket-h span:first-child { font-weight: 800; }
.card h2 { font-size: 1.15rem; color: var(--accent); }
.ent-t h1 { font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: .95; }
.scene { opacity: .55; }
.ic-none { background: #2a241c; }
.badge.go { color: #17140f; }
@media (max-width: 760px) { .hub-t { font-size: 1.15rem; } .ent-t h1 { font-size: 2rem; } }

/* The poster's marks: a hazard stripe under the header, /// before section labels, spaced caps. */
.top { border-bottom: 0; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, transparent 8px 14px); opacity: .85; pointer-events: none; }
.menu { background: #1b1813; border-bottom: 1px solid #2c261e; padding-top: 3px; }
.menu-a { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
html[lang="zh-CN"] .menu-a { letter-spacing: .04em; font-size: .84rem; }
.sec-h::before, .eyebrow::before { content: "/// "; color: var(--accent); letter-spacing: 0; }
.sec-h { color: var(--ink); }
.eyebrow { letter-spacing: .26em; }
.door-t, .mm-card h2, .mm-feature h2 { font-weight: 800; letter-spacing: .02em; }
.door, .mm-card, .mm-feature { box-shadow: 0 1px 0 rgb(0 0 0 / .35); }
.door-pic { background: repeating-linear-gradient(-45deg, #26211a 0 10px, #2a241c 10px 20px); }
.mm-feature-body { background: repeating-linear-gradient(-45deg, rgb(246 190 59 / .035) 0 10px, transparent 10px 20px); }
.mm-chip.is-on { background: rgb(246 190 59 / .08); }
.hero-stats b, .mm-stats b { font-family: var(--head); font-weight: 800; font-size: 1.7rem; }
b.big { font-weight: 800; font-size: 2em; letter-spacing: .02em; }
.foot { background: #120f0c; }
@media (max-width: 760px) { .menu-a { font-size: .6rem; letter-spacing: .02em; } html[lang="zh-CN"] .menu-a { font-size: .68rem; } }