/* ============================================================
   Daily Paper · Design Tokens
   报纸/杂志设计系统 - 设计令牌
   ============================================================ */

:root {
  /* —— Colors · 色彩 —— */
  /* Paper (default 米白) */
  --paper-bg: #F5F1E8;
  --paper-bg-soft: #EFEAE0;
  --paper-bg-deep: #E8E2D4;
  --ink: #1A1A1A;
  --ink-soft: #2E2E2E;
  --ink-muted: #6B6660;
  --ink-faint: #A39E96;
  --rule: #1A1A1A;
  --rule-soft: rgba(26, 26, 26, 0.18);
  --rule-faint: rgba(26, 26, 26, 0.08);

  /* Accents */
  --vermilion: #C8483A;     /* 朱红 */
  --vermilion-deep: #9F3528;
  --prussian: #1F3A5F;      /* 普鲁士蓝 */
  --prussian-deep: #15294A;

  /* —— Breakpoints · 响应式断点 ——
     desk: A4 794 + shell padding 余量；tab: 双栏报纸下限；phone: 单栏临界
     桌面（>--bp-desk）所有 token 维持原值，所有响应式变化收在 @media 里 */
  --bp-desk: 920px;
  --bp-tab: 640px;
  --bp-phone: 420px;

  /* —— Type scale (px) · 字号（桌面值，不动） —— */
  --t-masthead: 84px;       /* 报头大字 */
  --t-headline-xl: 64px;    /* 头版头条 */
  --t-headline-lg: 48px;    /* 大标题 */
  --t-headline-md: 32px;    /* 中标题 */
  --t-headline-sm: 22px;    /* 小标题 */
  --t-deck: 20px;           /* 引言 */
  --t-lead: 18px;           /* 导语 */
  --t-body: 15px;           /* 正文 */
  --t-body-sm: 13px;        /* 小正文 */
  --t-caption: 11px;        /* 图说/注释 */
  --t-meta: 10px;           /* 元信息 */
  --t-byline: 11px;         /* 署名 */

  /* —— Type families —— */
  --font-serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", "STSong", serif;
  --font-display: "Playfair Display", "Noto Serif SC", serif;
  --font-sans: "Inter", "PingFang SC", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Menlo", monospace;

  /* —— Spacing & rhythm —— */
  --gutter: 16px;
  --col-gap: 18px;
  --row-gap: 28px;
  --rule-w: 1px;
  --rule-w-thick: 3px;

  /* —— Page (A4 @ 96dpi · 794 × 1123) ——（桌面值，不动） */
  --page-w: 794px;
  --page-h: 1123px;
  --page-pad-x: 56px;
  --page-pad-y: 48px;

  /* —— Module border —— */
  --mod-border-style: solid;
  --mod-border-width: 0px;
}

/* —— Theme: Cool white —— */
[data-theme="cool"] {
  --paper-bg: #F4F6F8;
  --paper-bg-soft: #EBEEF1;
  --paper-bg-deep: #E2E6EA;
  --ink: #14181C;
  --ink-soft: #25292E;
  --ink-muted: #5C6168;
  --ink-faint: #9098A0;
}

/* —— Theme: Newspaper yellow —— */
[data-theme="news"] {
  --paper-bg: #EFE6CE;
  --paper-bg-soft: #E5DBC0;
  --paper-bg-deep: #D9CDAD;
  --ink: #1F1A12;
  --ink-soft: #2E281C;
  --ink-muted: #6E6450;
  --ink-faint: #A6997C;
}

/* —— Theme: Dark —— */
[data-theme="dark"] {
  --paper-bg: #15140F;
  --paper-bg-soft: #1D1C16;
  --paper-bg-deep: #25241D;
  --ink: #EFEAE0;
  --ink-soft: #D9D4C9;
  --ink-muted: #948E81;
  --ink-faint: #5E594F;
  --rule: #EFEAE0;
  --rule-soft: rgba(239, 234, 224, 0.22);
  --rule-faint: rgba(239, 234, 224, 0.10);
  --vermilion: #E66A5C;
  --prussian: #6B92C5;
}

/* —— Density: Loose —— */
[data-density="loose"] {
  --col-gap: 26px;
  --row-gap: 40px;
  --page-pad-x: 72px;
  --page-pad-y: 64px;
}
/* —— Density: Tight —— */
[data-density="tight"] {
  --col-gap: 12px;
  --row-gap: 18px;
  --page-pad-x: 44px;
  --page-pad-y: 36px;
}

/* —— Border style variants —— */
[data-borders="hair"] {
  --mod-border-width: 1px;
  --mod-border-style: solid;
}
[data-borders="double"] {
  --mod-border-width: 3px;
  --mod-border-style: double;
}

/* —— Font set: Garamond (classical) —— */
[data-fontset="garamond"] {
  --font-serif: "EB Garamond", "Noto Serif SC", "Songti SC", serif;
  --font-display: "EB Garamond", "Noto Serif SC", serif;
}
/* —— Font set: Cormorant (literary) —— */
[data-fontset="cormorant"] {
  --font-serif: "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;
  --font-display: "Cormorant Garamond", "Noto Serif SC", serif;
}
/* —— Font set: Modern (Playfair + Noto) —— */
[data-fontset="modern"] {
  --font-serif: "Noto Serif SC", "Source Han Serif SC", serif;
  --font-display: "Playfair Display", "Noto Serif SC", serif;
}

/* ============================================================
   Base typography utility classes
   ============================================================ */

.dp-masthead {
  font-family: var(--font-display);
  font-size: var(--t-masthead);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--ink);
}
.dp-h-xl {
  font-family: var(--font-display);
  font-size: var(--t-headline-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}
.dp-h-lg {
  font-family: var(--font-serif);
  font-size: var(--t-headline-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}
.dp-h-md {
  font-family: var(--font-serif);
  font-size: var(--t-headline-md);
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink);
  text-wrap: balance;
}
.dp-h-sm {
  font-family: var(--font-serif);
  font-size: var(--t-headline-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.dp-deck {
  font-family: var(--font-serif);
  font-size: var(--t-deck);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-soft);
  font-style: italic;
}
.dp-lead {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}
.dp-body {
  font-family: var(--font-serif);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  text-align: justify;
  text-justify: inter-ideograph;
  hyphens: auto;
}
.dp-body-sm {
  font-family: var(--font-serif);
  font-size: var(--t-body-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}
.dp-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}
.dp-meta {
  font-family: var(--font-sans);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dp-byline {
  font-family: var(--font-sans);
  font-size: var(--t-byline);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dp-section-tag {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vermilion);
}

/* Drop cap */
.dp-dropcap::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  font-weight: 800;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.08em -0.05em 0;
  color: var(--ink);
}

/* Pull quote */
.dp-pullquote {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  text-align: center;
  padding: 18px 12px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  text-wrap: balance;
}

/* ============================================================
   Module shell
   ============================================================ */
.dp-module {
  position: relative;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, outline-color 0.15s ease;
  outline: 1px solid transparent;
  outline-offset: 4px;
}
.dp-module:hover {
  outline-color: var(--vermilion);
}
.dp-module--bordered {
  border: var(--mod-border-width) var(--mod-border-style) var(--rule);
  padding: 12px;
}

/* Section rules */
.dp-rule {
  border-top: 1px solid var(--rule);
  height: 0;
}
.dp-rule--thick { border-top-width: 3px; }
.dp-rule--double {
  border-top: 3px double var(--rule);
}
.dp-rule--vertical {
  border-left: 1px solid var(--rule-soft);
  height: 100%;
}

/* Image placeholder (Unsplash imagery dropped in via <img>) */
.dp-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--paper-bg-deep);
  filter: grayscale(0.15) contrast(1.02);
}
[data-theme="dark"] .dp-img {
  filter: grayscale(0.25) contrast(1.05) brightness(0.85);
}

.dp-img-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    var(--paper-bg-deep) 0 8px,
    var(--paper-bg-soft) 8px 16px
  );
}

/* ============================================================
   Grid system · 12 cols × N row units
   - .dp-grid           = standard row-aligned 12-col grid
   - .dp-grid--rows     = explicit row tracks (for rowSpan)
   - .dp-grid--masonry  = masonry mode (CSS grid masonry, content-driven)
   - .dp-grid--columns  = column flow (true masonry fallback / 瀑布流)
   ============================================================ */
.dp-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--row-gap) var(--col-gap);
  /* 默认按内容高度对齐：左短右长时不把短卡 stretch 到等高，
     避免下一行卡片视觉上"钻进"上行短卡的空白带。 */
  align-items: start;
}
/* Row-track grid: each row unit ≈ 80px. AI sets rowSpan to combine.
   minmax(N, auto) — 保证最小行高的视觉节奏，但内容超过 N×span 时让行自动撑开，
   否则 grid item 内部内容会溢出到 grid box 之外、视觉上盖到下一个区块。 */
.dp-grid--rows {
  /* self-sufficient display：LLM 偶尔会漏写父类 .dp-grid，单独写 .dp-grid--rows
     也要能成 grid，不然 grid-row: span N 全部失效退化成 block flow。 */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--row-gap) var(--col-gap);
  grid-auto-rows: minmax(80px, auto);
  grid-auto-flow: dense;       /* fill holes — supports irregular layouts */
  /* row tracks 模式下必须恢复 stretch，否则 grid-row: span N 的卡片不会填满 row 高度。 */
  align-items: stretch;
}
.dp-grid--rows.dp-rows-tall  { grid-auto-rows: minmax(120px, auto); }
.dp-grid--rows.dp-rows-short { grid-auto-rows: minmax(56px, auto); }

/* Masonry — modern CSS grid masonry where supported, else column fallback */
.dp-grid--masonry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--row-gap) var(--col-gap);
  grid-template-rows: masonry;
  masonry-auto-flow: pack;
}
/* Column flow fallback — true 瀑布流, 内容驱动高度。
   注意：.np-link 用 display:contents 不渲染盒子，column-flow 直接作用在
   它的子元素 article 上，所以 break-inside / margin / inline-block 必须
   写到「真正的盒子」上，否则内容会被任意切到下一列。 */
@supports not (grid-template-rows: masonry) {
  .dp-grid--masonry {
    display: block;
    column-gap: var(--col-gap);
  }
  .dp-grid--masonry > *:not(.np-link),
  .dp-grid--masonry > .np-link > * {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--row-gap);
    display: inline-block;
    width: 100%;
  }
  .dp-grid--masonry.dp-masonry-2 { column-count: 2; }
  .dp-grid--masonry.dp-masonry-3 { column-count: 3; }
  .dp-grid--masonry.dp-masonry-4 { column-count: 4; }
}

/* Composition layouts inside a single module
   左图右文 / 左文右图 / 左中右 / 上图下文 / 上文下图 */
.dp-comp {
  display: grid;
  gap: var(--col-gap);
  /* 不再用 height: 100% — grid stretch 把 article 撑到行高时，
     内部 dp-comp 用 100% 算出来的高度会从「kicker/h2/deck 之后」起算，
     最终 dp-comp 底边超过 article 边界，视觉上盖到下面的区块。
     让 dp-comp 由内容驱动高度，仍然保持子列 fr 比例。 */
}
.dp-comp--img-left   { grid-template-columns: 5fr 7fr; }
.dp-comp--img-left-sm{ grid-template-columns: 4fr 8fr; }
.dp-comp--img-right  { grid-template-columns: 7fr 5fr; }
.dp-comp--img-right-sm{grid-template-columns: 8fr 4fr; }
.dp-comp--3col       { grid-template-columns: 3fr 6fr 3fr; }
.dp-comp--3col-even  { grid-template-columns: 1fr 1fr 1fr; }
.dp-comp--img-top    { grid-template-rows: auto 1fr; }
.dp-comp--img-bottom { grid-template-rows: 1fr auto; }
.dp-comp--img-top-large { grid-template-rows: 2fr 1fr; }
.dp-comp .dp-comp__img { overflow: hidden; }
.dp-comp .dp-comp__img > img { width: 100%; height: 100%; object-fit: cover; }
.dp-comp .dp-comp__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* When module spans multiple rows, image fills full height */
.dp-fill { height: 100%; }
.dp-fill > img, .dp-fill > .dp-img { height: 100%; }

/* Page surface */
.dp-page {
  width: var(--page-w);
  min-height: var(--page-h);
  background: var(--paper-bg);
  color: var(--ink);
  padding: var(--page-pad-y) var(--page-pad-x);
  font-family: var(--font-serif);
  position: relative;
  background-image:
    radial-gradient(rgba(0,0,0,0.018) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ============================================================
   Newspaper "true" irregular layout
   - .np-cols-N    : N-column flow inside a region (text re-flows)
   - .np-frame     : shares vertical rules between siblings
   - .np-hang      : item that breaks out of the col flow & floats
   - .np-jump      : continuation marker
   - .np-block     : module surrounded by hairline rules above/below
   - .np-rule-v    : vertical hairline between columns
   ============================================================ */
.np-region {
  position: relative;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 14px 0 18px;
  margin-top: 22px;
}
.np-region__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}
.np-cols-2 { column-count: 2; column-gap: 22px; column-rule: 1px solid var(--rule-soft); }
.np-cols-3 { column-count: 3; column-gap: 18px; column-rule: 1px solid var(--rule-soft); }
.np-cols-4 { column-count: 4; column-gap: 16px; column-rule: 1px solid var(--rule-soft); }
.np-cols-5 { column-count: 5; column-gap: 14px; column-rule: 1px solid var(--rule-soft); }
.np-cols > * { break-inside: avoid; -webkit-column-break-inside: avoid; }

/* Item that hangs across the column flow — like a pulled-out figure */
.np-hang {
  break-inside: avoid;
  margin: 8px 0 14px;
  display: block;
}
.np-hang--full {
  column-span: all;
  margin: 14px 0 18px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Brief 卡片 — 不加顶部横线，依靠 kicker 色 + 标题字重自然分隔 */
.np-item { break-inside: avoid; margin-bottom: 14px; }
.np-item__head {
  margin-bottom: 6px;
}
.np-item__head--thick {
  /* 历史 class，保留为 no-op；以前用作加粗顶线的视觉强调 */
}
.np-item__kicker { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vermilion); margin-bottom: 4px; }
.np-item__h { font-family: var(--font-serif); margin: 0 0 6px; font-weight: 700; line-height: 1.18; }
.np-item__h--xl { font-size: 30px; line-height: 1.05; }
.np-item__h--lg { font-size: 22px; }
.np-item__h--md { font-size: 17px; }
.np-item__h--sm { font-size: 14px; }

/* Below-the-fold horizontal split */
.np-fold {
  border-top: 3px solid var(--ink);
  margin-top: 24px; padding-top: 16px;
  position: relative;
}
.np-fold::before {
  content: '— FOLD —';
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--paper-bg); padding: 0 10px;
  font-family: var(--font-mono); font-size: 9px; color: var(--ink-faint);
  letter-spacing: 0.2em;
}

/* Wrap text around an image */
.np-figfloat-l { float: left; width: 48%; margin: 4px 16px 8px 0; shape-outside: margin-box; }
.np-figfloat-r { float: right; width: 48%; margin: 4px 0 8px 16px; shape-outside: margin-box; }
.np-figfloat-l img, .np-figfloat-r img { width: 100%; display: block; }
.np-figfloat-l figcaption, .np-figfloat-r figcaption {
  font-family: var(--font-sans); font-size: 10px; color: var(--ink-muted);
  margin-top: 4px; line-height: 1.45;
}
.np-clearfix::after { content: ''; display: table; clear: both; }
[data-theme="dark"] .dp-page {
  background-image:
    radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
}

/* ============================================================
   Responsive degradation · 响应式退化
   策略：保留报纸语言，按内容驱动逐档摊开。
   - ≤920 (--bp-desk)：A4 纸张摊成全宽长条，padding 收缩
   - ≤640 (--bp-tab)：12-col 降到 6-col；多栏文字流降到 2 列；dp-comp 拆栈
   - ≤420 (--bp-phone)：12-col 单栏；多栏文字流单列；浮动图取消
   inline style 上的 grid-column: span N 必须 !important 覆盖。
   ============================================================ */

/* —— ≤920：A4 摊开 + 字号/边距改 fluid —— */
@media (max-width: 920px) {
  /* 字号 token 切换为 fluid，桌面值作为 max */
  :root {
    --t-masthead: clamp(48px, 9vw, 84px);
    --t-headline-xl: clamp(36px, 7.2vw, 64px);
    --t-headline-lg: clamp(28px, 5.4vw, 48px);
    --t-headline-md: clamp(22px, 3.6vw, 32px);
    --t-headline-sm: clamp(18px, 2.6vw, 22px);
    --t-deck: clamp(16px, 2.4vw, 20px);
    --t-lead: clamp(15px, 2.1vw, 18px);
    --t-body: clamp(15px, 1.8vw, 16px);
    --page-pad-x: clamp(16px, 4vw, 56px);
    --page-pad-y: clamp(24px, 4vw, 48px);
  }
  /* A4 纸面摊开成全宽长条，box-sizing 切 border-box 防 padding 溢出 */
  .dp-page {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--page-w);
  }
  /* 桌面 absolute 定位的页眉品牌字与右上日期，在窄屏改为静态行 */
  .dp-page::before,
  .dp-page > header:first-child {
    position: static;
  }
  .dp-page > header:first-child {
    margin-bottom: 8px;
  }
}

/* —— ≤640：双栏报纸 —— */
@media (max-width: 640px) {
  /* 12-col grid 在中档先收成 6-col，让 span 6 自然变 "半栏"，span 12 占满 */
  .dp-grid,
  .dp-grid--rows,
  .dp-grid--masonry {
    grid-template-columns: repeat(6, 1fr);
  }
  /* span N (N>6) inline style 一律占满；fallback 列流也降级 */
  .dp-grid > [style*="span 12"],
  .dp-grid > [style*="span 11"],
  .dp-grid > [style*="span 10"],
  .dp-grid > [style*="span 9"],
  .dp-grid > [style*="span 8"],
  .dp-grid > [style*="span 7"],
  .dp-grid--rows > [style*="span 12"],
  .dp-grid--rows > [style*="span 11"],
  .dp-grid--rows > [style*="span 10"],
  .dp-grid--rows > [style*="span 9"],
  .dp-grid--rows > [style*="span 8"],
  .dp-grid--rows > [style*="span 7"] {
    grid-column: 1 / -1 !important;
  }

  /* 多栏文字流：3/4/5 → 2 列 */
  .np-cols-3,
  .np-cols-4,
  .np-cols-5 {
    column-count: 2;
    column-gap: 16px;
  }

  /* dp-comp 横向布局拆成纵向：图在上文在下 */
  .dp-comp--img-left,
  .dp-comp--img-left-sm,
  .dp-comp--img-right,
  .dp-comp--img-right-sm,
  .dp-comp--3col,
  .dp-comp--3col-even {
    grid-template-columns: 1fr;
  }
  /* 让原本在右的图在窄屏移到上方（视觉权重靠前） */
  .dp-comp--img-right .dp-comp__img,
  .dp-comp--img-right-sm .dp-comp__img {
    order: -1;
  }

  /* masonry fallback 在窄屏降到 2 列 */
  @supports not (grid-template-rows: masonry) {
    .dp-grid--masonry.dp-masonry-3,
    .dp-grid--masonry.dp-masonry-4 { column-count: 2; }
  }

  /* PullQuote 在窄屏字号收一点 */
  .dp-pullquote { font-size: 22px; padding: 14px 8px; }
}

/* —— ≤420：单栏 —— */
@media (max-width: 420px) {
  /* 12-col grid 全部一栏 */
  .dp-grid,
  .dp-grid--rows,
  .dp-grid--masonry {
    grid-template-columns: 1fr;
  }
  /* 一刀切：所有 span 全部占满 */
  .dp-grid > [style*="span"],
  .dp-grid--rows > [style*="span"] {
    grid-column: 1 / -1 !important;
  }

  /* 多栏文字流 → 单列；隐藏列分隔线 */
  .np-cols-2,
  .np-cols-3,
  .np-cols-4,
  .np-cols-5 {
    column-count: 1;
    column-rule: none;
  }

  /* 浮动图取消，回归 block flow */
  .np-figfloat-l,
  .np-figfloat-r {
    float: none;
    width: 100%;
    margin: 12px 0;
  }

  /* masonry fallback 单列 */
  @supports not (grid-template-rows: masonry) {
    .dp-grid--masonry.dp-masonry-2,
    .dp-grid--masonry.dp-masonry-3,
    .dp-grid--masonry.dp-masonry-4 { column-count: 1; }
  }

  /* drop cap 在极窄屏字号收一档，避免压住正文 */
  .dp-dropcap::first-letter { font-size: 3.6em; }

  /* fold 装饰标记在极窄屏隐去（背景纸太窄文字会撞） */
  .np-fold::before { display: none; }
}