:root {
  --color-surface: #fefefe;
  --color-surface-alt: #f4f4f4;
  --color-surface-deep: #e6e6e6;
  --color-ink: #393532;
  --color-ink-soft: #66605b;
  --color-ink-muted: #837d77;
  --color-line: #dbdad9;
  --color-primary: #bc5a06;
  --color-primary-ink: #ffffff;
  --color-primary-soft: #f5e7db;
  --color-accent: #1c77ca;
  --color-accent-ink: #ffffff;
  --color-highlight: #d5e6f5;
  --color-focus: #1075d1;
  --color-contrast-surface: #271b11;
  --color-contrast-ink: #e7e5e4;
  --color-contrast-line: #51473f;
  --color-contrast-accent: #2889e2;
  --overlay-scrim: linear-gradient(180deg, rgba(39, 27, 17, 0.35) 0%, rgba(39, 27, 17, 0.72) 55%, rgba(39, 27, 17, 0.92) 100%);
  --font-heading: "Source Han Sans SC", "Noto Sans SC", SimHei, "Microsoft YaHei", sans-serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 11.0px;
  --text-sm: 14.7px;
  --text-base: 17px;
  --text-lg: 22.7px;
  --text-xl: 30.2px;
  --text-2xl: 40.3px;
  --text-3xl: 53.7px;
  --text-4xl: 71.5px;
  --text-display: clamp(57px, 11.6vw, 149px);
  --text-figure: clamp(47px, 8.4vw, 107px);
  --weight-heading: 814;
  --weight-body: 400;
  --leading-body: 1.7;
  --leading-heading: 1.15;
  --tracking-heading: -0.02em;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 9px;
  --radius-pill: 999px;
  --border-thin: 2px;
  --border-thick: 2px;
  --shadow-1: 4px 4px 0 #393532;
  --shadow-2: 8px 8px 0 #393532;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --container: 1180px;
  --measure: 74ch;
  --gutter: 24px;
  --section-y: 70px;
  --section-y-lg: 98px;
}

/* ============ RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:140px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--color-surface);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-primary)}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:var(--border-thick) solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-sm)}
::selection{background:var(--color-accent);color:var(--color-accent-ink)}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:var(--weight-heading);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
h1{font-size:var(--text-3xl)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}
strong{font-weight:700}

/* ============ LAYOUT ============ */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--lg{padding-block:var(--section-y-lg)}
.section--deep{background:var(--color-contrast-surface);color:var(--color-contrast-ink)}
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4{color:var(--color-contrast-ink)}
.section--deep a{color:var(--color-contrast-accent)}
.section--deep a:hover{color:var(--color-primary-ink)}
.section--primary{background:var(--color-primary);color:var(--color-primary-ink)}
.section--primary h1,.section--primary h2,.section--primary h3{color:var(--color-primary-ink)}
.section__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-4)}
.section__title{font-size:var(--text-2xl);margin-top:var(--space-1)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--color-accent)}
.eyebrow::before{content:"";width:28px;height:var(--border-thin);background:var(--color-primary);flex:0 0 auto;transform:skewY(-14deg)}
.section--deep .eyebrow{color:var(--color-contrast-accent)}
.section--deep .eyebrow::before{background:var(--color-primary)}
.lede{font-size:var(--text-lg);line-height:1.45;color:var(--color-ink-soft);max-width:var(--measure);letter-spacing:-0.01em}
.section--deep .lede{color:color-mix(in srgb,var(--color-contrast-ink) 80%,transparent)}
.idx{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.08em;color:var(--color-ink-muted)}
.figure{font-family:var(--font-mono);font-weight:700;font-size:var(--text-figure);line-height:0.9;letter-spacing:-0.04em;color:var(--color-primary)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-6{grid-column:span 6}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.rule{border:0;height:var(--border-thin);background:var(--color-line);margin-block:var(--space-6)}
.rule--offset{position:relative;height:var(--border-thin);background:linear-gradient(90deg,var(--color-primary) 0 16%,var(--color-line) 16% 100%);margin-block:var(--space-6)}
.rule--offset::after{content:"";position:absolute;right:0;top:calc(var(--border-thin) * -1);width:calc(var(--gutter) * 2);height:calc(var(--border-thin) * 3);background:var(--color-accent)}
.section--deep .rule{background:var(--color-contrast-line)}
.section--deep .rule--offset{background:linear-gradient(90deg,var(--color-primary) 0 16%,var(--color-contrast-line) 16% 100%)}

/* ============ BUTTONS & CHIPS ============ */
.btn{display:inline-flex;align-items:center;gap:var(--space-1);padding:12px 20px;border:var(--border-thick) solid var(--color-ink);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;letter-spacing:-0.01em;box-shadow:var(--shadow-1);transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease}
.btn:hover,.btn:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--color-ink);background:var(--color-primary);color:var(--color-primary-ink)}
.btn--primary{background:var(--color-primary);color:var(--color-primary-ink)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--color-accent);color:var(--color-accent-ink)}
.btn--accent{background:var(--color-accent);color:var(--color-accent-ink)}
.btn--accent:hover,.btn--accent:focus-visible{background:var(--color-primary);color:var(--color-primary-ink)}
.btn--ghost{background:transparent}
.btn--on-dark{background:var(--color-contrast-surface);border-color:var(--color-contrast-ink);color:var(--color-contrast-ink);box-shadow:4px 4px 0 var(--color-primary)}
.btn--on-dark:hover,.btn--on-dark:focus-visible{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-ink);box-shadow:2px 2px 0 var(--color-contrast-ink)}
.chip-group{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:var(--border-thin) solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ink-soft);font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;letter-spacing:-0.01em;transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.chip:hover{border-color:var(--color-primary);color:var(--color-primary)}
.chip[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}

/* ============ TAGS ============ */
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:var(--border-thin) solid var(--color-line);border-radius:var(--radius-pill);background:var(--color-surface-alt);color:var(--color-ink-soft);font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;line-height:1.6;text-transform:uppercase;white-space:nowrap}
.tag--live{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink)}
.tag--accent{border-color:var(--color-accent);background:var(--color-highlight);color:color-mix(in srgb,var(--color-accent) 78%,var(--color-ink))}
.tag--on-dark{border-color:var(--color-contrast-line);background:color-mix(in srgb,var(--color-contrast-ink) 8%,transparent);color:var(--color-contrast-ink)}
.tag__dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:tagPulse 1.8s ease-out infinite}
@keyframes tagPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}

/* ============ SKIP LINK ============ */
.skip-link{position:fixed;left:var(--space-2);top:-120px;z-index:200;padding:var(--space-2) var(--space-3);background:var(--color-primary);color:var(--color-primary-ink);font-family:var(--font-heading);font-weight:700;font-size:var(--text-sm);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);transition:top .2s ease}
.skip-link:focus{top:var(--space-2);color:var(--color-primary-ink)}

/* ============ HEADER ============ */
.site-header{position:sticky;top:0;z-index:60;background:var(--color-contrast-surface);color:var(--color-contrast-ink)}
.site-header__bar{position:relative;background:var(--color-contrast-surface);border-bottom:var(--border-thin) solid var(--color-primary)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-3);min-height:72px;padding-block:var(--space-1)}
.brand{display:flex;align-items:center;gap:var(--space-2);flex:0 0 auto;color:var(--color-contrast-ink)}
.brand:hover{color:var(--color-contrast-ink)}
.brand__mark{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;background:var(--color-primary);color:var(--color-primary-ink);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;letter-spacing:0.04em;border-radius:var(--radius-sm);transform:skewX(-9deg)}
.brand__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand__name{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:var(--weight-heading);letter-spacing:-0.03em;line-height:1.05}
.brand__line{font-size:var(--text-xs);letter-spacing:0.08em;color:color-mix(in srgb,var(--color-contrast-ink) 62%,transparent);line-height:1.4}
.nav-toggle{display:none;align-items:center;gap:8px;margin-left:auto;padding:9px 13px;border:var(--border-thin) solid var(--color-contrast-line);border-radius:var(--radius-sm);color:var(--color-contrast-ink);font-family:var(--font-heading);font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.nav-toggle:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-ink)}
.nav-toggle[aria-expanded="true"]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}
.nav-toggle__bars{display:grid;gap:4px}
.nav-toggle__bars i{display:block;width:18px;height:var(--border-thin);background:currentColor}
.site-nav{margin-left:auto}
.site-nav__list{display:flex;align-items:center;gap:2px}
.site-nav__list a{display:inline-flex;align-items:baseline;gap:6px;padding:10px 12px;border-bottom:var(--border-thin) solid transparent;border-radius:var(--radius-sm);color:var(--color-contrast-ink);font-family:var(--font-heading);font-size:var(--text-sm);font-weight:700;letter-spacing:-0.01em;white-space:nowrap;transition:background-color .16s ease,color .16s ease,border-color .16s ease}
.site-nav__list a:hover{background:var(--color-primary);color:var(--color-primary-ink);border-bottom-color:var(--color-primary-ink)}
.site-nav__idx{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:400;color:var(--color-contrast-accent)}
.site-nav__list a:hover .site-nav__idx{color:var(--color-primary-ink)}
.site-nav__list a[aria-current="page"]{background:var(--color-primary);color:var(--color-primary-ink);border-bottom-color:var(--color-primary-ink)}
.site-nav__list a[aria-current="page"] .site-nav__idx{color:var(--color-primary-ink)}
.scroll-progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--color-accent);transform:scaleX(0);transform-origin:0 50%;z-index:3;pointer-events:none}
.cmdbar{background:color-mix(in srgb,var(--color-contrast-surface) 80%,#000);border-top:var(--border-thin) solid var(--color-contrast-line)}
.cmdbar__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);padding-block:var(--space-1)}
.cmdbar__tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.cmdbar__actions{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-left:auto}
.cmdbar__action{display:inline-flex;align-items:center;padding:6px 13px;border:var(--border-thin) solid var(--color-primary);border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-primary-ink);font-family:var(--font-heading);font-size:var(--text-xs);font-weight:700;letter-spacing:0.02em;transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.cmdbar__action:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink)}

/* ============ FOOTER ============ */
.site-footer{margin-top:var(--space-8);background:var(--color-contrast-surface);color:var(--color-contrast-ink)}
.site-footer::before{content:"";display:block;height:14px;background:linear-gradient(90deg,var(--color-primary) 0 58%,var(--color-accent) 58% 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 30%)}
.site-footer__inner{padding-block:var(--space-6) var(--space-4)}
.site-footer__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:var(--space-6);padding-bottom:var(--space-6);border-bottom:var(--border-thin) solid var(--color-contrast-line)}
.site-footer__mark{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:var(--weight-heading);letter-spacing:-0.03em;line-height:1.1;color:var(--color-contrast-ink)}
.site-footer__slogan{margin-top:var(--space-2);font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:0.02em;color:var(--color-primary)}
.site-footer__note{margin-top:var(--space-2);max-width:52ch;font-size:var(--text-xs);letter-spacing:0.04em;line-height:1.7;color:color-mix(in srgb,var(--color-contrast-ink) 66%,transparent)}
.site-footer__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.site-footer__title{margin-bottom:var(--space-2);font-family:var(--font-body);font-size:var(--text-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-primary)}
.site-footer__list{display:grid;gap:var(--space-1)}
.site-footer__list a{display:inline-block;padding-bottom:2px;border-bottom:var(--border-thin) solid transparent;color:var(--color-contrast-ink);font-size:var(--text-sm)}
.site-footer__list a:hover{border-bottom-color:var(--color-primary);color:var(--color-primary)}
.site-footer__bottom{display:grid;gap:var(--space-2);padding-top:var(--space-4)}
.site-footer__meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);font-size:var(--text-sm);color:color-mix(in srgb,var(--color-contrast-ink) 78%,transparent)}
.site-footer__legal{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:0.06em;color:color-mix(in srgb,var(--color-contrast-ink) 58%,transparent)}
.site-footer__bottom .site-footer__note{margin-top:0}

/* ============ CORE COMPONENTS ============ */
.crumbs{font-size:var(--text-xs);letter-spacing:0.06em}
.crumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs__list li{display:flex;align-items:center;gap:8px}
.crumbs__list li+li::before{content:"/";color:var(--color-ink-muted)}
.crumbs__list a{color:var(--color-ink-soft)}
.crumbs__list a:hover{color:var(--color-primary)}
.crumbs [aria-current="page"]{color:var(--color-ink)}
.slab{position:relative;padding:var(--space-4);padding-left:38px;background:var(--color-surface-alt);border:var(--border-thin) solid var(--color-ink);border-radius:var(--radius-sm);box-shadow:var(--shadow-1)}
.slab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--color-accent);clip-path:polygon(0 0,100% 0,28% 100%,0 100%)}
.slab--primary{background:var(--color-primary-soft)}
.slab--primary::before{background:var(--color-primary)}
.media{position:relative;overflow:hidden;border:var(--border-thin) solid var(--color-ink);border-radius:var(--radius-md);background:var(--color-surface-deep)}
.media__img{width:100%;height:100%;object-fit:cover}
.media--16x9{aspect-ratio:16/9}
.media--4x5{aspect-ratio:4/5}
.media--1x1{aspect-ratio:1/1}
.media--tint .media__img{filter:grayscale(1) contrast(1.06) brightness(.96)}
.media--tint::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,color-mix(in srgb,var(--color-accent) 58%,transparent) 0%,color-mix(in srgb,var(--color-primary) 52%,transparent) 100%);mix-blend-mode:multiply;pointer-events:none}
.media--scrim::before{content:"";position:absolute;inset:0;background:var(--overlay-scrim);z-index:1;pointer-events:none}
.media__caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--space-3);color:var(--color-contrast-ink);font-size:var(--text-sm);line-height:1.5}
.prose{max-width:var(--measure);font-size:var(--text-base);line-height:var(--leading-body)}
.prose p{margin-bottom:var(--space-3)}
.prose p:last-child{margin-bottom:0}
.prose h2{font-size:var(--text-xl);margin:var(--space-6) 0 var(--space-2)}
.prose h3{font-size:var(--text-lg);margin:var(--space-4) 0 var(--space-2)}
.prose ul{list-style:disc;padding-left:1.15em;margin-bottom:var(--space-3)}
.prose ol{list-style:decimal;padding-left:1.3em;margin-bottom:var(--space-3)}
.prose li{margin-bottom:6px}
.prose a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--color-primary)}

/* ============ REVEAL / FILTER MOTION ============ */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.js [data-reveal].is-visible{opacity:1;transform:none}
[data-filter-item][hidden]{display:none}
[data-filter-item].is-entering{animation:filterIn .28s ease both}
@keyframes filterIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .site-header__inner{min-height:64px}
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;margin-left:0;background:var(--color-contrast-surface);border-top:var(--border-thin) solid var(--color-primary);box-shadow:0 8px 0 color-mix(in srgb,#000 35%,transparent);max-height:min(72vh,540px);overflow-y:auto}
  .site-nav[data-open]{display:block}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;padding:var(--space-1) var(--gutter) var(--space-3)}
  .site-nav__list a{justify-content:space-between;padding:14px 6px;border-radius:0;border-bottom:var(--border-thin) solid var(--color-contrast-line)}
  .site-nav__list a:hover{background:transparent;border-bottom-color:var(--color-primary)}
  .site-footer__top{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-3,.col-4{grid-column:span 3}
  .col-6,.col-8{grid-column:span 6}
  .site-footer__nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .cmdbar__actions{margin-left:0;width:100%}
  .cmdbar__inner{padding-block:var(--space-2)}
  h1{font-size:var(--text-2xl)}
  h2{font-size:var(--text-xl)}
  h3{font-size:var(--text-lg)}
  .section__title{font-size:var(--text-xl)}
}
@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col-3,.col-4,.col-6,.col-8,.col-12{grid-column:span 2}
  .site-footer__nav{grid-template-columns:minmax(0,1fr)}
  .cmdbar__tags{gap:6px}
}
@media (max-width:560px){
  .brand__line{display:none}
  .brand__mark{width:34px;height:34px}
  .brand__name{font-size:var(--text-base)}
  .site-footer__mark{font-size:var(--text-lg)}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
  .scroll-progress{transition:none}
}