/* ============================================================
   CP滴滴情报局 · PC 版
   杂志编辑风：报头 + 细线栅格 + 强字号对比 + 真实图片。
   刻意不用卡片（无圆角、无阴影、无盒子），结构全靠 1px 细线和留白。
   ============================================================ */

.wrap{max-width:1240px;margin:0 auto;padding:0 40px}

/* ---------------- 报头 ---------------- */
.masthead{position:sticky;top:0;z-index:30;background:var(--paper)}
.masthead-top{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-top:26px;padding-bottom:14px;
}
.logo{display:flex;align-items:baseline;gap:10px}
.logo-mark{
  font-family:var(--font-num);font-size:34px;font-weight:700;
  letter-spacing:-0.04em;line-height:1;color:var(--accent);
}
.logo-text{font-size:19px;font-weight:700;letter-spacing:.06em}
.masthead-meta{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase;
}
.masthead-meta .sep{color:var(--rule-strong)}
/* 登录状态：用一条竖线跟前面的期号信息分开，别混成一排 */
.masthead-meta .user-chip{
  margin-left:6px;padding-left:16px;border-left:1px solid var(--rule);
  text-transform:none;letter-spacing:.06em;
}

.nav-row{
  display:flex;align-items:center;gap:34px;
  padding-top:14px;padding-bottom:14px;
}
.nav-row button{
  appearance:none;background:transparent;border:0;cursor:pointer;
  font-size:12.5px;font-weight:600;letter-spacing:.16em;
  color:var(--ink-2);padding:2px 0;
  border-bottom:2px solid transparent;
  transition:color .16s, border-color .16s;
}
.nav-row button:hover{color:var(--ink)}
.nav-row button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
/* 分栏多了以后，窄一点的电脑上先允许横向滚动，别把导航挤成两行 */
.nav-row{overflow-x:auto;scrollbar-width:none}
.nav-row::-webkit-scrollbar{display:none}
.nav-row button{flex:0 0 auto;white-space:nowrap}

/* ---------------- 版面容器 ---------------- */
.view{padding:44px 0 90px}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:44px}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}

/* 区块标题：眉标 + 大标题 + 右侧注脚，靠细线压住 */
.sec{margin-top:64px}
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:14px;border-bottom:3px solid var(--ink);margin-bottom:0;
}
.sec-head h2{margin:0;font-size:clamp(24px,2.2vw,31px);font-weight:700;letter-spacing:-.025em;line-height:1.15}
.sec-head .note{font-size:11.5px;letter-spacing:.14em;color:var(--ink-2);white-space:nowrap}

/* ---------------- 首屏封面 ----------------
   随机 ACG 横图 + 左重右轻的遮罩。文字压在左侧最暗处，
   白字实测对比度 ≈ 10:1，所以随机图再亮也不会糊。 */
.cover-band{height:clamp(300px,34vw,420px);margin-top:8px}
.cover-band::after{
  background:linear-gradient(90deg,
    rgba(23,20,15,calc(var(--scrim,0.62) * 1.42)) 0%,
    rgba(23,20,15,calc(var(--scrim,0.62) * 1.06)) 46%,
    rgba(23,20,15,calc(var(--scrim,0.62) * 0.4)) 100%);
}
.cover-band .cover-inner{
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:46px;
}
.cover-band .kicker{color:#F6C6AE}
.cover-band h1{
  margin:16px 0 0;max-width:16em;
  font-size:clamp(34px,4vw,52px);font-weight:700;
  letter-spacing:-.035em;line-height:1.08;color:#fff;
}
.cover-band h1 em{font-style:normal;color:#F9B892}
.cover-lede{
  margin:16px 0 0;max-width:36em;
  font-size:15.5px;line-height:1.8;color:rgba(255,255,255,.88);
}
.cover-actions{display:flex;align-items:center;gap:26px;margin-top:24px}
.cover-band .btn-text{color:#F6C6AE;border-bottom-color:#E9A882}
.cover-band .btn-text:hover{color:#fff;border-bottom-color:#fff}

/* 数据条：竖细线分隔，大号衬线数字 */
.stat-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:52px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.stat{padding:22px 0 20px 26px;border-left:1px solid var(--rule)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-family:var(--font-num);font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--ink-2)}

/* ---------------- 栅格：1px 缝隙就是分隔线 ----------------
   用 gap:1px + 容器底色做细线，比给每个格子写 border 稳，
   而且格子跨列（featured）时也不会错位。 */
.ph-grid{
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);
}
.ph-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.ph-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.cell{
  background:var(--paper);
  padding:24px 24px 22px;
  display:flex;flex-direction:column;
  transition:background .2s;
}
.cell:hover{background:#fff}
.cell.is-featured{grid-column:span 2}
/* 整张卡可点进详情；鼠标悬停时只把名字染色，不做浮起/阴影 —— 那会破坏杂志感 */
.cell[data-open]:hover h3{color:var(--accent)}

.cell-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cell-idx{
  font-family:var(--font-num);font-size:12px;letter-spacing:.16em;color:var(--ink-2);
}
.cell-tier{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--accent)}
.cell .ph{margin:14px 0 0}
.cell h3{
  margin:16px 0 0;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.25;
}
.cell-rows{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 16px;font-size:13px}
.cell-rows dt{color:var(--ink-2);letter-spacing:.06em}
.cell-rows dd{margin:0;color:var(--ink)}
.cell-bio{margin:14px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.cell-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{
  font-size:11.5px;letter-spacing:.08em;padding:3px 9px;
  border:1px solid var(--rule-strong);color:var(--ink-2);
}
.cell-foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;padding-top:18px;
}
.cell-time{font-size:11.5px;letter-spacing:.1em;color:var(--ink-2)}

/* 心动：默认是文字下划线，点过变成实心块 */
.heart{
  appearance:none;cursor:pointer;background:transparent;
  border:1px solid var(--rule-strong);border-radius:0;
  font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink);
  padding:9px 18px;transition:background .16s,color .16s,border-color .16s;
}
.heart:hover{border-color:var(--accent);color:var(--accent)}
.heart.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

/* 首屏精选：主编推荐位用 6/3/3 的不对称分栏，头条那张图明显更大 */
.picks{
  display:grid;grid-template-columns:6fr 3fr 3fr;
  border-top:1px solid var(--rule);margin-top:1px;
}
.pick{padding:26px 24px 22px;border-left:1px solid var(--rule);display:flex;flex-direction:column}
.pick:first-child{border-left:0;padding-left:0;padding-right:36px}
.pick:last-child{padding-right:0}
.pick h3{margin:14px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.pick.is-lead h3{font-size:27px;letter-spacing:-.03em}
.pick .meta{margin:0 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.pick .bio{margin:12px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.75}
.pick .foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.pick .foot .cell-time{font-size:11.5px;letter-spacing:.1em;color:var(--ink-2)}

/* ---------------- 日常列表（窄版，用于首屏） ---------------- */
.moment-rows{border-top:1px solid var(--rule)}
.mrow{
  display:grid;grid-template-columns:96px 1fr 130px;gap:28px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--rule);
}
.mrow .who{font-weight:700;font-size:14.5px}
.mrow .txt{margin:4px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.mrow .time{font-size:11.5px;letter-spacing:.12em;color:var(--ink-2);text-align:right}
.mrow .time span{display:block}
.mrow-cmt{margin-top:4px;color:var(--accent)}
.mrow .th{width:96px}
.mrow .th .ph{width:96px}

/* ---------------- 怎么玩 ---------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
.step{padding:24px 26px 8px 0;border-left:1px solid var(--rule);padding-left:26px}
.step:first-child{border-left:0;padding-left:0}
.step .no{
  font-family:var(--font-num);font-size:38px;font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--rule-strong);
}
.step h3{margin:12px 0 0;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.step p{margin:8px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.75}

/* ---------------- 筛选条 ---------------- */
.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;
  padding:18px 0 20px;border-bottom:1px solid var(--rule);
}
.filter-group{display:flex;align-items:center;gap:8px}
.filter-group .label{
  font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--ink-2);margin-right:6px;
}
.chip{
  appearance:none;cursor:pointer;background:transparent;
  border:1px solid var(--rule-strong);border-radius:0;
  font-size:12px;letter-spacing:.1em;color:var(--ink-2);
  padding:6px 14px;transition:.16s;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter-count{margin-left:auto;font-size:11.5px;letter-spacing:.14em;color:var(--ink-2)}

.empty{
  padding:70px 0;text-align:center;font-size:14px;color:var(--ink-2);
  border-bottom:1px solid var(--rule);
}

/* ---------------- 日常墙 ---------------- */
.composer{border:1px solid var(--rule);border-bottom:0;padding:22px 24px 20px;background:#fff}
.composer textarea{
  width:100%;border:0;background:transparent;resize:none;
  font:inherit;font-size:15px;color:var(--ink);line-height:1.75;padding:0;
}
.composer textarea::placeholder{color:var(--ink-3)}
.composer textarea:focus{outline:none}
.composer-row{display:flex;align-items:flex-end;gap:18px;margin-top:16px}
.composer .topics{display:flex;flex-wrap:wrap;gap:8px;margin-right:auto}
.composer .topics button{
  appearance:none;cursor:pointer;background:transparent;
  border:1px solid var(--rule-strong);border-radius:0;
  font-size:11.5px;letter-spacing:.08em;color:var(--ink-2);padding:5px 11px;transition:.16s;
}
.composer .topics button:hover{border-color:var(--accent);color:var(--accent)}
.composer .topics button[aria-pressed="true"]{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-deep)}

.post{border-bottom:1px solid var(--rule);padding:26px 0}
.post-head{display:flex;align-items:center;gap:13px}
.post-head .ph{width:42px;height:42px;aspect-ratio:auto;border-radius:50%;flex:0 0 auto}
.post-head .who{font-size:15px;font-weight:700}
.post-head .time{font-size:11.5px;letter-spacing:.12em;color:var(--ink-2);margin-left:auto}
.post-body{margin:16px 0 0;font-size:15.5px;line-height:1.85}
.post-body .topic{color:var(--accent);font-weight:600}
.post-media{display:grid;gap:6px;margin-top:18px}
.post-media.n2{grid-template-columns:1fr 1fr}
.post-media.n3{grid-template-columns:repeat(3,1fr)}
.post-media.n1 .ph{aspect-ratio:16/9}
.post-foot{display:flex;align-items:center;gap:26px;margin-top:18px}
.act{
  appearance:none;background:transparent;border:0;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--ink-2);
  padding:2px 0;border-bottom:1px solid transparent;transition:.16s;
}
.act:hover{color:var(--ink);border-bottom-color:var(--rule-strong)}
.act.is-on{color:var(--accent);border-bottom-color:var(--accent)}

/* 右栏：细线分隔的小块 */
.rail{position:sticky;top:170px;align-self:start}
.rail-block{border-top:3px solid var(--ink);padding-top:16px;margin-bottom:38px}
.rail-block h3{
  margin:0 0 16px;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--ink);
}
.rail-rank{list-style:none;margin:0;padding:0}
.rail-rank li{
  display:flex;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--rule);
}
.rail-rank .no{
  font-family:var(--font-num);font-size:14px;letter-spacing:.08em;color:var(--ink-2);width:20px;
}
.rail-rank .nm{font-size:13.5px;font-weight:600;flex:1;min-width:0}
.rail-rank .val{font-family:var(--font-num);font-size:15px;font-weight:700;color:var(--accent)}
.rail-rules{list-style:none;margin:0;padding:0;font-size:13px;color:var(--ink-2);line-height:1.8}
.rail-rules li{padding:8px 0;border-bottom:1px solid var(--rule)}
.rail-rules li:last-child{border-bottom:0}

/* ---------------- 排行榜 ---------------- */
.rank-list{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.rank-row{
  display:grid;grid-template-columns:78px 60px 1fr 200px 90px;
  align-items:center;gap:26px;
  padding:20px 0;border-bottom:1px solid var(--rule);
  transition:background .18s;
}
.rank-row:hover{background:#fff}
.rank-row .rk{
  font-family:var(--font-num);font-size:40px;font-weight:700;letter-spacing:-.04em;
  line-height:1;color:var(--rule-strong);
}
.rank-row.top .rk{color:var(--accent)}
.rank-row .ph{width:60px;height:60px;aspect-ratio:auto;border-radius:50%}
.rank-row .nm{font-size:18px;font-weight:700;letter-spacing:-.01em}
.rank-name{
  appearance:none;background:transparent;border:0;cursor:pointer;padding:0;
  font:inherit;font-size:18px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);text-align:left;transition:color .16s;
}
.rank-name:hover{color:var(--accent)}
.rank-row .sub{font-size:12.5px;color:var(--ink-2);letter-spacing:.06em;margin-top:4px}
.rank-bar{height:3px;background:var(--paper-2)}
.rank-bar i{display:block;height:100%;background:var(--accent)}
.rank-row .val{
  font-family:var(--font-num);font-size:30px;font-weight:700;letter-spacing:-.03em;
  text-align:right;
}

/* ---------------- 开黑约战 ----------------
   卡片内容（时间点、车上的人、出勤、动作区）全部在 base.css 里，
   这里只交代电脑版的排布：两列栅格。

   分隔线用"每张卡自己带右边框和下边框"来画，而不是老办法
   「容器铺底色 + 1px 网格间距」—— 房间数是奇数时，最后一格会空出来，
   那个格子会露出容器的底色，看上去像一大块灰斑。

   注意：这里不再给「怎么玩」定排布了。它现在整体在右侧抽屉里（base.css 的
   .guide-drawer），抽屉里一律单列；电脑版原来的三栏并排规则留着反而会打架。 */
.room-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--rule);border-bottom:0}
.room{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.room:nth-child(2n){border-right:0}
/* 发布表单展开后别拉得太宽，一行太长读起来累 */
.room-pub{max-width:780px}
.room-pub>summary{padding:18px 24px}
.room-pub form{padding:22px 24px 24px}
.room-pub-gate{padding:15px 24px 17px}

/* ---------------- 帖子详情 ---------------- */
.post-detail{max-width:760px}
.post-detail .post-media.n1 .ph{aspect-ratio:16/9}
.cmt-list{margin-top:2px}

/* ---------------- 登录 / 注册 ----------------
   左边讲"登录后有什么"，右边是表单 —— 第一次来的人往往想要一个理由，
   把理由放在左边而不是塞进表单里，表单才不会显得像在索要信息。 */
.auth{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:60px}
.auth-intro{position:sticky;top:186px}

/* ---------------- 我的 · 个人资料 ----------------
   名片分块沿用"左表单、右预览"：预览用的是心动广场里那张一模一样的卡片，
   所以"我看到的"就是"别人看到的"，不需要额外解释。 */
.me-head{padding-top:36px}
.me-card-cols{
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:56px;
}
.me-card-cols .me-preview-col{position:sticky;top:186px}
.me-card-cols .me-preview-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:3px solid var(--ink);
}
.me-card-cols .me-preview-head h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.2em}
.me-card-cols .me-preview-head .note{font-size:11.5px;letter-spacing:.14em;color:var(--ink-2)}
.me-card-cols .me-preview .ph-grid{grid-template-columns:1fr;border-top:0}
.me-card-cols .me-preview .cell.is-featured{grid-column:auto}
/* 列表行在电脑上右侧留出足够空间放动作，别挤成两行 */
.p-item{padding:16px 0}
.p-acts{min-width:150px;justify-content:flex-end}
.p-rows{grid-template-columns:120px 1fr}

/* ---------------- 名片详情 ---------------- */
.detail-back{margin-bottom:30px}
.detail-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:52px}
.detail-media{position:sticky;top:186px}

/* ---------------- 群规 / 入群 ---------------- */
.about-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin-top:6px}
.about-faq{margin-top:64px}

/* ---------------- 页脚 ---------------- */
.site-foot{border-top:1px solid var(--rule);margin-top:70px;padding:26px 0 40px}
.site-foot .wrap{display:flex;gap:24px;align-items:baseline}
.site-foot p{margin:0;font-size:11.5px;letter-spacing:.1em;color:var(--ink-2);line-height:1.9}

@media (max-width:1080px){
  .wrap{padding:0 28px}
  .grid12{gap:32px}
  .rank-row{grid-template-columns:60px 52px 1fr 120px 70px;gap:18px}
  .rank-row .rk{font-size:32px}
  /* 到这个宽度再并排就挤了，改成上下堆叠 */
  .auth,.detail-grid,.about-grid{grid-template-columns:1fr;gap:34px}
  .me-card-cols{grid-template-columns:1fr;gap:34px}
  .auth-intro,.me-card-cols .me-preview-col,.detail-media{position:static}
}