/* =====================================================================
 * deco.css — HanPath 中国风装饰层（插画级矢量 · 随皮肤换色）
 *
 * 核心技法（CSS 自定义属性无法插值进 url()，故形状与颜色必须分离）：
 *   · 形状 = mask-image 的 data: SVG（灰阶/带 alpha，用 fill-opacity 表达浓淡）
 *   · 颜色 = background-color: var(--token)（一份资源自动适配 8 组皮肤）
 * 水墨浓淡用「alpha 遮淡」实现：远山 fill-opacity 浅、近山浓、留白为雾，
 * 不需要 mask-mode（alpha 遮罩全浏览器可靠）。feTurbulence 仅用于 hero
 * 那一层的一缕雾气，且放在独立 <g> 上——即便滤镜不被支持，主体山脉
 * 仍在（退回平滑贝塞尔曲线）。
 *
 * 装饰一律不挡正文、可降级：
 *   · 满铺底纹 opacity ≤ 0.06；分隔/边框纹 ≤ 0.12；其余 ≤ 0.14
 *   · 定位全部用逻辑属性（inset-inline-* / inset-block-* / margin-inline*）
 *   · 一份装饰资源适配 8 组皮肤（形状在 mask，颜色取自 token）
 *   · @media print / forced-colors → 装饰 display:none
 *   · @media (prefers-reduced-motion: reduce) → 不加任何动画
 * ===================================================================== */

/* ---------- 整页底纹 ①：青海波（水波纹，同心弧平铺） ---------- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color: var(--line-2);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='24'%20viewBox='0%200%2048%2024'%3E%3Cpath%20d='M0%2024%20A24%2024%200%200%201%2048%2024%20M6%2024%20A18%2018%200%200%201%2042%2024%20M12%2024%20A12%2012%200%200%201%2036%2024%20M18%2024%20A6%206%200%200%201%2030%2024%20M24%2024%20A24%2024%200%200%200%200%2024%20M24%2024%20A18%2018%200%200%200%206%2024%20M24%2024%20A12%2012%200%200%200%2012%2024%20M24%2024%20A6%206%200%200%200%2018%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='24'%20viewBox='0%200%2048%2024'%3E%3Cpath%20d='M0%2024%20A24%2024%200%200%201%2048%2024%20M6%2024%20A18%2018%200%200%201%2042%2024%20M12%2024%20A12%2012%200%200%201%2036%2024%20M18%2024%20A6%206%200%200%201%2030%2024%20M24%2024%20A24%2024%200%200%200%200%2024%20M24%2024%20A18%2018%200%200%200%206%2024%20M24%2024%20A12%2012%200%200%200%2012%2024%20M24%2024%20A6%206%200%200%200%2018%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.4'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 48px 24px;
  mask-size: 48px 24px;
  opacity: 0.05;
}

/* ---------- 整页底纹 ②（自选·冰裂纹）：低透明宣纸/瓷器冰裂质感 ---------- */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color: var(--line-2);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%20viewBox='0%200%20120%20120'%3E%3Cpath%20d='M0%2030%20L24%2022%20L40%2040%20L30%2064%20L48%2080%20L40%20104%20L60%20120%20M24%2022%20L44%2010%20L70%2018%20L84%204%20L96%2022%20M48%2080%20L72%2072%20L88%2092%20L110%2084%20L120%20100%20L120%2064%20M40%2040%20L18%2050%20L8%2044%20M70%2018%20L92%2030%20L108%2020%20L120%2030%20M84%204%20L100%200%20M60%20120%20L80%20110%20L104%20120%20M110%2084%20L120%2092'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%20viewBox='0%200%20120%20120'%3E%3Cpath%20d='M0%2030%20L24%2022%20L40%2040%20L30%2064%20L48%2080%20L40%20104%20L60%20120%20M24%2022%20L44%2010%20L70%2018%20L84%204%20L96%2022%20M48%2080%20L72%2072%20L88%2092%20L110%2084%20L120%20100%20L120%2064%20M40%2040%20L18%2050%20L8%2044%20M70%2018%20L92%2030%20L108%2020%20L120%2030%20M84%204%20L100%200%20M60%20120%20L80%20110%20L104%20120%20M110%2084%20L120%2092'%20fill='none'%20stroke='%23000'%20stroke-width='1'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 120px 120px;
  mask-size: 120px 120px;
  opacity: 0.05;
}

/* ---------- 分隔线：回纹 / 雷纹（repeat-x） ---------- */
hr.rule{
  border: 0;
  height: 10px;
  margin-block: var(--space);
  background-color: var(--line-2);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='14'%20viewBox='0%200%2056%2014'%3E%3Cpath%20d='M0%2013%20V2%20H8%20V13%20H4%20V6%20H6%20M10%2013%20V2%20H18%20V13%20H14%20V6%20H16%20M20%2013%20V2%20H28%20V13%20H24%20V6%20H26%20M30%2013%20V2%20H38%20V13%20H34%20V6%20H36%20M40%2013%20V2%20H48%20V13%20H44%20V6%20H46%20M50%2013%20V2%20H56'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='14'%20viewBox='0%200%2056%2014'%3E%3Cpath%20d='M0%2013%20V2%20H8%20V13%20H4%20V6%20H6%20M10%2013%20V2%20H18%20V13%20H14%20V6%20H16%20M20%2013%20V2%20H28%20V13%20H24%20V6%20H26%20M30%2013%20V2%20H38%20V13%20H34%20V6%20H36%20M40%2013%20V2%20H48%20V13%20H44%20V6%20H46%20M50%2013%20V2%20H56'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  opacity: 0.12;
}

/* ---------- 英雄区：水墨山水（3 层山脊 + 留白为雾 + 一枚日月圆盘） ---------- */
.hero{ position: relative; }

/* ---------- 英雄区：水墨山水（位图插画） ----------
 * ★ 用位图而不是 data URI 矢量：用户点名「极简剪影不是插画级美术」。
 *   墨晕、雾的渐变、山体体积、孤舟蓑翁这些质感在 320×200 的小 URI 里画不出来。
 *   生成与像素自检：devtools/make-deco-bitmap.js（源 data/deco-src/shanshui.html）。
 *
 * ★ 仍然是「形状与颜色分离」：这张 PNG 是 **alpha 蒙版**（alpha = 墨的浓淡），
 *   颜色由 background-color: var(--ink) 注入 ⇒ 一份位图照旧适配 8 组皮肤，
 *   不会因为引入位图就把多皮肤体系破坏掉。
 *   ⚠ 所以这里的 opacity 不再代表「墨有多浓」（那由位图自身的 alpha 负责，
 *     make-deco-bitmap.js 会断言最浓层 ≤0.70、覆盖 ≤60%），只做一次全局收敛。 */
.hero::before{
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: min(48%, 34rem);
  aspect-ratio: 1400 / 800;   /* 与位图同比例，避免拉伸变形 */
  pointer-events: none;
  background-color: var(--ink);
  -webkit-mask-image: url("/static/deco/shanshui.png");
  mask-image: url("/static/deco/shanshui.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0.8;
}

.hero::after{
  content:"";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 34%;
  height: 40%;
  pointer-events: none;
  background-color: var(--celadon);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='90'%20viewBox='0%200%20160%2090'%3E%3Cpath%20d='M8%2064%20C8%2044%2026%2036%2040%2044%20C44%2024%2070%2022%2078%2040%20C96%2030%20120%2036%20120%2054%20C140%2050%20156%2060%20150%2074%20C150%2084%20132%2086%20122%2080%20C112%2088%2092%2086%2084%2078%20C70%2088%2048%2084%2042%2074%20C30%2082%2012%2080%208%2064%20Z'%20fill='%23000'%20fill-opacity='0.8'/%3E%3Cpath%20d='M84%2070%20C90%2064%20100%2064%20102%2072%20M122%2066%20C128%2060%20138%2062%20138%2070%20M48%2062%20C54%2056%2064%2056%2066%2064'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='90'%20viewBox='0%200%20160%2090'%3E%3Cpath%20d='M8%2064%20C8%2044%2026%2036%2040%2044%20C44%2024%2070%2022%2078%2040%20C96%2030%20120%2036%20120%2054%20C140%2050%20156%2060%20150%2074%20C150%2084%20132%2086%20122%2080%20C112%2088%2092%2086%2084%2078%20C70%2088%2048%2084%2042%2074%20C30%2082%2012%2080%208%2064%20Z'%20fill='%23000'%20fill-opacity='0.8'/%3E%3Cpath%20d='M84%2070%20C90%2064%20100%2064%20102%2072%20M122%2066%20C128%2060%20138%2062%20138%2070%20M48%2062%20C54%2056%2064%2056%2066%2064'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0%;
  mask-position: 100% 0%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0.10;
}

/* 窄屏：山水转纯底部、更弱；祥云撤掉（避免与标题抢位）。 */
@media (max-width: 48rem){
  .hero::before{
    width: 100%;
    max-width: 100%;
    height: 42%;
    opacity: 0.06;
  }
  .hero::after{ display: none; }
}

/* ---------- 卡片角饰：竹（细叶线描），克制的右下角，不压正文 ---------- */
.card{ position: relative; }

.card::before{
  content:"";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 56px;
  height: 56px;
  pointer-events: none;
  background-color: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M78%20100%20L78%2014%20M72%2070%20H84%20M73%2050%20H83%20M74%2032%20H82%20M78%2028%20C64%2022%2054%2024%2050%2014%20M78%2040%20C92%2032%20102%2034%20108%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'/%3E%3Cpath%20d='M50%2014%20C40%208%2036%200%2044%20-2%20C50%204%2054%2010%2050%2014%20Z%20M108%2024%20C116%2018%20122%2018%20120%2010%20C112%2014%20110%2020%20108%2024%20Z%20M46%2030%20C36%2026%2032%2018%2040%2016%20C46%2022%2048%2026%2046%2030%20Z'%20fill='%23000'%20fill-opacity='0.85'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M78%20100%20L78%2014%20M72%2070%20H84%20M73%2050%20H83%20M74%2032%20H82%20M78%2028%20C64%2022%2054%2024%2050%2014%20M78%2040%20C92%2032%20102%2034%20108%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'/%3E%3Cpath%20d='M50%2014%20C40%208%2036%200%2044%20-2%20C50%204%2054%2010%2050%2014%20Z%20M108%2024%20C116%2018%20122%2018%20120%2010%20C112%2014%20110%2020%20108%2024%20Z%20M46%2030%20C36%2026%2032%2018%2040%2016%20C46%2022%2048%2026%2046%2030%20Z'%20fill='%23000'%20fill-opacity='0.85'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.10;
}

/* ---------- 卡片网格背景（自选·梅枝）：枝与花在网格一角的留白处 ---------- */
.cards{ position: relative; }

.cards::before{
  content:"";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 200px;
  max-width: 46%;
  height: 120px;
  pointer-events: none;
  z-index: 0;
  background-color: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='120'%20viewBox='0%200%20200%20120'%3E%3Cpath%20d='M0%20110%20C40%20100%2070%2080%2090%2060%20C110%2042%20140%2030%20180%2020'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cg%20fill='%23000'%20fill-opacity='0.8'%3E%3Cpath%20transform='translate(90%2060)'%20d='M0%200%20C-4%20-9%20-9%20-5%20-4%202%20C-11%20-3%20-8%207%20-1%204%20C-4%2011%205%2011%202%204%20C9%207%2011%20-3%204%20-2%20C9%20-9%200%20-9%200%200%20Z'/%3E%3Cpath%20transform='translate(140%2034)'%20d='M0%200%20C-4%20-9%20-9%20-5%20-4%202%20C-11%20-3%20-8%207%20-1%204%20C-4%2011%205%2011%202%204%20C9%207%2011%20-3%204%20-2%20C9%20-9%200%20-9%200%200%20Z'/%3E%3Cpath%20transform='translate(176%2022)'%20d='M0%200%20C-4%20-9%20-9%20-5%20-4%202%20C-11%20-3%20-8%207%20-1%204%20C-4%2011%205%2011%202%204%20C9%207%2011%20-3%204%20-2%20C9%20-9%200%20-9%200%200%20Z'/%3E%3Cpath%20transform='translate(54%2084)'%20d='M0%200%20C-4%20-9%20-9%20-5%20-4%202%20C-11%20-3%20-8%207%20-1%204%20C-4%2011%205%2011%202%204%20C9%207%2011%20-3%204%20-2%20C9%20-9%200%20-9%200%200%20Z'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='120'%20viewBox='0%200%20200%20120'%3E%3Cpath%20d='M0%20110%20C40%20100%2070%2080%2090%2060%20C110%2042%20140%2030%20180%2020'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cg%20fill='%23000'%20fill-opacity='0.8'%3E%3Cpath%20transform='translate(90%2060)'%20d='M0%200%20C-4%20-9%20-9%20-5%20-4%202%20C-11%20-3%20-8%207%20-1%204%20C-4%2011%205%2011%202%204%20C9%207%2011%20-3%204%20-2%20C9%20-9%200%20-9%200%200%20Z'/%3E%3Cpath%20transform='translate(140%2034)'%20d='M0%200%20C-4%20-9%20-9%20-5%20-4%202%20C-11%20-3%20-8%207%20-1%204%20C-4%2011%205%2011%202%204%20C9%207%2011%20-3%204%20-2%20C9%20-9%200%20-9%200%200%20Z'/%3E%3Cpath%20transform='translate(176%2022)'%20d='M0%200%20C-4%20-9%20-9%20-5%20-4%202%20C-11%20-3%20-8%207%20-1%204%20C-4%2011%205%2011%202%204%20C9%207%2011%20-3%204%20-2%20C9%20-9%200%20-9%200%200%20Z'/%3E%3Cpath%20transform='translate(54%2084)'%20d='M0%200%20C-4%20-9%20-9%20-5%20-4%202%20C-11%20-3%20-8%207%20-1%204%20C-4%2011%205%2011%202%204%20C9%207%2011%20-3%204%20-2%20C9%20-9%200%20-9%200%200%20Z'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.10;
}

/* ---------- 页脚：顶边回纹 + 底部远山 ---------- */
.foot{ position: relative; }

.foot::before{
  content:"";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 8px;
  pointer-events: none;
  background-color: var(--line-2);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='14'%20viewBox='0%200%2056%2014'%3E%3Cpath%20d='M0%2013%20V2%20H8%20V13%20H4%20V6%20H6%20M10%2013%20V2%20H18%20V13%20H14%20V6%20H16%20M20%2013%20V2%20H28%20V13%20H24%20V6%20H26%20M30%2013%20V2%20H38%20V13%20H34%20V6%20H36%20M40%2013%20V2%20H48%20V13%20H44%20V6%20H46%20M50%2013%20V2%20H56'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='14'%20viewBox='0%200%2056%2014'%3E%3Cpath%20d='M0%2013%20V2%20H8%20V13%20H4%20V6%20H6%20M10%2013%20V2%20H18%20V13%20H14%20V6%20H16%20M20%2013%20V2%20H28%20V13%20H24%20V6%20H26%20M30%2013%20V2%20H38%20V13%20H34%20V6%20H36%20M40%2013%20V2%20H48%20V13%20H44%20V6%20H46%20M50%2013%20V2%20H56'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  opacity: 0.10;
}

.foot::after{
  content:"";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 40px;
  pointer-events: none;
  z-index: 0;
  background-color: var(--ink-2);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='60'%20viewBox='0%200%20320%2060'%3E%3Cpath%20d='M0%2060%20L0%2048%20C50%2042%2090%2048%20140%2044%20C190%2040%20230%2048%20280%2044%20C300%2042%20312%2044%20320%2043%20L320%2060%20Z'%20fill='%23000'%20fill-opacity='0.3'/%3E%3Cpath%20d='M0%2060%20L0%2040%20C40%2030%2070%2038%20110%2032%20C150%2026%20180%2038%20220%2032%20C260%2026%20290%2036%20320%2030%20L320%2060%20Z'%20fill='%23000'%20fill-opacity='0.52'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='60'%20viewBox='0%200%20320%2060'%3E%3Cpath%20d='M0%2060%20L0%2048%20C50%2042%2090%2048%20140%2044%20C190%2040%20230%2048%20280%2044%20C300%2042%20312%2044%20320%2043%20L320%2060%20Z'%20fill='%23000'%20fill-opacity='0.3'/%3E%3Cpath%20d='M0%2060%20L0%2040%20C40%2030%2070%2038%20110%2032%20C150%2026%20180%2038%20220%2032%20C260%2026%20290%2036%20320%2030%20L320%2060%20Z'%20fill='%23000'%20fill-opacity='0.52'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 100%;
  mask-position: 50% 100%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  opacity: 0.10;
}

/* ---------- 印章质感（用 --brand 上色，内描边 + 轻微立体，不依赖字体） ---------- */
.seal{
  position: relative;
  display: inline-block;
  padding: 0.45em 0.7em;
  color: var(--brand-ink);
  background: var(--brand);
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: inset 0 0 0 1px var(--brand-ink), inset 0 1px 4px var(--line-2);
}
.seal::after{
  content:"";
  position: absolute;
  inset: 3px;
  border: 1.5px solid var(--brand-ink);
  border-radius: 5px;
  pointer-events: none;
}

/* ---------- 动效：仅在不要求减少动效时给出（装饰层自身 transform） ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero::after{
    animation: deco-drift 26s ease-in-out infinite alternate;
  }
}
@keyframes deco-drift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-6px,4px,0); }
}

/* ---------- 减少动效：明确不加任何动画 ---------- */
@media (prefers-reduced-motion: reduce){
  .hero::after{ animation: none; }
}

/* ---------- 打印：装饰全隐藏（不使用任何硬编码十六进制） ---------- */
@media print{
  body::before, body::after, hr.rule,
  .hero::before, .hero::after,
  .card::before, .cards::before,
  .foot::before, .foot::after,
  .seal::after{
    display: none;
  }
}

/* ---------- 高对比 / 强制颜色模式：装饰全隐藏 ---------- */
@media (forced-colors: active){
  body::before, body::after, hr.rule,
  .hero::before, .hero::after,
  .card::before, .cards::before,
  .foot::before, .foot::after,
  .seal::after{
    display: none;
  }
}

/* ===========================================================
   国风内容层（本轮追加）
   ① 传统节日：按构建日期自动配元素（节日名/题句露中文 —— 教中文的站，这是内容不是噪音）
   ② 每日一读配图（彩色插画，按诗名映射）
   ③ 山川建筑天际线（首页背景带，单色蒙版 ⇒ 随皮肤换色）
   生成与像素自检：devtools/make-deco-art.js；节日表：devtools/festivals.js
   =========================================================== */

/* ---- ① 节日元素：hero 右上角，插画 + 节名 + 题句 ---- */
.fest{
  position:absolute; inset-block-start:.6rem; inset-inline-end:.6rem;
  width:clamp(7.5rem,20vw,12rem); text-align:center; pointer-events:none;
  z-index:1;
}
.fest-art{ display:block; width:100%; height:auto; }
.fest-name{
  margin:.15rem 0 0; font-family:var(--serif); font-weight:700;
  font-size:1.15rem; color:var(--brand); letter-spacing:.3em; text-indent:.3em;
}
.fest-motto{
  margin:.1rem 0 0; font-size:.72rem; color:var(--muted);
  border-block-start:1px solid var(--line-2); padding-block-start:.3rem;
}
/* 节日插画自带颜色，不参与皮肤换色 */
.fest-art{ display:block; width:100%; height:auto; }
/* ★ 节日元素在场时，.hzrow（汉语之路印章）让位 ——
   两者都占 hero 右侧，截图核对发现会叠在一起。 */
.hero.fest-on .hzrow{ display:none; }
@media (max-width: 47.99rem){
  /* ★ 手机上不再绝对定位：绝对定位的小图会压到标题第一行（截图核对发现）。
     改成「小图 + 节名」的内联徽标，排在标题上方，永远不抢正文的位。 */
  .fest{
    position: static; width: auto;
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .5rem; text-align: start;
  }
  .fest-art{ width: 3rem; height: auto; flex: 0 0 auto; }
  .fest-name{ margin: 0; font-size: 1.05rem; letter-spacing: .2em; text-indent: .2em; }
  .fest-motto{ display: none; }   /* 手机上题句挤 */
}

/* ---- ② 每日一读配图 ---- */
.poem-art{
  display:block; width:min(60%,22rem); height:auto; margin:0 auto .6rem;
  border-radius:var(--radius-lg);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
@media (max-width: 47.99rem){ .poem-art{ width:min(84%,20rem); } }

/* ---- ③ 山川建筑天际线（首页背景带） ----
   单色蒙版 ⇒ 颜色来自 var(--ink)，随 8 组皮肤换色。
   放在 hero 之后、工具区之前，作为一条「从山川建筑走进学习工具」的过渡。 */
.skyline{
  height:clamp(5.5rem,16vw,11rem);
  margin:0 0 1.2rem;
  background-color: var(--ink);
  -webkit-mask-image: url("/static/deco/art/skyline.png");
  mask-image: url("/static/deco/art/skyline.png");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 50% 100%; mask-position: 50% 100%;
  opacity:.5;
  pointer-events:none;
}
@media (max-width: 47.99rem){ .skyline{ height:4.6rem; opacity:.42; } }
@media print{ .fest,.skyline{ display:none; } }