/* ============================================================================
   AutoSites 静态站 · jade 模板
   版式：上三格（①站标 ②标题+原站导航 ③人物插画）
         / 中三列（④左列 ⑤中间列 ⑥右列）
         / 下三格（⑦⑨装饰线 ⑧页脚）
         —— 三行用**同一套栅格**，所以上下两带的格子跟中间三列对齐。
   风格：绿色系 · 玻璃拟态（半透明 + backdrop-filter 磨砂）· 清新雅致。
   ========================================================================== */

:root {
  /* 底色与文字 */
  --bg-1:      #f3fbf7;
  --bg-2:      #e5f5ec;
  --ink:       #008200;
  --ink-2:     #43705e;
  --ink-3:     #7ba294;
  --accent:    #17856a;
  --accent-2:  #4fc39a;
  --leaf:      #2ea87c;

  /* 插画 */
  --figure-fill: #ffffff;
  --figure-ink:  #1f6a52;
  --figure-ring: rgba(255,255,255,.78);
  --blush:       rgba(255,146,168,.46);

  /* 玻璃 */
  --glass:     rgba(255,255,255,.60);
  --glass-2:   rgba(255,255,255,.80);
  --edge:      rgba(255,255,255,.92);
  --edge-soft: rgba(23,133,106,.14);
  --tint:      rgba(79,195,154,.15);
  --glass-in:  inset 0 1px 0 rgba(255,255,255,.88);
  --shadow:    0 14px 34px rgba(16,74,54,.10);
  --shadow-sm: 0 6px 18px rgba(16,74,54,.07);
  --empty-bg:  rgba(255,255,255,.24);
  --solid:     #ffffff;

  --radius:    18px;
  --side-l:    238px;
  --side-r:    250px;
  --gap:       20px;
}

/* --------------------------------------------------------------- 基础 ---- */

* { box-sizing: border-box; }

/* 图片。原站的图是按原站那张版式裁好的，而我们**不保留 width/height 属性**
   （标记里只有 ![替代文字](地址)）—— 所以这条约束是必须的：不限制的话
   一张大图会把整列撑破。图加载不出来时 alt 文字会显示出来，不留空白。 */
img { max-width: 100%; height: auto; vertical-align: middle; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-1);
  color: var(--ink);
  font: 16px/1.8 -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC",
        "Hiragino Sans GB", sans-serif;
}

/* 背景：一层固定光晕，不随内容滚动、也不吃鼠标事件。
   玻璃要"透"，底下就得有点东西可透 —— 这几团薄荷/青绿就是它透出来的东西。 */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(880px 540px at 5% -8%,   rgba(126,224,186,.42), transparent 62%),
    radial-gradient(780px 500px at 100% 0%,  rgba(170,238,215,.48), transparent 60%),
    radial-gradient(720px 620px at 48% 108%, rgba(96,196,160,.30), transparent 64%),
    radial-gradient(560px 420px at 82% 56%,  rgba(206,244,228,.55), transparent 66%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2) 58%, var(--bg-1));
}
.top, .shell, .bot { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------------------------------- 栅格（三行共用）---- */

.band, .layout {
  max-width: 1420px;
  margin: 0 auto;
  padding: 0 26px;
  display: grid;
  grid-template-columns: var(--side-l) minmax(0, 1fr) var(--side-r);
  gap: var(--gap);
}
/* 三列各自按内容高，不互相拉长 —— 否则侧栏短的时候会挂着一张很高的空玻璃 */
.layout { align-items: start; }

.top  { padding: 14px 0 0; }
.shell { padding: 22px 0 6px; }
.bot  { padding: 10px 0 40px; }

/* --------------------------------------------------------- 玻璃卡片 ---- */

/* ★ 只有 .blocks 里的块才是"一张卡"。
   区域块（nav / header / left / right / footer 这几处）**本身就已经在
   某张玻璃卡里面了**，再套一层就是卡中卡 —— 见下面 .zone > .blk。 */
.cell, .panel, .col-left:not(:empty), .col-right:not(:empty),
.blocks section.blk {
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  backdrop-filter: blur(16px) saturate(155%);
  box-shadow: var(--glass-in), var(--shadow-sm);
}
.hero { box-shadow: var(--glass-in), var(--shadow); }

.cell { padding: 14px 18px; }

/* ① 站标 */
.cell-brand { display: flex; align-items: center; gap: 10px; }
.brand {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  background: linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand:hover { text-decoration: none; }

.leaf { display: block; width: 26px; height: 26px; flex: 0 0 auto; }
.leaf-body { fill: var(--leaf); }
.leaf-vein {
  fill: none;
  stroke: #ffffff;
  stroke-opacity: .85;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ② 本页标题 + 原站导航 / 页首 */
.cell-head { padding: 15px 20px 16px; }
.crumb {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.cell-head .zone { margin-top: 8px; }

/* ③ 人物插画 */
.cell-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.figure { display: block; width: 100%; max-width: 152px; height: auto; }
.fig-halo { opacity: .30; }
.fig-ring {
  fill: none;
  stroke: var(--figure-ring);
  stroke-width: 1.5;
}
.fig-shoulder {
  fill: none;
  stroke: var(--leaf);
  stroke-width: 3.6;
  stroke-linecap: round;
}
.fig-neck { fill: var(--figure-fill); }
.fig-head { fill: var(--figure-fill); stroke: var(--leaf); stroke-width: 3.2; }
.fig-hair { fill: var(--leaf); }
.fig-eye, .fig-smile {
  fill: none;
  stroke: var(--figure-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.fig-blush { fill: var(--blush); }

/* ⑦ ⑨ 装饰格：一条渐隐的细线，纯 CSS，不往页面里加任何字 */
.mark-cell { display: flex; align-items: center; justify-content: center; }
.mark {
  display: block;
  width: 100%;
  max-width: 170px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: .75;
}

/* -------------------------------- 区域块：一条细线分开，不再套一层卡 ---- */

/* ④ 左列 / ⑥ 右列（设计稿里"一个头 + 若干条"的那种）：
   列本身就是一张玻璃卡，里面每一块用一条细线分开。
   页脚 ⑧、顶端的 nav/header 同理 —— 它们是 .zone > .blk，走同一套。 */
.col-left:not(:empty), .col-right:not(:empty) { padding: 14px 16px; }

.zone { font-size: 13.5px; line-height: 1.78; color: var(--ink-2); }

.zone > .blk {
  background: none;
  border: 0;
  border-top: 1px solid var(--edge-soft);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 12px 0 4px;
  margin: 0;
}
.zone > .blk:first-child { border-top: 0; padding-top: 0; }
/* ★ 主列那条左肩强调竖线**只属于正文块**，区域块上不能出现
   （漏了这条的时候，页脚和侧栏每一块左边都挂着一根绿线）。 */
.zone > .blk::before { display: none; }

.zone p { margin: 0 0 .5em; font-size: 13.5px; }
.zone p:last-child { margin-bottom: 0; }
.zone h3 {
  margin: 0 0 .35em;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

/* 目录和原站右栏都在右列里时，中间也拉一条线 */
.col-right > .zone + .zone {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--edge-soft);
}

/* ------------------------------------------------------- 本页目录 ---- */

.toc { list-style: none; margin: 0; padding: 0; }
.toc li + li { border-top: 1px dashed var(--edge-soft); }
.toc a {
  display: block;
  position: relative;
  padding: 8px 8px 8px 26px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* 条目开头那片小叶子（纯 CSS 画的，不是字） */
.toc a::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50% 0 50% 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--leaf));
  transform: rotate(45deg);
}
.toc a:hover {
  background: var(--glass-2);
  color: var(--accent);
  text-decoration: none;
}

/* ------------------------------------------------------------- 正文 ---- */

.panel { padding: 18px 20px 20px; }

.hero {
  padding: 26px 28px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), var(--glass) 62%);
}
.page-title {
  margin: 0;
  font-size: 28px;
  line-height: 1.36;
  letter-spacing: -.015em;
  color: var(--ink);
}
.hero > .lead, .hero > .tags { margin-top: 16px; }

.lead {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink-2);
  padding-left: 14px;
  border-left: 3px solid var(--accent-2);
}

.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--tint);
  border: 1px solid rgba(46,168,124,.22);
  color: var(--accent);
}

/* 每一块 = 一张卡（用户定的硬规矩：区块要分得开，不许合并成一坨） */
.blocks { display: flex; flex-direction: column; gap: 16px; }

.blocks section.blk {
  position: relative;
  padding: 24px 28px 20px;
  scroll-margin-top: 24px;
  transition: border-color .2s, background .2s;
}
.blocks section.blk:hover {
  border-color: rgba(46,168,124,.34);
  background: var(--glass-2);
}

/* 每块左肩一条渐隐的竖线 —— 用线区分"一块"，不写"主列一块"这种字 */
.blocks section.blk::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-2), transparent);
}
.blocks section.blk h3 {
  margin: 0 0 .55em;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
.blocks section.blk p { margin: 0 0 .9em; font-size: 15.5px; line-height: 1.88; }
.blocks section.blk > p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- 底端 ---- */

.cell-foot { padding: 16px 20px; }
.cell-foot .zone { margin-bottom: 8px; }
.bot-info { margin: 0; font-size: 12px; color: var(--ink-3); }
.bot-info a { color: var(--ink-3); }

/* ------------------------------------------------------------- 窄屏 ---- */

@media (max-width: 980px) {
  .band, .layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px;
    gap: 14px;
  }
  /* 单列时先给标题/导航，再正文，再左右栏 */
  .cell-brand  { order: 0; }
  .cell-head   { order: 1; }
  .col-main    { order: 2; }
  .col-left    { order: 3; }
  .col-right   { order: 4; }
  .cell-figure { order: 5; }
  .cell-foot   { order: 6; }
  .mark-cell   { display: none; }
  .cell-figure .figure { max-width: 132px; }
  .page-title  { font-size: 23px; }
  .hero { padding: 20px 20px 18px; }
  .blocks section.blk { padding: 18px 18px 10px; }
}

/* ------------------------------------------------------------- 深色 ---- */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-1:      #071512;
    --bg-2:      #0a1d18;
    --ink:       #e7f5ef;
    --ink-2:     #a9cbbc;
    --ink-3:     #7ba294;
    --accent:    #6fe0b0;
    --accent-2:  #9ce7c4;
    --leaf:      #54c79b;

    --figure-fill: rgba(255,255,255,.94);
    --figure-ink:  #0d3b2c;
    --figure-ring: rgba(255,255,255,.16);
    --blush:       rgba(255,140,165,.34);

    --glass:     rgba(255,255,255,.055);
    --glass-2:   rgba(255,255,255,.09);
    --edge:      rgba(255,255,255,.10);
    --edge-soft: rgba(255,255,255,.09);
    --tint:      rgba(111,224,176,.14);
    --glass-in:  inset 0 1px 0 rgba(255,255,255,.08);
    --shadow:    0 16px 36px rgba(0,0,0,.34);
    --shadow-sm: 0 8px 20px rgba(0,0,0,.26);
    --empty-bg:  rgba(255,255,255,.03);
    --solid:     #0d1f19;
  }
  .bg {
    background:
      radial-gradient(880px 540px at 5% -8%,   rgba(38,120,92,.55), transparent 62%),
      radial-gradient(780px 500px at 100% 0%,  rgba(30,104,84,.48), transparent 60%),
      radial-gradient(720px 620px at 48% 108%, rgba(24,92,72,.42), transparent 64%),
      linear-gradient(180deg, var(--bg-1), var(--bg-2) 60%, var(--bg-1));
  }
  .hero { background: linear-gradient(180deg, rgba(111,224,176,.10), var(--glass) 62%); }
  .leaf-vein { stroke: rgba(7,21,18,.55); }
  .fig-halo { opacity: .22; }
}

/* ------------------------ 不支持 backdrop-filter 的浏览器 ------------------------
   退成不透明底，别让文字飘在光晕上看不清。 */
@supports not (backdrop-filter: blur(4px)) {
  .bg { display: none; }
  body { background: var(--solid); }
  .cell, .panel, .col-left:not(:empty), .col-right:not(:empty),
  .blocks section.blk {
    background: var(--solid);
    box-shadow: 0 4px 14px rgba(16,74,54,.08);
  }
  .zone > .blk { background: none; box-shadow: none; }
}

/* --------------------------- 空列也要看得出来 ---------------------------
   有些页原站是**纯表格布局**（零 id/class），切分认不出左右栏 —— 内容全归
   中间列（"宁可少认、不丢内容"的安全设计），左右两列就会是空的。
   给空列一条极淡的边界，五区在视觉上才成立。
   ★ 纯 CSS 装饰，**不往页面里加任何字**。
   ★ :empty 要求列里真的什么都没有 —— 所以模板里 <aside> 后面直接跟
     ?left 那条条件块，中间不留换行。 */
.col-left:empty, .col-right:empty {
  min-height: 120px;
  border: 1px dashed var(--edge-soft);
  border-radius: var(--radius);
  background: var(--empty-bg);
}