/* ================================================================
   NOUS Review — CINEMA COLLAGE EDITION  (NOUS_Review-cinema.css)
   ----------------------------------------------------------------
   仅用于 Cinema-as-the-Third-Interpreter.html。
   复古拼贴 / zine 风：胶带、剪报、半调网点、橡皮章、手绘涂鸦。
   三组人物剪纸 = 三部电影的递进：
     GASLIGHT(voice) → THE PHILADELPHIA STORY(dialogue) → LITTLE WOMEN(possibility)
   依赖 NOUS_Review-shared.css / NOUS_Review-essay.css，在其后引入。
   ================================================================ */

:root{
  --cl-paper:#F4ECD8;       /* 做旧米纸 */
  --cl-paper-2:#EFE4C8;
  --cl-ink:#2B2620;         /* 油墨黑 */
  --cl-ink-soft:#57503F;
  --cl-muted:#8A8168;
  --cl-red:#C34A2C;         /* 印章朱红 */
  --cl-mustard:#D9A62E;
  --cl-teal:#5F8B7E;        /* 复古褪色青 */
  --cl-blue:#7E94A6;
  --cl-kraft:#D9C29A;       /* 牛皮纸 */
  --cl-tape:rgba(233,215,160,.55);
  --cl-line:#D8CBA8;
  --cl-hand:"Marker Felt","Chalkboard SE","Segoe Print","Comic Sans MS",cursive;
  --cl-type:"Courier New",Courier,monospace;
}

body{
  background-color:var(--cl-paper);
  background-image:
    radial-gradient(ellipse 700px 460px at 8% 4%, rgba(95,139,126,.10), transparent 60%),
    radial-gradient(ellipse 620px 420px at 94% 14%, rgba(195,74,44,.07), transparent 60%),
    radial-gradient(ellipse 800px 520px at 50% 98%, rgba(217,166,46,.09), transparent 62%),
    radial-gradient(rgba(43,38,32,.055) 1px, transparent 1.3px);
  background-size:auto,auto,auto,22px 22px;
  color:var(--cl-ink);
}
::selection{ background:#F2D8A0; color:var(--cl-ink); }

/* ============ 顶部细节 ============ */
.read-progress{ background:repeating-linear-gradient(90deg,var(--cl-red) 0 14px,var(--cl-mustard) 14px 28px); }
.read-progress::after{ background:var(--cl-red); }
.top-strip{
  background:repeating-linear-gradient(90deg,
    var(--cl-red) 0 120px, var(--cl-mustard) 120px 240px, var(--cl-teal) 240px 360px);
}
.masthead{ background:rgba(244,236,216,.97); }
.masthead .nav-link:hover, .masthead .nav-link.active{
  background:#F0DFB4; border-color:#CDBE93; color:var(--cl-ink);
}

/* —— journal band：票根齿孔 —— */
.es-band{ border-bottom:2px dashed var(--cl-ink); }
.es-band .tick{ color:var(--cl-red); }

/* ============ HERO — 拼贴舞台 ============ */
.es-hero{ padding-top:26px; }

.collage-stage{
  position:relative;
  height:clamp(300px,36vw,430px);
  margin:0 -8px 54px;
  overflow:visible;
}
.collage-stage img, .collage-stage svg{ user-select:none; }

/* —— 底层碎纸 —— */
.cl-scrap{ position:absolute; display:block; }
.cl-scrap-kraft{
  left:3%; top:14%; width:42%; height:66%;
  background:
    repeating-linear-gradient(0deg, rgba(43,38,32,.05) 0 1px, transparent 1px 9px),
    var(--cl-kraft);
  transform:rotate(-3.5deg);
  box-shadow:4px 5px 0 rgba(43,38,32,.13);
  clip-path:polygon(0 6%, 4% 0, 96% 2%, 100% 9%, 98% 94%, 94% 100%, 5% 97%, 0 92%);
  opacity:.9;
}
.cl-scrap-graph{
  right:5%; top:8%; width:38%; height:60%;
  background:
    repeating-linear-gradient(0deg, rgba(95,139,126,.28) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(90deg, rgba(95,139,126,.28) 0 1px, transparent 1px 11px),
    #FBF6E6;
  transform:rotate(2.6deg);
  box-shadow:4px 5px 0 rgba(43,38,32,.12);
  clip-path:polygon(2% 0, 98% 4%, 100% 96%, 4% 100%, 0 60%);
  opacity:.95;
}

/* —— 胶片齿孔条 —— */
.cl-filmstrip{
  position:absolute; left:-10px; top:-6px; width:104%; height:34px;
  opacity:.9;
}

/* —— 半调网点圆 —— */
.cl-halftone{ position:absolute; }
.ht-1{ left:1%; bottom:4%; width:150px; opacity:.5; }
.ht-2{ right:1%; top:26%; width:120px; opacity:.45; }
.ht-3{ left:42%; top:2%; width:90px; opacity:.4; }

/* —— 人物剪纸（span 壳承载胶带；滤镜挂在 img 上） —— */
.cl-photo{ position:absolute; }
.cl-photo img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(4px 7px 0 rgba(43,38,32,.18));
}
.ph-gaslight{ left:4%; bottom:6%; width:31%; transform:rotate(-3deg); z-index:3; }
.ph-philadelphia{ left:36%; bottom:2%; width:21%; transform:rotate(1.6deg); z-index:4; }
.ph-littlewomen{ right:4%; bottom:5%; width:34%; transform:rotate(2.8deg); z-index:3; }
.ph-ghost{
  right:12%; top:1%; width:15%; transform:rotate(7deg); z-index:5;
}
.ph-ghost img{ filter:drop-shadow(3px 5px 0 rgba(43,38,32,.22)) saturate(.85); }
/* 胶带贴角 */
.cl-photo::before, .cl-photo::after{
  content:""; position:absolute; width:64px; height:20px;
  background:var(--cl-tape); box-shadow:0 1px 2px rgba(43,38,32,.12);
  border-left:1px dashed rgba(43,38,32,.14); border-right:1px dashed rgba(43,38,32,.14);
}
.cl-photo::before{ left:-18px; top:-8px; transform:rotate(-38deg); }
.cl-photo::after{ right:-18px; top:-8px; transform:rotate(34deg); }
.ph-ghost::before{ left:-10px; top:-4px; width:44px; }
.ph-ghost::after{ right:-10px; top:-4px; width:44px; }

/* —— 手写标签 + 箭头（voice → dialogue → possibility） —— */
.cl-label{
  position:absolute; z-index:6;
  font-family:var(--cl-hand); font-size:clamp(11px,1.5vw,15px);
  color:var(--cl-ink-soft); text-align:center; line-height:1.15;
  transform:rotate(-2deg);
  max-width:26%;
}
.cl-label b{ display:block; font-family:var(--cl-type); font-weight:700; letter-spacing:.14em; font-size:.82em; color:var(--cl-red); text-transform:uppercase; }
.lb-gaslight{ left:8%; bottom:-2%; }
.lb-philadelphia{ left:37%; bottom:-4%; transform:rotate(1.4deg); }
.lb-littlewomen{ right:6%; bottom:-3%; transform:rotate(-1.6deg); }
.cl-label i{ font-style:normal; border-bottom:2px solid var(--cl-mustard); }

.cl-arrow{ position:absolute; z-index:6; opacity:.85; }
.ar-1{ left:29%; bottom:16%; width:8%; }
.ar-2{ left:60%; bottom:14%; width:8%; transform:scaleY(-1) rotate(6deg); }

/* —— 星形贴纸 —— */
.cl-sticker{
  position:absolute; left:50%; top:-4%; width:150px; z-index:7;
  transform:translateX(-58%) rotate(-7deg);
}
.cl-sticker svg{ width:100%; height:auto; display:block; filter:drop-shadow(3px 4px 0 rgba(43,38,32,.16)); }
.cl-sticker .st-txt{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  font-family:var(--cl-type); font-weight:700; color:#FFF8E6;
  font-size:11px; letter-spacing:.08em; line-height:1.25; text-transform:uppercase;
}
.cl-sticker .st-txt b{ font-size:13px; letter-spacing:.18em; }

/* —— 无厘头小零件 —— */
.cl-eye{ position:absolute; left:24%; top:4%; width:52px; z-index:7; transform:rotate(-10deg); }
.cl-bolt{ position:absolute; right:29%; top:2%; width:34px; z-index:7; transform:rotate(14deg); }
.cl-qmark{
  position:absolute; left:33.5%; top:16%; z-index:7;
  font-family:var(--cl-hand); font-size:clamp(22px,3vw,34px); color:var(--cl-teal);
  transform:rotate(-12deg);
}
.cl-clip{
  position:absolute; right:2.5%; bottom:38%; width:34px; z-index:7; transform:rotate(-8deg);
}

/* ============ 面包屑 / 徽章 → 贴纸 ============ */
.es-crumbs{ font-family:var(--cl-type); font-size:11.5px; letter-spacing:.06em; }
.es-crumbs a{ color:var(--cl-teal); }
.es-crumbs a:hover{ border-bottom-color:var(--cl-teal); }

.es-chipline{ gap:10px; }
.es-chip{
  border:none !important; border-radius:2px;
  font-family:var(--cl-type); font-weight:700; letter-spacing:.1em;
  box-shadow:2px 3px 0 rgba(43,38,32,.16);
}
.es-chip.track{ background:var(--cl-red); color:#FFF6E2; transform:rotate(-2deg); }
.es-chip.issue{ background:var(--cl-mustard); color:#3B3113; transform:rotate(1.6deg); }
.es-chip.subject{ background:var(--cl-teal); color:#F2F6EE; transform:rotate(-1.2deg); }

/* —— 标题：剪报大字 —— */
.es-fleuron{ margin:6px 0 10px; }
.es-fleuron .cl-doodle-line{ width:230px; height:22px; display:block; color:var(--cl-red); }

.es-title{
  color:var(--cl-ink);
  text-shadow:3px 3px 0 rgba(217,166,46,.28);
}
.es-title em{ font-style:italic; }

.es-subnote{
  font-family:var(--cl-hand); color:var(--cl-teal);
  font-size:clamp(14px,1.8vw,18px); margin:10px 0 2px; transform:rotate(-1.4deg);
}
.es-subnote .cir{ border:2px solid var(--cl-teal); border-radius:50% 46% 52% 48%/48% 52% 46% 54%; padding:2px 12px 4px; display:inline-block; }

.es-byline{ border-top:2px dashed var(--cl-line); }
.byline-mono{
  background:var(--cl-red); color:#FFF6E2;
  box-shadow:3px 3px 0 rgba(43,38,32,.22); transform:rotate(-3deg);
}

.hero-side .es-badge{
  background:var(--cl-mustard); color:#3B3113;
  box-shadow:2px 3px 0 rgba(43,38,32,.22); transform:rotate(4deg);
}
.hero-side .vrule{ background:linear-gradient(180deg,var(--cl-line),transparent); }

/* ============ ABSTRACT → 索引卡 ============ */
.es-abstract{
  background:#FBF5E2;
  border:1px solid var(--cl-line);
  border-top:none;
  box-shadow:6px 7px 0 rgba(43,38,32,.12);
  background-image:repeating-linear-gradient(0deg, transparent 0 26px, rgba(95,139,126,.22) 26px 27px);
  transform:rotate(-.5deg);
}
.es-abstract::before{
  border:2px solid rgba(195,74,44,.35);
  border-radius:50% 46% 52% 48%/48% 52% 46% 54%;
}
.es-abstract .lbl{
  font-family:var(--cl-type); letter-spacing:.22em;
  color:var(--cl-red);
}
.es-abstract::after{   /* 回形针 */
  content:""; position:absolute; top:-14px; left:22px; width:20px; height:40px;
  border:3px solid #9AA5A0; border-radius:10px 10px 4px 4px;
  border-bottom:none; transform:rotate(-6deg);
  box-shadow:1px 1px 0 rgba(43,38,32,.15);
}
.corner-sprig{ display:none; }

/* ============ 章节标题 → 橡皮章 ============ */
.es-sec .medal{
  background:transparent; color:var(--cl-red);
  border:2.5px solid var(--cl-red); border-radius:4px;
  box-shadow:none; transform:rotate(-4deg);
  font-family:var(--cl-type); letter-spacing:.05em;
  opacity:.9;
}
.es-sec .sec-title{ border-bottom:2px dashed var(--cl-line); }
.es-sub .sub-title{ color:var(--cl-teal); }
.es-sub::before{ background:var(--cl-mustard); }

.es-body .dropcap::first-letter{ color:var(--cl-red); }

/* ============ 剧照 → 胶带照片 ============ */
.es-figure{ transform:rotate(-.6deg); }
.es-figure:nth-of-type(even){ transform:rotate(.7deg); }
.es-figure .slot:has(img){
  border:10px solid #FFFDF4;
  outline:1px solid var(--cl-line);
  background:#FFFDF4;
  box-shadow:5px 7px 0 rgba(43,38,32,.16);
}
.es-figure .slot::before{
  content:""; position:absolute; left:50%; top:-12px; width:90px; height:24px;
  transform:translateX(-50%) rotate(-2deg);
  background:var(--cl-tape);
  border-left:1px dashed rgba(43,38,32,.14); border-right:1px dashed rgba(43,38,32,.14);
  box-shadow:0 1px 2px rgba(43,38,32,.12); z-index:2;
}
.es-figure figcaption .txt{
  font-family:var(--cl-type); font-size:12px; color:var(--cl-ink-soft);
}
.es-figure figcaption .no{
  font-family:var(--cl-type); font-weight:700; color:var(--cl-red);
  border:2px solid var(--cl-red); border-radius:3px; padding:1px 7px;
  transform:rotate(-3deg); display:inline-block;
}

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

/* ============ 侧栏 → 票根卡 ============ */
.rail-card{
  background:#FBF5E2;
  border:1px solid var(--cl-line);
  border-left:6px solid var(--cl-mustard);
  box-shadow:4px 5px 0 rgba(43,38,32,.12);
  transform:rotate(.5deg);
}
.rail-card .lbl{
  font-family:var(--cl-type); letter-spacing:.2em; color:var(--cl-red);
}
.rail-row{ border-bottom:1px dashed var(--cl-line); }
.ref-avatar{ background:var(--cl-teal); color:#F2F6EE; }
.ref-avatar.alt{ background:var(--cl-red); color:#FFF6E2; }
.ref-body b{ color:var(--cl-ink); font-family:var(--cl-type); }

/* ============ 翻页 → 电影票根 ============ */
.footnav-card{
  background:#FBF5E2;
  border:1px solid var(--cl-ink);
  border-radius:6px;
  box-shadow:5px 6px 0 rgba(43,38,32,.16);
  position:relative;
}
.footnav-card::after{      /* 撕票孔 */
  content:""; position:absolute; top:50%; width:18px; height:18px;
  border-radius:50%; background:var(--cl-paper);
  border:1px solid var(--cl-ink);
  transform:translateY(-50%);
}
.footnav-card.prev::after{ right:-10px; }
.footnav-card.next::after{ left:-10px; }
.footnav-card .dir{ font-family:var(--cl-type); letter-spacing:.14em; }
.footnav-card .t{ color:var(--cl-red); }
.footnav-card:hover{ box-shadow:7px 9px 0 rgba(43,38,32,.2); }

/* ============ THE END — 老电影字幕卡 ============ */
.es-end{ margin-top:46px; }
.es-end .end-card{
  width:150px; height:150px; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle, #33302A 0 58%, #211E19 60%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(43,38,32,.35), inset 0 0 0 4px rgba(244,236,216,.12);
  transform:rotate(-2deg);
  position:relative;
}
.es-end .end-card::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1.5px dashed var(--cl-ink-soft); opacity:.55;
}
.es-end .end-card span{
  font-family:var(--cl-type); font-weight:700; letter-spacing:.26em;
  color:#F4ECD8; font-size:15px; text-transform:uppercase;
}
.es-end .end-sub{
  text-align:center; margin-top:18px;
  font-family:var(--cl-hand); color:var(--cl-ink-soft); font-size:14px;
}
.es-endmark{ display:none; }

/* ============ 响应式 ============ */
@media(max-width:880px){
  .cl-filmstrip{ height:22px; }
  .cl-sticker{ width:104px; left:auto; right:2%; top:-2%; }
  .cl-sticker .st-txt{ font-size:8px; }
  .cl-sticker .st-txt b{ font-size:9.5px; }
  .cl-eye{ width:36px; left:30%; }
  .cl-qmark{ font-size:20px; top:22%; }
  .cl-clip{ display:none; }
  .ph-ghost{ width:20%; right:4%; }
  .cl-photo::before, .cl-photo::after{ width:38px; height:14px; }
  .lb-gaslight{ left:4%; }
  .lb-littlewomen{ right:2%; }
  .collage-stage{ height:clamp(280px,52vw,360px); }
  .es-abstract{ transform:none; }
}