/* neobiologia.com — EL ATLAS VISUAL
   设计契约 v1.0（竞稿 C 反推）: 图集纸 + 石墨墨 + 荧光黄绿标记笔 + 图版序 */

:root{
  --paper:#F7F5EF; --wash:#ECEAE1; --white:#FFFFFF; --grid:#DDD9CD;
  --ink:#191919; --body2:#3A3A37; --faint:#82817B;
  --sig:#B8D235; --sigdark:#7A8F1E;
  --ok:#3D7A4F; --warn:#B07A2A;
  --line1:#191919; --line2:#DDD9CD;
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'SF Mono',Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-padding-top:20px}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:1220px;margin:0 auto;padding:0 34px}
a{color:inherit}

/* ── 顶栏 ── */
.top{padding:16px 0 14px;border-bottom:1px solid var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand .box{background:var(--sig);color:var(--ink);font-weight:800;font-size:14px;
  padding:6px 12px;letter-spacing:0;text-transform:uppercase;text-decoration:none}
.brand .box b{opacity:.5;font-weight:400}
.brand .sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.14em}
.navatlas{display:flex;gap:20px;flex-wrap:wrap}
.navatlas a{color:var(--body2);text-decoration:none;text-transform:uppercase;
  letter-spacing:.06em;font-size:12px;transition:color .15s}
.navatlas a:hover{color:var(--sigdark)}
.navatlas a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--sig)}
.langbar{border-bottom:1px solid var(--line2);background:var(--wash)}
.langbar .in{max-width:1220px;margin:0 auto;padding:8px 34px;display:flex;gap:16px;
  font-family:var(--mono);font-size:11px}
.langbar a{color:var(--faint);text-decoration:none;letter-spacing:.08em}
.langbar a:hover{color:var(--sigdark)}
.langbar a.on{color:var(--ink);border-bottom:2px solid var(--sig)}

/* ── hero 图版 ── */
.hero{display:grid;grid-template-columns:1.15fr .85fr;min-height:66vh;border-bottom:1px solid var(--ink)}
.hero .plate{background:var(--wash);border-right:1px solid var(--ink);
  position:relative;overflow:hidden;padding:34px;container-type:inline-size}
.hero .txt{padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--sigdark);margin-bottom:20px}
h1{font-size:clamp(36px,3.8vw,50px);line-height:1.04;letter-spacing:-.025em;
  font-weight:800;margin-bottom:26px;text-wrap:balance}
h1 u{text-decoration:none;box-shadow:inset 0 -.42em 0 var(--sig)}
.hero .ans{font-size:18px;color:var(--body2);max-width:46ch;margin-bottom:30px;text-wrap:pretty}
.hero .ans strong{color:var(--ink)}
.pl-coord{position:absolute;font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.1em}
.pl-coord.tl{top:14px;left:16px}.pl-coord.br{bottom:14px;right:16px}
.big{font-size:clamp(84px,12.2cqw,150px);font-weight:800;letter-spacing:-.05em;
  line-height:.9;white-space:nowrap}
.big span{color:transparent;-webkit-text-stroke:2px var(--sigdark)}
.plate .cap{font-family:var(--mono);font-size:11px;color:var(--sigdark);letter-spacing:.14em;margin-top:10px}
.bases{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;margin-top:26px}
.bases i{aspect-ratio:1;border:1px solid var(--grid);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10px;color:var(--faint);font-style:normal}
.bases i.a{background:var(--sig);border-color:var(--sigdark);color:var(--ink);font-weight:700}
.bases i.g{background:#fff;border-color:var(--ink)}
.coords{border-top:1px solid var(--grid);padding-top:18px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.coords .c dt{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.14em;margin-bottom:3px}
.coords .c dd{font-size:13.5px}

/* ── 图版序行 ── */
main{padding:0}
.plate2{display:grid;grid-template-columns:340px 1fr;border-bottom:1px solid var(--ink)}
.plate2 .pv{background:var(--wash);border-right:1px solid var(--ink);
  padding:40px 32px;display:flex;flex-direction:column;justify-content:flex-start;gap:18px}
.plate2 .pv .num{font-family:var(--mono);font-size:13px;color:var(--sigdark);letter-spacing:.12em}
.plate2 .pv h3{font-size:21px;letter-spacing:-.014em;font-weight:800}
.plate2 .bd{padding:44px 52px}
.plate2 .bd p{color:var(--body2);max-width:60ch;margin-bottom:16px}
.plate2 .bd p strong{color:var(--ink)}
.plate2 .bd h4{font-size:17px;margin:26px 0 10px;letter-spacing:-.01em}
.cut{display:flex;align-items:center;gap:14px;margin:20px 0 14px}
.cut .str{flex:1;height:0;border-top:1px dotted var(--faint)}
.cut .str.solid{border-top:1px solid var(--ink)}
.cut .mark{position:relative;width:34px;height:34px;flex:none;
  display:flex;align-items:center;justify-content:center}
.cut .mark::before{content:"";position:absolute;inset:0;
  border:1px solid var(--ink);border-radius:50%}
.cut .mark::after{content:"";position:absolute;inset:5px;
  border:1px solid var(--sigdark);border-radius:50%;opacity:.55}
.cut .mark i{font-family:var(--mono);font-style:normal;font-size:11.5px;
  font-weight:700;letter-spacing:.02em;color:var(--ink)}
.cut-lab{font-family:var(--cut-mono, var(--mono));font-size:10px;color:var(--faint);letter-spacing:.12em}

/* ── 数据带 ── */
.band{background:var(--sig);color:var(--ink);padding:44px 34px}
.band .in{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.band .s b{font-size:clamp(30px,3vw,42px);font-weight:800;letter-spacing:-.03em;display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.band .s span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;display:block;margin-top:6px}

/* ── 折叠问答 ── */
.fold{border-bottom:1px solid var(--ink)}
.fold details{border-bottom:1px solid var(--grid)}
.fold summary{padding:22px 34px;cursor:pointer;font-weight:700;font-size:17px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--sigdark);flex-shrink:0}
.fold details[open] summary::after{content:"–"}
.fold .body{padding:0 34px 26px;color:var(--body2);max-width:70ch}
.fold .body .src{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:12px}

/* ── 答案胶囊 ── */
.capsule{margin:0 34px;padding:30px 0 8px}
.capsule .q{font-family:var(--mono);font-size:11px;color:var(--sigdark);letter-spacing:.14em;margin-bottom:10px}
.capsule p{font-size:18px;line-height:1.55;max-width:66ch;text-wrap:pretty}
.capsule .src{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:12px}
.capsule .src a{color:var(--sigdark);text-decoration:none;border-bottom:1px dotted var(--sigdark)}

/* ── 相关词条网格 ── */
.rel-wrap{padding:56px 34px}
.rel-wrap h2{font-size:22px;margin-bottom:18px;letter-spacing:-.014em}
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rel a{border:1px solid var(--line2);padding:16px 14px;text-decoration:none;
  color:var(--ink);font-size:14px;background:var(--white);transition:border-color .15s;display:block}
.rel a:hover{border-color:var(--sig)}
.rel a span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:6px;letter-spacing:.08em}

/* ── 数据行(信息密度) ── */
.datarow{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ink);background:var(--white)}
.datarow .d{padding:16px 24px;border-right:1px solid var(--line2)}
.datarow .d:last-child{border-right:0}
.datarow b{font-size:clamp(19px,1.9vw,26px);font-weight:800;display:block;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.datarow span{font-family:var(--mono);font-size:9.5px;color:var(--faint);letter-spacing:.09em}

/* ── 词典卡(术语表) ── */
.dictgrid{padding:40px 34px 8px;column-gap:22px;columns:2}
.dictcard{break-inside:avoid;border:1px solid var(--line2);border-left:3px solid var(--sig);
  background:var(--white);padding:13px 16px;margin-bottom:10px}
.dictcard b{display:block;font-family:var(--mono);font-size:12px;color:var(--sigdark);letter-spacing:.06em;margin-bottom:5px}
.dictcard p{font-size:14px;color:var(--body2);line-height:1.5}

/* ── 路线图(在写图版) ── */
.roadmap{border-bottom:1px solid var(--ink);background:var(--white)}
.roadmap .in{max-width:1152px;margin:0 auto;padding:38px 34px}
.roadmap h2{font-size:20px;letter-spacing:-.014em;margin-bottom:6px}
.roadmap .sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);letter-spacing:.1em;margin-bottom:18px}
.rm{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--line2)}
.rm .when{font-family:var(--mono);font-size:11px;color:var(--sigdark);letter-spacing:.06em}
.rm .what b{display:block;font-size:15px}
.rm .what span{font-size:13px;color:var(--body2)}
.rm .st{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--faint);
  border:1px solid var(--line2);padding:3px 8px;white-space:nowrap}
.rm .st.wip{color:var(--sigdark);border-color:var(--sig)}

/* plate2 正文: 左锚固定边距 + 行长封顶; 图浮于文字列右缘, 多余宽度归右侧留白 */
.plate2 .bd{overflow:hidden;padding-left:52px;padding-right:max(52px,calc(100% - 1132px))}
.plate2 .bd:has(.hd-fig) p{max-width:none}
.plate2 .bd .hd-fig{float:right;width:min(470px,44%);margin:2px 0 18px 30px;max-width:none}
.plate2 .bd .hd-fig svg{width:100%;height:auto}

/* ── 科普连环画(生成图 + 编号覆层 + 三语图说) ── */
.hd-fig{position:relative;border:1px solid var(--line2);background:var(--white);
  padding:8px;margin:0}
.hd-fig img{display:block;width:100%;height:auto}
.hd-fig .fig-dots{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);
  pointer-events:none}
.hd-fig figcaption{font-family:var(--mono);font-size:10.5px;color:var(--faint);
  letter-spacing:.02em;line-height:1.5;padding:8px 2px 2px;max-width:60ch}
.plate2 .bd .hd-fig figcaption{padding:8px 2px 2px}

/* ── 插图(机制图解) ── */
.fig{border-top:1px solid var(--ink);background:var(--white);padding:26px 34px 22px}
.fig-head{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10px;color:var(--faint);letter-spacing:.14em;margin-bottom:6px}
.fig-svg svg{display:block;width:100%;height:auto}
.fig-svg text{font-family:var(--mono)}
figcaption{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.02em;
  margin-top:10px;max-width:88ch;line-height:1.55}

/* ── 更新日志 ── */
.updlist{max-width:820px;margin:0 auto;padding:36px 34px 20px}
.upd-item{border:1px solid var(--line2);background:var(--white);margin-bottom:14px;padding:18px 22px}
.upd-item .dt{font-family:var(--mono);font-size:10.5px;color:var(--sigdark);letter-spacing:.1em}
.upd-item a.t{display:block;font-size:17px;font-weight:700;margin:6px 0 4px;color:var(--ink);text-decoration:none}
.upd-item a.t:hover{color:var(--sigdark)}
.upd-item .t{display:block;font-size:17px;font-weight:700;margin:6px 0 4px;color:var(--ink)}
.upd-item p{font-size:14px;color:var(--body2)}

/* ── 词典脚条 ── */
.dictfoot{border-top:2px solid var(--ink);padding:20px 34px;display:flex;
  gap:40px;font-size:13.5px;color:var(--body2);flex-wrap:wrap;background:var(--white)}
.dictfoot .w{min-width:180px}
.dictfoot b{display:block;font-family:var(--mono);font-size:11px;color:var(--sigdark);letter-spacing:.1em;margin-bottom:4px}

/* ── 页脚 ── */
footer{border-top:1px solid var(--ink);margin-top:0;padding:26px 0 44px;font-size:12.5px;color:var(--faint)}
.foot-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.foot-grid a{color:var(--body2)}

/* ── 内容页通用 ── */
.pagebody{padding:56px 34px;max-width:820px}
.pagebody h2{font-size:24px;letter-spacing:-.016em;margin:40px 0 14px;font-weight:800}
.pagebody h2:first-child{margin-top:0}
.pagebody p{color:var(--body2);max-width:64ch;margin-bottom:16px}
.pagebody p strong{color:var(--ink)}
.pagebody ul{margin:0 0 16px 20px;color:var(--body2)}
.pagebody li{margin-bottom:8px;max-width:60ch}
.note{background:var(--wash);border-left:3px solid var(--sig);
  padding:14px 18px;font-size:14.5px;color:var(--body2);max-width:58ch;margin:20px 0}
.note b{color:var(--ink)}
.srcline{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin:12px 0 28px}
.srcline a{color:var(--sigdark);text-decoration:none;border-bottom:1px dotted var(--sigdark)}

/* 通用表格 */
table.data{width:100%;border-collapse:collapse;margin:20px 0;background:var(--white)}
table.data th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-align:left;
  color:var(--faint);border-bottom:2px solid var(--ink);padding:10px 12px;font-weight:500}
table.data td{border-bottom:1px solid var(--line2);padding:12px;font-size:14.5px;color:var(--body2)}
table.data td:first-child{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

@media(max-width:960px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero .plate{border-right:0;border-bottom:1px solid var(--ink);padding:24px}
  .hero .txt{padding:36px 24px}
  .plate2{grid-template-columns:1fr}
  .plate2 .pv{border-right:0;border-bottom:1px solid var(--ink)}
  .plate2 .bd{padding:28px 24px}
  .plate2 .bd .hd-fig{float:none;width:min(430px,100%);margin:12px auto 4px}
  .band .in{grid-template-columns:1fr 1fr;gap:24px}
  .bases{grid-template-columns:repeat(8,1fr)}
  .rel{grid-template-columns:1fr 1fr}
  .wrap{padding:0 20px}
@pagebody,.rel-wrap,.capsule{padding-left:20px;padding-right:20px}
  .dictgrid{columns:1;padding:32px 20px 8px}
  .fig{padding:20px}
  .fig-head{margin-bottom:4px}
  .fig-svg{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fig-svg svg{min-width:640px}
  .datarow{grid-template-columns:1fr 1fr}
  .datarow .d{padding:14px 20px}
  .datarow .d:nth-child(2n){border-right:0}
  .datarow .d:nth-child(-n+2){border-bottom:1px solid var(--line2)}
  .rm{grid-template-columns:90px 1fr}
  .rm .st{grid-column:2;justify-self:start}
  .fold summary,.fold .body{padding-left:20px;padding-right:20px}
  .dictfoot{padding:20px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  .top,.langbar,.fold summary::after,.band{display:none}
  body{font-size:12px}
  .hero{min-height:auto}
  details{display:block}
  details .body{display:block}
}