/**
 * 沸点日报 · Puck 像素级重开 · 移动（独立 DOM，非缩桌面）
 * 硬数字 §F：
 *   顶栏盒高 78px（内 logo 槽 42）· 仅字标+汉堡 · §F
 *   英雄从 y=78 高≈633 · 题盒 343×144（40/48）· 上图下色 · §F
 *   岛/垂直宽 328 · 岛题 ≈30 · 栏名 20/24 · 作者 12 · §F
 *   垂直单列 · CTA 通栏 · 可选回顶胶囊
 *   色 paper#FFF ink#0A0A0A boil#E85D04
 */

.type-note { /* 移动§F：顶栏78/logo42 · 英雄≈633 · 题盒343×144 · 宽328 · 字阶40/30/20/12 */ }

:root {
  --paper: #FFFFFF;
  --ink: #0A0A0A;
  --ink-muted: #525252;
  --ink-faint: #737373;
  --boil: #E85D04;
  --boil-hover: #D45103;
  --boil-ink: #9A3B02;
  --rule: rgba(10, 10, 10, 0.10);
  --nav-h: 78px; /* 顶栏盒高 78 · §F；内 logo 槽 42 */
  --logo-slot-h: 42px;
  --r-card: 4px;
  --gutter: 16px;
  --content-w: 328px; /* 岛/垂直内容宽 328 · §F */
  --hero-h: 633px; /* 英雄高约 633 · §F */
  --hero-title-box-w: 343px;
  --hero-title-box-h: 144px; /* 题盒 343×144 · §F */
  --font-sans: "Inter", "PingFang SC", "Noto Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC",
    "SimSun", Georgia, "Times New Roman", serif;
  --fs-hero: 40px;
  --lh-hero: 48px;
  --fs-island: 30px; /* title-6 · §F 非40 */
  --lh-island: 36px;
  --fs-rail-title: 20px;
  --lh-rail-title: 24px;
  --fs-story: 20px;
  --lh-story: 24px;
  --fs-author: 12px;
  --fs-dek: 16px;
  --lh-dek: 19px;
  --fs-eyebrow: 18px;
  --lh-eyebrow: 22px;
  --fs-section: 36px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  max-width: 375px;
  margin: 0 auto;
}
a { color: inherit; text-decoration: none; }
a:not(.no-underline):hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

.photo-tint { position: relative; overflow: hidden; background: #1a1a1a; }
.photo-tint img, .photo-tint .photo-fallback {
  width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block;
}
.photo-tint::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(rgba(10, 10, 10, 0.12), rgba(10, 10, 10, 0.28));
  pointer-events: none;
}
.photo-fallback {
  min-height: 100px;
  background: linear-gradient(135deg, #3a3a3a, #1a1a1a);
}

/* ========== 顶栏：仅字标+汉堡 · 42px · 不塞图标 ========== */
.site-nav {
  /* §F：顶栏盒高 78；内 logo 槽 42（约 y=20 起） */
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h); /* 78px */
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--boil);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.site-nav .logo-mark {
  height: var(--logo-slot-h); /* 42 */
  display: flex;
  align-items: center;
  line-height: 1;
}
.site-nav .btn-burger {
  /* 汉堡触控区贴近对标盒高体感 */
  width: 40px;
  height: 40px;
}
.logo-mark {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink); /* #0A0A0A · 整字不再用 boil */
  letter-spacing: 0.02em;
}
.logo-rule {
  position: relative;
  display: inline-block;
}
.logo-rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: #E85D04;
}
.btn-burger {
  width: 32px; height: 32px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: var(--r-card);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
}
.btn-burger span {
  display: block; width: 14px; height: 1.5px; background: var(--ink);
}

/* 全屏菜单 */
.menu-full {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  padding: 16px;
  overflow-y: auto;
}
.menu-full.is-open { display: block; }
.menu-full-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.menu-close {
  width: 36px; height: 36px; border: 1px solid var(--rule);
  background: #fff; border-radius: var(--r-card); font-size: 20px; cursor: pointer;
}
.menu-ctas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;
}
.btn-login, .btn-subscribe {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px; text-align: center; border-radius: var(--r-card);
  display: block;
}
.btn-login {
  border: 1px solid var(--boil); background: #fff; color: var(--ink);
}
.btn-subscribe {
  border: 1px solid var(--boil); background: var(--boil); color: #fff;
}
.menu-search {
  width: 100%; border: 0; border-bottom: 1px solid var(--ink);
  padding: 10px 0; margin-bottom: 20px; font-size: 15px; outline: none;
  font-family: var(--font-sans);
}
.menu-cats { list-style: none; }
.menu-cats li { border-bottom: 1px solid var(--rule); }
.menu-cats a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0; text-decoration: none;
}
.menu-cats svg { width: 40px; height: 40px; flex-shrink: 0; color: var(--ink); }
.menu-cats .cat-name {
  font-family: var(--font-serif);
  font-size: 26px; /* 移动菜单栏名档 */
  font-weight: 700;
  flex: 1;
}
.menu-cats .arrow { color: var(--ink-faint); font-size: 18px; }

/* ========== 英雄：上图 3:2 · 下满宽 boil 白字 · 贴顶栏 ========== */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 633px; /* 顶栏 78 之下，英雄体感 ≈633 · §F */
  margin: 0;
  color: #fff;
  text-decoration: none;
  background: var(--boil);
}
.hero:hover { text-decoration: none; }
.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  overflow: hidden;
  background: #141414;
}
.hero-media.photo-tint img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.hero-copy {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  background: var(--boil);
  padding: 20px 16px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
}
.hero-title {
  font-family: var(--font-serif);
  font-size: 40px; /* §F */
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  /* 题盒宽 343。不裁切，长题自然加行 */
  width: 343px;
  max-width: 100%;
  max-height: none;
  overflow: visible;
  margin: 0;
}
.hero-meta { display: flex; align-items: center; gap: 10px; }
.hero-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #2a2a2a;
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.hero-author {
  font-size: var(--fs-author); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
}
.hero-dek {
  font-size: var(--fs-dek); line-height: var(--lh-dek); color: #fff;
}

/* ========== 编辑精选：细边岛，不是第二条满版英雄 ========== */
.spotlight {
  padding: 20px 0 0;
  background: var(--paper);
}
.spotlight .island,
.rails .rail,
.section {
  width: min(100%, var(--content-w)); /* 328 · §F */
  margin-left: auto;
  margin-right: auto;
}
.island {
  display: block;
  border: 1px solid #dadae5;
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
}
.island:hover { text-decoration: none; }
.island-media { aspect-ratio: 16 / 9; position: relative; }
.island-body { padding: 14px 16px 16px; }
.island-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.island-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--boil-ink); margin-bottom: 8px;
}
.island-title {
  font-family: var(--font-serif);
  font-size: var(--fs-island); /* 30px · §F */
  line-height: var(--lh-island);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.island-author {
  font-size: var(--fs-author); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--boil);
}

/* ========== 单列：列内紧，块间松 ========== */
.rails {
  padding: 22px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.rail-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--boil);
  text-decoration: none;
}
.rail-head svg { width: 22px; height: 22px; color: var(--ink); }
.rail-name {
  font-family: var(--font-serif);
  font-size: var(--fs-rail-title); /* 20px */
  line-height: var(--lh-rail-title); /* 24px */
  font-weight: 700; color: var(--boil-ink);
}
.rail-lead {
  display: grid; grid-template-columns: 140px 1fr; gap: 10px;
  padding-bottom: 8px; text-decoration: none; align-items: start;
}
.rail-lead .thumb { width: 140px; height: 92px; border-radius: 2px; }
.story-title {
  font-family: var(--font-serif);
  font-size: var(--fs-story); line-height: var(--lh-story);
  font-weight: 400; color: var(--ink);
}
.story-author {
  font-size: var(--fs-author); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--boil); margin-top: 6px;
}
.rail-row {
  display: block; padding: 12px 0 11px;
  border-top: 1px solid #e6e6e6; text-decoration: none;
}
.rail-head + .rail-row { border-top: 0; padding-top: 2px; }
.crop-a img { object-position: 18% 30%; }
.crop-b img { object-position: 72% 24%; }
.crop-c img { object-position: 40% 70%; }
.crop-d img { object-position: 84% 40%; }

/* 分区头 */
.section {
  padding: 24px var(--gutter) 8px;
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; padding-bottom: 10px;
  border-bottom: 3px solid var(--ink); margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-section); line-height: 1.15;
  font-weight: 700; color: var(--boil);
}
.btn-see-all {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 8px 12px;
  border: 1px solid var(--boil); color: var(--boil);
  border-radius: var(--r-card); white-space: nowrap;
}
.flash-item, .depth-item {
  display: block; padding: 16px 0;
  border-top: 1px solid var(--rule); text-decoration: none;
}
.sponsor-note {
  font-size: 11px; color: var(--ink-faint); margin-top: 6px;
}

/* ========== 通栏 CTA ========== */
.inbox-bar {
  width: min(100%, var(--content-w)); /* 328 · §F */
  margin-left: auto;
  margin-right: auto;
  padding: 24px var(--gutter) 32px;
  border-top: 1px solid var(--rule);
  box-sizing: border-box;
}
.inbox-copy {
  font-family: var(--font-serif);
  font-size: 20px; line-height: 1.35;
  color: var(--ink); margin-bottom: 16px;
}
.inbox-bar .btn-subscribe {
  width: 100%; /* 通栏 */
  padding: 14px;
}

/* 回顶胶囊 */
.back-top {
  display: flex; justify-content: center;
  padding: 0 var(--gutter) 16px;
  margin-top: -8px;
}
.back-top a {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--boil); color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 999px;
  text-decoration: none;
}

.site-footer {
  background: #0A0A0A; color: rgba(255,255,255,0.75);
  padding: 32px 16px 40px; text-align: center;
}
.footer-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; list-style: none; margin-bottom: 12px;
}
.footer-links a {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.footer-copy { font-size: 10px; color: rgba(255,255,255,0.4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ——— 落地补强 ——— */
:root {
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
}
#flash, #depth, #inbox { scroll-margin-top: 88px; }
.menu-full.is-open { display: block !important; }
.island-media.photo-tint img,
.thumb.photo-tint img { position: absolute; inset: 0; width: 100%; height: 100%; }
.rail-empty { font-size: 14px; color: var(--ink-muted); padding: 4px 0 8px; }
.hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.inbox-form { display: block; }
.inbox-email, .inbox-consent { display: block; font-size: 12px; color: var(--ink-muted); margin-bottom: 12px; }
.inbox-email input {
  display: block; width: 100%; margin-top: 4px;
  border: 0; border-bottom: 1px solid var(--ink);
  padding: 10px 0; font: inherit; background: transparent; border-radius: 0;
}
.inbox-consent { display: flex; gap: 8px; align-items: flex-start; }
.sponsor-note a { color: var(--boil); font-weight: 700; }
.section .btn-see-all { display: inline-block; }