/* Kunlun Growth demo gallery production style. */
:root { --ink:#11130f; --paper:#f1eee5; --paper-bright:#faf8f1; --muted:#8f9188; --line:rgba(17,19,15,.14); --red:#eb452f; --green:#dbe8d5; --soft:#e7e2d5; --display:"STSong","Songti SC","Noto Serif SC",serif; --sans:"FZLanTingHeiS-R-GB","Microsoft YaHei",sans-serif; font-family:var(--sans); color:var(--ink); background:var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; line-height:1.55; background:var(--ink); }
button,a { font:inherit; }
a { color:inherit; }
.skip-link { position:absolute; left:-999px; top:8px; background:var(--ink); color:white; padding:8px 12px; z-index:5; }
.skip-link:focus { left:8px; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:24px; max-width:1400px; margin:auto; padding:24px 48px; border-bottom:1px solid rgba(245,241,229,.15); color:var(--paper); }
.brand { display:flex; gap:12px; align-items:center; letter-spacing:.12em; }
.brand>span { display:grid; width:40px; height:40px; place-items:center; background:var(--red); color:white; font-family:serif; font-size:21px; }
.brand b,.brand small { display:block; font-size:11px; }
.brand small { color:var(--muted); margin-top:2px; font-size:9px; }
.candidate-label { margin:0; color:var(--ink); background:var(--paper); padding:6px 9px; font-size:12px; font-weight:700; }
.hero,.catalog,.boundary { max-width:1400px; margin:auto; padding:92px 48px; }
.hero { min-height:560px; display:grid; align-content:center; border-bottom:1px solid rgba(245,241,229,.15); color:var(--paper); background:linear-gradient(135deg,transparent 60%,rgba(235,69,47,.16) 60%); }
.eyebrow { margin:0 0 14px; color:var(--red); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
h1,h2,h3 { line-height:1.08; letter-spacing:-.04em; }
h1 { max-width:880px; margin:0; font:400 clamp(48px,8vw,104px)/.98 var(--display); }
h1 em { color:var(--red); font-style:normal; }
.hero>p:not(.eyebrow) { max-width:620px; margin:30px 0 0; color:#b8b9b1; font-size:17px; }
.primary-link { display:inline-flex; width:max-content; gap:18px; margin-top:28px; padding:12px 16px; background:var(--ink); color:white; text-decoration:none; font-weight:700; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:28px; }
.section-heading h2,.boundary h2 { margin:0; font:400 clamp(34px,4vw,58px)/1 Georgia,"Songti SC",serif; }
.section-heading>p { max-width:410px; margin:0; color:var(--muted); }
.filters { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.filter { border:1px solid var(--ink); background:transparent; padding:8px 13px; cursor:pointer; }
.filter.active,.filter:hover { background:var(--ink); color:white; }
.filter:focus-visible,.card-action:focus-visible,.dialog-close:focus-visible { outline:3px solid var(--red); outline-offset:2px; }
.catalog { background:var(--paper); }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border:1px solid var(--line); background:var(--line); }
.card { display:flex; min-width:0; min-height:310px; flex-direction:column; padding:26px; background:var(--paper-bright); border:0; transition:transform 180ms ease,background 180ms ease; }
.card:hover { transform:translateY(-3px); background:white; }
.card-top { display:flex; justify-content:space-between; gap:10px; font-size:12px; }
.number { color:var(--red); font-weight:800; }
.status { max-width:58%; color:#496444; text-align:right; font-weight:700; }
.category { margin:38px 0 8px; color:var(--muted); font-size:12px; letter-spacing:.12em; }
.card h3 { margin:0; font:400 29px/1.1 var(--display); }
.description { flex:1; color:#4c514a; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; padding:0; list-style:none; }
.tags li { padding:4px 7px; background:var(--soft); font-size:11px; }
.card-action { width:100%; border:0; padding:11px; background:var(--ink); color:white; cursor:pointer; font-weight:700; text-align:left; text-decoration:none; }
.card-action:hover { background:var(--red); }
.card.is-development { background:#d8d7d2; color:#5d5f5b; }
.card.is-development:hover { background:#cfcec9; }
.card.is-development .status,.card.is-development .number { color:#686a66; }
.card.is-development .tags li { background:#c4c3be; }
.card.is-development .card-action { background:#6a6b67; }
.card.is-development .card-action:hover { background:#4e504d; }
.boundary { background:var(--ink); color:var(--paper); }
.boundary h2 { color:white; }
.boundary>p:last-child { max-width:720px; color:#c8c9c2; }
.noscript { padding:24px; border:1px solid var(--line); background:white; }

/* Preview pages reuse the production palette and typography. */
.detail-page { min-height:100vh; background:var(--paper); }
.detail-shell { max-width:1000px; min-height:100vh; margin:auto; padding:64px 48px 92px; background:var(--paper); }
.back-link { display:inline-flex; margin-bottom:72px; color:var(--ink); font-weight:800; text-decoration:none; }
.back-link:hover { color:var(--red); }
.detail-shell h1 { max-width:900px; color:var(--ink); font-size:clamp(48px,7vw,88px); }
.detail-status { display:inline-block; margin:26px 0 20px; padding:6px 8px; background:var(--green); font-size:13px; font-weight:700; }
.detail-description { max-width:760px; font-size:19px; }
.detail-shell dl { display:grid; grid-template-columns:130px 1fr; gap:14px; border-top:1px solid var(--line); margin:32px 0; padding-top:20px; }
.detail-shell dt { color:var(--red); font-weight:800; }
.detail-shell dd { margin:0; overflow-wrap:anywhere; }
.boundary-note { max-width:760px; margin-top:28px; padding:18px; border-left:4px solid var(--red); background:var(--paper-bright); }
@media (max-width:800px) { .site-header { padding:18px 18px; align-items:flex-start; }.candidate-label { font-size:10px; }.hero,.catalog,.boundary { padding:56px 18px; }.hero { min-height:450px; background:linear-gradient(135deg,transparent 72%,#e7dfcf 72%); }.section-heading { display:block; }.section-heading>p { margin-top:18px; }.catalog-grid { grid-template-columns:1fr; }.card { min-height:270px; }.filters { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }.filter { flex:0 0 auto; }.detail-shell { padding:38px 22px 64px; }.back-link { margin-bottom:52px; }.detail-shell dl { grid-template-columns:1fr; gap:5px; }.detail-shell dd { margin-bottom:14px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
.card[hidden] { display: none !important; }
.site-nav { display:flex; align-items:center; gap:18px; color:var(--paper); font-size:13px; }
.site-nav a { text-underline-offset:5px; }
.site-nav .nav-cta { padding:8px 11px; background:var(--paper); color:var(--ink); font-weight:800; text-decoration:none; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero-actions .primary-link { margin-top:0; }
.primary-link.is-quiet { border:1px solid rgba(245,241,229,.38); background:transparent; }
.state-stack { display:flex; max-width:72%; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.state-stack span { padding:3px 6px; background:var(--green); color:#36513b; font-size:10px; font-weight:800; }
.state-stack .asset-status { background:var(--ink); color:var(--paper); }
.card.is-flagship { box-shadow:inset 4px 0 0 var(--red); }
.gallery-footer { display:flex; max-width:1400px; margin:auto; padding:38px 48px; justify-content:space-between; gap:24px; color:var(--paper); }
.gallery-footer nav { display:flex; flex-wrap:wrap; gap:18px; }
@media (max-width:800px) { .site-header { flex-wrap:wrap; }.site-nav { width:100%; overflow-x:auto; padding-bottom:3px; }.gallery-footer { padding:30px 18px; flex-direction:column; }.state-stack { max-width:76%; } }