/* ==========================================================================
   YING HANDMADE STUDIO — Site Styles
   Direction: Studio Bench · borders-only · 左对齐 · 零投影
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* ── reset ──────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
  ul, ol { list-style: none; padding: 0; }
}

/* ── base ───────────────────────────────────────────────────────────── */
@layer base {
  body {
    background: var(--gesso);
    color: var(--umber);
    font-family: var(--face-text);
    font-size: var(--size-base);
    line-height: var(--lead-body);
    /* 亚麻画布的织纹 —— 两层交叉细斜纹，做出经纬交织的手感。
       原来淡到看不见（.014），现在推到能感觉到但不吵。
       纯 CSS，不用贴图，零额外请求。                            */
    background-image:
      repeating-linear-gradient(
        104deg,
        rgba(42, 35, 32, .028) 0px,
        rgba(42, 35, 32, .028) 1px,
        transparent 1px,
        transparent 3px
      ),
      repeating-linear-gradient(
        14deg,
        rgba(42, 35, 32, .020) 0px,
        rgba(42, 35, 32, .020) 1px,
        transparent 1px,
        transparent 4px
      );
  }

  h1, h2, h3 {
    font-family: var(--face-display);
    font-weight: 400;
    font-variation-settings: "SOFT" 20, "WONK" 1;   /* 只对 Fraunces 生效，中文无影响 */
    line-height: var(--lead-tight);
    letter-spacing: var(--track-display);
    text-wrap: balance;
  }

  /* ── 【中文版】中日韩排版规则 ─────────────────────────────────
     换回英文版时整段删除。                                      */
  :lang(zh), body {
    /* 标点不许出现在行首，避免「，」被甩到下一行开头 */
    line-break: strict;
    /* 汉字不在词中断开；长英文单词（品牌名、尺寸）仍然整体换行 */
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* 中英混排时，汉字与拉丁字母之间自动留出间隙 ——
     没有这一条，「工期 3–4 周」会挤成一坨 */
  :is(p, li, dd, span, b, em, summary) { text-spacing-trim: normal; }

  ::selection { background: var(--sienna-wash); }

  :focus-visible {
    outline: 2px solid var(--sienna);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }
}

/* ── layout ─────────────────────────────────────────────────────────── */
@layer layout {
  .shell {
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--s5);
  }
  @media (min-width: 900px) { .shell { padding-inline: var(--s8); } }

  /* 区块间距刻意不等 —— 疏密有节奏，不是每段都 96px */
  .band       { padding-block: var(--s9); }
  .band--tall { padding-block: var(--s10); }
  .band--tight{ padding-block: var(--s8); }
  .band--rule { border-top: 1px solid var(--line-soft); }
}

/* ── components ─────────────────────────────────────────────────────── */
@layer components {

  /* ---------- 小标签（区块眉题） ---------------------------------- */
  .eyebrow {
    font-size: var(--size-xs);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--umber-faint);
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s5);
  }
  .eyebrow::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--line);
    max-width: 88px;
  }

  /* ---------- 页头 ------------------------------------------------
     刻意不做磨砂玻璃 / 不做滚动变形。
     那是 AI 模板的标配，也是这个站要躲开的第一件事。            */
  .masthead {
    border-bottom: 1px solid var(--line);
    background: var(--gesso);
  }
  .masthead__in {
    display: flex;
    align-items: baseline;
    gap: var(--s7);
    padding-block: var(--s5);
  }
  .wordmark {
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
  }
  .wordmark b {
    display: block;
    font-family: var(--face-display);
    font-weight: 500;
    font-size: 1.375rem;
    letter-spacing: -0.01em;
    font-variation-settings: "SOFT" 30, "WONK" 1;
  }
  .wordmark span {
    display: block;
    margin-top: 5px;
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--umber-faint);
  }
  .mainnav { display: none; gap: var(--s6); margin-inline-start: auto; }
  @media (min-width: 960px) { .mainnav { display: flex; } }
  .mainnav a {
    font-size: var(--size-sm);
    text-decoration: none;
    color: var(--umber-soft);
    padding-block: 4px;
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
  }
  .mainnav a:hover,
  .mainnav a[aria-current] { color: var(--umber); border-bottom-color: var(--umber); }

  /* ---------- 按钮 ------------------------------------------------ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 46px;
    padding-inline: var(--s5);
    border-radius: var(--r-sm);
    font-size: var(--size-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease);
  }
  .btn--sienna { background: var(--sienna); color: #fff; }
  .btn--sienna:hover { background: var(--sienna-deep); }
  .btn--quiet {
    border: 1px solid var(--line-control);   /* 按钮是控件 → 需 3:1 */
    color: var(--umber);
  }
  .btn--quiet:hover { border-color: var(--umber); background: var(--linen); }
  /* 44px 是硬指标。这个类用在两个最要紧的点上：
     页头「开始定制」（<960px 时页头唯一能点的东西）
     和吸底「下一步」（商品页主转化按钮，还贴着屏幕最下缘，
     手指最难够准的位置）。视觉上仍然比主按钮小一号。 */
  .btn--sm { min-height: 44px; padding-inline: var(--s4); }
  .btn:disabled { opacity: .45; pointer-events: none; }

  /* 文字型行动点 —— 不是所有 CTA 都该长成按钮 */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--size-sm);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 3px;
    transition: border-color var(--t-fast) var(--ease);
  }
  .link-arrow:hover { border-bottom-color: var(--umber); }
  .link-arrow svg { transition: transform var(--t-base) var(--ease); }
  .link-arrow:hover svg { transform: translateX(3px); }

  /* ---------- 图位 ------------------------------------------------
     没图时显示裁切比例和用途，比灰块清楚。
     放了 <img> 就自动盖住。                                       */
  .plate {
    position: relative;
    background: var(--linen);
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .plate::after {
    content: attr(data-slot);
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    padding: var(--s4);
    font-size: var(--size-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--umber-ghost);
    white-space: pre-line;
  }
  .plate > img {
    position: relative; z-index: 1;
    width: 100%; height: 100%; object-fit: cover;
    /* 方形封面默认从正中裁，而宠物的头通常在上半部分 ——
       焦点上移一点，别把脸裁掉 */
    object-position: 50% 38%;
  }
  /* 照片和白边之间要有一条极淡的描边。
     白猫、雪地、浅色底的油画，边缘会直接化进白边里，
     「冲印出来的照片」那个质感就没了。
     用 outline 不用 border：不占布局、不影响 aspect-ratio、
     也不会被 .plate 的 overflow:hidden 裁掉。 */
  .plate--print > img { outline: 1px solid var(--line); }

  /* ── 图片的悬停反馈 ────────────────────────────────────────
     做法：**画框不动，里面的照片轻微放大**。
     像凑近看一张摆在工作台上的相片，而不是一个 UI 按钮变大。

     为什么是这个而不是别的：
       · 不加投影 —— 投影会立刻变回「卡片」，全站 borders-only
       · 不整块放大 —— 那是 App 按钮的手势，跟「实物」的比喻冲突
       · 只动 transform / opacity，走合成层，不触发重排
       · 幅度只有 3%，肉眼感觉是「活了一下」而不是「弹了一下」
     三个信号叠加（照片微放大 + 画框描边变深 + 标签名字加下划线），
     每一个都很轻，合起来足够明确。

     ⚠️ 必须包在 hover 媒体查询里：触屏点完 :hover 会赖着不走，
        一面墙上会留下好几张「半选中」的图。
     动效在 prefers-reduced-motion 下由文件开头那段全局兜底压成 0.01ms。 */
  .plate--zoom > img {
    transition: transform var(--t-base) var(--ease-out),
                outline-color var(--t-base) var(--ease);
    will-change: transform;
  }

  @media (hover: hover) and (pointer: fine) {
    a:hover > .plate--zoom > img,
    a:hover .plate--zoom > img,
    .piece:hover .plate--zoom > img {
      transform: scale(1.03);
      outline-color: var(--line-strong);
    }
  }

  /* 键盘用户要拿到同样的提示，不能只有鼠标有 */
  a:focus-visible .plate--zoom > img {
    transform: scale(1.03);
    outline-color: var(--line-strong);
  }
  /* 相片白边 —— 像冲印出来的照片摆在工作台上。
     手作店最关键的一个质感差别：图片是「实物」，不是「素材」。
     只加一圈内白边，不加投影 —— 投影会立刻变回 UI 卡片。      */
  .plate--print {
    background: var(--gesso-white);
    padding: 10px;
    border: 1px solid var(--line);
  }
  @media (max-width: 700px) { .plate--print { padding: 7px; } }

  .plate--4x5  { aspect-ratio: 4/5; }   /* 竖 */
  .plate--3x4  { aspect-ratio: 3/4; }   /* 竖 */
  .plate--1x1  { aspect-ratio: 1/1; }   /* 方 */
  .plate--4x3  { aspect-ratio: 4/3; }   /* 横 */
  .plate--3x2  { aspect-ratio: 3/2; }   /* 横 */
  .plate--16x9 { aspect-ratio: 16/9; }  /* 宽横 */

  /* ---------- 作品卡（签名元素 ★） --------------------------------
     博物馆标本标签的做法：小号衬线斜体 + 细线 + 淡纸底。
     刻意不用手写字体 —— 手写字体会立刻显得廉价。
     真正的手写只留给艺术家签名一处。                              */
  .tag {
    display: inline-block;
    background: var(--gesso-white);
    border: 1px solid var(--line);
    padding: var(--s3) var(--s4);
    max-width: 260px;
  }
  .tag__name {
    font-family: var(--face-display);
    font-style: italic;
    font-size: var(--size-md);
    line-height: 1.15;
    font-variation-settings: "SOFT" 40, "WONK" 1;
  }
  .tag__meta {
    margin-top: 5px;
    font-size: var(--size-xs);
    letter-spacing: 0.06em;
    color: var(--umber-faint);
  }

  /* ---------- 作品网格 —— 刻意不等高 ------------------------------
     等宽等高的三列网格是模板的味道。这里用不同 span 打散节奏。   */
  .worklist {
    display: grid;
    gap: var(--s5);
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 820px) {
    .worklist { grid-template-columns: repeat(12, 1fr); gap: var(--s6); }
    .worklist > :nth-child(1) { grid-column: span 5; }
    .worklist > :nth-child(2) { grid-column: span 4; margin-top: var(--s8); }
    .worklist > :nth-child(3) { grid-column: span 3; }
    .worklist > :nth-child(4) { grid-column: span 4; }
    .worklist > :nth-child(5) { grid-column: span 3; margin-top: var(--s6); }
    .worklist > :nth-child(6) { grid-column: span 5; }
  }
  .workitem { text-decoration: none; display: block; }
  .workitem .plate { transition: border-color var(--t-base) var(--ease); }
  .workitem:hover .plate { border-color: var(--line-strong); }
  .workitem__cap {
    margin-top: var(--s3);
    font-size: var(--size-xs);
    letter-spacing: 0.05em;
    color: var(--umber-faint);
  }
  .workitem__cap b {
    font-family: var(--face-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--size-sm);
    color: var(--umber);
    letter-spacing: 0;
  }

  /* ---------- 流程（编号列表，不是四个等宽卡片） ------------------ */
  .steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
  .step {
    display: grid;
    gap: var(--s2) var(--s6);
    padding-block: var(--s6);
    border-bottom: 1px solid var(--line);
    align-items: start;
  }
  @media (min-width: 760px) {
    .step { grid-template-columns: 72px minmax(0, 300px) 1fr; align-items: baseline; }
  }
  .step__no {
    font-family: var(--face-display);
    font-size: var(--size-2xl);
    line-height: 1;
    color: var(--sienna);
    font-variation-settings: "SOFT" 0, "WONK" 1;
  }
  .step__h { font-size: var(--size-lg); }
  .step__p { color: var(--umber-soft); max-width: 46ch; }

  /* ---------- 纪念区块 -------------------------------------------- */
  .memorial {
    background: var(--sienna-wash);
    border-block: 1px solid var(--line);
  }

  /* ---------- 页脚 ------------------------------------------------ */
  .foot { border-top: 1px solid var(--line); }
  .foot__grid {
    display: grid;
    gap: var(--s7);
    padding-block: var(--s8) var(--s6);
  }
  /* ⚠️ 列数**不能写死**。链接栏的数量 = 分类数 + 1（条款那栏），
     而分类是后台可以随便增减的。写死 3 列，加到第三个分类时
     第四栏就会掉到第二行，右边空出一大片。
     auto-fit 让链接栏有几个排几个，品牌栏固定占第一列。 */
  @media (min-width: 760px) {
    .foot__grid {
      grid-template-columns: minmax(15rem, 1.4fr) repeat(auto-fit, minmax(8rem, 1fr));
      gap: var(--s6) var(--s7);
      align-items: start;
    }
  }
  .foot h4 {
    font-family: var(--face-text);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--umber-faint);
    margin-bottom: var(--s4);
  }
  /* 页脚链接用短标签的行高，不跟正文。
     13px 的字继承 1.85 会有 24px 行高，再加 12px 外边距 = 每条间隔 36px，
     一栏四条就拉出 150px，页脚被撑成一整屏。 */
  .foot ul { line-height: var(--lead-label); }
  .foot li + li { margin-top: var(--s3); }
  .foot li { margin-bottom: 0; }
  .foot a {
    display: inline-block;
    font-size: var(--size-sm); text-decoration: none; color: var(--umber-soft);
    /* 手机上页脚链接也要够得着，但不能把桌面撑散 —— 用 padding 撑命中区 */
    padding-block: var(--s2);
  }
  .foot a:hover { color: var(--umber); }
  .social { display: flex; gap: var(--s4); margin-top: var(--s5); }
  .social a {
    width: 40px; height: 40px;
    display: grid; place-content: center;
    border: 1px solid var(--line-control);
    border-radius: var(--r-sm);
    transition: border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease);
  }
  .social a:hover { border-color: var(--umber); background: var(--linen); }
  .social svg { width: 17px; height: 17px; stroke: var(--umber-soft); fill: none; stroke-width: 1.6; }
  .social a:hover svg { stroke: var(--umber); }
  .foot__base {
    border-top: 1px solid var(--line-soft);
    padding-block: var(--s5);
    font-size: var(--size-xs);
    color: var(--umber-faint);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s5);
    justify-content: space-between;
  }

  /* ---------- 下单步骤条（三页共用） ------------------------------
     全程零注册。步骤条的作用是让人一眼看到「只有三步」，
     减少弃单 —— 不知道还有几步是结账流失的头号原因。          */
  .steps3 {
    display: flex; flex-wrap: wrap;
    gap: var(--s3) var(--s6);
    padding-block: var(--s6);
    border-bottom: 1px solid var(--line);
  }
  .steps3 li {
    display: flex; align-items: baseline; gap: var(--s3);
    font-size: var(--size-sm);
    color: var(--umber-ghost);
  }
  .steps3 i {
    font-style: normal;
    font-family: var(--face-display);
    font-size: var(--size-xs);
    font-variant-numeric: tabular-nums;
  }
  .steps3 .is-done { color: var(--umber-faint); }
  .steps3 .is-done i,
  .steps3 .is-now i { color: var(--sienna); }
  .steps3 .is-now { color: var(--umber); }
  .steps3 .is-now span { border-bottom: 1px solid var(--umber); padding-bottom: 2px; }

  /* ---------- 已选照片列表 ---------------------------------------- */
  .picked { margin-top: var(--s3); border-top: 1px solid var(--line-soft); }
  .picked li {
    display: flex; justify-content: space-between; gap: var(--s4);
    padding-block: var(--s2);
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--size-sm);
    color: var(--umber-soft);
  }
  .picked b {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--umber-ghost);
    white-space: nowrap;
  }
  .drop.is-filled { border-style: solid; border-color: var(--umber); }
  .drop.is-missing {
    border-color: var(--alert);
    background: var(--alert-wash);
  }
  .drop.is-missing::after {
    content: "请先上传至少一张照片";
    font-size: var(--size-sm);
    color: var(--alert-deep);
  }

  /* ---------- 浮动联系（IG / WhatsApp / Email） ------------------- */
  .dock {
    position: fixed;
    right: var(--s5);
    bottom: var(--s5);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
  }
  .dock a {
    width: 46px; height: 46px;
    display: grid; place-content: center;
    background: var(--gesso-white);
    border: 1px solid var(--line-control);
    border-radius: var(--r-sm);
    transition: background var(--t-fast) var(--ease);
  }
  .dock a:hover { background: var(--linen); }
  .dock svg { width: 19px; height: 19px; stroke: var(--umber); fill: none; stroke-width: 1.6; }
}

/* ── utilities ──────────────────────────────────────────────────────── */
@layer utilities {
  .lede {
    font-size: var(--size-md);
    line-height: var(--lead-loose);
    color: var(--umber-soft);
    max-width: var(--measure-text);
  }
  /* 空状态框 ——
     ⚠️ 这一块曾经只写在 home.css 里，但引用它的有三个模板：
     home.php（pageCss=home）· work.php 和 category.php（pageCss=pages）。
     后两个页面根本不加载 home.css，渲染成两段左对齐的裸段落。
     判据很简单：**一个 class 被两个 pageCss 不同的模板引用，它就属于 site.css。**
     同样的坑在 .menu 上已经踩过一次（见 pages.css 里 .picks 那段注释）。
     而 gallery 表初始为空，上线第一天 /work 一定走这个状态。 */
  .wall-empty {
    padding: var(--s10) var(--s5);
    border: 1px dashed var(--line-control);
    border-radius: var(--r-sm);
    text-align: center;
  }
  .wall-empty p { color: var(--umber-soft); }
  .wall-empty .muted { margin-top: var(--s2); font-size: var(--size-sm); color: var(--umber-faint); }


  /* ── 制作视频的入口 ──────────────────────────────────────
     整条贴在照片下沿，跟照片是同一个视觉单元。

     ⚠️ 前两版都太轻，记下来免得再走回头路：
       ① 角上的小徽章 —— 会落在照片本身的深色区域上，
          深压深，读起来是照片的一部分，不是能点的东西；
          30px 的方块放在 590px 宽的图上，比例也太小。
       ② 浅灰文字链接 —— 跟旁边的「油画 · 宠物肖像」同色同字号，
          读者根本分不出哪个能点。

     为什么值得用强调色和整条宽度：
       制作视频是这个生意的转化利器 —— 在 Etsy 和 Instagram 上，
       「看我怎么做出来的」就是让人下单的那一下。
       做成看不见，等于白拍。

     仍然不盖在照片上：照片是「实物」，这一条是贴在实物下沿的标签带。
     方角、无投影、单一强调色，其余规矩一条没破。            */
  .piece__film {
    display: flex; align-items: center; justify-content: center;
    gap: var(--s3);
    min-height: 48px;                  /* 远超 44px 触摸目标 */
    margin-top: -1px;                  /* 跟白边下沿咬合，不留缝 */
    padding-inline: var(--s4);
    background: var(--sienna);
    color: var(--gesso-white);         /* 白字在熏赭上 6.84:1 */
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-size: var(--size-sm);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-decoration: none;
    text-align: center;
    transition: background var(--t-fast) var(--ease);
  }
  .piece__film svg {
    width: 13px; height: 13px; flex-shrink: 0;
    fill: currentColor; stroke: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .piece__film:hover { background: var(--sienna-deep); }
  }
  .piece__film:focus-visible {
    outline: 2px solid var(--umber); outline-offset: 2px;
  }
  /* 有视频时，说明行贴着这一条排，不要再空一大截 */
  .piece__film + .piece__cap { margin-top: var(--s4); }

  /* ══ 作品墙 ══════════════════════════════════════════════
     ⚠️ 这一整块曾经在 home.css 里，但 **/work 和分类页不加载 home.css**
        （它们的 pageCss 是 'pages'）。于是作品集页的主体内容
        从来就没有样式 —— 只是被 site.css 的 plate--1x1 强制成方形
        才看着正常，一旦改用真实比例，图就直接铺满整屏。

        判据（第三次踩了才写下来）：
        **一个 class 被两个 pageCss 不同的模板引用，它就属于 site.css。**
        .menu 踩过一次，.wall-empty 踩过一次，这是第三次。
     ═══════════════════════════════════════════════════════ */
  /* ── 作品墙 ─────────────────────────────────────────────────
     三栏流式，靠图片真实比例差自然错落。
     等宽等高的网格一眼就是模板。                                */
  .wall { columns: 1; column-gap: var(--s5); }
  @media (min-width: 520px) { .wall { columns: 2; } }
  @media (min-width: 900px) { .wall { columns: 3; column-gap: var(--s6); } }

  .piece {
    display: block; break-inside: avoid;
    margin-bottom: var(--s7);
    text-decoration: none;
  }
  .piece .plate { transition: border-color var(--t-base) var(--ease); }
  @media (hover: hover) and (pointer: fine) {
    .piece:hover .plate { border-color: var(--line-strong); }
    /* 标本标签上的名字跟着「亮」一下 —— 三个信号里最轻的那个 */
    .piece:hover .piece__cap b { border-bottom-color: var(--umber); }
  }
  .piece:focus-visible .plate { border-color: var(--line-strong); }
  /* 名字常驻一条透明下划线，hover 时才上色 —— 这样不会因为加边框而跳行 */
  .piece__cap b { border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease); }

  /* 说明行：名字 · 材质尺寸 · 年份，细线隔开，年份右对齐 */
  .piece__cap {
    display: flex; align-items: baseline; gap: var(--s3);
    /* ⚠️ 这里原来还有 padding-top + border-top。
       但作品图外面那圈 .plate--print 白边的下沿本身就是一条线，
       标签再画一条，两条发丝线并排 —— 一面墙九件作品就是九组重影。
       签名元素是「博物馆标本标签」：靠留白和字体跟图分开，不靠画线。 */
    margin-top: var(--s4);
    font-size: var(--size-xs); color: var(--umber-faint);
  }
  .piece__cap b {
    font-family: var(--face-display); font-style: italic; font-weight: 400;
    font-size: var(--size-base); color: var(--umber); flex-shrink: 0;
  }
  .piece__cap span { flex: 1; font-variant-numeric: tabular-nums; }
  .piece__cap i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--umber-ghost); }

  .wall__more { padding-block: var(--s4) var(--s9); }

  /* 作品还没上传时的空状态 —— 别让首页开天窗 */
  /* .wall-empty 已移到 site.css —— 它被三个 pageCss 不同的页面引用 */

  /* ── 作品集页：两列大图 ─────────────────────────────────────
     跟首页那面三列的墙不一样。首页是「让人看一眼有个印象」，
     作品集页是「让人看清楚做工」—— 手工品的卖点是质感：
     笔触、羽毛、羊毛纤维。327px 宽全看不见，590px 才看得出来。

     比例不再强制 1:1，按照片真实比例走，横竖交错自然把两列错开。
     这是靠内容错落，不是靠 nth-child 硬凑。                    */
  .wall--big { columns: 1; column-gap: var(--s6); }
  @media (min-width: 760px)  { .wall--big { columns: 2; } }
  @media (min-width: 1100px) { .wall--big { column-gap: var(--s8); } }
  .wall--big .piece { margin-bottom: var(--s9); }

  /* 图大了之后，标签也该跟着大一档 —— 否则比例失衡 */
  .wall--big .piece__cap { font-size: var(--size-sm); margin-top: var(--s5); }
  .wall--big .piece__cap b { font-size: var(--size-md); }

  /* 「跳到正文」这个链接聚焦时必须现形。
     否则键盘用户每次进页面按的第一个 Tab，焦点就凭空消失了 ——
     他不知道自己在哪，也不知道按回车会发生什么。 */
  .sr-only:focus-visible {
    position: fixed; inset-block-start: var(--s3); inset-inline-start: var(--s3);
    width: auto; height: auto; margin: 0;
    padding: var(--s3) var(--s4);
    overflow: visible; clip: auto; clip-path: none;
    z-index: 100;
    background: var(--gesso-white);
    border: 1px solid var(--line-control);
    border-radius: var(--r-sm);
    outline: 2px solid var(--sienna); outline-offset: 2px;
    font-size: var(--size-sm); text-decoration: none;
  }
}

/* ── 缓存指纹 v2 ─────────────────────────────────────────────
   2026-08-14：上线当天 Cloudflare 把源站的 403 页面当成 CSS 缓存了
   （CF 用 HTTPS 回源，而源站那时只监听 80，落到默认站返回 403），
   并且用 200 状态码发出去。前台整站没样式。

   源站修好后 CF 缓存已清，但**访客浏览器里那份坏的还在**。
   asset() 用文件内容的 md5 做 URL 后缀，所以在这里加一行注释
   就能换掉哈希、换掉 URL，让所有浏览器重新取。

   教训：反向代理会缓存源站的错误响应，源站修好前台不会自己恢复。 */