/* roulang page: index */
/* ===== 61brwvw383.cn 站内样式表 ===== */
:root{
  --paper:#f5f1e9;
  --panel:#ffffff;
  --ink:#1d1a16;
  --ink-dim:#6b635a;
  --accent:#b04a26;
  --accent-soft:#f1e0d6;
  --line:#e4dbd0;
  --radius:16px;
  --shadow:0 16px 36px -24px rgba(38,29,22,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.72 system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.brwvw-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}

/* 顶栏 */
.brwvw-top{position:sticky;top:0;z-index:50;background:rgba(245,241,233,.94);backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line)}
.brwvw-topin{display:flex;align-items:center;gap:26px;min-height:68px}
.brwvw-brand{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:800;letter-spacing:.01em;flex:0 0 auto}
.brwvw-logo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,#c65a30,#9c3d1d);color:#fff;font-size:16px;font-weight:700;box-shadow:0 8px 18px -10px rgba(156,61,29,.9)}
.brwvw-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.brwvw-nav a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:9px;font-size:14.5px;color:var(--ink-dim);transition:background .18s,color .18s}
.brwvw-nav a:hover{color:var(--ink);background:#fff}

/* 首屏 */
.brwvw-hero{padding:26px 0 4px}
.brwvw-herobox{position:relative;overflow:hidden;border-radius:26px;background:#201a15;isolation:isolate}
.brwvw-herobox>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;z-index:0}
.brwvw-herobox::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(102deg,rgba(21,17,13,.95),rgba(21,17,13,.8) 48%,rgba(21,17,13,.42))}
.brwvw-heroin{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:38px 50px;padding:58px 52px;color:#fff}
.brwvw-kicker{font-size:13px;letter-spacing:.16em;color:#e8b291;margin-bottom:14px}
.brwvw-title{font-size:clamp(30px,4.2vw,50px);line-height:1.18;font-weight:800;letter-spacing:-.015em}
.brwvw-title em{font-style:normal;color:#f3a878}
.brwvw-lead{margin-top:18px;max-width:560px;font-size:15.5px;line-height:1.86;color:rgba(255,255,255,.76)}
.brwvw-heroacts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.brwvw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;border:1px solid transparent;background:var(--accent);color:#fff;font-size:15px;font-weight:600;transition:transform .2s,box-shadow .2s,background .2s}
.brwvw-btn:hover{background:#9c3f1f;transform:translateY(-2px);box-shadow:0 18px 30px -18px rgba(176,74,38,.95)}
.brwvw-btn--line{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.brwvw-btn--line:hover{background:rgba(255,255,255,.12);box-shadow:none}
.brwvw-points{display:grid;gap:11px;align-content:center}
.brwvw-points li{position:relative;padding:13px 16px 13px 42px;border-radius:13px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.9)}
.brwvw-points li::before{content:"";position:absolute;left:18px;top:20px;width:7px;height:7px;border-radius:50%;background:#f3a878;box-shadow:0 0 0 4px rgba(243,168,120,.22)}
.brwvw-trust{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:13.5px;color:rgba(255,255,255,.66)}

/* 板块通用 */
.brwvw-sec{padding:66px 0}
.brwvw-sec--soft{background:#fbf8f2;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brwvw-sec--dark{background:#211b16;color:#fff}
.brwvw-shead{max-width:760px;margin-bottom:32px}
.brwvw-shead h2{font-size:clamp(22px,2.5vw,29px);font-weight:800;letter-spacing:-.012em;line-height:1.32}
.brwvw-shead p{margin-top:11px;font-size:15px;line-height:1.82;color:var(--ink-dim)}
.brwvw-sec--dark .brwvw-shead p{color:rgba(255,255,255,.66)}
.brwvw-grid{display:grid;gap:20px}
.brwvw-grid--4{grid-template-columns:repeat(4,1fr)}
.brwvw-grid--3{grid-template-columns:repeat(3,1fr)}

/* 卖点三连 */
.brwvw-spots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.brwvw-spot{padding:26px 24px 28px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:transform .22s,box-shadow .22s}
.brwvw-spot:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.brwvw-spot::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:16px}
.brwvw-spot b{display:block;font-size:17px;margin-bottom:9px}
.brwvw-spot p{font-size:14.5px;line-height:1.76;color:var(--ink-dim)}

/* 入口矩阵 */
.brwvw-gates{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.brwvw-gates a{display:flex;flex-direction:column;gap:8px;min-height:136px;padding:22px 20px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);transition:transform .22s,box-shadow .22s,border-color .22s}
.brwvw-gates a:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfb6a3;background:#fffaf4}
.brwvw-gates b{font-size:16.5px;font-weight:700}
.brwvw-gates span{font-size:13.5px;line-height:1.62;color:var(--ink-dim)}
.brwvw-gates i{margin-top:auto;font-style:normal;font-size:15px;font-weight:700;color:var(--accent)}

/* 书卡 */
.brwvw-card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}
.brwvw-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d9c9ba}
.brwvw-thumb{position:relative;aspect-ratio:3/4;overflow:hidden;background:#e9e0d5}
.brwvw-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.brwvw-card:hover .brwvw-thumb img{transform:scale(1.06)}
.brwvw-flag{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px;background:rgba(20,16,12,.74);color:#fff;font-size:12px;letter-spacing:.02em}
.brwvw-cbody{display:flex;flex-direction:column;gap:7px;padding:15px 16px 17px;flex:1}
.brwvw-cbody h3{font-size:16px;font-weight:700;line-height:1.4}
.brwvw-cbody p{font-size:14px;line-height:1.66;color:var(--ink-dim)}
.brwvw-meta{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12.5px;color:#8b8177}
.brwvw-chip{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:#8f3c1c;font-size:12px;line-height:1.75}

/* 分类频道 */
.brwvw-chans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.brwvw-chans li{display:flex;flex-direction:column;gap:9px;padding:22px 22px 24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent)}
.brwvw-chans b{font-size:16px;font-weight:700}
.brwvw-chans p{font-size:14px;line-height:1.72;color:var(--ink-dim)}

/* 专题 */
.brwvw-topics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.brwvw-topic{display:flex;flex-direction:column;gap:10px;padding:28px 26px 26px;border-radius:var(--radius);background:#241d17;color:#fff;transition:transform .22s,box-shadow .22s}
.brwvw-topic:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(36,29,23,.95)}
.brwvw-topic h3{font-size:18px;font-weight:700}
.brwvw-topic p{font-size:14px;line-height:1.72;color:rgba(255,255,255,.72)}
.brwvw-topic em{margin-top:auto;font-style:normal;font-size:12.5px;letter-spacing:.05em;color:#f3a878}

/* 榜单 */
.brwvw-rank{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}
.brwvw-rank li{display:flex;align-items:center;gap:14px;padding:13px 18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:background .2s,border-color .2s}
.brwvw-rank li:hover{background:#fffaf4;border-color:#d9c9ba}
.brwvw-rk{flex:0 0 auto;width:28px;font-size:13px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.brwvw-rank b{font-weight:600;font-size:15px}
.brwvw-rank em{margin-left:auto;font-style:normal;font-size:12.5px;color:#8b8177}

/* 精选横滑 */
.brwvw-rail{display:flex;gap:18px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.brwvw-rail .brwvw-card{flex:0 0 232px;scroll-snap-align:start}
.brwvw-rail::-webkit-scrollbar{height:6px}
.brwvw-rail::-webkit-scrollbar-thumb{background:#d8cabd;border-radius:99px}

/* 资讯 */
.brwvw-news{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.brwvw-news li{display:flex;gap:16px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:transform .22s,box-shadow .22s}
.brwvw-news li:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.brwvw-news img{width:104px;height:78px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.brwvw-news h3{font-size:15px;line-height:1.55;font-weight:600;margin-bottom:8px}
.brwvw-news span{font-size:12.5px;color:#8b8177}

/* 近况 */
.brwvw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.brwvw-stat{padding:26px 20px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);text-align:center}
.brwvw-stat strong{display:block;font-size:18px;font-weight:800;margin-bottom:8px;color:#f3a878}
.brwvw-stat span{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72)}

/* 口碑 */
.brwvw-voices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.brwvw-voice{padding:26px 24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.brwvw-voice p{font-size:14.5px;line-height:1.82;color:#3a342e}
.brwvw-voice p::before{content:"“";color:var(--accent);font-size:22px;line-height:0;margin-right:2px}
.brwvw-voice p::after{content:"”";color:var(--accent);font-size:22px;line-height:0;margin-left:2px}

/* 问答 */
.brwvw-qa{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.brwvw-qa article{padding:22px 24px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
.brwvw-qa h3{font-size:15.5px;font-weight:700;margin-bottom:9px}
.brwvw-qa p{font-size:14px;line-height:1.8;color:var(--ink-dim)}

/* 收口 */
.brwvw-end{position:relative;overflow:hidden;border-radius:24px;background:#201a15;color:#fff;text-align:center;padding:64px 32px}
.brwvw-end>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.brwvw-end::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.7),rgba(20,16,12,.92))}
.brwvw-endin{position:relative;z-index:2;max-width:620px;margin:0 auto}
.brwvw-endin h2{font-size:clamp(21px,2.4vw,27px);font-weight:800;margin-bottom:12px}
.brwvw-endin p{font-size:14.5px;line-height:1.82;color:rgba(255,255,255,.74);margin-bottom:24px}

/* 页脚 */
.brwvw-foot{background:#1c1712;color:rgba(255,255,255,.72);padding:56px 0 0;margin-top:66px}
.brwvw-footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:38px}
.brwvw-foot h3{font-size:14px;color:#fff;font-weight:700;margin-bottom:14px;letter-spacing:.04em}
.brwvw-foot p{font-size:13.5px;line-height:1.82}
.brwvw-foot ul{display:grid;gap:10px}
.brwvw-foot ul a{font-size:13.5px;color:rgba(255,255,255,.7);transition:color .18s}
.brwvw-foot ul a:hover{color:#f3a878}
.brwvw-brandfoot{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:16px;margin-bottom:12px}
.brwvw-copy{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 26px;font-size:13px;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* 断点 */
@media (max-width:1024px){
  .brwvw-heroin{grid-template-columns:1fr;gap:32px;padding:46px 38px}
  .brwvw-grid--4{grid-template-columns:repeat(2,1fr)}
  .brwvw-gates{grid-template-columns:repeat(2,1fr)}
  .brwvw-spots{grid-template-columns:repeat(2,1fr)}
  .brwvw-chans{grid-template-columns:repeat(2,1fr)}
  .brwvw-topics{grid-template-columns:repeat(2,1fr)}
  .brwvw-voices{grid-template-columns:repeat(2,1fr)}
  .brwvw-stats{grid-template-columns:repeat(2,1fr)}
  .brwvw-footgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .brwvw-topin{flex-wrap:wrap;gap:6px;padding:10px 0;min-height:0}
  .brwvw-nav{margin-left:0;width:100%;overflow-x:auto;padding-bottom:2px}
  .brwvw-nav a{white-space:nowrap;padding:10px 13px;min-height:44px}
  .brwvw-sec{padding:48px 0}
  .brwvw-spots,.brwvw-gates,.brwvw-chans,.brwvw-topics,.brwvw-voices,.brwvw-news,.brwvw-qa{grid-template-columns:1fr}
  .brwvw-grid--4{grid-template-columns:repeat(2,1fr)}
  .brwvw-rank{grid-template-columns:1fr}
  .brwvw-stats{grid-template-columns:1fr 1fr}
  .brwvw-end{padding:46px 24px}
  .brwvw-footgrid{grid-template-columns:1fr 1fr;gap:26px}
}
@media (max-width:520px){
  .brwvw-wrap{padding:0 16px}
  .brwvw-heroin{padding:34px 22px}
  .brwvw-title{font-size:28px}
  .brwvw-lead{font-size:14.5px}
  .brwvw-grid--4{grid-template-columns:1fr}
  .brwvw-stats{grid-template-columns:1fr}
  .brwvw-news img{width:88px;height:66px}
  .brwvw-news h3{font-size:14px}
  .brwvw-heroacts .brwvw-btn{width:100%}
  .brwvw-rail .brwvw-card{flex:0 0 78%}
  .brwvw-footgrid{grid-template-columns:1fr}
  .brwvw-copy{font-size:12.5px}
}