:root {
  --ash: #1c1a17;
  --ash-deep: #100f0d;
  --paper: #e7dec7;
  --muted: #b6aa91;
  --gold: #d4af37;
  --gold-pale: #f1d678;
  --wine: #4a0e17;
  --wine-light: #74202d;
  --line: rgba(212, 175, 55, .28);
  --content: min(1120px, calc(100% - 40px));
  --serif: Georgia, 'Noto Serif SC', 'Songti SC', serif;
  --sans: 'Noto Sans SC', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ash-deep); }
body { margin: 0; min-width: 320px; color: var(--paper); background: radial-gradient(ellipse 75% 42% at 105% 5%, rgba(74, 14, 23, .34), transparent 62%), radial-gradient(ellipse 68% 30% at -8% 52%, rgba(212, 175, 55, .07), transparent 65%), var(--ash); font-family: var(--sans); font-size: 16px; line-height: 1.8; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
a { color: var(--gold-pale); text-decoration-color: rgba(241, 214, 120, .45); text-underline-offset: 3px; }
a:hover { color: #fff0ac; }
button { font: inherit; }
img { display: block; max-width: 100%; height: auto; }

.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 8px 14px; background: var(--gold); color: #17130b; transition: top .2s; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(16, 15, 13, .88); box-shadow: 0 8px 0 -5px rgba(74, 14, 23, .75), 0 14px 25px rgba(0, 0, 0, .28); backdrop-filter: blur(12px); }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 10px; opacity: .78; background: linear-gradient(135deg, transparent 0 18%, rgba(212,175,55,.35) 19% 22%, transparent 23% 100%) 0 0 / 21px 8px repeat-x; mix-blend-mode: screen; pointer-events: none; }
.header-inner { width: var(--content); min-height: 67px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { color: var(--paper); text-decoration: none; font-family: var(--serif); letter-spacing: .15em; font-weight: bold; white-space: nowrap; }
.brand-mark { display: inline-block; width: 46px; height: 22px; margin-right: 10px; object-fit: contain; vertical-align: middle; filter: saturate(.78); }
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a { color: var(--muted); font-size: .9rem; text-decoration: none; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--gold-pale); }
.menu-toggle { display: none; border: 1px solid var(--line); background: transparent; color: var(--paper); padding: 7px 10px; }

.hero { position: relative; min-height: min(760px, calc(100vh - 67px)); display: grid; align-items: end; isolation: isolate; overflow: clip; box-shadow: inset 0 -34px 0 -21px rgba(74,14,23,.86); }
.hero::before { content: ''; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(12, 11, 10, .98) 0%, rgba(12, 11, 10, .8) 38%, rgba(12, 11, 10, .24) 72%, rgba(12, 11, 10, .72) 100%), linear-gradient(0deg, var(--ash) 0%, rgba(74,14,23,.42) 20%, transparent 37%), url('../img/combat-team.webp') center/cover; filter: saturate(.64) contrast(1.13) sepia(.14); }
.hero::after { content: ''; position: absolute; z-index: -1; right: -5%; bottom: -32%; width: min(76vw, 960px); height: 48%; opacity: .92; background: radial-gradient(ellipse at 52% 34%, rgba(111, 27, 40, .83) 0 6%, transparent 7%), radial-gradient(ellipse at 72% 58%, rgba(74, 14, 23, .95) 0 26%, rgba(22, 11, 13, .86) 40%, transparent 69%); filter: blur(7px) contrast(1.18); transform: rotate(-8deg); transform-origin: 65% 72%; }
.hero.is-rewinding::after { animation: blood-rewinds .9s cubic-bezier(.25,.8,.28,1) both; }
@keyframes blood-rewinds { 0% { transform: translateY(0) rotate(-8deg) scale(1); filter: blur(7px) contrast(1.18); } 42% { transform: translateY(-85px) rotate(-5deg) scale(.83); filter: blur(3px) contrast(1.4); } 100% { transform: translateY(0) rotate(-8deg) scale(1); filter: blur(7px) contrast(1.18); } }
.hero-inner { width: var(--content); margin: 0 auto; padding: 110px 0 78px; }
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before, .kicker::before { content: ''; width: 34px; height: 1px; background: currentColor; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.25; color: #f1e8d4; }
h1 { max-width: 800px; margin: 16px 0 16px; font-size: clamp(3rem, 8vw, 6.8rem); font-weight: 700; letter-spacing: .04em; text-shadow: 0 3px 25px rgba(0, 0, 0, .66); }
h1 small { display: block; margin-top: 10px; color: var(--gold); font-family: var(--sans); font-size: clamp(.82rem, 1.5vw, 1.05rem); font-weight: 400; letter-spacing: .18em; text-transform: uppercase; }
.hero-summary { max-width: 630px; color: #d6cab3; font-size: clamp(1rem, 2vw, 1.17rem); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 31px; }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 10px 21px; border: 1px solid var(--gold); color: #17130b; background: var(--gold); box-shadow: 5px 5px 0 rgba(74, 14, 23, .78); cursor: pointer; font-weight: 700; letter-spacing: .06em; text-decoration: none; transition: transform .2s, background .2s, box-shadow .2s; }
.btn:hover { color: #17130b; background: var(--gold-pale); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(74, 14, 23, .78); }
.btn--ghost { color: var(--paper); background: rgba(16, 15, 13, .4); border-color: rgba(231, 222, 199, .42); box-shadow: none; }
.btn--ghost:hover { color: var(--paper); background: rgba(74, 14, 23, .5); box-shadow: none; }
.reverse-note { position: absolute; right: max(20px, calc((100vw - 1120px) / 2)); bottom: 28px; color: var(--muted); font-size: .78rem; writing-mode: vertical-rl; letter-spacing: .14em; }

.main-section { width: var(--content); margin: auto; padding: 104px 0; }
.main-section + .main-section { position: relative; }
.main-section + .main-section::before { content: ''; position: absolute; top: 0; left: 0; width: min(260px, 48%); height: 5px; background: linear-gradient(90deg, transparent, rgba(74,14,23,.88) 8%, rgba(212,175,55,.42) 61%, transparent); clip-path: polygon(0 51%, 13% 17%, 30% 62%, 52% 32%, 68% 75%, 84% 42%, 100% 59%, 100% 100%, 0 100%); }
.section-heading { max-width: 820px; margin-bottom: 48px; }
.section-heading h2 { margin: 10px 0 16px; font-size: clamp(2.2rem, 4vw, 3.45rem); letter-spacing: .04em; }
.section-heading p { color: var(--muted); margin: 0; }
.two-column { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(30px, 5vw, 64px); align-items: start; }
.two-column p:first-child { margin-top: 0; }
.intro-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); gap: clamp(38px, 6vw, 88px); align-items: start; }
.intro-copy { max-width: 700px; padding: 10px 0 0; }
.intro-copy p { max-width: 680px; margin: 0 0 23px; font-size: 1.02rem; }
.intro-dossier { padding: 30px 31px; }
.intro-dossier h3 { margin-bottom: 14px; font-size: 1.38rem; }
.intro-dossier .entity-list li { grid-template-columns: 89px 1fr; padding: 9px 0; }
.card-index { display: block; margin-bottom: 15px; color: var(--wine-light); font-size: .73rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.info-card, .archive-card, .guide-step, .quote-card { border: 0; background: linear-gradient(145deg, rgba(47, 40, 30, .88), rgba(26, 23, 20, .97)); box-shadow: inset 0 0 0 1px rgba(212,175,55,.19), inset 0 0 28px rgba(74, 14, 23, .25), 6px 8px 0 rgba(10, 9, 8, .42), -2px 0 rgba(74,14,23,.54); clip-path: polygon(0 8px, 9px 0, calc(100% - 13px) 1px, 100% 9px, calc(100% - 2px) calc(100% - 10px), calc(100% - 12px) 100%, 8px calc(100% - 2px), 0 calc(100% - 10px)); }
.info-card { padding: 27px; }
.info-card h3, .archive-card h3, .guide-step h3 { margin: 0 0 10px; color: var(--gold-pale); font-size: 1.22rem; }
.entity-list { padding: 0; margin: 0; list-style: none; }
.entity-list li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(212, 175, 55, .13); }
.entity-list li:last-child { border-bottom: 0; }
.entity-list strong { color: var(--gold); font-size: .88rem; }
.fact-image { position: relative; overflow: hidden; border: 0; box-shadow: 8px 8px 0 rgba(74,14,23,.52), -2px 0 rgba(212,175,55,.35); clip-path: polygon(0 9px, 11px 0, calc(100% - 13px) 3px, 100% 11px, calc(100% - 4px) calc(100% - 8px), calc(100% - 16px) 100%, 10px calc(100% - 2px), 0 calc(100% - 10px)); }
.fact-image img { width: 100%; aspect-ratio: 1.45; object-fit: cover; filter: contrast(1.05) saturate(.76); }
.fact-image figcaption { position: absolute; inset: auto 0 0; padding: 18px 20px; color: #e8dcc3; font-size: .86rem; background: linear-gradient(transparent, rgba(12, 11, 10, .94)); }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.feature-card { position: relative; min-height: 265px; padding: 25px; overflow: hidden; border: 0; background: #25201b; box-shadow: inset 0 0 0 1px rgba(212,175,55,.23), inset 0 -26px 24px rgba(74,14,23,.18), 0 12px 0 rgba(10,9,8,.32); clip-path: polygon(0 8px, 12px 0, 94% 3px, 100% 13px, 98% 90%, 91% 100%, 6px 98%, 0 89%); }
.feature-card::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(15, 13, 12, .96) 6%, rgba(15, 13, 12, .12) 80%); }
.feature-card > * { position: relative; z-index: 1; }
.feature-card:nth-child(1) { background: center/cover url('../img/lab-checkpoint.webp'); }
.feature-card:nth-child(2) { background: center/cover url('../img/lab-vending.webp'); }
.feature-card:nth-child(3) { background: center/cover url('../img/school-corridor.webp'); }
.feature-card:nth-child(4) { background: center/cover url('../img/campus-conversation.webp'); }
.feature-card h3 { margin: 102px 0 8px; color: var(--gold-pale); font-size: 1.28rem; }
.feature-card p { margin: 0; color: #d4c7ae; font-size: .91rem; line-height: 1.7; }
.ghosted { --trail: 0px; transition: transform .52s cubic-bezier(.2,.7,.2,1), opacity .52s ease, box-shadow .25s ease; }
.ghosted.is-visible { transform: translateX(0); opacity: 1; box-shadow: inset 0 0 0 1px rgba(212,175,55,.23), inset 0 -26px 24px rgba(74,14,23,.18), calc(0px - var(--trail)) 12px 0 rgba(74,14,23,.33), calc(0px - var(--trail) - var(--trail)) 20px 0 rgba(212,175,55,.1), 0 12px 0 rgba(10,9,8,.32); }
@media (min-width: 800px) { .ghosted { transform: translateX(20px); opacity: .58; } .ghosted:nth-child(even) { transform: translateX(-20px); } }

.route-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: route; }
.route-list article { position: relative; padding: 26px 20px 21px; min-height: 190px; border-top: 0; background: linear-gradient(145deg, rgba(57,44,29,.92), rgba(30,24,20,.94)); box-shadow: inset 0 2px rgba(212,175,55,.62), inset 0 0 0 1px rgba(74,14,23,.73), 6px 7px 0 rgba(10,9,8,.35); clip-path: polygon(0 9px, 8px 0, 95% 3px, 100% 11px, 98% 92%, 90% 100%, 9px 98%, 0 90%); }
.route-list article::before { counter-increment: route; content: '0' counter(route); position: absolute; right: 18px; top: 12px; color: rgba(212, 175, 55, .18); font-family: var(--serif); font-size: 2.4rem; }
.route-list h3 { position: relative; margin: 34px 0 8px; color: var(--gold-pale); font-size: 1.17rem; }
.route-list p { margin: 0; color: var(--muted); font-size: .9rem; }
.callout { margin-top: 32px; padding: 24px 27px; border-left: 3px solid var(--wine-light); background: linear-gradient(90deg, rgba(74, 14, 23, .38), rgba(74, 14, 23, .12)); color: #dfcdb4; }
.callout strong { color: var(--gold-pale); }

.archive-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.archive-card { min-height: 195px; padding: 22px; color: inherit; text-decoration: none; transition: transform .25s, filter .25s; }
.archive-card:hover { color: inherit; transform: translateY(-6px) rotate(-.45deg); filter: brightness(1.1); }
.archive-card span { display: block; color: var(--gold); font-size: .77rem; letter-spacing: .12em; }
.archive-card p { margin: 12px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.archive-card em { display: block; margin-top: 17px; color: var(--gold-pale); font-size: .84rem; font-style: normal; }
.update-list { padding: 0; margin: 0; list-style: none; }
.update-list li { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 17px 0; border-bottom: 1px solid rgba(212, 175, 55, .16); }
.update-list time { color: var(--gold); font-size: .88rem; }
.update-list p { margin: 0; color: var(--muted); }
.faq-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.faq-list details { border: 0; background: linear-gradient(135deg, rgba(48,38,29,.85), rgba(25,21,18,.93)); box-shadow: inset 0 0 0 1px rgba(212,175,55,.2), 5px 5px 0 rgba(10,9,8,.25); clip-path: polygon(0 6px, 8px 0, 99% 3px, 100% 94%, 93% 100%, 5px 98%, 0 91%); }
.faq-list summary { padding: 17px 19px; color: #eee4cf; cursor: pointer; font-family: var(--serif); }
.faq-list p { margin: 0; padding: 0 19px 18px; color: var(--muted); font-size: .91rem; }
.page-hero { position: relative; overflow: hidden; background: linear-gradient(105deg, rgba(13, 12, 11, .98), rgba(40, 26, 25, .9)), url('../img/lab-checkpoint.webp') center/cover; box-shadow: inset 0 -20px 0 -13px rgba(74,14,23,.86); }
.page-hero::after { content: ''; position: absolute; right: -12%; top: -100%; width: 45%; height: 300%; transform: rotate(20deg); background: rgba(212, 175, 55, .05); }
.page-hero-inner { position: relative; z-index: 1; width: var(--content); margin: auto; padding: 84px 0 70px; }
.page-hero h1 { margin: 13px 0 14px; font-size: clamp(2.65rem, 6vw, 5.2rem); }
.page-hero p { max-width: 760px; margin: 0; color: #d2c4aa; font-size: 1.08rem; }
.breadcrumb { width: var(--content); margin: 0 auto; padding-top: 20px; color: var(--muted); font-size: .86rem; }
.breadcrumb a { color: var(--muted); }
.page-main { width: var(--content); margin: auto; padding: 58px 0 90px; }
.page-main h2 { margin: 55px 0 17px; color: var(--gold-pale); font-size: clamp(1.7rem, 3vw, 2.35rem); }
.page-main h3 { margin: 28px 0 8px; color: #ead9ab; font-size: 1.2rem; }
.page-main p, .page-main li { color: #c9bea9; }
.page-main ul, .page-main ol { padding-left: 1.3em; }
.page-main li + li { margin-top: 8px; }
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: clamp(28px, 5vw, 72px); }
.side-card { position: sticky; top: 90px; padding: 23px; border: 0; background: linear-gradient(145deg, rgba(61,47,30,.84), rgba(25,21,18,.95)); box-shadow: inset 0 0 0 1px rgba(212,175,55,.22), inset 0 -20px 20px rgba(74,14,23,.16), 8px 8px 0 rgba(10,9,8,.34); clip-path: polygon(0 9px, 9px 0, 100% 3px, 98% 93%, 91% 100%, 6px 98%, 0 90%); }
.side-card h2 { margin: 0 0 15px; font-size: 1.25rem; }
.side-card .btn { width: 100%; margin-top: 15px; }
.side-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.guide-steps { display: grid; gap: 14px; }
.guide-step { padding: 24px 26px; }
.guide-step p { margin-bottom: 0; }
.control-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 30px; }
.control-grid div { min-height: 86px; padding: 15px 14px; background: linear-gradient(145deg, rgba(67,50,31,.8), rgba(31,24,19,.94)); box-shadow: inset 0 0 0 1px rgba(212,175,55,.2), 4px 5px 0 rgba(10,9,8,.27); clip-path: polygon(0 7px, 7px 0, 100% 4px, 98% 94%, 91% 100%, 4px 97%); }
.control-grid kbd { display: block; margin-bottom: 4px; color: var(--gold-pale); font-family: var(--serif); font-size: 1.12rem; }
.control-grid span { color: var(--muted); font-size: .82rem; }
.source-list { padding: 0; margin: 22px 0; list-style: none; }
.source-list li { padding: 16px 0; border-bottom: 1px solid rgba(212,175,55,.17); }
.source-list strong { display: block; color: var(--gold-pale); }
.source-list p { margin: 5px 0; }
.last-updated { display: inline-block; color: var(--muted); font-size: .83rem; }
.media-frame { margin: 27px 0; border: 0; background: #12110f; box-shadow: 8px 8px 0 rgba(74,14,23,.5), inset 0 0 0 1px rgba(212,175,55,.32); clip-path: polygon(0 9px, 10px 0, 100% 4px, 99% 90%, 91% 100%, 6px 98%, 0 91%); }
.media-frame img { width: 100%; max-height: 460px; object-fit: cover; }
.media-frame figcaption { padding: 10px 15px; color: var(--muted); font-size: .82rem; }
.not-found { min-height: 75vh; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 40%, rgba(74,14,23,.55), transparent 36%), var(--ash-deep); }
.not-found-inner { padding: 60px 20px; }
.not-found .code { color: var(--gold); font-family: var(--serif); font-size: clamp(4rem, 15vw, 10rem); line-height: 1; }

.site-footer { position: relative; border-top: 0; background: #12110f; }
.site-footer::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 9px; background: linear-gradient(90deg, transparent, rgba(74,14,23,.9) 11%, rgba(212,175,55,.35) 47%, rgba(74,14,23,.8) 75%, transparent); clip-path: polygon(0 48%, 9% 7%, 23% 59%, 39% 20%, 57% 75%, 76% 29%, 91% 69%, 100% 48%, 100% 100%, 0 100%); }
.footer-inner { width: var(--content); margin: auto; padding: 52px 0 25px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 2fr 1fr; gap: 42px; }
.footer-grid h2, .footer-grid h3 { margin: 0 0 12px; color: var(--gold-pale); font-size: 1.1rem; }
.footer-grid p, .footer-grid li { color: var(--muted); font-size: .86rem; line-height: 1.7; }
.footer-links { display: flex; gap: 8px 16px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.footer-links a { color: var(--muted); }
.footer-bottom { margin-top: 35px; padding-top: 18px; border-top: 0; color: #766e5e; font-size: .78rem; }
.back-top { position: fixed; right: 22px; bottom: 22px; z-index: 25; display: grid; width: 42px; height: 42px; place-items: center; border: 0; color: var(--gold-pale); background: rgba(74,14,23,.88); box-shadow: inset 0 0 0 1px rgba(212,175,55,.48), 4px 4px 0 rgba(10,9,8,.52); clip-path: polygon(0 8px, 9px 0, 100% 5px, 96% 92%, 87% 100%, 4px 97%); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-decoration: none; }
.back-top.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .route-list { grid-template-columns: repeat(2, 1fr); }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-layout { grid-template-columns: 1fr; }
  .side-card { position: static; }
}
@media (max-width: 700px) {
  :root { --content: min(100% - 32px, 1120px); }
  .header-inner { min-height: 59px; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: 59px; left: 0; right: 0; display: none; padding: 14px 16px 20px; border-bottom: 1px solid var(--line); background: #151310; box-shadow: 0 15px 25px rgba(0,0,0,.35); }
  .site-nav.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-nav a { padding: 8px 3px; }
  .hero { min-height: 650px; }
  .hero::before { background-position: 63% center; }
  .hero-inner { padding: 90px 0 90px; }
  .reverse-note { right: 17px; bottom: 16px; }
  .main-section { padding: 74px 0; }
  .two-column, .footer-grid { grid-template-columns: 1fr; }
  .feature-grid, .route-list, .archive-grid, .faq-list { grid-template-columns: 1fr; }
  .intro-layout { grid-template-columns: 1fr; gap: 24px; }
  .intro-copy, .intro-dossier { max-width: none; }
  .intro-copy { padding-top: 0; }
  .control-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card { min-height: 230px; }
  .entity-list li { grid-template-columns: 74px 1fr; }
  .update-list { grid-template-columns: 1fr; gap: 4px; }
  .page-hero-inner { padding: 58px 0 49px; }
  .page-main { padding-top: 38px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }