/* ============================================================================
 * art.css —— 名画资源层（本轮视觉重做的主体）
 *
 * 设计意图：把「白底圆角卡片 + 手绘矢量」换成**画册**。
 *   真名画自带笔触、岁月与色彩，是手绘 SVG 达不到的；而且它们本来就是
 *   中文学习最好的视觉教材（千里江山图、清明上河图、兰亭序…）。
 *
 * 图片来源与授权：全部公共领域（Wikimedia Commons，作者逝世逾百年），
 *   清单与授权字段见 data/art-manifest.json，致谢列在「关于」页。
 *   生成管线：devtools/fetch-art.js → devtools/make-art.js。
 *
 * 三条纪律：
 *   ① 装饰性背景（hero / banner / band）用 CSS var(--art) 注入 url，
 *      因为同一个类要配不同的画；内容性图片（卡片 / 配诗 / 致谢）用真实
 *      <img> + alt，可懒加载、可无障碍朗读。
 *   ② 图上是**必须有文字的**，所以每张装饰图都压一层纸色蒙版（scrim），
 *      蒙版用 var(--paper)，于是 4 皮肤 × 明暗自动适配 —— 暗色下蒙版变暗，
 *      不会出现「亮画 + 浅字」这种读不了的组合。
 *   ③ 装饰不许抢内容：满铺底纹 ≤0.06、分隔带淡出两端、所有装饰不拦点击。
 * ========================================================================== */

/* ---------- 通用：装饰图的蒙版与淡出 ---------- */
:root {
  --art-redge: 16%;          /* 分隔带两端淡出宽度 */
}

/* ==========================================================================
   1. 首页英雄区：整幅名画做底，文字压在左侧的纸色渐隐上
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  min-height: clamp(19rem, 33vw, 26rem);
  display: grid;
  align-content: center;
  padding: clamp(1.4rem, 3.4vw, 2.6rem) clamp(1.1rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-card);
}
/* 画：铺满，居中裁切（background-size:cover 不拉伸） */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--art);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  z-index: 0;
}
/* 蒙版：左侧读文字、右侧看画；底部再融进页面底色，避免「贴上去的一张图」。
   ★ 右侧只轻轻压 24% 透明度为止 —— 上一版蒙版太厚，画被洗成一片灰白，
   截图里英雄区看起来「背景是一块脏白布」。 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 14%, transparent 34%),
    linear-gradient(to right,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 94%, transparent) 24%,
      color-mix(in srgb, var(--paper) 70%, transparent) 42%,
      color-mix(in srgb, var(--paper) 28%, transparent) 62%,
      transparent 76%);
  z-index: 1;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 2; }
/* 英雄区里的正文宽度收窄一点，别伸出蒙版之外 */
.hero h1, .hero .lead { max-width: min(46rem, 60%); }
.hero .lead { color: var(--ink-2); }

/* 窄屏：画退为「上一条带 + 下面纸色」，文字不再压在画上（手机上文字区太窄，
   硬压上去两边都读不好）。 */
@media (max-width: 47.99rem) {
  .hero { min-height: 0; padding-top: clamp(8rem, 46vw, 11rem); }
  .hero::before { background-position: center 26%; }
  .hero::after {
    background:
      linear-gradient(to top, var(--paper) 46%, color-mix(in srgb, var(--paper) 72%, transparent) 62%, transparent 84%);
  }
  .hero h1, .hero .lead { max-width: none; }
}

/* ==========================================================================
   2. 内页页头 banner（4.5:1 名画压 h1 之后）
   ========================================================================== */
.ptop {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  margin: 0 0 clamp(1.1rem, 2.6vw, 1.8rem);
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1rem, 2.6vw, 1.9rem);
  min-height: clamp(7.5rem, 17vw, 12rem);
  display: grid;
  align-content: center;
  background: var(--paper-2);
}
.ptop::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--art);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* 内页 banner 是**题画**：文字压在画上，所以蒙版比英雄区更厚、更均匀 —— 标题必须清楚 */
.ptop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 62%, transparent) 34%, transparent 76%),
    linear-gradient(to right, color-mix(in srgb, var(--paper) 88%, transparent) 0%,
      color-mix(in srgb, var(--paper) 48%, transparent) 52%, color-mix(in srgb, var(--paper) 20%, transparent) 100%);
  z-index: 1;
  pointer-events: none;
}
.ptop > * { position: relative; z-index: 2; }
.ptop > h1 { margin: 0; }
.ptop > .lead { margin: .45rem 0 0; max-width: 46rem; color: var(--ink-2); }

/* ==========================================================================
   3. 分隔带（名画画板：整幅横向展开，细边框装裱，不做「一条缝」）
   旧版是 8:1 细条 + 两端淡出 + 低透明度 —— 实际渲染出来像「图片只加载了一截」。
   现在按画板处理：4:1 高度、1px 画框、不透明，读起来是「一幅装裱的横画」。 */
.artband {
  position: relative;
  height: auto;
  aspect-ratio: 4 / 1;
  max-height: clamp(7rem, 16vw, 10.5rem);
  margin: clamp(1.4rem, 3vw, 2.2rem) 0;
  background-color: var(--paper-2);
  background-image: var(--art);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  pointer-events: none;
}
[data-theme="dark"] .artband { opacity: .82; }

/* ==========================================================================
   4. 工具卡：卡顶一张名画缩略图
   ========================================================================== */
.cards .card--tool {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-art {
  display: block;
  width: 100%;
  aspect-ratio: 640 / 416;
  height: auto;
  object-fit: cover;
  background: var(--paper);
  border-block-end: 1px solid var(--line);
  /* 卡里的图不要比卡亮太多，否则整页像贴满贴纸 */
  opacity: .94;
  transition: opacity .16s ease, transform .25s ease;
}
.cards .card--tool:hover .card-art { opacity: 1; transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .cards .card--tool:hover .card-art { transform: none; } }
.card-b {
  padding: .85rem 1.05rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1 1 auto;
}
.card-b .kicker { margin: 0; }
.card-b h3 { margin: 0; }
.card-b p { margin: 0; }

/* ==========================================================================
   5. 每日一读：美术馆墙面式排版 —— 宽屏画左文右，窄屏上下
   ========================================================================== */
.poem-fig {
  margin: 0 0 1rem;
  display: grid;
  gap: .45rem;
}
@media (min-width: 48rem) {
  .poem { display: grid; grid-template-columns: minmax(0, 30rem) 1fr; gap: .35rem 1.4rem; align-items: center; }
  .poem-fig { grid-column: 1; grid-row: 1 / 7; margin: 0; align-self: center; }
  .poem > .line, .poem > .py, .poem > .gloss, .poem > .poem-src, .poem > .row { grid-column: 2; }
}
.poem-art {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-inline: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
/* 展签：右对齐小字「题名 · 作者」——博物馆里就是这么标的 */
.poem-cap {
  margin: 0;
  text-align: right;
  font-size: .74rem;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ==========================================================================
   6. 节日配画（英雄区左侧栏内联，不再绝对定位去压画）
   ========================================================================== */
.fest {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .7rem;
  width: fit-content;
  padding: .35rem .7rem .35rem .35rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-2) 88%, transparent);
  backdrop-filter: none;
  pointer-events: none;
}
.fest-art {
  display: block;
  width: 3.1rem;
  height: 2.3rem;
  object-fit: cover;
  border-radius: 999px;
  flex: 0 0 auto;
}
.fest-txt { display: grid; gap: 0; }
.fest-name {
  margin: 0;
  font-family: var(--serif, serif);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--brand);
  line-height: 1.25;
}
.fest-motto {
  margin: 0;
  font-size: .7rem;
  color: var(--muted);
  line-height: 1.3;
}
@media (max-width: 47.99rem) {
  .fest { width: 100%; border-radius: var(--radius-lg); }
  .fest-art { width: 2.6rem; height: 2rem; border-radius: var(--radius-sm); }
  .fest-name { font-size: .92rem; }
}

/* ==========================================================================
   7. 关于页：名画来源（也是版权的书面凭证）
   ========================================================================== */
.artgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.artgrid li {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
}
.credit-art {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  background: var(--paper);
  border-block-end: 1px solid var(--line);
}
.artmeta { padding: .6rem .7rem .75rem; display: grid; gap: .16rem; }
.artmeta b { font-size: .9rem; color: var(--ink); font-weight: 600; }
.artmeta span { font-size: .74rem; color: var(--muted); line-height: 1.45; }
.artmeta a { font-size: .72rem; }
.artpolicy {
  margin: .9rem 0 0;
  padding: .7rem .9rem;
  border-inline-start: 3px solid var(--celadon);
  background: color-mix(in srgb, var(--celadon) 8%, transparent);
  border-radius: var(--radius-sm);
  font-size: .84rem;
  color: var(--ink-2);
}

/* ==========================================================================
   8. 页脚：一条横画压底（与分隔带同款画板语言，稍矮）
   ========================================================================== */
.foot-art {
  height: auto;
  aspect-ratio: 6 / 1;
  max-height: clamp(5rem, 11vw, 7.5rem);
  margin-block-end: 1.2rem;
  background-color: var(--paper-2);
  background-image: var(--art);
  background-size: cover;
  background-position: center 60%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  opacity: .92;
  pointer-events: none;
}
[data-theme="dark"] .foot-art { opacity: .7; }

/* ==========================================================================
   9. 无 JS / 打印 / 高对比 降级
   ========================================================================== */
/* 装饰层在打印时必须消失：纸上是读不出渐变蒙版下的标题的 */
@media print {
  .hero::before, .hero::after, .ptop::before, .ptop::after,
  .artband, .foot-art { display: none; }
  .hero, .ptop { min-height: 0; border: 0; padding: 0 0 .5rem; background: none; box-shadow: none; }
}
@media (forced-colors: active) {
  .hero::before, .hero::after, .ptop::before, .ptop::after,
  .artband, .foot-art { display: none; }
  .hero, .ptop { background: Canvas; }
}
/* 图没加载出来时也不能是空洞：给个纸色底 + 细边框（img 自带 background） */