/* JOYSONG · 皮肤
   沙色桌面 + 深褐墨 + 铜褐点缀；直角；标题字宽 80%。
   主手法：叠压（分镜彼此压角、「4686%」压在头图下沿）。
   招牌动作：分镜依次「放下」（揭开的一个变体：scale 1.04 + 轻微上浮 → 落到桌面，只动 transform / opacity）+ HK$ 计数。
   本页没有钉住场景。 */

/* 版心修正：site.css 的 --page 用了 100%，在 .scene 内部的子元素上会按父级内容宽解析（负 margin 出血会少拉出去），这里改用 100vw，数值同口径 */


html[data-skin="joysong"]{
  --jy-sand:#E8E1D5;
  --jy-ink:#1B1A17;
  --jy-bronze:#6E5530;
  --ink:var(--jy-ink);
  --mute:color-mix(in srgb,var(--jy-ink) 64%,var(--jy-sand));
  --line:color-mix(in srgb,var(--jy-ink) 16%,var(--jy-sand));
  --skin-paper:color-mix(in srgb,var(--jy-sand) 46%,#FCFBF8);
  --skin-ground:var(--jy-sand);
  --skin-ground-fg:var(--jy-ink);
  --skin-accent:var(--jy-bronze);
  --skin-stretch:80%;
  --jy-table:var(--jy-sand);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"])[data-skin="joysong"]{
    --ink:var(--jy-sand);
    --mute:color-mix(in srgb,var(--jy-sand) 62%,var(--jy-ink));
    --line:color-mix(in srgb,var(--jy-sand) 16%,var(--jy-ink));
    --skin-paper:var(--jy-ink);
    --skin-accent:color-mix(in srgb,var(--jy-bronze) 55%,var(--jy-sand));
    --jy-table:color-mix(in srgb,var(--jy-sand) 7%,var(--jy-ink));
  }
}
:root[data-theme="dark"][data-skin="joysong"]{
  --ink:var(--jy-sand);
  --mute:color-mix(in srgb,var(--jy-sand) 62%,var(--jy-ink));
  --line:color-mix(in srgb,var(--jy-sand) 16%,var(--jy-ink));
  --skin-paper:var(--jy-ink);
  --skin-accent:color-mix(in srgb,var(--jy-bronze) 55%,var(--jy-sand));
  --jy-table:color-mix(in srgb,var(--jy-sand) 7%,var(--jy-ink));
}

/* 开场：首图下的图注是 mono 小字，跟铜褐点缀 */
html[data-skin="joysong"] .chero__fig figcaption{color:var(--jy-bronze)}

/* ---------- 01 分镜台 ---------- */
.jy-board{--skin-ground:var(--jy-table);--skin-ground-fg:var(--ink);--tag-bg:var(--skin-paper);--tag-fg:var(--ink);--stagger:70ms;padding-bottom:clamp(88px,10vw,150px)}
.jy-board__table{display:grid;grid-template-columns:repeat(19,minmax(0,1fr));align-items:start;max-width:max(860px,140svh);margin-inline:auto;padding-top:clamp(20px,2.4vw,36px)}
.jy-sheet{grid-row:1;grid-column:var(--c);margin-top:var(--dy,0);transform:rotate(var(--r,0deg));transform-origin:50% 40%;transition:transform .5s var(--out)}
.jy-sheet .pic__btn{background:#fff}
.jy-sheet figcaption{left:clamp(14px,1.6vw,22px)}
.jy-sheet .tag{background:var(--ink);color:var(--skin-paper);padding:7px 12px 6px}
.jy-sheet .tag > span{opacity:.86}
/* 放下：scale 1.04 + 轻微上浮 → 落到桌面（只在动效模式、首屏以下） */
.scn-m .jy-sheet.rv-wait{opacity:0;transform:translateY(-18px) scale(1.04) rotate(var(--r,0deg))}
.scn-m .jy-sheet.rv-go{transition:opacity .7s ease,transform .9s var(--out);transition-delay:var(--rv-d,0ms)}
@media (hover: hover) and (pointer: fine){
  .jy-sheet:hover{z-index:3;transform:rotate(0deg) translateY(-6px)}
}

/* ---------- 02 传播物料：出血 + 叠压 ---------- */
.jy-spread{--jy-big:clamp(96px,21vw,252px);--jy-cap:calc((100svh - 150px) * 16 / 9);padding-inline:0;overflow-x:clip}
.jy-spread .gsec__head{margin-inline:var(--page)}
.jy-spread__a{position:relative;width:min(80vw,1400px,var(--jy-cap));margin-top:clamp(20px,2.4vw,36px)}
.jy-spread__a figcaption{left:auto;right:var(--page)}
/* 4686%：盒子中线正好压在头图下沿；上半在图上（固定深褐，浅/深色都读得清），下半在纸上（随墨色） */
.jy-big{position:absolute;left:var(--page);top:100%;margin-top:calc(var(--jy-big) * -.4);z-index:2;pointer-events:none;
  font-family:"Archivo",var(--cn);font-weight:800;font-stretch:78%;font-size:var(--jy-big);line-height:.8;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.jy-big__n{display:block;background:linear-gradient(180deg,var(--jy-ink) 0 50%,var(--ink) 50% 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.jy-spread__b{display:grid;grid-template-columns:minmax(0,1fr) min(58vw,1040px,var(--jy-cap));align-items:start;gap:clamp(20px,3vw,48px);margin-top:calc(var(--jy-big) * .4 + clamp(28px,4vw,64px));padding-left:var(--page)}
.jy-spread__note{display:flex;flex-direction:column;gap:6px;padding-bottom:4px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;line-height:1.5;border-top:1px solid var(--ink);padding-top:14px;max-width:16em}
.jy-spread__note span:last-child{color:var(--mute)}
.jy-spread__b .pic{grid-column:2}
.jy-spread__b .pic figcaption{left:clamp(14px,1.6vw,22px)}

@media (max-width: 899px){
  .jy-board__table{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:0;padding-top:28px}
  .jy-board__table{max-width:none}
  .jy-sheet{grid-row:auto;margin-top:0}
  .jy-sheet:nth-child(1){grid-column:1 / 10}
  .jy-sheet:nth-child(2){grid-column:4 / 13;margin-top:-16vw}
  .jy-sheet:nth-child(3){grid-column:2 / 11;margin-top:-16vw}
  .jy-sheet .tag{font-size:10px;padding:5px 9px 4px}
  .jy-spread{--jy-big:clamp(72px,24vw,160px)}
  .jy-spread__a{width:100%}
  .jy-spread__b{grid-template-columns:minmax(0,1fr);padding-left:0;gap:20px}
  .jy-spread__note{margin-inline:var(--page);flex-direction:row;gap:12px;max-width:none}
  .jy-spread__b .pic{grid-column:1}
}