/* ============================================================
 * maiQ 作品集 —— 样式表
 * 风格：温馨暖色调 / 奶油纸感 / 贴纸拼贴
 * ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 底色与纸感 */
  --cream:      #FFF7EE;
  --cream-2:    #FFEFE1;
  --cream-3:    #FDE6D2;
  --paper:      #FFFDFA;

  /* 文字 */
  --ink:        #4A3226;
  --ink-soft:   #856A59;
  --ink-mute:   #A99281;

  /* 主题暖色 */
  --peach:      #FF9E7A;
  --coral:      #EE6F4E;
  --coral-deep: #D2542F;
  --honey:      #F7C46C;

  /* 贴纸色 */
  --butter:     #FFE7A8;
  --mint:       #BFE3CD;
  --lilac:      #DCCBF2;
  --sky:        #C6E2F5;
  --blush:      #FFD5DE;

  --line:       rgba(74, 50, 38, .13);
  --line-soft:  rgba(74, 50, 38, .07);

  --shadow-sm:  0 6px 16px -8px rgba(122, 72, 42, .38);
  --shadow-md:  0 18px 38px -20px rgba(122, 72, 42, .48);
  --shadow-lg:  0 30px 60px -28px rgba(122, 72, 42, .52);

  --radius:     20px;
  --radius-sm:  14px;

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
          "Hiragino Sans GB", "Noto Sans SC", system-ui, -apple-system,
          "Segoe UI", Roboto, sans-serif;
  --font-display: Georgia, "Songti SC", "STSong", "SimSun", "Noto Serif SC",
                  "Times New Roman", serif;

  --maxw: 1240px;
  --nav-h: 66px;

  --ease: cubic-bezier(.22, .86, .3, 1);
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.72;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 淡淡的网格纸底纹，呼应拼贴感 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(122, 72, 42, .055) 1px, transparent 0);
  background-size: 26px 26px;
}

main { position: relative; z-index: 1; overflow-x: clip; }
footer { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin: 0; }

/* figure 必须显式清零！
   作品卡片是 <figure>，浏览器默认给它 margin: 1em 40px。
   不清掉的话卡片会整体下移 16px、右移 40px ——
   L2D 那张叠压大卡片就会掉到容器外面，压住下面的提示文字，
   而且看着也不在正中。 */
figure { margin: 0; }

button {
  font-family: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 48px);
}

/* ---------- 3. 顶部进度条 ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 90;
  background: transparent;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--honey), var(--peach), var(--coral));
  transition: transform .12s linear;
}

/* ---------- 4. 导航 ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255, 247, 238, .78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.nav.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(122, 72, 42, .5);
  background: rgba(255, 247, 238, .93);
}

.nav__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 clamp(18px, 5vw, 48px);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand__mark { display: grid; place-items: center; transition: transform .6s var(--ease); }
.brand:hover .brand__mark { transform: rotate(90deg); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text b { font-size: 1.08rem; letter-spacing: .01em; }
.brand__text i {
  font-style: normal;
  font-size: .68rem;
  color: var(--ink-mute);
  letter-spacing: .06em;
}

.nav__links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.nav__links a {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .92rem;
  color: var(--ink-soft);
  transition: color .25s, background .25s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--coral);
  transform: translateX(-50%);
  transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); background: rgba(238, 111, 78, .08); }
.nav__links a:hover::after { width: 18px; }

.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.nav__links + .nav__actions { margin-left: 0; }

.langbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-soft);
  transition: transform .25s var(--ease), border-color .25s, color .25s, box-shadow .25s;
}
.langbtn:hover {
  transform: translateY(-2px);
  border-color: var(--peach);
  color: var(--coral-deep);
  box-shadow: var(--shadow-sm);
}
.langbtn:active { transform: translateY(0) scale(.97); }
.langbtn__icon { display: grid; place-items: center; color: var(--peach); }

/* ---------- 5. 按钮 ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s, border-color .3s;
}
.btn:active { transform: translateY(0) scale(.97); }

.btn--primary {
  color: #FFF8F2;
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
  box-shadow: 0 12px 26px -12px rgba(210, 84, 47, .8);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--peach), var(--coral));
  opacity: 0;
  transition: opacity .3s;
}
.btn--primary > * { position: relative; z-index: 1; }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -14px rgba(210, 84, 47, .85); }
.btn--primary:hover::before { opacity: 1; }

.btn--ghost {
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover {
  transform: translateY(-3px);
  border-color: var(--peach);
  color: var(--coral-deep);
  box-shadow: var(--shadow-md);
}

.btn--sm { height: 40px; padding: 0 18px; font-size: .88rem; }
.btn--lg { height: 58px; padding: 0 30px; font-size: 1.05rem; border-radius: 999px; }
.btn--lg img { border-radius: 7px; }

/* 呼吸光晕 */
.btn--lg::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(255, 158, 122, .55), transparent 70%);
  opacity: 0;
  animation: pulse 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0%, 100% { opacity: 0; transform: scale(.94); }
  50%      { opacity: 1; transform: scale(1.06); }
}

/* ---------- 6. 首屏 ---------- */
.hero {
  position: relative;
  padding: clamp(48px, 8vw, 92px) 0 clamp(30px, 5vw, 56px);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: -10% -5%; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .62;
}
.blob--1 {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -12%; left: -6%;
  background: radial-gradient(circle at 40% 40%, #FFC9A8, transparent 70%);
  animation: drift1 22s ease-in-out infinite;
}
.blob--2 {
  width: 40vw; height: 40vw; max-width: 540px; max-height: 540px;
  top: 6%; right: -8%;
  background: radial-gradient(circle at 50% 50%, #FFE0A8, transparent 70%);
  animation: drift2 26s ease-in-out infinite;
}
.blob--3 {
  width: 34vw; height: 34vw; max-width: 460px; max-height: 460px;
  bottom: -16%; left: 32%;
  background: radial-gradient(circle at 50% 50%, #F3D3E8, transparent 70%);
  animation: drift1 30s ease-in-out infinite reverse;
}
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(5%, 7%) scale(1.12); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  50%      { transform: translate(-6%, 5%) scale(.94); }
}

.sparkle {
  position: absolute;
  color: var(--coral);
  opacity: .5;
  font-size: 18px;
  animation: twinkle 3.6s ease-in-out infinite;
}
.s1 { top: 18%; left: 12%; animation-delay: 0s; }
.s2 { top: 30%; right: 16%; animation-delay: .7s; color: var(--honey); font-size: 24px; }
.s3 { bottom: 22%; left: 22%; animation-delay: 1.4s; font-size: 14px; }
.s4 { bottom: 30%; right: 24%; animation-delay: 2.1s; color: var(--peach); font-size: 20px; }
.s5 { top: 12%; right: 38%; animation-delay: 2.8s; font-size: 15px; }
@keyframes twinkle {
  0%, 100% { opacity: .18; transform: scale(.8) rotate(0deg); }
  50%      { opacity: .75; transform: scale(1.15) rotate(20deg); }
}

.hero__inner { position: relative; z-index: 1; text-align: center; }

/* 名片页：只有 名字 / 副标题 / 一个约稿按钮 */
.hero__title { margin-top: 0; display: flex; flex-direction: column; gap: 12px; }
.hero__name {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 15vw, 8rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  background: linear-gradient(150deg, #6B4028 10%, var(--coral) 55%, #F0A860 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .06em;
}
.hero__sub {
  font-size: clamp(1rem, 3.6vw, 1.42rem);
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .04em;
}

.hero__cta {
  margin-top: clamp(30px, 4.4vw, 40px);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll {
  position: relative;
  z-index: 1;
  margin-top: clamp(34px, 6vw, 54px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .8rem;
  letter-spacing: .16em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.hero__scroll svg { animation: bobDown 1.9s ease-in-out infinite; }
@keyframes bobDown {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(4px); }
}

/* ---------- 7. 贴纸 ---------- */
.sticker {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  padding: 9px 15px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: var(--butter);
  color: var(--ink);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 3px 3px 0 rgba(74, 50, 38, .92);
  transform: rotate(var(--rot, -4deg));
}
.sticker__en {
  font-size: .68rem;
  font-weight: 600;
  opacity: .62;
  letter-spacing: .01em;
}
/* 语言切换时只显示当前语言的贴纸文案 */
html[data-lang="zh"] .sticker__en { display: none; }
html[data-lang="en"] .sticker__zh { display: none; }

.sticker--mint { background: var(--mint); }

/* 挂在卡片上的贴纸 */
.card__sticker {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  max-width: 168px;
}
.card__sticker.pos-tl { top: -18px; left: -14px; --rot: -7deg; }
.card__sticker.pos-tr { top: -18px; right: -14px; --rot: 6deg; }
.card__sticker.pos-bl { bottom: -16px; left: -14px; --rot: 5deg; }
.card__sticker.pos-br { bottom: -16px; right: -14px; --rot: -6deg; }

/* ---------- 8. 跑马灯 ---------- */
.marquee {
  overflow: hidden;
  padding: 13px 0;
  background: linear-gradient(90deg, #FFE3C4, #FFD3D9 45%, #FBE0C0);
  border-block: 1.5px solid rgba(74, 50, 38, .12);
  transform: rotate(-1.1deg) scale(1.04);
  margin-block: 6px 0;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__item {
  padding-right: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(.86rem, 2.6vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .22em;
  color: #7A4A32;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* ---------- 9. 作品分区 ---------- */
.gallery {
  padding: clamp(56px, 9vw, 104px) 0 clamp(20px, 4vw, 34px);
  position: relative;
}

/* 分区标题 + 大字价格 */
.ghead {
  /* 大字价格的基准字号，价格本身和它的内边距都跟着这个走 */
  --fs: clamp(2.5rem, 9.5vw, 4.9rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "idx   price"
    "name  price"
    "note  price"
    "desc  price";
  row-gap: 8px;
  column-gap: clamp(20px, 5vw, 64px);
  justify-items: start;
  align-items: start;
  padding-bottom: clamp(14px, 2.4vw, 22px);
  border-bottom: 2px dashed var(--line);
}

.ghead__idx {
  grid-area: idx;
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFF8F2;
  font-family: var(--font-display);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .1em;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}

.ghead__name {
  grid-area: name;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: clamp(1.7rem, 6vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -.01em;
}
.ghead__en {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(.86rem, 2.6vw, 1.15rem);
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
/* 英文模式下标题本身就是英文，副标题显不显示由 JS 判断 */

/* 价格 + 小字工期，竖排贴在标题区右下角。
   margin-bottom 给下面那条虚线分隔线留出呼吸空间，别让大字贴线。 */
.ghead__pricing {
  grid-area: price;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 10px;
}

/* 小字工期 */
.ghead__due {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 250, .9);
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
  color: color-mix(in srgb, var(--accent) 78%, #3A2418);
  box-shadow: 0 4px 12px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}

.ghead__price {
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.02em;
  white-space: nowrap;
  background: linear-gradient(140deg, var(--accent), #F0A860);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 关键修复：渐变文字只在 padding box 内上色。
     标题字体 Georgia 是「旧式数字」（3 4 5 7 9 会落到基线以下），
     而这里 line-height:.92 < 1，字形墨迹会溢出行盒下缘 —— 溢出那几像素
     上不到色，数字看起来就像被削掉一截（Q版 ¥50+ 那个 5 的小尾巴）。
     所以把内边距撑到墨迹之外（实测溢出 .07em，这里给 .16em 余量），
     再给右侧一点空间、用负 margin 抵消掉，保证视觉右对齐不变。
     注意：内边距必须按 --fs 算 —— 容器自身 font-size 是继承来的 16px，
     直接写 .16em 只会得到 2.6px，等于没修。 */
  font-size: var(--fs);
  padding: calc(var(--fs) * .05) calc(var(--fs) * .05) calc(var(--fs) * .16);
  margin-right: calc(var(--fs) * -.05);
}
.ghead__cur  { font-size: clamp(1.3rem, 4vw, 2.1rem); margin-right: .1em; }
.ghead__num  { font-size: var(--fs); }
.ghead__dash { font-size: clamp(1.6rem, 5vw, 2.8rem); margin-inline: .06em; opacity: .72; }
.ghead__plus { font-size: clamp(1.5rem, 5vw, 2.6rem); margin-left: .04em; }

.ghead__note {
  grid-area: note;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: clamp(.92rem, 3vw, 1.06rem);
  font-weight: 700;
  color: var(--ink);
}
.ghead__note em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: .88em;
  color: var(--ink-mute);
}
.ghead__note em:empty { display: none; }

.ghead__desc {
  grid-area: desc;
  max-width: 52ch;
  font-size: .92rem;
  color: var(--ink-soft);
}

/* ---------- 10. 横向卡片带 ---------- */
.strip-wrap { position: relative; }

.strip-wrap::before,
.strip-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(18px, 6vw, 70px);
  z-index: 4;
  pointer-events: none;
}
.strip-wrap::before { left: 0;  background: linear-gradient(90deg, var(--cream), transparent); }
.strip-wrap::after  { right: 0; background: linear-gradient(270deg, var(--cream), transparent); }

.strip {
  display: flex;
  align-items: center;
  /* 卡片盒间距。每张卡外面还有一圈 9px 描边环（box-shadow），
     间距要留得比环宽，环才不会互相打架。 */
  gap: clamp(94px, 7.4vw, 106px);
  /* 顶部留够：贴纸从卡片上沿外扩 18px，而 .strip 是 overflow-y:hidden，
     贴纸顶到容器边界就会被裁掉（卡片是带旋转的，还会再往上翘几像素）。 */
  padding: clamp(36px, 4.8vw, 50px) clamp(60px, 5vw + 40px, 104px) clamp(36px, 5vw, 54px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--peach) transparent;
  overscroll-behavior-x: contain;
}
.strip::-webkit-scrollbar { height: 8px; }
.strip::-webkit-scrollbar-track {
  background: rgba(122, 72, 42, .07);
  border-radius: 99px;
  margin-inline: clamp(60px, 5vw + 40px, 104px);
}
.strip::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--peach), var(--honey));
  border-radius: 99px;
}

/* 单张作品卡片
   注意：.card 本身不裁剪，这样挂在卡片外面的贴纸才不会被切掉；
   真正负责裁圆角的是内层 .card__media。 */
.card {
  position: relative;
  flex: 0 0 auto;
  height: var(--h);
  aspect-ratio: var(--ar, 1);
  max-width: 660px;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  scroll-snap-align: center;
  transform: rotate(var(--rot, 0deg));
  box-shadow:
    0 0 0 8px var(--paper),
    0 0 0 9px var(--line),
    var(--shadow-md);
  transition:
    transform .5s var(--ease),
    box-shadow .5s var(--ease);
  animation: cardIn .7s var(--ease) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes cardIn {
  from { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(26px) scale(.95); }
  to   { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(0) scale(1); }
}

.card__media {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--cream-2);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .7s var(--ease), filter .5s;
  filter: saturate(1.02);
}

.card:hover,
.card:focus-visible {
  transform: rotate(0deg) translateY(-10px) scale(1.025);
  z-index: 5;
  box-shadow:
    0 0 0 8px var(--paper),
    0 0 0 9px var(--peach),
    var(--shadow-lg);
  box-shadow:
    0 0 0 8px var(--paper),
    0 0 0 9px color-mix(in srgb, var(--accent) 55%, transparent),
    var(--shadow-lg);
}
.card:hover img { transform: scale(1.045); filter: saturate(1.08); }

/* 卡片角标 */
.card__no {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 253, 250, .9);
  backdrop-filter: blur(6px);
  border: 1.5px solid var(--line);
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s var(--ease);
}
.card:hover .card__no,
.card:focus-visible .card__no { opacity: 1; transform: translateY(0); }

/* 放大提示 */
.card__zoom {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 253, 250, .92);
  border: 1.5px solid var(--line);
  color: var(--coral-deep);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .35s, transform .35s var(--ease);
}
.card:hover .card__zoom,
.card:focus-visible .card__zoom { opacity: 1; transform: scale(1); }

/* 左右切换按钮 */
.strip__nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  box-shadow: var(--shadow-md);
  transform: translateY(-50%);
  transition: opacity .3s, transform .3s var(--ease), color .3s, border-color .3s;
}
.strip__nav--prev { left: clamp(8px, 2vw, 22px); }
.strip__nav--next { right: clamp(8px, 2vw, 22px); }
.strip__nav:hover {
  color: var(--coral-deep);
  border-color: var(--peach);
  transform: translateY(-50%) scale(1.1);
}
.strip__nav[disabled] { opacity: .28; pointer-events: none; }

.strip__hint {
  text-align: center;
  font-size: .8rem;
  letter-spacing: .1em;
  color: var(--ink-mute);
}

/* ---------- 10.5 L2D：叠压大卡片 ---------- */
/* 底部留够：卡片外面有 9px 描边环，贴死的话会压到下面那行提示字上 */
.deck-wrap { padding: clamp(34px, 5vw, 56px) 0 clamp(26px, 3.4vw, 36px); }
.deck-stage { position: relative; width: 100%; }

.deck {
  position: relative;
  width: 100%;
  height: var(--dh);
  --dh: clamp(300px, 52vw, 520px);
  /* 后面那张卡露出来的宽度（由 JS 读） */
  --peek: 34px;
}

/* 单张叠压卡片：绝对居中，位置由 JS 写进 CSS 变量 */
.deck__card {
  position: absolute;
  left: 50%;
  top: 50%;
  height: var(--dh);
  aspect-ratio: var(--ar, 1);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  transform:
    translate(-50%, -50%)
    translateX(var(--x, 0px))
    translateY(var(--y, 0px))
    rotate(var(--r, 0deg))
    scale(var(--s, 1));
  box-shadow:
    0 0 0 8px var(--paper),
    0 0 0 9px var(--line),
    var(--shadow-md);
  transition:
    transform .62s var(--ease),
    opacity .45s ease,
    box-shadow .5s var(--ease);
  will-change: transform;
}
.deck__card .card__media { border-radius: var(--radius-sm); }

/* 最前面那张：描边换成主题色、可点开大图 */
.deck__card.is-front {
  cursor: zoom-in;
  box-shadow:
    0 0 0 8px var(--paper),
    0 0 0 9px color-mix(in srgb, var(--accent) 55%, transparent),
    var(--shadow-lg);
}
.deck__card.is-front:hover .card__no,
.deck__card.is-front:focus-visible .card__no { opacity: 1; transform: translateY(0); }
.deck__card.is-front:hover .card__zoom,
.deck__card.is-front:focus-visible .card__zoom { opacity: 1; transform: scale(1); }
.deck__card.is-front:hover img { transform: scale(1.04); filter: saturate(1.08); }

/* 左右切换按钮：桌面端浮在卡片两侧，手机端排到卡片下方 */
.deck__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(16px, 3vw, 26px);
}
.deck__count {
  min-width: 4.8em;
  text-align: center;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink-mute);
}
/* 这里的切换按钮不再用 .strip__nav 的绝对定位 */
.deck-wrap .strip__nav {
  position: static;
  transform: none;
}
.deck-wrap .strip__nav:hover { transform: scale(1.09); }
.deck-wrap .strip__nav:active { transform: scale(.96); }

@media (min-width: 861px) {
  .deck__ctrl {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    justify-content: space-between;
    margin-top: 0;
    padding-inline: clamp(4px, 1.6vw, 18px);
    pointer-events: none;          /* 空白区域不要挡住卡片 */
  }
  .deck__ctrl > .strip__nav { pointer-events: auto; }
  .deck__count { visibility: hidden; }
}

/* ---------- 11. 约稿须知 ---------- */
.info { padding: clamp(56px, 9vw, 104px) 0 clamp(30px, 5vw, 48px); }

.shead { text-align: center; margin-bottom: clamp(26px, 4vw, 44px); }
.shead h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6vw, 2.9rem);
  letter-spacing: -.01em;
}
.shead p { margin-top: 8px; color: var(--ink-soft); font-size: .96rem; }

.info__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(16px, 2.6vw, 26px);
}

.icard {
  position: relative;
  padding: clamp(24px, 3.4vw, 34px);
  border-radius: var(--radius);
  background: var(--paper);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.icard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--card-accent, var(--peach));
}
.icard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--peach);
  border-color: color-mix(in srgb, var(--card-accent) 45%, transparent);
}
.icard--sky   { --card-accent: #6FB4DE; }
.icard--blush { --card-accent: var(--coral); }
.icard--mint  { --card-accent: #6FBF8E; }

/* 「不接类型」——刻意做成红底警告牌，跟前两张拉开差别 */
.icard--stop {
  --card-accent: #D93A22;
  color: #FFF6F2;
  background:
    radial-gradient(circle at 86% 10%, rgba(255, 255, 255, .24), transparent 46%),
    linear-gradient(140deg, #E44E30 0%, #C93317 100%);
  border-color: #B72C13;
  box-shadow: 0 20px 42px -24px rgba(190, 45, 18, .9);
}
.icard--stop::before { background: rgba(255, 255, 255, .85); }
.icard--stop::after {
  content: "✕";
  position: absolute;
  right: -14px;
  bottom: -46px;
  font-size: 148px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .14);
  pointer-events: none;
}
.icard--stop h3 { color: rgba(255, 246, 242, .8); }
.icard--stop .icard__value { color: #FFF6F2; }
.icard--stop .icard__note { color: rgba(255, 246, 242, .88); }
.icard--stop .icard__icon {
  background: rgba(255, 255, 255, .2);
  color: #FFF6F2;
}
.icard--stop:hover {
  border-color: #A02410;
  box-shadow: 0 28px 54px -24px rgba(190, 45, 18, 1);
}
.icard--stop:hover .icard__icon { background: rgba(255, 255, 255, .28); }

.icard__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  margin-bottom: 16px;
  /* 先给不支持的浏览器一个安全值，再用 color-mix 覆盖 */
  background: rgba(255, 253, 250, .82);
  color: var(--ink);
  background: color-mix(in srgb, var(--card-accent) 16%, var(--paper));
  color: color-mix(in srgb, var(--card-accent) 88%, #3A2418);
}
.icard h3 {
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.icard__value {
  margin-top: 10px;
  font-size: clamp(1.18rem, 3.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.005em;
}
.icard__note { margin-top: 8px; font-size: .88rem; color: var(--ink-soft); }

/* ---------- 12. 约稿 CTA ---------- */
.cta { padding: clamp(20px, 4vw, 40px) 0 clamp(56px, 9vw, 96px); }
.cta__card {
  position: relative;
  padding: clamp(38px, 7vw, 76px) clamp(22px, 5vw, 64px);
  border-radius: clamp(24px, 4vw, 36px);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 231, 168, .95), transparent 46%),
    radial-gradient(circle at 88% 92%, rgba(255, 213, 222, .92), transparent 46%),
    linear-gradient(140deg, #FFE5CC, #FFD8CE 55%, #FFEEDC);
  border: 2px solid rgba(74, 50, 38, .1);
  box-shadow: var(--shadow-md);
}
.cta__glow {
  position: absolute;
  top: -40%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .5), transparent 40%);
  animation: spin 16s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }

.cta__card h2 {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6.4vw, 3.1rem);
  letter-spacing: -.01em;
}
.cta__card > p {
  position: relative;
  margin-top: 14px;
  margin-inline: auto;
  max-width: 44ch;
  color: #6B4A36;
  font-size: clamp(.94rem, 3.4vw, 1.06rem);
}
.cta__btn { position: relative; margin-top: 30px; }
.cta__note {
  position: relative;
  margin-top: 16px !important;
  font-size: .82rem !important;
  color: #8A6A54 !important;
  letter-spacing: .04em;
}

/* ---------- 13. 社交 ---------- */
.social { padding: 0 0 clamp(56px, 9vw, 96px); }
.social__title {
  text-align: center;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.social__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.sbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 18px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: .95rem;
  font-weight: 600;
  transition: transform .34s var(--ease), box-shadow .34s, border-color .34s, color .34s;
}
.sbtn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 8px;
  flex: 0 0 auto;
}
.sbtn:hover {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: var(--shadow-md);
  border-color: var(--peach);
  color: var(--coral-deep);
}

/* ---------- 14. 页脚 ---------- */
.footer {
  border-top: 2px dashed var(--line);
  padding: clamp(30px, 5vw, 46px) 0 calc(clamp(30px, 5vw, 46px) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(255, 231, 200, .5));
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  justify-content: space-between;
}
.footer__brand { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.footer__brand b { font-family: var(--font-display); font-size: 1.12rem; }
.footer__brand span:last-child { font-size: .78rem; color: var(--ink-mute); }
.footer__mark { color: var(--coral); }
.footer__rights { font-size: .82rem; color: var(--ink-mute); }
.footer__top {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: transform .3s var(--ease), border-color .3s, color .3s;
}
.footer__top:hover { transform: translateY(-3px); border-color: var(--peach); color: var(--coral-deep); }

/* ---------- 15. 灯箱 ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 46px);
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(58, 34, 22, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeIn .3s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox__stage {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: zoomIn .42s var(--ease) both;
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.9) translateY(18px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

#lbImg {
  max-width: min(100%, 1500px);
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 0 0 8px rgba(255, 253, 250, .95), 0 30px 70px -20px rgba(0, 0, 0, .6);
}

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 253, 250, .96);
  box-shadow: var(--shadow-md);
  font-size: .84rem;
  color: var(--ink-soft);
}
#lbCaption { font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; }
.lightbox__tools { display: flex; gap: 10px; }
.lightbox__tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--cream-2);
  font-weight: 600;
  transition: background .25s, color .25s;
}
.lightbox__tool:hover { background: var(--butter); color: var(--coral-deep); }

.lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 26px);
  right: clamp(12px, 3vw, 26px);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 253, 250, .95);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), color .3s;
}
.lightbox__close:hover { transform: rotate(90deg) scale(1.08); color: var(--coral-deep); }

.lightbox__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 253, 250, .9);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-50%);
  transition: transform .3s var(--ease), color .3s, background .3s;
}
.lightbox__arrow--prev { left: clamp(10px, 3vw, 30px); }
.lightbox__arrow--next { right: clamp(10px, 3vw, 30px); }
.lightbox__arrow:hover {
  transform: translateY(-50%) scale(1.1);
  color: var(--coral-deep);
  background: #FFFDFA;
}
.lightbox__arrow[disabled] { opacity: .25; pointer-events: none; }

/* 打开灯箱时锁滚动 */
body.is-locked { overflow: hidden; }

/* ---------- 16. 滚动进场动画 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--rd, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 17. 响应式 ---------- */
/* 分区卡片高度（按分类微调） */
#illust { --h: clamp(196px, 44vw, 336px); }
#chibi  { --h: clamp(148px, 38vw, 292px); }
#l2d    { --h: clamp(222px, 50vw, 392px); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__actions { margin-left: auto; }

  /* 价格换到标题下方，依然是大字 */
  .ghead {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "idx"
      "name"
      "price"
      "note"
      "desc";
    row-gap: 10px;
  }
  .ghead__pricing {
    justify-self: start;
    align-items: flex-start;
    margin-top: 6px;
    margin-bottom: 14px;
  }

  .strip__nav { display: none; }
  /* L2D 的叠压卡片在手机上依然要靠按钮翻，不能跟着隐藏 */
  .deck-wrap .strip__nav { display: grid; }
  .strip {
    scroll-snap-type: x mandatory;
    padding-inline: clamp(18px, 6vw, 30px);
  }
  .card { scroll-snap-align: center; }
  .card__sticker { max-width: 138px; font-size: .78rem; }

  .footer__inner { flex-direction: column; align-items: flex-start; }

  .lightbox__arrow { width: 44px; height: 44px; }
  .lightbox__arrow--prev { left: 6px; }
  .lightbox__arrow--next { right: 6px; }
  #lbImg { max-height: calc(100dvh - 210px); }
}

@media (max-width: 560px) {
  :root { --nav-h: 60px; }
  .brand__text i { display: none; }
  .btn--sm { padding: 0 14px; font-size: .82rem; }
  .langbtn { padding: 0 11px; }
  .hero { padding-top: 34px; }
  .deck { --peek: 22px; }
  .sbtn { flex: 1 1 calc(50% - 6px); justify-content: flex-start; padding: 0 16px; font-size: .88rem; }
  .marquee { transform: rotate(-1.6deg) scale(1.06); }
  .lightbox__bar { font-size: .78rem; gap: 10px; padding: 7px 12px; }
  .lightbox__arrow { display: none; }
}

/* 触摸设备上不要有 hover 残留 */
@media (hover: none) {
  .card__no, .card__zoom { opacity: 0 !important; }
  .card:hover { transform: rotate(var(--rot, 0deg)); }
  .card:hover img { transform: none; }
  /* 触屏没有 hover，最前面那张的编号直接常驻 */
  .deck__card.is-front .card__no { opacity: 1 !important; transform: none; }
}

/* ---------- 18. 无障碍：尊重减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card { animation: none; }
}