/* 铭见 · 栏目页样式（R2 原型）。与首页生长星图同一套深色星空基调；身份色为 R15 感知朱橙。 */
:root{
  --void:#030409; --deep:#070a14; --panel:#0c1120; --line:#1d2436;
  --ink:#E9EDF5; --body:#C4CBDA; --dim:#8C95A9; --faint:#3C4356;
  --ice:#AFC6FF; --kstar:#FFB46B; --brand:#E4542E;
  --soft:#F3CBB3; --read:#B54425;   /* R15 深色主题：柔浅橙（链接与强调文字）、阅读深橙（主按钮） */
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:"SF Mono","JetBrains Mono",Menlo,Consolas,ui-monospace,monospace;
  --wrap:1120px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(1px 1px at 12% 18%,rgba(233,237,245,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 68% 9%,rgba(175,198,255,.5) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 32%,rgba(255,180,107,.45) 50%,transparent 51%),
    radial-gradient(1px 1px at 33% 62%,rgba(233,237,245,.35) 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 74%,rgba(243,203,179,.4) 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 88%,rgba(233,237,245,.35) 50%,transparent 51%),
    radial-gradient(1200px 700px at 85% -10%,rgba(42,60,120,.22),transparent 60%),
    var(--void);
  background-attachment:fixed}
a{color:inherit}
img{max-width:100%;display:block}
.nw{white-space:nowrap}
main [id]{scroll-margin-top:88px}   /* 从详情页返回时，回到的卡片不被页头挡住 */
body{display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
:focus-visible{outline:1px solid var(--brand);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:var(--void);padding:6px 12px}
.skip:focus{left:16px}

/* header */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(3,4,9,.72);border-bottom:1px solid rgba(60,67,86,.45)}
.top .in{max-width:var(--wrap);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:500;letter-spacing:.2em;font-size:16px}
.logo svg{width:26px;height:auto;color:var(--brand)}
.top .mj-preview{margin-right:auto;margin-left:4px}
.back-map{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-decoration:none;color:var(--ink);border:1px solid rgba(228,84,46,.55);background:rgba(228,84,46,.1);padding:4px 10px;border-radius:2px;margin-left:6px;white-space:nowrap}
.back-map::before{content:"← ";color:var(--brand)}
.back-map:hover{background:rgba(228,84,46,.2)}
.back-map[hidden]{display:none}
.back-map:not([hidden])+.mj-preview{margin-left:8px}
@media (max-width:640px){.back-map{font-size:10.5px;padding:3px 7px}.top .mj-preview{display:none}}
.nav{display:flex;gap:2px;font-size:14px;letter-spacing:.12em}
.nav a{text-decoration:none;color:var(--body);padding:6px 12px;border-radius:2px}
.nav a:hover{color:#fff;background:rgba(243,203,179,.07)}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -1px 0 var(--brand)}

/* layout */
main{max-width:var(--wrap);margin:0 auto;padding:0 24px 96px}
.hero{padding:72px 0 40px;max-width:820px}
.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.subnav .btn{padding:7px 12px;font-size:12px}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap}
.crumb a{text-decoration:none;color:var(--dim)}
.crumb a:hover{color:var(--ink)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.eyebrow b{color:var(--brand);font-weight:500}
h1,h2,h3{font-weight:400;margin:0;letter-spacing:.02em;text-wrap:balance}
h1{font-size:clamp(36px,5.6vw,64px);line-height:1.12;font-weight:300;margin:14px 0 18px}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.25;font-weight:300}
h3{font-size:18px;font-weight:500}
p{margin:0 0 1em;color:var(--body);text-wrap:pretty}
.lead{font-size:clamp(18px,2.1vw,22px);line-height:1.65;color:var(--ink);font-weight:300}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim);border:1px solid var(--faint);padding:2px 9px;border-radius:2px}
.tag.k{color:var(--kstar);border-color:rgba(255,180,107,.4)}
.tag.i{color:var(--body);border-color:var(--faint)}
.tag.i::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ice);margin-right:6px;vertical-align:1px}   /* 无界现场的分类色只作小圆点，与星团颜色对应 */
.tag.b{color:var(--brand);border-color:rgba(228,84,46,.5)}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--mono);font-size:13px;letter-spacing:.06em;padding:10px 16px;border:1px solid var(--faint);border-radius:2px;color:var(--ink);background:transparent;cursor:pointer;transition:border-color .2s,background .2s}
.btn:hover{border-color:var(--soft);background:rgba(243,203,179,.07)}
.btn.primary{border-color:var(--read);background:var(--read);color:#fff}
.btn.primary:hover{background:var(--brand);border-color:var(--brand)}
.section{padding:56px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head p{max-width:560px;margin:8px 0 0}
.sec-head h2{margin-top:8px}
.sec-head .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.sec-head .more{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:none;color:var(--ink)}
.sec-head .more::after{content:" →";color:var(--brand)}
@media (max-width:640px){.sec-head .side{align-items:flex-start;text-align:left}}

/* cards */
.grid{display:grid;gap:20px}
.g1{grid-template-columns:minmax(0,1fr)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(12,17,32,.9),rgba(7,10,20,.9));border:1px solid var(--line);border-radius:4px;overflow:hidden;text-decoration:none;transition:border-color .25s,transform .25s}
.card:hover{border-color:rgba(243,203,179,.4);transform:translateY(-2px)}
.card .cover{aspect-ratio:16/10;background:#0b0f1b;overflow:hidden}
.card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .cover img{transform:scale(1.03)}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .body p{margin:0;font-size:14.5px;line-height:1.7}
.card .go{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink)}
.card .go::after{content:" →";color:var(--brand)}
.card .sub{display:flex;gap:6px;flex-wrap:wrap}
.card .co{font-size:13px;color:var(--ink);letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.card .co span{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.04em}
.card.wide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.card.wide .cover{aspect-ratio:16/9}
.card.wide .body{padding:28px 30px;justify-content:center}
.card.wide h3{font-size:22px;font-weight:400}
.card.wide .go{margin-top:10px}
@media (max-width:760px){.card.wide{grid-template-columns:minmax(0,1fr)}}
.cover.ph{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%,rgba(175,198,255,.14),transparent 60%),radial-gradient(circle at 75% 70%,rgba(228,84,46,.16),transparent 55%),#080b16}
.cover.ph svg{width:30%;color:rgba(233,237,245,.85)}
.card .cover.brandmark img,.brandmark img{width:34%;max-width:300px;height:auto;object-fit:contain}
.card:hover .cover.brandmark img{transform:none}
.brand-banner{margin:4px 0 8px}
.brand-banner .brandmark{aspect-ratio:21/9;border:1px solid var(--line);border-radius:4px}
.brand-banner .brandmark img{width:26%}
@media (max-width:640px){.brand-banner .brandmark{aspect-ratio:4/3}.brand-banner .brandmark img{width:52%}}
.cover.ph span{position:absolute;font-family:var(--mono);font-size:11px;color:var(--dim);bottom:12px;left:14px;letter-spacing:.08em}

/* case page */
.case-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:min(68vh,640px);display:flex;align-items:flex-end;overflow:hidden;background:#05070d}
.case-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,4,9,.25) 0%,rgba(3,4,9,.3) 40%,rgba(3,4,9,.96) 100%)}
.case-hero .in{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px 44px}
.case-hero h1{margin:12px 0 14px}
.case-hero .crumb,.case-hero .crumb a{color:var(--body)}
@media (max-width:640px){.case-hero{min-height:56vh}.case-hero .in{padding:0 16px 28px}}
.gal{margin-top:28px}
.duo-fig{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:stretch}
.duo-fig figure{margin:0;display:flex;flex-direction:column;gap:8px}
.duo-fig img{width:100%;border:1px solid var(--line);border-radius:4px;background:#05070d;flex:1;object-fit:cover}
.duo-fig .chars-fig img{object-fit:contain;padding:16px;background:radial-gradient(circle at 50% 40%,rgba(175,198,255,.1),transparent 65%),#080b16}
.duo-fig figcaption{font-size:12.5px;color:var(--dim)}
@media (max-width:760px){.duo-fig{grid-template-columns:minmax(0,1fr)}}
.case-sec{padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:72px}
.case-sec>.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
@media (max-width:860px){.case-sec>.cols{grid-template-columns:minmax(0,1fr);gap:24px}}
.case-sec h2{margin:10px 0 18px}
.zones{list-style:none;counter-reset:z;margin:0 0 1em;padding:0;display:flex;flex-direction:column;gap:10px}
.zones li{counter-increment:z;display:grid;grid-template-columns:2.4em 1fr;gap:10px;color:var(--body);font-size:15px;line-height:1.7}
.zones li::before{content:counter(z,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--brand);padding-top:3px}
.zones strong{color:var(--ink);font-weight:500}
table.data{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 1.2em}
table.data th,table.data td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim);font-weight:400}
table.data td:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
.tablewrap{overflow-x:auto}
blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:2px solid var(--brand);font-size:20px;color:var(--ink);letter-spacing:.1em}
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.gallery figure{margin:0;grid-column:span 2;position:relative}
.gallery figure:first-child{grid-column:span 6}
.gallery figure:nth-child(2),.gallery figure:nth-child(3){grid-column:span 3}
.gallery button{all:unset;display:block;cursor:zoom-in;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:3px;background:#0b0f1b}
.gallery figure:first-child button{aspect-ratio:16/9}
.gallery button:focus-visible{outline:1px solid var(--brand);outline-offset:3px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gallery button:hover img{transform:scale(1.03)}
.gallery figcaption{font-size:12.5px;color:var(--dim);padding:6px 2px 0;line-height:1.5}
.gallery figure.half{grid-column:span 3}
.gallery figure.wide{grid-column:span 6}
.gallery figure.wide button{aspect-ratio:21/9}
@media (max-width:640px){.gallery figure,.gallery figure:nth-child(2),.gallery figure:nth-child(3){grid-column:span 3}.gallery figure:first-child{grid-column:span 6}}
.pager{display:flex;justify-content:space-between;gap:16px;padding-top:40px;margin-top:24px;border-top:1px solid var(--line)}
.pager a{text-decoration:none;display:flex;flex-direction:column;gap:2px}
.pager a:hover{color:#fff}
.pager a span{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em}
.pager a.next{text-align:right}
.pager a.all{align-items:center;text-align:center}
.pager>*{flex:1}
@media (max-width:640px){.pager a.all{display:none}}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1600px);max-height:94vh;color:var(--ink)}
dialog.lb::backdrop{background:rgba(3,4,9,.92)}
dialog.lb img{max-width:100%;max-height:84vh;margin:0 auto;border-radius:2px}
dialog.lb .cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 4px;font-size:14px;color:var(--body)}
dialog.lb .ctl{display:flex;gap:8px}

/* digital list */
.exp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;padding:44px 0;border-top:1px solid var(--line);scroll-margin-top:72px}
.exp:nth-of-type(even) .shot{order:2}
@media (max-width:860px){.exp{grid-template-columns:minmax(0,1fr);gap:20px}.exp:nth-of-type(even) .shot{order:0}}
.exp .shot{aspect-ratio:16/10;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:#080b16}
.exp .shot img{width:100%;height:100%;object-fit:cover}
.exp .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.exp .note{font-size:13px;color:var(--dim);margin-top:10px}
.notfound{padding:18vh 0 14vh}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* zhijian */
.duo{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
@media (max-width:640px){.duo{grid-template-columns:1fr}}
.duo img{width:min(280px,70vw)}
.chars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.chars{grid-template-columns:1fr}}
.char{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:rgba(12,17,32,.6)}
.char img{width:64px;height:64px;object-fit:contain}
.char p{margin:0;font-size:14px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filters button{all:unset;cursor:pointer;font-size:13px;letter-spacing:.06em;padding:6px 14px;border:1px solid var(--faint);border-radius:999px;color:var(--body)}
.filters button[aria-pressed="true"]{border-color:var(--brand);color:#fff;background:rgba(228,84,46,.12)}
.filters button:focus-visible{outline:1px solid var(--brand);outline-offset:3px}
.post{display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:center;padding:20px 4px;border-top:1px solid var(--line);text-decoration:none}
.post:hover h3{color:#fff}
.post img{width:72px;height:72px;object-fit:contain}
.post h3{font-size:19px;font-weight:400;margin:4px 0 6px;line-height:1.45}
.post p{margin:0;font-size:14px;color:var(--dim);line-height:1.65}
.post .st{font-family:var(--mono);font-size:11px;color:var(--kstar);letter-spacing:.08em;white-space:nowrap}
@media (max-width:640px){.post{grid-template-columns:52px 1fr}.post img{width:52px;height:52px}.post .st{grid-column:2}}
article.note{max-width:720px;margin:0 auto}
article.note .byline{display:flex;gap:12px;align-items:center;color:var(--dim);font-size:13px;margin:6px 0 28px}
article.note .byline img{width:44px;height:44px;object-fit:contain}
article.note h2{font-size:26px;margin:2em 0 .7em}
article.note figure{margin:1.6em 0}
article.note figcaption{font-size:13px;color:var(--dim);margin-top:6px}
.say{display:grid;grid-template-columns:48px 1fr;gap:12px;margin:1.1em 0;align-items:start}
.say img{width:48px;height:48px;object-fit:contain}
.say div{background:rgba(12,17,32,.85);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:10px 14px;color:var(--body)}
.say b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);font-weight:400}
.say.o div{border-color:rgba(228,84,46,.35)}
.takeaway{margin:2.4em 0;padding:22px 24px;border:1px solid rgba(228,84,46,.45);border-radius:4px;background:rgba(228,84,46,.07)}
.takeaway h2{margin:0 0 .6em!important;font-size:20px!important}
.sources{font-size:13.5px;color:var(--dim)}
.sources a{color:var(--body)}
.pending{border:1px dashed var(--faint);border-radius:4px;padding:16px 18px;color:var(--dim);font-size:14px;margin:1.4em 0}

/* about */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.facts.four{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.facts.four{grid-template-columns:1fr}}
.sub-h{margin:40px 0 6px;font-size:15px;font-weight:500;letter-spacing:.08em;color:var(--ink)}
.guide-list li{grid-template-columns:3em 4em 1fr}
.guide-list em{color:var(--body);font-size:15px}
.contact-box{max-width:560px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1.lockup{margin:18px 0 22px}
h1.lockup img{height:clamp(44px,6vw,68px);width:auto}
.idea{max-width:760px}
.idea .lead{font-size:clamp(17px,1.9vw,20px)}
.idea .src{font-size:12.5px;color:var(--dim);line-height:1.7;margin-top:-4px}
.idea .src a{color:var(--body)}
.howto{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
@media (max-width:860px){.howto{grid-template-columns:repeat(2,minmax(0,1fr))}}
.clip{margin:0;display:flex;flex-direction:column;gap:8px}
.clip video{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);border-radius:4px;background:#05070d;display:block}
.clip figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.55}
.clip figcaption b{font-weight:500;color:var(--ink);letter-spacing:.04em}
.clip figcaption span{color:var(--dim)}
.actions .note{font-size:12.5px;color:var(--dim)}
.foot .foot-contact{min-width:220px}
@media (max-width:860px){.facts{grid-template-columns:1fr}}
.fact{padding:22px;border:1px solid var(--line);border-radius:4px;background:rgba(12,17,32,.6)}
.fact h3{margin:8px 0 8px}
.fact p{margin:0;font-size:14.5px}
.rings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rings li{display:grid;grid-template-columns:3em 4em 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rings b{font-family:var(--mono);color:var(--brand);font-weight:400;font-size:13px}
.rings span{color:var(--ink);font-size:17px}
.rings em{font-style:normal;color:var(--body)}
@media (max-width:640px){.rings li{grid-template-columns:2.4em 3.2em 1fr}}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:grid;grid-template-columns:5em 1fr;gap:14px;align-items:baseline}
.contact-list span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dim)}
.contact-list a{font-size:20px;text-decoration:none;border-bottom:1px solid rgba(228,84,46,.55);justify-self:start;font-variant-numeric:tabular-nums}
.contact-list a:hover{border-bottom-color:var(--brand)}
.contact-list em{font-style:normal;color:var(--dim)}

/* footer */
.foot{border-top:1px solid var(--line);background:rgba(3,4,9,.8)}
.foot .in{max-width:var(--wrap);margin:0 auto;padding:36px 24px 44px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--dim)}
.foot .slogan{color:var(--ink);letter-spacing:.14em;font-size:15px;margin-bottom:6px}
.foot a{text-decoration:none;color:var(--body)}
.foot a:hover{color:#fff}
.foot .c{display:flex;flex-direction:column;gap:4px}
.foot .icp{flex-basis:100%;font-size:12px;letter-spacing:.04em}.foot .icp a{color:var(--dim)}

/* preview badge (prototype only; removed by build flag before launch) */
.mj-preview{white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#17191B;background:#F3CBB3;padding:4px 10px;border-radius:2px;pointer-events:none;opacity:.92}

@media (max-width:640px){
  .top .in{padding:10px 16px}
  .logo span{display:none}
  .nav a{padding:6px 9px;letter-spacing:.06em}
  main{padding:0 16px 72px}
  .hero{padding:44px 0 28px}
  .foot .in{padding:28px 16px 40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}