@charset "UTF-8";
/* ===== 漫蛙3 · 漫画杂志刊（封面 / 斜切 / 票券 / 胶片） ===== */
:root{
  --cream:#f7f3e8; --ink:#171512; --mut:#6d675a; --dim:#a49c8a;
  --green:#3e8e5a; --green-d:#2c6b42; --red:#c9452c; --line:#ddd4bd;
  --serif:"Noto Serif SC",serif; --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --disp:"Archivo Black","Noto Sans SC",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ===== 细线刊头 ===== */
.mast{position:sticky;top:0;z-index:100;background:rgba(247,243,232,.94);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--ink);box-shadow:0 3px 14px rgba(23,21,18,.08)}
.mast-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:11px 22px}
.mast-brand{display:flex;align-items:center;gap:11px}
.mast-brand img{width:42px;height:42px;border-radius:50%;border:2px solid var(--ink)}
.mast-name{font-family:var(--serif);font-size:22px;font-weight:900;line-height:1}
.mast-name i{font-style:normal;display:block;font-family:var(--disp);font-size:9px;letter-spacing:2.5px;color:var(--dim);margin-top:4px}
.mast-links{display:flex;gap:25px;margin:0 auto}
.mast-links a{font-size:14px;font-weight:500;color:var(--mut);padding:4px 2px;border-bottom:2px solid transparent;transition:.2s}
.mast-links a:hover{color:var(--ink)}
.mast-links a.active{color:var(--red);border-bottom-color:var(--red);font-weight:700}
.mast-cta{background:var(--ink);color:#f7f3e8;font-weight:700;font-size:14px;letter-spacing:2px;
  padding:10px 22px;border-radius:2px;transition:.2s}
.mast-cta:hover{background:var(--green-d)}
.mast-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;margin-left:auto}
.mast-toggle span{width:23px;height:2.5px;background:var(--ink);border-radius:2px}

/* ===== 封面 ===== */
.cover{position:relative;padding:58px 20px 0;
  background:
    linear-gradient(115deg,rgba(62,142,90,.09) 0 42%,transparent 42.2%),
    radial-gradient(ellipse at 90% 10%,rgba(201,69,44,.10),transparent 55%)}
.cover-grid{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;gap:30px;align-items:center}
.vol{font-family:var(--disp);font-size:12px;letter-spacing:3px;color:var(--red)}
.cover-title{font-family:var(--serif);font-size:clamp(66px,9vw,116px);font-weight:900;line-height:1.02;
  letter-spacing:6px;margin:14px 0 4px}
.cover-slogan{font-family:var(--serif);font-size:clamp(19px,2.4vw,26px);font-weight:700;
  border-left:6px solid var(--green);padding-left:14px;margin:14px 0 18px}
.cover-lead{font-size:14.5px;line-height:2.05;color:var(--mut);max-width:480px}
.cover-cta{margin-top:26px}
.btn-ink{display:inline-block;background:var(--ink);color:#f7f3e8;font-family:var(--serif);font-weight:700;
  font-size:17px;letter-spacing:2px;padding:15px 34px;border-radius:2px;transition:.2s;
  box-shadow:6px 6px 0 var(--green)}
.btn-ink:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--green)}
.btn-ink:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--green)}
.btn-ink.lg{font-size:19px;padding:17px 42px}
.cover-note{font-size:12px;color:var(--dim);line-height:1.9;margin-top:14px}

.cover-visual{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.issue-stamp{position:absolute;top:-8px;right:8%;z-index:3;width:78px;height:78px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:rotate(10deg);box-shadow:0 8px 20px rgba(201,69,44,.4);border:3px dashed rgba(255,255,255,.55)}
.issue-stamp b{font-family:var(--disp);font-size:23px;line-height:1}
.issue-stamp span{font-size:11px;letter-spacing:2px;margin-top:2px}
.cover-phone{width:246px;border:3px solid var(--ink);border-radius:34px;padding:6px;background:#fff;
  box-shadow:12px 12px 0 rgba(23,21,18,.16)}
.cover-phone img{border-radius:26px;width:100%}
.cover-caption{font-size:11.5px;letter-spacing:2px;color:var(--dim)}

.cover-index{max-width:1150px;margin:38px auto 0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:2px solid var(--ink)}
.cover-index li{padding:18px 8px 22px;border-right:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--mut)}
.cover-index li:last-child{border-right:0}
.cover-index i{font-style:normal;display:block;font-family:var(--disp);font-size:10px;letter-spacing:2px;color:var(--red);margin-bottom:7px}
.cover-index span{font-family:var(--serif);font-size:24px;font-weight:900;color:var(--ink);margin-right:5px}

/* ===== 黑色信息条 ===== */
.ink-strip{background:var(--ink);color:#efe9d8;overflow:hidden;padding:12px 0}
.ink-strip p{white-space:nowrap;font-family:var(--disp);font-size:12.5px;letter-spacing:4px;
  animation:strip 26s linear infinite;width:max-content;margin:0 auto}
@keyframes strip{from{transform:translateX(30%)}to{transform:translateX(-100%)}}

/* ===== 通用分节 ===== */
.sec{padding:72px 20px}
.sec-in{max-width:1150px;margin:0 auto}
.sec-in.narrow{max-width:780px}
.sec-head{margin-bottom:40px}
.sec-en{font-family:var(--disp);font-size:12px;letter-spacing:4px;color:var(--green)}
.sec-head h2{font-family:var(--serif);font-size:clamp(29px,4vw,40px);font-weight:900;margin:8px 0 8px}
.sec-sub{font-size:14px;color:var(--mut)}
.sec-head.light{text-align:center}
.sec-head.light .sec-en{color:#8fd3a8}
.sec-head.light h2{color:#f7f3e8}
.sec-head.light .sec-sub{color:#b3ac99}

/* ===== 专栏连载（交错编辑排版） ===== */
.columns{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px}
.col-item{display:flex;gap:18px;align-items:flex-start;padding:26px 0;border-top:2px solid var(--ink)}
.columns .col-item:nth-child(even){transform:translateY(34px)}
.col-no{font-family:var(--disp);font-size:44px;line-height:1;color:transparent;
  -webkit-text-stroke:1.6px var(--green);flex:none}
.col-body h3{font-family:var(--serif);font-size:21px;font-weight:900;margin-bottom:9px}
.col-body p{font-size:13.5px;line-height:1.95;color:var(--mut)}

/* ===== 上刊时刻（票券） ===== */
.sec-ink{background:var(--ink)}
.tickets{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.ticket{position:relative;background:var(--cream);border-radius:6px;padding:18px 14px 16px;text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.35)}
.ticket::before,.ticket::after{content:'';position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
  background:var(--ink);transform:translateY(-50%)}
.ticket::before{left:-6px}
.ticket::after{right:-6px}
.ticket b{font-family:var(--serif);font-size:19px;display:block}
.ticket p{font-size:12px;color:var(--mut);margin:9px 0 7px}
.ticket em{font-style:normal;font-family:var(--disp);font-size:12px;letter-spacing:1px;color:var(--red);font-weight:700}
.ticket .perf{position:absolute;left:8px;right:8px;bottom:9px;height:0;border-top:2px dashed var(--line)}
.ticket.today{outline:3px solid var(--red);outline-offset:2px}
.ticket.today::marker{content:none}
.ticket.today b::after{content:'·今日';font-size:11px;color:var(--red);vertical-align:3px;margin-left:4px}
.ticket.today .perf{border-top-color:rgba(201,69,44,.4)}

/* ===== 胶片样张 ===== */
.film{background:var(--ink);border-radius:10px;padding:12px 10px;box-shadow:0 16px 38px rgba(23,21,18,.25)}
.film-holes{display:flex;justify-content:space-between;padding:3px 6px}
.film-holes i{width:17px;height:11px;border-radius:3px;background:var(--cream);opacity:.92}
.film-frames{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:8px 2px}
.frame{background:var(--cream);padding:7px 7px 0}
.frame img{width:100%}
.frame figcaption{font-family:var(--disp);font-size:10px;letter-spacing:1.5px;color:var(--mut);
  text-align:center;padding:8px 0 9px}

/* ===== 读者声音（引号大字） ===== */
.sec-paper{background:linear-gradient(180deg,#efe9d8,var(--cream))}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
.quote{position:relative;padding:26px 4px 0;border-top:2px solid var(--ink)}
.quote::before{content:'“';position:absolute;top:6px;right:2px;font-family:var(--serif);
  font-size:74px;line-height:1;color:rgba(62,142,90,.28)}
.quote p{font-family:var(--serif);font-size:16.5px;line-height:2;font-weight:600;color:#33302a;padding-right:44px}
.quote footer{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px}
.quote footer b{font-size:13px;color:var(--red)}
.quote footer time{font-family:var(--disp);font-size:10.5px;letter-spacing:1px;color:var(--dim)}

/* ===== FAQ ===== */
.faq{border-bottom:2px solid var(--ink);background:transparent;border-radius:0;margin-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:16px;padding:22px 4px;
  font-family:var(--serif);font-size:19px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'＋';margin-left:auto;color:var(--green);font-size:20px;font-family:var(--sans)}
.faq[open] summary::after{content:'−'}
.q-no{font-family:var(--disp);font-size:15px;color:var(--red);flex:none}
.faq-a{padding:0 4px 22px 52px}
.faq-a p{font-size:14px;line-height:2.05;color:var(--mut)}
.faq-list{border-top:2px solid var(--ink)}

/* ===== 订阅海报 ===== */
.poster{background:var(--green-d);color:#f2f7ee;border-radius:4px;padding:56px 48px 40px;text-align:center;
  clip-path:polygon(0 3.5%,3% 0,97% 2%,100% 5.5%,99.4% 96%,96% 100%,3.4% 98.6%,0 95%);
  box-shadow:0 26px 60px rgba(44,107,66,.35)}
.poster-kicker{font-family:var(--disp);font-size:12px;letter-spacing:3px;color:#a8d8ba}
.poster h2{font-family:var(--serif);font-size:clamp(29px,4.5vw,42px);font-weight:900;line-height:1.5;margin:16px 0 10px;letter-spacing:2px}
.poster h2 b{color:#ffd98e}
.poster-lead{font-size:14px;color:rgba(242,247,238,.85)}
.poster-btns{display:flex;justify-content:center;gap:18px;margin:28px 0 8px;flex-wrap:wrap}
.btn-ink{background:#f7f3e8;color:var(--ink);box-shadow:6px 6px 0 rgba(0,0,0,.3)}
.btn-ink:hover{box-shadow:8px 8px 0 rgba(0,0,0,.3)}
.btn-paper{display:inline-block;background:transparent;color:#f2f7ee;font-family:var(--serif);font-weight:700;
  font-size:17px;letter-spacing:2px;border:2px solid rgba(242,247,238,.7);border-radius:2px;padding:15px 30px;transition:.2s}
.btn-paper:hover{background:rgba(255,255,255,.12)}
.poster-spec{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.poster-spec li{font-size:13px;border:1px solid rgba(242,247,238,.45);border-radius:999px;padding:8px 16px;color:#dcebd9}
.related{text-align:left;margin-top:32px;border-top:1px dashed rgba(242,247,238,.4);padding-top:22px}
.related h3{font-family:var(--serif);font-size:19px;color:#ffd98e;margin-bottom:12px}
.related p{display:flex;flex-wrap:wrap;gap:10px}
.related a{font-size:13px;border:1px solid rgba(242,247,238,.45);border-radius:999px;padding:7px 15px;
  color:#dcebd9;transition:.2s}
.related a:hover{background:rgba(255,255,255,.14)}

.foot{text-align:center;padding:38px 0 6px}
.foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin-bottom:13px}
.foot nav a{font-size:13px;color:var(--mut)}
.foot nav a:hover{color:var(--red)}
.foot p{font-size:12px;color:var(--dim);line-height:2}

.to-top{position:fixed;right:22px;bottom:28px;width:48px;height:48px;border-radius:2px;border:2px solid var(--ink);
  cursor:pointer;background:var(--cream);color:var(--ink);font-size:19px;
  opacity:0;pointer-events:none;transition:.25s;z-index:90;box-shadow:4px 4px 0 rgba(23,21,18,.2)}
.to-top.show{opacity:1;pointer-events:auto}

/* ===== 移动端 ===== */
@media(max-width:900px){
  .mast-in{padding:9px 14px;flex-wrap:wrap}
  .mast-links{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;margin:0;
    background:var(--cream);border:2px solid var(--ink);border-radius:4px;padding:6px}
  .mast-links.open{display:flex}
  .mast-links a{padding:13px 14px;font-size:16px;border-bottom:0}
  .mast-toggle{display:flex}
  .cover{padding-top:40px}
  .cover-grid{grid-template-columns:1fr;gap:8px}
  .cover-copy{order:1}
  .cover-visual{order:2}
  .cover-title{letter-spacing:3px}
  .issue-stamp{right:6%;top:-4px;width:66px;height:66px}
  .issue-stamp b{font-size:19px}
  .cover-index{grid-template-columns:1fr 1fr}
  .cover-index li:nth-child(2n){border-right:0}
  .cover-index li:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sec{padding:54px 14px}
  .columns{grid-template-columns:1fr}
  .columns .col-item:nth-child(even){transform:none}
  .tickets{display:flex;overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .ticket{flex:0 0 128px}
  .film-frames{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .poster-btns{flex-direction:column}
  .poster-btns a{text-align:center}
  .poster{padding:40px 20px 30px}
  .faq-a{padding-left:4px}
}