/* 共用站点样式：改编自 Template/note-page-wireframe.html 的内联 <style>。
   两种渲染原型（dynamic / static）都引用这份 CSS，保证对比时排版一致。 */

:root{
  --paper:#F6F3EC;
  --paper-line: rgba(31,36,48,0.06);
  --ink:#23262F;
  --ink-soft:#5B5F6B;
  --card:#FFFFFF;
  --accent:#B3413C;
  --accent-soft:#F1DEDC;
  --accent-2:#8A2E2A;
  --warn:#C1443B;
  --warn-soft:#F5DEDC;
  --note-c:#3C6E82;
  --note-soft:#DCEBEF;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(var(--paper-line) 1px, transparent 1px) 0 0/24px 24px,
    var(--paper);
  color:var(--ink);
  font-family:'Inter','Noto Sans SC',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

h1,h2,h3{ font-family:'Fraunces','Noto Serif SC',serif; margin:0; }

.page-wrap{ display:flex; max-width:1000px; margin:0 auto; min-height:100vh; }
.spine{
  width:52px; flex-shrink:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 6px),
    var(--accent);
  position:relative;
}
.spine span{
  position:absolute; top:28px; left:50%; transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-family:'Noto Serif SC','Fraunces',serif;
  font-weight:700; font-size:15px; letter-spacing:2px;
  color:rgba(255,255,255,0.92);
}

main{ flex:1; min-width:0; padding:40px 32px 80px; }

.proto-banner{
  max-width:640px; margin:0 0 20px;
  font-size:12.5px; font-weight:600; color:var(--accent-2);
  background:var(--accent-soft); display:inline-block;
  padding:5px 12px; border-radius:999px;
}

.crumb{ font-size:13px; color:var(--ink-soft); margin-bottom:18px; }
.crumb b{ color:var(--accent-2); font-weight:600; }

.note-title{
  font-size:34px; font-weight:700; line-height:1.3; margin:0 0 6px;
}
.underline{ display:block; margin:2px 0 16px; }
.underline path{ stroke:var(--accent); }

.meta{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  font-size:13px; color:var(--ink-soft); margin-bottom:28px;
}
.tag{
  background:var(--accent-soft); color:var(--accent-2);
  padding:3px 10px; border-radius:999px; font-weight:600; font-size:12px;
}
.dot{ opacity:0.5; }

.note-body{ max-width:640px; }
.note-body p{ font-size:16px; line-height:1.85; color:var(--ink); margin:0 0 20px; }
.note-body h1{ font-size:28px; margin:0 0 18px; }
.note-body h2{
  font-family:'Noto Serif SC',serif; font-size:19px; font-weight:700;
  margin:32px 0 14px; display:flex; align-items:center; gap:8px;
}
.note-body h2::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent); display:inline-block;
}
.note-body h3{ font-size:16px; font-weight:700; margin:26px 0 10px; color:var(--accent-2); }
.note-body hr{ border:none; border-top:1px solid var(--paper-line); margin:30px 0; }

.note-body ul, .note-body ol{ padding-left:22px; margin:0 0 20px; font-size:15.5px; line-height:1.8; }
.note-body li{ margin-bottom:6px; }

.note-body table.vocab{
  width:100%; border-collapse:collapse; font-size:14.5px; margin-bottom:22px;
}
.note-body table.vocab th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--ink-soft); padding:6px 10px; border-bottom:1.5px solid var(--paper-line);
}
.note-body table.vocab td{
  padding:10px; border-bottom:1px solid var(--paper-line); vertical-align:top;
}
.note-body table.vocab td.word{
  font-family:'IBM Plex Mono',monospace; font-weight:500; color:var(--accent-2); white-space:nowrap;
}

.note-body .callout{
  background:var(--card); border-radius:6px; padding:14px 18px;
  margin:0 0 20px; font-size:15px; line-height:1.75;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.note-body .callout-tip{ border-left:4px solid var(--accent); }
.note-body .callout-warn{ border-left:4px solid var(--warn); background:var(--warn-soft); }
.note-body .callout-note{ border-left:4px solid var(--note-c); background:var(--note-soft); }

.nav-footer{
  max-width:640px; display:flex; justify-content:space-between; gap:16px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--paper-line);
}
.nav-footer a{ text-decoration:none; color:var(--ink); font-size:13.5px; max-width:45%; }
.nav-footer .dir{ display:block; font-size:11px; color:var(--ink-soft); margin-bottom:3px; }
.nav-footer .next{ text-align:right; }
.nav-footer .disabled{ color:#C9C4B6; pointer-events:none; }

@media (max-width:560px){
  main{ padding:28px 20px 60px; }
  .note-title{ font-size:27px; }
  .spine{ width:36px; }
  .spine span{ font-size:12px; }
}

/* ---- 首页：topbar + 主题卡片网格 ---- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  padding:14px 24px; background:rgba(246,243,236,0.92);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--paper-line);
}
.topbar .brand{ font-family:'Fraunces',serif; font-weight:700; font-size:18px; text-decoration:none; color:var(--ink); }

.home-hero{ padding:56px 24px 8px; text-align:center; }
.home-hero h1{ font-size:32px; }
.home-hero p{ color:var(--ink-soft); font-size:14px; margin-top:8px; }

.card-grid{
  max-width:880px; margin:32px auto; padding:0 24px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
}
.topic-card{
  background:var(--card); border-radius:12px; padding:22px 20px;
  border-top:5px solid var(--accent); text-decoration:none; display:block; color:inherit;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.topic-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
.topic-card .glyph{
  font-family:'Fraunces',serif; font-size:26px; font-weight:700;
  color:var(--accent-2); background:var(--accent-soft);
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.topic-card h3{ font-size:18px; margin-bottom:6px; }
.topic-card .meta{ font-size:12.5px; color:var(--ink-soft); margin-bottom:0; }
.topic-card.ghost{
  border-top:5px dashed #D8D4C8; display:flex; align-items:center;
  justify-content:center; color:var(--ink-soft); font-size:14px; cursor:default;
}
.topic-card.ghost:hover{ transform:none; box-shadow:0 1px 3px rgba(0,0,0,0.05); }