/* ============================================================================
 * 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;
}
/* 蒙版：左侧读文字、右侧看画；底部再融进页面底色，避免「贴上去的一张图」 */
.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) 92%, transparent) 26%,
      color-mix(in srgb, var(--paper) 62%, transparent) 46%,
      color-mix(in srgb, var(--paper) 18%, transparent) 66%,
      transparent 84%);
  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. 分隔带（名画细条，两端淡出）
   ========================================================================== */
.artband {
  position: relative;
  height: clamp(3.2rem, 7.5vw, 5.6rem);
  margin: clamp(1.4rem, 3vw, 2.2rem) 0;
  background-color: var(--paper-2);
  background-image: var(--art);
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-sm);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 var(--art-redge), #000 calc(100% - var(--art-redge)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 var(--art-redge), #000 calc(100% - var(--art-redge)), transparent 100%);
  opacity: .72;
  pointer-events: none;
}
[data-theme="dark"] .artband { opacity: .5; }

/* ==========================================================================
   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;
}
.poem-art {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-inline: auto;
  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: center;
  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: clamp(3rem, 7vw, 5rem);
  margin-block-end: 1rem;
  background-color: var(--paper-2);
  background-image: var(--art);
  background-size: cover;
  background-position: center 60%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  opacity: .6;
  pointer-events: none;
}
[data-theme="dark"] .foot-art { opacity: .42; }

/* ==========================================================================
   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） */