/* ================================================================
   NOUS Review — GROTESQUE CABINET EDITION  (NOUS_Review-semantic.css)
   ----------------------------------------------------------------
   仅用于 Semantic-Stability-and-Floating-Meaning.html。
   怪诞美学 / 奇物柜风：米色卡其底、老画撕裂片、抠图贴纸、
   胶带、手写标签、橡皮章、半调网点。
   抠图四件 = 论点线：FORM → PRACTICE → USE，Babel = DRIFT。
   依赖 NOUS_Review-shared.css / NOUS_Review-essay.css，在其后引入。
   ================================================================ */

:root{
  --sg-sand:#E6DCC4;        /* 米色底 */
  --sg-sand-2:#D8CBA8;      /* 卡其 */
  --sg-sand-3:#A9976F;      /* 深卡其（线/点缀） */
  --sg-ink:#241A0E;         /* 深褐墨 */
  --sg-ink-soft:#4A3A22;
  --sg-paper:#FBF6E9;       /* 米纸（正文） */
  --sg-paper-2:#FCF9EF;
  --sg-red:#A93B1E;         /* 氧化红印章 */
  --sg-green:#5E6B33;       /* 毒橄榄绿 */
  --sg-plum:#5A4257;        /* 淤紫 */
  --sg-line:rgba(36,26,14,.22);
  --sg-hand:"Marker Felt","Chalkboard SE","Segoe Print","Comic Sans MS",cursive;
  --sg-type:"Courier New",Courier,monospace;
}

body{
  background-color:var(--sg-sand);
  background-image:
    radial-gradient(ellipse 780px 540px at 5% 1%, rgba(36,26,14,.13), transparent 62%),
    radial-gradient(ellipse 700px 500px at 97% 9%, rgba(90,66,87,.10), transparent 60%),
    radial-gradient(ellipse 920px 620px at 50% 100%, rgba(166,59,30,.10), transparent 64%),
    radial-gradient(ellipse 460px 340px at 76% 44%, rgba(255,252,242,.30), transparent 62%),
    radial-gradient(rgba(36,26,14,.09) 1px, transparent 1.4px);
  background-size:auto,auto,auto,auto,20px 20px;
  color:var(--sg-ink);
}
::selection{ background:#E9DDBB; color:var(--sg-ink); }

/* ============ 顶部 ============ */
.read-progress{ background:repeating-linear-gradient(90deg,var(--sg-red) 0 14px,var(--sg-ink) 14px 28px); }
.read-progress::after{ background:var(--sg-red); }
.top-strip{
  background:repeating-linear-gradient(90deg,
    var(--sg-ink) 0 140px, var(--sg-red) 140px 280px, var(--sg-green) 280px 420px);
}
.masthead{ background:rgba(251,246,233,.97); }
.masthead .nav-link:hover, .masthead .nav-link.active{
  background:#E7DCC0; border-color:#C3B491; color:var(--sg-ink);
}

/* —— journal band：标本馆标签 —— */
.es-band{ border-bottom:2px solid var(--sg-ink); color:var(--sg-ink); }
.es-band .tick{ color:var(--sg-red); }
.es-band .dim{ color:rgba(36,26,14,.62); }

/* ============ HERO ============ */
.es-hero{ padding-top:30px; }

.es-crumbs{ font-family:var(--sg-type); font-size:11.5px; letter-spacing:.06em; }
.es-crumbs a{ color:var(--sg-green); }
.es-crumbs a:hover{ border-bottom-color:var(--sg-green); }

.es-chipline{ gap:10px; }
.es-chip{
  border:none !important; border-radius:2px;
  font-family:var(--sg-type); font-weight:700; letter-spacing:.1em;
  box-shadow:2px 3px 0 rgba(36,26,14,.25);
}
.es-chip.track{ background:var(--sg-red); color:#FBF0D9; transform:rotate(-2deg); }
.es-chip.issue{ background:var(--sg-ink); color:#F2E5C4; transform:rotate(1.4deg); }
.es-chip.subject{ background:var(--sg-green); color:#F1F2E2; transform:rotate(-1deg); }

/* —— 标题：油墨大字 + 姜黄错影 —— */
.es-fleuron{ margin:6px 0 10px; }
.es-fleuron .rosette{ color:var(--sg-red); }
.es-title{
  color:var(--sg-ink);
  text-shadow:3px 3px 0 rgba(255,253,246,.85), 6px 6px 0 rgba(166,59,30,.18);
}

.es-byline{ border-top:2px dashed var(--sg-line); }
.byline-mono{
  background:var(--sg-ink); color:#F2E5C4;
  box-shadow:3px 3px 0 rgba(166,59,30,.4); transform:rotate(-3deg);
}
.byline-who .who{ color:var(--sg-ink); }
.byline-who .who-sub{ color:rgba(36,26,14,.6); }

.hero-side .es-badge{
  background:var(--sg-red); color:#FBF0D9;
  box-shadow:2px 3px 0 rgba(36,26,14,.3); transform:rotate(94deg);
}
.hero-side .vbig{ color:var(--sg-ink); }
.hero-side .vsmall{ color:rgba(36,26,14,.6); }
.hero-side .vrule{ background:linear-gradient(180deg,var(--sg-line),transparent); }

/* ============ HERO 拼贴舞台 ============ */
.sg-stage{
  position:relative;
  height:clamp(300px,34vw,420px);
  margin:6px -8px 34px;
}
.sg-stage img, .sg-stage svg{ user-select:none; }

/* —— 抠图贴纸 —— */
.sg-cut{ position:absolute; }
.sg-cut img, .sg-cut{ width:auto; }
img.sg-cut{
  height:auto; display:block;
  filter:drop-shadow(5px 8px 0 rgba(36,26,14,.28));
}
.cu-tower{ right:22%; top:-4%; width:23%; transform:rotate(3.5deg); z-index:1; opacity:.96; }
.cu-soc{ left:29%; bottom:6%; width:24%; transform:rotate(1.6deg); z-index:3; }
.cu-geo{ right:1.5%; bottom:4%; width:16.5%; transform:rotate(-3deg); z-index:3; }

/* —— 撕裂画片（图书管理员） —— */
.sg-scrap{ position:absolute; left:1.5%; bottom:5%; width:22%; z-index:4; transform:rotate(-2.6deg); }
.sg-scrap img{
  width:100%; height:auto; display:block;
  border:7px solid #FBF4E0; outline:1px solid var(--sg-line);
  background:#FBF4E0; box-shadow:5px 7px 0 rgba(36,26,14,.26);
  clip-path:polygon(1% 2%, 30% 0, 55% 1.6%, 82% .4%, 100% 2.4%, 99% 30%, 100% 58%, 98.4% 82%, 99.4% 97%, 72% 100%, 45% 98.6%, 20% 100%, 1% 98.4%, 2.2% 70%, 0 44%, 1.4% 22%);
}

/* —— 胶带 —— */
.sg-scrap::before, .cu-tape::after{ content:""; }
.sg-scrap::before{
  position:absolute; left:-14px; top:-10px; width:58px; height:19px;
  background:rgba(242,222,158,.62); box-shadow:0 1px 2px rgba(36,26,14,.18);
  border-left:1px dashed rgba(36,26,14,.16); border-right:1px dashed rgba(36,26,14,.16);
  transform:rotate(-36deg); z-index:2;
}
.sg-scrap::after{
  content:""; position:absolute; right:-12px; top:-9px; width:52px; height:18px;
  background:rgba(242,222,158,.62); box-shadow:0 1px 2px rgba(36,26,14,.18);
  border-left:1px dashed rgba(36,26,14,.16); border-right:1px dashed rgba(36,26,14,.16);
  transform:rotate(32deg); z-index:2;
}

/* —— 手写标签 —— */
.sg-tag{
  position:absolute; z-index:6;
  font-family:var(--sg-hand); font-size:clamp(12px,1.6vw,17px);
  color:var(--sg-ink-soft); line-height:1.1; text-align:center;
  max-width:22%;
}
.sg-tag b{
  display:block; font-family:var(--sg-type); font-weight:700;
  letter-spacing:.16em; font-size:.78em; color:var(--sg-red); text-transform:uppercase;
}
.sg-tag i{ font-style:normal; border-bottom:2px solid var(--sg-sand-3); }
.tag-lib{ left:3.5%; bottom:-4%; transform:rotate(-2deg); }
.tag-soc{ left:33%; bottom:-3.5%; transform:rotate(1.2deg); }
.tag-tower{ right:6%; top:0; transform:rotate(-3deg); }
.tag-geo{ right:2.5%; bottom:-4%; transform:rotate(2deg); }

/* —— 手绘箭头：FORM → PRACTICE → USE —— */
.sg-arrow{ position:absolute; z-index:6; opacity:.85; color:var(--sg-red); }
.ar-1{ left:25.5%; bottom:26%; width:5.5%; transform:rotate(-8deg); }
.ar-2{ right:19%; bottom:30%; width:5.5%; transform:scaleY(-1) rotate(6deg); }

/* —— 怪诞小零件 —— */
.sg-eye{ position:absolute; left:23.5%; top:2%; width:46px; z-index:7; transform:rotate(-8deg); }
.sg-ht{ position:absolute; width:120px; opacity:.4; z-index:0; }
.ht-a{ left:44%; bottom:2%; }
.sg-q{
  position:absolute; left:55%; top:8%; z-index:7;
  font-family:var(--sg-hand); font-size:clamp(22px,3vw,36px); color:var(--sg-plum);
  transform:rotate(-14deg);
}
.sg-moth{
  position:absolute; left:52.5%; bottom:10%; width:64px; z-index:7; transform:rotate(10deg); opacity:.9;
}

/* ============ LAYOUT：正文托在米纸上 ============ */
.es-body{
  background:var(--sg-paper);
  border:1px solid rgba(36,26,14,.35);
  box-shadow:8px 10px 0 rgba(36,26,14,.22);
  padding:28px 34px 30px;
  position:relative;
}
.es-body::before{   /* 顶部胶带两枚 */
  content:""; position:absolute; left:36px; top:-13px; width:96px; height:26px;
  background:rgba(242,222,158,.66); transform:rotate(-3deg);
  border-left:1px dashed rgba(36,26,14,.16); border-right:1px dashed rgba(36,26,14,.16);
  box-shadow:0 1px 2px rgba(36,26,14,.16); z-index:2;
}
.es-body::after{
  content:""; position:absolute; right:36px; top:-13px; width:96px; height:26px;
  background:rgba(242,222,158,.66); transform:rotate(2.6deg);
  border-left:1px dashed rgba(36,26,14,.16); border-right:1px dashed rgba(36,26,14,.16);
  box-shadow:0 1px 2px rgba(36,26,14,.16); z-index:2;
}

/* ============ ABSTRACT → 索引卡 ============ */
.es-abstract{
  background:var(--sg-paper-2);
  border:1px solid var(--sg-line);
  border-top:none;
  box-shadow:6px 7px 0 rgba(36,26,14,.16);
  background-image:repeating-linear-gradient(0deg, transparent 0 26px, rgba(94,107,51,.20) 26px 27px);
  transform:rotate(-.5deg);
}
.es-abstract::before{
  border:2px solid rgba(169,59,30,.4);
  border-radius:50% 46% 52% 48%/48% 52% 46% 54%;
}
.es-abstract .lbl{ font-family:var(--sg-type); letter-spacing:.22em; color:var(--sg-red); }
.es-abstract p{ color:#3B2F1C; }
.es-abstract p.kw{ color:rgba(36,26,14,.62); }
.es-abstract p.kw b{ color:var(--sg-red); }
.es-abstract::after{
  content:""; position:absolute; top:-14px; left:22px; width:20px; height:40px;
  border:3px solid #8E9A7B; border-radius:10px 10px 4px 4px;
  border-bottom:none; transform:rotate(-6deg);
  box-shadow:1px 1px 0 rgba(36,26,14,.2);
}

/* ============ 章节标题 → 橡皮章 ============ */
.es-sec .medal{
  background:transparent; color:var(--sg-red);
  border:2.5px solid var(--sg-red); border-radius:4px;
  box-shadow:none; transform:rotate(-4deg);
  font-family:var(--sg-type); letter-spacing:.05em; opacity:.9;
}
.es-sec .sec-title{ color:var(--sg-ink); border-bottom:2px dashed var(--sg-line); }
.es-body .dropcap::first-letter{ color:var(--sg-red); }
.es-body p{ color:#332814; }
.es-body a{ color:var(--sg-green); border-bottom-color:var(--sg-green); }
.es-body sup.cit a{ color:var(--sg-red); }

/* ============ 正文配图 → 胶带老画 ============ */
.es-figure .slot{ position:relative; }
.es-figure{ transform:rotate(-.7deg); }
.es-figure:nth-of-type(even){ transform:rotate(.8deg); }
.es-figure .slot:has(img){
  border:10px solid #FBF4E0;
  outline:1px solid var(--sg-line);
  background:#FBF4E0;
  box-shadow:5px 7px 0 rgba(36,26,14,.2);
}
.es-figure .slot::before{
  content:""; position:absolute; left:50%; top:-12px; width:92px; height:24px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(242,222,158,.62);
  border-left:1px dashed rgba(36,26,14,.14); border-right:1px dashed rgba(36,26,14,.14);
  box-shadow:0 1px 2px rgba(36,26,14,.14); z-index:2;
}
.es-figure figcaption .no{
  font-family:var(--sg-type); font-weight:700; color:var(--sg-red);
  border:2px solid var(--sg-red); border-radius:3px; padding:1px 7px;
  transform:rotate(-3deg); display:inline-block; letter-spacing:.1em;
}
.es-figure figcaption .txt{ font-family:var(--sg-type); font-size:12px; color:var(--sg-ink-soft); }

/* ============ NOTES + BIBLIOGRAPHY → 打字机纸 ============ */
.es-notes h3, .es-bib h3{ font-family:var(--sg-type); letter-spacing:.2em; color:var(--sg-ink); }
.es-notes h3::after, .es-bib h3::after{
  background:repeating-linear-gradient(90deg,var(--sg-ink) 0 6px, transparent 6px 12px); height:2px;
}
.es-notes li .nn{ color:var(--sg-red); font-family:var(--sg-type); }
.es-notes li .back{ color:var(--sg-green); }
.es-notes li:target{ background:#E9DDBB; box-shadow:0 0 0 6px #E9DDBB; }
.es-bib li::before{ background:var(--sg-sand-3); }
.es-bib li, .es-notes li{ font-family:var(--sg-type); font-size:13px; color:#3B2F1C; }

/* ============ 侧栏 → 标本卡 ============ */
.rail-card{
  background:var(--sg-paper-2);
  border:1px solid var(--sg-line);
  border-left:6px solid var(--sg-red);
  box-shadow:4px 5px 0 rgba(36,26,14,.18);
  transform:rotate(.5deg);
}
.rail-card .lbl{ font-family:var(--sg-type); letter-spacing:.2em; color:var(--sg-red); }
.rail-row{ border-bottom:1px dashed var(--sg-line); }
.rail-row b{ color:var(--sg-ink); }
.ref-avatar{ background:var(--sg-green); color:#F1F2E2; }
.ref-avatar.alt{ background:var(--sg-red); color:#FBF0D9; }
.ref-body b{ color:var(--sg-ink); font-family:var(--sg-type); }

/* ============ 翻页卡 ============ */
.footnav-card{
  background:var(--sg-paper-2);
  border:1px solid var(--sg-ink);
  box-shadow:5px 6px 0 rgba(36,26,14,.22);
}
.footnav-card .dir{ font-family:var(--sg-type); letter-spacing:.14em; }
.footnav-card .t{ color:var(--sg-red); }
.footnav-card:hover{ box-shadow:7px 9px 0 rgba(36,26,14,.26); }

/* ============ 结尾 ============ */
.es-end .rosette{ color:var(--sg-red); }
.es-end .el{ background:var(--sg-line) !important; }
.es-endmark{ color:var(--sg-ink-soft); }

/* ============ 响应式 ============ */
@media(max-width:880px){
  .sg-stage{ height:clamp(300px,58vw,380px); margin-top:18px; }
  .cu-tower{ width:30%; right:4%; top:-2%; }
  .cu-soc{ width:34%; left:30%; }
  .cu-geo{ width:24%; }
  .sg-scrap{ width:30%; }
  .sg-scrap::before, .sg-scrap::after{ width:36px; height:13px; }
  .sg-eye{ width:32px; left:27%; }
  .sg-q{ font-size:20px; left:60%; }
  .sg-moth{ width:44px; }
  .sg-tag{ font-size:11px; max-width:26%; }
  .ar-1{ left:26%; } .ar-2{ right:22%; }
  .tag-tower{ right:6%; top:-6%; }
  .es-body{ padding:20px 18px 24px; }
  .es-body::before, .es-body::after{ width:60px; }
  .es-abstract{ transform:none; }
}