/* ══════════════════════════════════════════
   PROJECT PRESENTIMENT — Shared Stylesheet
   ══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Noto+Serif+SC:wght@400;700&family=Special+Elite&display=swap');

:root {
  --paper-base: #f0ead6;
  --paper-dark: #e6dfc8;
  --paper-darker: #d9d0b5;
  --paper-aged: #f5f0dc;
  --folder-tab: #c8b88a;
  --ink-black: #1a1612;
  --ink-dark: #2a2520;
  --ink-body: #3a352e;
  --ink-light: #6a6258;
  --ink-faint: #8a8278;
  --ink-pencil: #9a9488;
  --stamp-red: #b83030;
  --stamp-red-bg: rgba(184,48,48,0.08);
  --stamp-blue: #2a5090;
  --stamp-blue-bg: rgba(42,80,144,0.06);
  --stamp-green: #2a7040;
  --stamp-green-bg: rgba(42,112,64,0.06);
  --stamp-amber: #8a6a20;
  --stamp-amber-bg: rgba(138,106,32,0.08);
  --border-fold: #c8bea0;
  --border-light: #d8d0b8;
  --shadow-soft: rgba(60,50,30,0.08);
  --shadow-mid: rgba(40,30,15,0.12);
  --font-mono: 'IBM Plex Mono','Courier New',monospace;
  --font-sans: 'IBM Plex Sans',-apple-system,sans-serif;
  --font-stamp: 'Special Elite','Courier New',monospace;
  --font-serif: 'Noto Serif SC',Georgia,serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

body{
  background:#d8d0b8;
  background-image:
    radial-gradient(ellipse at 20% 50%,rgba(180,160,120,0.15)0%,transparent 60%),
    radial-gradient(ellipse at 80% 20%,rgba(160,140,100,0.1)0%,transparent 50%);
  color:var(--ink-body);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.8;
  min-height:100vh;
  -webkit-font-smoothing:auto;
}

body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Reading progress ── */
.reading-progress{
  position:fixed;top:0;left:0;height:2px;
  background:var(--stamp-red);z-index:10000;
  transition:width 0.1s linear;opacity:0.6;
}

/* ── Container ── */
.container{max-width:960px;margin:0 auto;padding:0 20px}
.container-wide{max-width:1100px;margin:0 auto;padding:0 20px}

/* ── Breadcrumb ── */
.breadcrumb{
  position:sticky;top:2px;z-index:50;
  font-family:var(--font-mono);font-size:11px;
  color:var(--ink-faint);letter-spacing:0.5px;
  padding:12px 16px;
  margin:0 -16px 12px;
  background:rgba(240,234,214,0.94);
  border:1px solid rgba(200,190,160,0.65);
  border-top:none;
  box-shadow:0 6px 18px rgba(60,50,30,0.08);
  backdrop-filter:blur(10px);
}
.breadcrumb a{
  color:var(--stamp-blue);text-decoration:none;
  border-bottom:1px solid rgba(42,80,144,0.2);
}
.breadcrumb a:hover{border-color:var(--stamp-blue)}
.breadcrumb .sep{margin:0 6px;color:var(--ink-pencil)}

/* ── Paper card ── */
.paper{
  background:var(--paper-base);
  background-image:linear-gradient(180deg,rgba(255,255,255,0.3)0%,transparent 30%);
  border:1px solid var(--border-fold);
  box-shadow:0 1px 3px var(--shadow-soft),0 8px 24px var(--shadow-soft),
             inset 0 1px 0 rgba(255,255,255,0.5);
  position:relative;
}
.paper::before{
  content:'';position:absolute;
  left:28px;top:50px;bottom:50px;width:12px;
  background:
    radial-gradient(circle at 6px 0,transparent 4px,var(--paper-darker) 4px,var(--paper-darker) 5px,transparent 5px),
    radial-gradient(circle at 6px 50px,transparent 4px,var(--paper-darker) 4px,var(--paper-darker) 5px,transparent 5px),
    radial-gradient(circle at 6px 100px,transparent 4px,var(--paper-darker) 4px,var(--paper-darker) 5px,transparent 5px),
    radial-gradient(circle at 6px 150px,transparent 4px,var(--paper-darker) 4px,var(--paper-darker) 5px,transparent 5px),
    radial-gradient(circle at 6px 200px,transparent 4px,var(--paper-darker) 4px,var(--paper-darker) 5px,transparent 5px);
  opacity:0.5;
}

/* ── Stamp ── */
.stamp{
  font-family:var(--font-stamp);font-size:14px;
  letter-spacing:4px;text-transform:uppercase;
  color:var(--stamp-red);border:2.5px solid var(--stamp-red);
  padding:4px 16px;display:inline-block;
  transform:rotate(-3deg);opacity:0.75;
}

/* ── Handwritten note ── */
.hand-note{
  font-family:var(--font-stamp);font-style:italic;
  color:var(--ink-pencil);font-size:12px;
  transform:rotate(-1.5deg);display:inline-block;
  margin-top:12px;padding:6px 12px;
  border-bottom:1.5px solid rgba(154,148,136,0.3);
}

/* ── Section label ── */
.section-label{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--ink-faint);margin-top:28px;margin-bottom:10px;
  padding-bottom:4px;border-bottom:1px solid rgba(0,0,0,0.05);
}

/* ── Claim / Critique boxes ── */
.claim-box{
  background:rgba(42,80,144,0.04);
  border-left:2.5px solid var(--stamp-blue);
  padding:14px 18px;margin:10px 0;
  font-size:14px;line-height:1.9;color:var(--ink-body);
}
.critique-box{
  background:rgba(184,48,48,0.03);
  border-left:2.5px solid var(--stamp-red);
  padding:14px 18px;margin:10px 0;
  font-size:14px;line-height:1.9;color:var(--ink-body);
}
.critique-box strong{color:var(--ink-dark);font-weight:600}

/* ── Narrative box ── */
.narrative{
  font-family:var(--font-serif);font-size:15.5px;
  line-height:2.1;color:var(--ink-dark);
  padding:20px 24px;margin:20px 0;
  background:linear-gradient(135deg,rgba(255,255,255,0.4)0%,rgba(255,255,255,0.1)100%);
  border-left:3px solid var(--ink-faint);
}

/* ── Evidence meter ── */
.evidence-meter{display:flex;gap:3px;align-items:center;margin:12px 0}
.meter-seg{width:22px;height:5px;background:rgba(0,0,0,0.06)}
.meter-seg.r{background:var(--stamp-red)}
.meter-seg.a{background:var(--stamp-amber)}
.meter-seg.b{background:var(--stamp-blue)}
.meter-seg.g{background:var(--stamp-green)}
.meter-seg.m{background:var(--ink-pencil)}
.meter-label{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);margin-left:10px;letter-spacing:0.5px}

/* ── Status tags ── */
.tag{
  font-family:var(--font-stamp);font-size:10px;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:3px 10px;white-space:nowrap;display:inline-block;
}
.tag-disputed{color:var(--stamp-amber);background:var(--stamp-amber-bg);border:1px solid rgba(138,106,32,0.2)}
.tag-debunked{color:var(--stamp-red);background:var(--stamp-red-bg);border:1px solid rgba(184,48,48,0.2)}
.tag-unverified{color:var(--stamp-blue);background:var(--stamp-blue-bg);border:1px solid rgba(42,80,144,0.15)}
.tag-unfalsifiable{color:var(--ink-pencil);background:rgba(0,0,0,0.03);border:1px solid rgba(0,0,0,0.08)}

/* ── Source list ── */
.source-list{list-style:none;margin:10px 0}
.source-list li{
  font-family:var(--font-mono);font-size:12px;
  padding:7px 0;border-bottom:1px dotted rgba(0,0,0,0.08);
  display:flex;align-items:baseline;gap:10px;color:var(--ink-light);
}
.source-list li:last-child{border-bottom:none}
.source-list a{
  color:var(--stamp-blue);text-decoration:none;
  border-bottom:1px solid rgba(42,80,144,0.25);transition:all 0.2s;
}
.source-list a:hover{border-color:var(--stamp-blue);background:rgba(42,80,144,0.05)}
a:focus-visible,
button:focus-visible,
.expand-header:focus-visible{
  outline:2px solid var(--stamp-blue);
  outline-offset:2px;
}
.src-type{
  font-size:10px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-faint);min-width:80px;flex-shrink:0;
}

/* ── Image figure ── */
.fig{
  margin:24px 0;border:1px solid var(--border-fold);
  box-shadow:0 2px 8px var(--shadow-soft);overflow:hidden;
}
.fig img{
  width:100%;height:auto;display:block;
  filter:sepia(0.12) contrast(0.96) brightness(0.98);
  transition:filter 0.3s;
}
.fig:hover img{filter:sepia(0.03) contrast(1) brightness(1)}
.fig-cap{
  font-family:var(--font-mono);font-size:11px;
  color:var(--ink-faint);padding:10px 14px;
  background:rgba(0,0,0,0.025);border-top:1px solid var(--border-light);
  letter-spacing:0.3px;line-height:1.6;
}
.fig-caption-zh{font-family:var(--font-sans);color:var(--ink-light)}

/* ── Dossier card (index page) ── */
.ds-card{
  background:var(--paper-base);
  border:1px solid var(--border-fold);
  margin-bottom:16px;
  box-shadow:0 2px 8px var(--shadow-soft);
  transition:box-shadow 0.3s,transform 0.3s;
  cursor:pointer;
  text-decoration:none;color:inherit;display:block;
}
.ds-card:hover{
  box-shadow:0 4px 16px var(--shadow-mid);
  transform:translateY(-2px);
}
.ds-card-inner{
  padding:24px 28px 24px 56px;
  position:relative;
}
.ds-card-inner::before{
  content:'';position:absolute;
  left:44px;top:0;bottom:0;width:1px;
  background:rgba(184,48,48,0.15);
}
.ds-card-num{
  font-family:var(--font-stamp);font-size:11px;
  color:var(--ink-faint);letter-spacing:1px;
}
.ds-card-title{
  font-family:var(--font-stamp);font-size:16px;
  color:var(--ink-black);margin:6px 0 4px;
}
.ds-card-lead{
  font-family:var(--font-mono);font-size:12px;
  color:var(--ink-faint);margin-bottom:10px;
}
.ds-card-preview{
  font-size:13px;color:var(--ink-light);
  line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}

/* ── Timeline ── */
.timeline{position:relative;padding-left:110px;margin-top:12px}
.timeline::before{
  content:'';position:absolute;
  left:98px;top:4px;bottom:4px;width:1px;
  background:var(--border-fold);
}
.tl-item{
  position:relative;padding:0 0 20px 24px;
  opacity:0;transform:translateX(-10px);
  transition:opacity 0.4s ease,transform 0.4s ease;
}
.tl-item.vis{opacity:1;transform:translateX(0)}
.tl-item::before{
  content:'';position:absolute;
  left:-112px;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--ink-faint);
  border:2px solid var(--paper-aged);z-index:1;
}
.tl-item.hl::before{background:var(--stamp-amber)}
.tl-year{
  position:absolute;left:-110px;top:0;width:78px;
  text-align:right;font-family:var(--font-stamp);
  font-size:11px;color:var(--ink-faint);
}
.tl-text{font-family:var(--font-mono);font-size:12px;color:var(--ink-light);line-height:1.7}

/* ── Expandable section ── */
.expandable{border:1px solid var(--border-light);margin:16px 0}
.expand-header{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:1px;color:var(--ink-dark);
  padding:12px 16px;cursor:pointer;
  background:rgba(0,0,0,0.02);
  display:flex;justify-content:space-between;align-items:center;
  transition:background 0.2s;user-select:none;
}
.expand-header:hover{background:rgba(0,0,0,0.04)}
.expand-icon{
  font-size:14px;color:var(--ink-faint);
  transition:transform 0.3s;
}
.expandable.open .expand-icon{transform:rotate(90deg)}
.expand-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 0.4s cubic-bezier(0.4,0,0.2,1);
}
.expandable.open .expand-body{grid-template-rows:1fr}
.expand-inner{overflow:hidden}
.expand-content{padding:16px}

/* ── Pull quote ── */
.pull-quote{
  font-family:var(--font-serif);font-size:18px;
  line-height:1.8;color:var(--ink-dark);
  padding:20px 0;margin:28px 0;
  border-top:1px solid var(--border-light);
  border-bottom:1px solid var(--border-light);
  text-align:center;
}
.pull-quote cite{
  display:block;font-family:var(--font-mono);
  font-size:11px;color:var(--ink-faint);
  margin-top:8px;font-style:normal;
  letter-spacing:1px;
}

/* ── Discussion prompt ── */
.discussion{
  background:var(--paper-aged);
  border:1px dashed var(--border-fold);
  padding:20px 24px;margin:28px 0;
}
.discussion::before{
  content:'讨论 · DISCUSSION';display:block;
  font-family:var(--font-stamp);font-size:10px;
  letter-spacing:3px;color:var(--ink-faint);margin-bottom:12px;
}
.discussion p{
  font-size:14px;color:var(--ink-light);line-height:1.8;
  margin-bottom:8px;
}
.discussion p:last-child{margin-bottom:0}

/* ── Sidebar TOC ── */
.toc{
  position:sticky;top:68px;
  font-family:var(--font-mono);font-size:11px;
}
.toc-title{
  font-size:10px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:12px;
}
.toc a{
  display:block;padding:4px 0;color:var(--ink-faint);
  text-decoration:none;border-left:2px solid transparent;
  padding-left:10px;transition:all 0.2s;
}
.toc a:hover,.toc a.active{
  color:var(--ink-dark);
  border-left-color:var(--stamp-red);
}

/* ── Grid layout for detail pages ── */
.detail-layout{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:40px;
  align-items:start;
}
@media(max-width:800px){
  .detail-layout{grid-template-columns:1fr}
  .toc{display:none}
  .breadcrumb{margin:0 -12px 12px;padding:10px 12px}
}

/* ── Footer ── */
.site-footer{
  margin-top:40px;padding:28px 0 52px;
  text-align:center;
  border-top:1px solid var(--border-light);
}
.footer-text{
  font-family:var(--font-mono);font-size:10px;
  color:var(--ink-faint);letter-spacing:0.5px;line-height:2.2;
}

/* ── Page num ── */
.page-num{
  font-family:var(--font-mono);font-size:10px;
  color:var(--ink-faint);text-align:right;margin-top:8px;
}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
.fade-up{opacity:0;transform:translateY(15px)}
.fade-up.vis{animation:fadeUp 0.6s ease-out forwards}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{opacity:0}
.fade-in.vis{animation:fadeIn 0.5s ease-out forwards}

/* ── Responsive ── */
@media(max-width:700px){
  body{font-size:14px}
  .container,.container-wide{padding:0 16px}
  .paper::before{display:none}
  .ds-card-inner{padding:16px 16px 16px 20px}
  .ds-card-inner::before{left:12px}
  .narrative{padding:14px 16px;font-size:14.5px}
  .tl-item{padding-left:16px}
  .timeline{padding-left:80px}
  .timeline::before{left:68px}
  .tl-year{left:-80px;width:60px;font-size:10px}
  .tl-item::before{left:-82px}
}

@media print{
  body{background:#fff}
  .reading-progress,.breadcrumb,.toc{display:none}
  .paper,.ds-card{box-shadow:none;border:1px solid #ccc}
  .expand-body{display:block!important}
  .expand-inner{overflow:visible!important}
  .fade-up,.fade-in,.tl-item{opacity:1!important;transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:0.01ms!important;
  }
  .fade-up,.fade-in,.tl-item{opacity:1!important;transform:none!important}
}