/* ========================================================
   悦体自 · YUETIZI · 复古海报手册样式
   A retro-poster reading room for performing arts & exhibitions
   ======================================================== */

/* ---- 字体引入 (纯前端样式，静态站无需后端) ---- */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Big+Shoulders+Display:wght@400;600;800&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Noto+Serif+SC:wght@400;500;700;900&family=Noto+Sans+SC:wght@300;400;500;700&family=Special+Elite&family=Limelight&family=Bungee&display=swap');

/* ========================================================
   设计 token —— 复古海报色谱
   ======================================================== */
:root{
  --paper:#f1e6cf;            /* 米白做旧纸张 */
  --paper-deep:#e8d8b6;       /* 旧纸张阴影 */
  --ink:#18120d;              /* 印刷黑 */
  --ink-soft:#2b231b;         /* 软黑 */
  --oxblood:#b8352f;          /* 复古深红 */
  --oxblood-deep:#7e231e;     /* 暗酒红 */
  --mustard:#d9a03b;          /* 复古芥末 */
  --mustard-deep:#a07324;     /* 焦糖 */
  --ink-blue:#1e3a5f;         /* 钢蓝 */
  --ink-blue-deep:#0e223a;    /* 深海蓝 */
  --forest:#2d4a3a;           /* 墨绿 */
  --sienna:#8b3a1e;            /* 赭石 */
  --tape-1:#c33a2e;
  --tape-2:#1c8a78;
  --tape-3:#e7a823;
  --tape-4:#1e3a5f;

  --serif:'Playfair Display','Noto Serif SC',Georgia,serif;
  --sans:'Noto Sans SC','Big Shoulders Display',sans-serif;
  --display:'Dela Gothic One','Big Shoulders Display','Bungee','Limelight',sans-serif;
  --type:'Special Elite','Courier New',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  overflow-x:hidden;
  /* 用 SVG noise 做旧纸张纹理 */
  background-image:
    radial-gradient(rgba(24,18,13,.06) 1px, transparent 1px),
    radial-gradient(rgba(184,53,47,.04) 1px, transparent 1px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09  0 0 0 0 .07  0 0 0 0 .05  0 0 0 .22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
  background-size: 6px 6px, 11px 11px, 320px 320px;
}

/* ========================================================
   通用排版
   ======================================================== */
a{color:inherit;text-decoration:none;transition:.25s ease}
a:hover{color:var(--oxblood)}
img{max-width:100%;display:block}

h1,h2,h3,h4{font-family:var(--display);letter-spacing:.02em;line-height:1.05}
.h-serif{font-family:var(--serif);font-weight:900;letter-spacing:.04em}
.mono{font-family:var(--type);letter-spacing:.05em}

::selection{background:var(--mustard);color:var(--ink)}

/* ========================================================
   顶部票根 · Marquee
   ======================================================== */
.ticket-top{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  border-bottom:6px double var(--mustard);
}
.ticket-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 18px;font-family:var(--type);font-size:13px;letter-spacing:.08em;
  background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(255,255,255,.04) 12px 13px);
}
.ticket-row b{color:var(--mustard);font-weight:400}
.ticket-row .sep{opacity:.4;margin:0 8px}

.marquee{
  display:flex;white-space:nowrap;
  background:var(--oxblood);
  color:var(--paper);
  font-family:var(--display);
  font-size:14px;letter-spacing:.18em;
  padding:6px 0;
  border-top:1px solid var(--mustard);
  border-bottom:1px solid var(--mustard);
  overflow:hidden;
  position:relative;
}
.marquee-track{display:inline-block;animation:roll 38s linear infinite;padding-left:100%}
.marquee-track span{padding:0 28px;border-right:2px dotted var(--paper)}
.marquee-track span::before{content:"★";color:var(--mustard);margin-right:14px}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ========================================================
   报头 · Masthead
   ======================================================== */
.mast{
  padding:42px 6% 30px;
  background:var(--paper);
  position:relative;
  border-bottom:2px solid var(--ink);
}
.mast::before, .mast::after{
  content:"";position:absolute;height:10px;left:0;right:0;
  background:repeating-linear-gradient(45deg,var(--ink) 0 10px,transparent 10px 20px);
}
.mast::before{top:0}
.mast::after{bottom:-2px;background:repeating-linear-gradient(-45deg,var(--oxblood) 0 10px,transparent 10px 20px);height:8px}

.mast-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;
  max-width:1300px;margin:0 auto;
}
.mast-left{font-family:var(--type);font-size:12px;line-height:1.5;letter-spacing:.04em}
.mast-left b{color:var(--oxblood)}
.mast-center{text-align:center}
.logo-big{
  display:inline-block;font-family:var(--display);
  font-size:clamp(54px,9vw,140px);
  line-height:.9;letter-spacing:.04em;
  color:var(--ink);
  text-shadow:
    3px 3px 0 var(--mustard),
    6px 6px 0 var(--oxblood);
  -webkit-text-stroke:0;
  transform:rotate(-1.5deg);
}
.logo-big small{
  display:block;font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:clamp(16px,1.6vw,22px);letter-spacing:.32em;
  color:var(--oxblood-deep);
  margin-top:6px;transform:rotate(-1.5deg);
}
.mast-right{text-align:right;font-family:var(--type);font-size:12px;line-height:1.6}
.mast-right .stamp{
  display:inline-block;border:2px solid var(--oxblood);
  color:var(--oxblood);padding:6px 10px;
  transform:rotate(8deg);font-weight:bold;letter-spacing:.12em;
  margin-top:6px;
}
.mast-right .stamp::before{content:"★ ";color:var(--mustard)}

.mast-tagline{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-align:center;margin-top:24px;font-size:14px;letter-spacing:.22em;
  color:var(--ink-soft);
}
.mast-tagline span{color:var(--oxblood);font-weight:700}

/* ========================================================
   导航 · Column Nav（做成老剧院指南针样式）
   ======================================================== */
.col-nav{
  background:var(--ink);
  border-top:4px solid var(--mustard);
  border-bottom:4px solid var(--mustard);
  padding:14px 4%;
  position:relative;
  overflow:hidden;
}
.col-nav::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(217,160,59,.18) 1.5px,transparent 1.5px);
  background-size:14px 14px;
  pointer-events:none;
}
.col-nav ul{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
  position:relative;z-index:1;
}
.col-nav li{position:relative}
.col-nav a{
  display:inline-block;color:var(--paper);font-family:var(--display);
  font-size:14px;letter-spacing:.18em;
  padding:6px 4px;
  position:relative;
}
.col-nav a:hover{color:var(--mustard)}
.col-nav a::after{
  content:"";position:absolute;left:50%;bottom:-4px;width:0;height:2px;
  background:var(--mustard);transform:translateX(-50%);transition:.3s ease;
}
.col-nav a:hover::after{width:120%}
.col-nav li .num{
  display:inline-block;font-family:var(--type);font-size:11px;
  background:var(--oxblood);color:var(--paper);
  padding:1px 5px;margin-right:6px;border:1px solid var(--mustard);
}

/* ========================================================
   内容容器
   ======================================================== */
.wrap{max-width:1280px;margin:0 auto;padding:0 4%}
.section{padding:60px 0}
.divider-strip{
  display:flex;align-items:center;gap:12px;
  font-family:var(--type);font-size:13px;letter-spacing:.32em;
  color:var(--ink-soft);text-transform:uppercase;
  margin:36px 0 24px;
}
.divider-strip::before, .divider-strip::after{
  content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 16px);
}
.divider-strip .star{color:var(--oxblood)}

/* ========================================================
   首页 · 10 海报墙（HALL OF COLUMNS）
   ======================================================== */
.poster-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:28px;
  padding:30px 0 60px;
}

.poster{
  position:relative;
  background:var(--paper-deep);
  padding:18px 14px 14px;
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  transform-origin:center top;
  transition:transform .35s ease, box-shadow .35s ease;
  overflow:hidden;
}
.poster::before{
  content:"";position:absolute;inset:6px;
  border:1px dashed var(--ink-soft);
  pointer-events:none;
}
.poster:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:10px 10px 0 var(--oxblood)}
.poster .ph{
  position:absolute;top:0;left:14px;font-family:var(--display);
  color:var(--paper);font-size:12px;letter-spacing:.18em;
  background:var(--ink);padding:4px 10px;
}
.poster .ph-num{position:absolute;bottom:0;right:0;background:var(--oxblood);color:var(--paper);
  font-family:var(--type);font-size:11px;padding:4px 8px;letter-spacing:.14em;
}

.poster .frame{
  position:relative;aspect-ratio:3/4;
  background:var(--ink);
  overflow:hidden;
  border:2px solid var(--ink);
}
.poster .frame svg{width:100%;height:100%;display:block}

.poster h3{
  font-family:var(--display);
  font-size:28px;line-height:1;
  margin:14px 0 6px;
  color:var(--ink);
  letter-spacing:.04em;
}
.poster h3 small{
  display:block;font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:13px;letter-spacing:.22em;color:var(--oxblood-deep);
  margin-top:2px;
}
.poster p{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.poster .meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;font-family:var(--type);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);
}
.poster .tag{
  display:inline-block;background:var(--ink);color:var(--paper);
  padding:2px 6px;letter-spacing:.18em;font-family:var(--type);font-size:10px;
}

/* 每张海报用一种主色调，配合自己的剪影 */
.poster.c01 .frame{background:#7e231e}  /* oxblood */
.poster.c02 .frame{background:#1e3a5f}  /* ink-blue */
.poster.c03 .frame{background:#2d4a3a}  /* forest */
.poster.c04 .frame{background:#3a2418}  /* walnut */
.poster.c05 .frame{background:#a07324}  /* mustard-deep */
.poster.c06 .frame{background:#0e223a}  /* deep sea */
.poster.c07 .frame{background:#8b3a1e}  /* sienna */
.poster.c08 .frame{background:#4a1a4a}  /* plum */
.poster.c09 .frame{background:#1c3a35}  /* teal */
.poster.c10 .frame{background:#5c2a1a}  /* burnt */

/* ========================================================
   特色特写 · 首页 Feature 段
   ======================================================== */
.feature{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  padding:40px 6%;
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.feature::after{
  content:"SPECIAL SCREENING";
  position:absolute;right:-30px;top:50%;transform:translateY(-50%) rotate(-90deg);
  font-family:var(--display);font-size:88px;color:rgba(217,160,59,.18);letter-spacing:.4em;
  white-space:nowrap;pointer-events:none;
}
.feature h2{font-family:var(--display);font-size:60px;line-height:.95;color:var(--mustard)}
.feature h2 small{display:block;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--paper);letter-spacing:.3em;margin-top:12px}
.feature .feat-body{font-family:var(--serif);font-size:16px;line-height:1.85;color:var(--paper-deep);font-style:italic}
.feature .feat-body p{margin-bottom:14px}
.feature .plate{
  background:var(--paper);color:var(--ink);padding:26px;border:3px double var(--mustard);
  transform:rotate(1.2deg);
}
.feature .plate h3{font-family:var(--display);font-size:30px;line-height:1;color:var(--oxblood)}
.feature .plate ul{list-style:none;margin-top:14px}
.feature .plate li{
  padding:10px 0;border-bottom:1px dashed var(--ink-soft);
  display:flex;justify-content:space-between;gap:10px;
  font-family:var(--type);font-size:13px;letter-spacing:.04em;
}
.feature .plate li:last-child{border-bottom:0}
.feature .plate li .date{color:var(--oxblood);white-space:nowrap;font-weight:bold}
.feature .plate li a:hover{color:var(--oxblood)}

/* 段落 · 票根元素 */
.ticket{
  display:inline-block;
  background:var(--paper);
  border:2px dashed var(--ink);
  padding:14px 22px;
  font-family:var(--type);
  letter-spacing:.18em;
  font-size:13px;
  position:relative;
  margin-top:20px;
  transform:rotate(-1.5deg);
}
.ticket::before, .ticket::after{
  content:"";width:14px;height:14px;background:var(--ink);
  border-radius:50%;position:absolute;top:50%;transform:translateY(-50%);
}
.ticket::before{left:-7px}
.ticket::after{right:-7px}

/* ========================================================
   栏目页 · 通用结构
   ======================================================== */
.section-banner{
  position:relative;
  padding:80px 6% 60px;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  border-bottom:6px solid var(--mustard);
}
.section-banner::before{
  content:"";position:absolute;inset:0;opacity:.16;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 22px, var(--mustard) 22px 23px),
    repeating-linear-gradient(-45deg, transparent 0 22px, var(--mustard) 22px 23px);
}
.section-banner .container{position:relative;z-index:1}
.section-banner .eyebrow{
  display:inline-block;font-family:var(--type);font-size:13px;
  letter-spacing:.32em;background:var(--oxblood);
  padding:4px 14px;margin-bottom:14px;
}
.section-banner h1{
  font-family:var(--display);font-size:88px;line-height:.9;
  letter-spacing:.04em;color:var(--mustard);
}
.section-banner h1 .alt{
  display:block;color:var(--paper);font-family:var(--serif);font-style:italic;
  font-weight:400;font-size:30px;letter-spacing:.32em;margin-top:10px;
}
.section-banner p.lead{
  margin-top:22px;max-width:780px;
  font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.7;
  color:var(--paper-deep);
}
.section-banner .cornerstamp{
  position:absolute;right:30px;top:30px;width:130px;height:130px;
  border:2px solid var(--mustard);border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--display);font-size:14px;letter-spacing:.16em;line-height:1.1;
  transform:rotate(-12deg);color:var(--mustard);
  background:rgba(24,18,13,.6);
}
.section-banner .cornerstamp::before{
  content:"";position:absolute;inset:6px;border:1px dashed var(--mustard);border-radius:50%;
}

/* 列表 · 文章卡 */
.posts-flow{padding:50px 6%;position:relative}
.posts-flow .hed{
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:end;
  margin-bottom:32px;padding-bottom:16px;border-bottom:3px double var(--ink);
}
.posts-flow .hed h2{font-family:var(--display);font-size:42px;line-height:.95}
.posts-flow .hed h2 small{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:14px;letter-spacing:.32em;color:var(--oxblood-deep);
}
.posts-flow .hed .rule{height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 18px);align-self:center}
.posts-flow .hed .count{font-family:var(--type);font-size:12px;letter-spacing:.18em;color:var(--ink-soft)}

.entry-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:28px 26px;
}
.entry{
  background:var(--paper);
  position:relative;
  padding-bottom:18px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  display:flex;flex-direction:column;
}
.entry::before{
  content:attr(data-no);
  position:absolute;top:-22px;left:0;
  background:var(--oxblood);color:var(--paper);
  font-family:var(--display);font-size:11px;letter-spacing:.22em;
  padding:3px 10px;
}
.entry::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;
  background:var(--ink);
}
.entry .thumb{
  aspect-ratio:16/10;background:var(--ink-blue-deep);overflow:hidden;
  border-bottom:3px solid var(--ink);
}
.entry .thumb svg{width:100%;height:100%;display:block}
.entry .body{padding:16px 18px 0;flex:1;display:flex;flex-direction:column}
.entry .crumb{
  font-family:var(--type);font-size:11px;letter-spacing:.22em;color:var(--oxblood);
  margin-bottom:6px;text-transform:uppercase;
}
.entry h3{
  font-family:var(--serif);font-weight:900;font-size:22px;line-height:1.2;
  margin-bottom:10px;
}
.entry h3 a:hover{color:var(--oxblood)}
.entry .excerpt{
  font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-soft);
  line-height:1.55;flex:1;
}
.entry .meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:14px;font-family:var(--type);font-size:11px;letter-spacing:.16em;color:var(--ink-soft);
}
.entry .meta .tag{
  background:var(--ink);color:var(--paper);padding:2px 7px;
}
.entry .read{
  display:inline-block;margin-top:10px;font-family:var(--type);font-size:11px;
  letter-spacing:.22em;color:var(--oxblood);border-bottom:1px solid var(--oxblood);
}

/* 翻页 */
.pagination{
  display:flex;justify-content:center;gap:6px;align-items:center;
  padding:50px 0 30px;flex-wrap:wrap;
  font-family:var(--type);font-size:13px;letter-spacing:.16em;
}
.pagination a, .pagination span{
  min-width:42px;text-align:center;padding:8px 12px;
  border:2px solid var(--ink);background:var(--paper);
}
.pagination a:hover{background:var(--ink);color:var(--paper)}
.pagination .now{background:var(--oxblood);color:var(--paper);border-color:var(--oxblood)}
.pagination .skip{background:var(--ink);color:var(--paper)}

/* ========================================================
   文章页 · Article
   ======================================================== */
.article{
  padding:60px 6% 40px;
  max-width:920px;margin:0 auto;
  position:relative;
}
.article .crumbs{
  font-family:var(--type);font-size:12px;letter-spacing:.22em;
  color:var(--ink-soft);margin-bottom:18px;text-transform:uppercase;
}
.article .crumbs a{color:var(--oxblood);border-bottom:1px dotted var(--oxblood)}

.article-head{
  text-align:left;
  padding:24px 0 28px;
  border-bottom:2px solid var(--ink);
  margin-bottom:32px;
  position:relative;
}
.article-head .ribbon{
  display:inline-block;background:var(--oxblood);color:var(--paper);
  padding:6px 14px;font-family:var(--display);font-size:14px;letter-spacing:.22em;
  margin-bottom:18px;
}
.article-head h1{
  font-family:var(--display);
  font-size:46px;line-height:1;letter-spacing:.02em;
  color:var(--ink);
}
.article-head h1 .amp{
  font-family:var(--serif);font-style:italic;color:var(--oxblood);
}
.article-head .deck{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:20px;line-height:1.5;color:var(--ink-soft);margin-top:14px;
}
.article-head .byline{
  margin-top:22px;display:flex;gap:18px;flex-wrap:wrap;
  font-family:var(--type);font-size:12px;letter-spacing:.18em;
  color:var(--ink-soft);
}
.article-head .byline b{color:var(--oxblood)}

.article-body p{
  font-family:var(--serif);font-size:17px;line-height:1.85;
  margin-bottom:18px;color:var(--ink-soft);
}
.article-body p:first-of-type::first-letter{
  font-family:var(--display);float:left;font-size:78px;line-height:.78;
  padding:8px 12px 0 0;color:var(--oxblood);
}
.article-body h2{
  font-family:var(--display);font-size:30px;margin:34px 0 12px;
  border-left:6px solid var(--mustard);padding-left:14px;
}
.article-body h3{
  font-family:var(--serif);font-weight:900;font-size:22px;margin:24px 0 10px;
  color:var(--ink);
}
.article-body blockquote{
  margin:24px 0;padding:18px 22px;
  background:var(--paper-deep);
  border-left:5px solid var(--oxblood);
  font-family:var(--serif);font-style:italic;font-size:18px;
  color:var(--ink);position:relative;
}
.article-body blockquote::before{
  content:"\201C";position:absolute;top:-6px;left:8px;
  font-family:var(--display);font-size:72px;color:var(--oxblood);line-height:1;
}
.article-body blockquote cite{
  display:block;margin-top:10px;font-family:var(--type);font-size:12px;
  color:var(--ink-soft);font-style:normal;letter-spacing:.18em;
}
.article-body ul{margin:14px 0 18px 26px}
.article-body li{margin-bottom:6px;font-family:var(--serif);font-size:16px;line-height:1.7}
.article-body figure{
  margin:24px 0;border:1px solid var(--ink);background:var(--paper-deep);
  padding:10px;
}
.article-body figure .frame{
  background:var(--ink-blue-deep);aspect-ratio:16/9;overflow:hidden;
}
.article-body figure .frame svg{width:100%;height:100%}
.article-body figcaption{
  font-family:var(--type);font-size:12px;letter-spacing:.1em;color:var(--ink-soft);
  padding:8px 4px 0;
  border-top:1px dashed var(--ink-soft);margin-top:8px;
}

.nextprev{
  margin:50px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:18px;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:22px 0;
}
.nextprev a{
  display:block;background:var(--paper);border:1px solid var(--ink);
  padding:14px 16px;font-family:var(--type);font-size:13px;letter-spacing:.14em;
  color:var(--ink);
}
.nextprev a:hover{background:var(--ink);color:var(--paper)}
.nextprev small{display:block;font-size:11px;color:var(--oxblood);letter-spacing:.22em;margin-bottom:6px}
.nextprev b{font-family:var(--display);font-size:18px;letter-spacing:.08em;color:var(--ink)}
.nextprev a:hover b{color:var(--mustard)}
.nextprev .next{text-align:right}

.back-home{
  display:block;text-align:center;margin:0 auto 60px;
  width:max-content;padding:10px 22px;font-family:var(--type);font-size:13px;
  letter-spacing:.22em;border:2px solid var(--ink);background:var(--paper);
}
.back-home:hover{background:var(--ink);color:var(--paper)}

/* ========================================================
   报脚 · Footer
   ======================================================== */
.foot{
  background:var(--ink);color:var(--paper);
  padding:50px 6% 30px;
  border-top:6px double var(--mustard);
  position:relative;
}
.foot::before{
  content:"";position:absolute;left:0;right:0;top:-6px;height:6px;
  background:repeating-linear-gradient(90deg,var(--oxblood) 0 22px,var(--mustard) 22px 44px);
}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  max-width:1200px;margin:0 auto;
}
.foot h4{
  font-family:var(--display);font-size:18px;color:var(--mustard);
  letter-spacing:.18em;margin-bottom:14px;
}
.foot p,.foot li,.foot a{font-family:var(--serif);color:var(--paper-deep);font-size:14px;line-height:1.8}
.foot ul{list-style:none}
.foot li{padding:4px 0;border-bottom:1px dashed rgba(241,230,207,.18)}
.foot li:last-child{border-bottom:0}
.foot a:hover{color:var(--mustard)}
.foot .signature{font-family:var(--display);font-size:28px;color:var(--mustard);letter-spacing:.06em;margin-bottom:8px}
.foot .signature small{display:block;font-family:var(--serif);font-style:italic;font-size:13px;letter-spacing:.32em;color:var(--paper-deep)}
.foot-bottom{
  margin-top:40px;padding-top:20px;border-top:1px dashed var(--paper-deep);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--type);font-size:12px;letter-spacing:.14em;color:var(--paper-deep);
}
.foot-bottom a{color:var(--mustard)}
.foot-bottom .icp{color:var(--paper-deep) !important}

/* ========================================================
   海报剪影 · 内嵌 SVG（每栏目不同）
   ======================================================== */
.frame-art{width:100%;height:100%}

/* ========================================================
   装饰元素 · 票根感 / 火印 / 印章 / 杂志页脚
   ======================================================== */
.tag-chip{
  display:inline-block;font-family:var(--type);font-size:11px;letter-spacing:.22em;
  padding:4px 10px;background:var(--mustard);color:var(--ink);text-transform:uppercase;
  border:1px solid var(--ink);
}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* 唱片感圆盘 */
.vinyl{
  width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 50% 50%, var(--ink) 0 14%, #18120d 14% 16%, #2c2417 16% 100%);
  border:2px solid var(--ink);flex-shrink:0;position:relative;
}
.vinyl::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:repeating-radial-gradient(circle, rgba(255,255,255,.06) 0 1px, transparent 1px 4px);
}

/* 胶片孔 */
.filmstrip{
  background:
    linear-gradient(var(--ink) 0 0) 0 0/100% 16px no-repeat,
    linear-gradient(var(--ink) 0 0) 0 100%/100% 16px no-repeat,
    var(--ink-soft);
  padding:18px 0;position:relative;
}
.filmstrip::before,.filmstrip::after{
  content:"";position:absolute;left:0;right:0;height:12px;
  background-image:
    radial-gradient(circle, transparent 0 6px, var(--ink) 6px 10px, transparent 10px),
    linear-gradient(transparent, transparent);
  background-size:18px 12px;background-repeat:repeat-x;
}
.filmstrip::before{top:2px}
.filmstrip::after{bottom:2px;background-position:0 0}

/* ========================================================
   响应式
   ======================================================== */
@media (max-width:900px){
  .mast-grid{grid-template-columns:1fr;text-align:center}
  .mast-right,.mast-left{text-align:center}
  .feature{grid-template-columns:1fr}
  .section-banner h1{font-size:54px}
  .article-head h1{font-size:34px}
  .nextprev{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .col-nav ul{gap:4px 14px}
  .col-nav a{font-size:12px}
  .posts-flow .hed{grid-template-columns:1fr;gap:6px}
}
@media (max-width:560px){
  .ticket-row{flex-direction:column;gap:4px;padding:8px 14px}
  .marquee-track{font-size:12px}
  .section-banner{padding:50px 6% 40px}
  .section-banner h1{font-size:42px}
  .article-body p{font-size:15.5px}
  .article-head h1{font-size:26px}
  .article-body p:first-of-type::first-letter{font-size:60px}
}