/* ============================================================
   06 拟物化 Skeuomorphism · 2007—2013
   木桌 + 便签纸 + 高光缝线 + 会反光的按钮
   ============================================================ */
:root[data-theme="skeuo"] {
  --paper: #faeec3;
  --butter: #f6e6ae;
  --sky: #f8ecc9;
  --ink: #4a3520;
  --rose: #b4452e;
  --pink: #e0b04a;
  --wine: #43301c;
  --sk-wood-1: #8a5a2c;
  --sk-wood-2: #6d451f;
  --sk-wood-3: #5a3818;
  --sk-paper: #faeec3;
  --sk-line: #cfd8e8;
  --sk-red: #c94b3f;
  --sans: Georgia, "Songti SC", "SimSun", "Source Han Serif SC", serif;
}

/* 木纹桌板：三层竖纹 + 横向明暗 */
:root[data-theme="skeuo"] body {
  background-color: var(--sk-wood-2);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 18%, transparent 82%, rgba(0, 0, 0, .22)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 27px);
}
:root[data-theme="skeuo"] .hero,
:root[data-theme="skeuo"] .flow,
:root[data-theme="skeuo"] .foot { background: transparent; }

/* 主体是一张摊在桌上的横线便签 */
:root[data-theme="skeuo"] .about,
:root[data-theme="skeuo"] .services,
:root[data-theme="skeuo"] .skills {
  background-color: var(--sk-paper);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(120, 150, 190, .35) 31px 32px);
  border-top: 6px solid #c9a86f;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .12),
    inset 0 14px 30px rgba(120, 90, 40, .16),
    0 18px 40px rgba(40, 24, 8, .3);
}
:root[data-theme="skeuo"] .about .plate::before,
:root[data-theme="skeuo"] .services .plate::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sk-red);
  opacity: .5;
}

/* 标题用衬线，像手写便签上的字 */
:root[data-theme="skeuo"] .display,
:root[data-theme="skeuo"] .hero__title {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -.01em;
}
:root[data-theme="skeuo"] .display em { color: var(--rose); text-shadow: 1px 1px 0 rgba(255, 255, 255, .8), 3px 3px 6px rgba(90, 60, 20, .25); }
:root[data-theme="skeuo"] .display--light { color: var(--paper); }
:root[data-theme="skeuo"] .display--light em { color: var(--pink); text-shadow: 0 2px 3px rgba(0, 0, 0, .45); }

/* 按钮：上亮下暗的玻璃胶囊 + 内高光 + 投影 */
:root[data-theme="skeuo"] .btn,
:root[data-theme="skeuo"] .copybtn,
:root[data-theme="skeuo"] .chips li,
:root[data-theme="skeuo"] .brand,
:root[data-theme="skeuo"] .menu__link--cta,
:root[data-theme="skeuo"] .acc__plus {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #9a6a33 0%, #7a4f22 48%, #5d3a16 100%);
  color: #fdf3d5;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 6px rgba(0, 0, 0, .35),
    0 3px 6px rgba(40, 22, 6, .38);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
}
:root[data-theme="skeuo"] .btn > *,
:root[data-theme="skeuo"] .chips li > * { transform: none; }
:root[data-theme="skeuo"] .btn { padding: 12px 24px; }
:root[data-theme="skeuo"] .btn:hover {
  background: linear-gradient(180deg, #b07a3c 0%, #8d5c28 48%, #6b431a 100%);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(0, 0, 0, .3), 0 5px 10px rgba(40, 22, 6, .42);
}
:root[data-theme="skeuo"] .btn:hover i { transform: translateY(2px); }
:root[data-theme="skeuo"] .brand { background: linear-gradient(180deg, #4a3520, #2d1d0d); }
:root[data-theme="skeuo"] .menu__link--cta { background: linear-gradient(180deg, #c9503f 0%, #a53a2b 48%, #83291d 100%); }
:root[data-theme="skeuo"] .chips li { background: linear-gradient(180deg, #fdf5da, #e7d5a6); color: #5a3f22; text-shadow: 0 1px 0 #fff; }
:root[data-theme="skeuo"] .menu__link { color: #fdf3d5; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
:root[data-theme="skeuo"] .menu__link--cta { color: #fff5ec; }
:root[data-theme="skeuo"] .menu__link--cta[aria-current="true"] { background: linear-gradient(180deg, #f0c65a, #c9962c); color: #4a3520; }

:root[data-theme="skeuo"] .kicker { color: #f6e2b0; font-family: var(--sans); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
:root[data-theme="skeuo"] .kicker b { color: #ffd98a; }
:root[data-theme="skeuo"] .about .kicker,
:root[data-theme="skeuo"] .services .kicker,
:root[data-theme="skeuo"] .skills .kicker { color: var(--rose); text-shadow: none; }
:root[data-theme="skeuo"] .about .kicker b,
:root[data-theme="skeuo"] .services .kicker b,
:root[data-theme="skeuo"] .skills .kicker b { color: #8d5a2a; }

/* 首屏：木桌上的金属相框 */
:root[data-theme="skeuo"] .art__slab {
  left: 4%;
  top: 14%;
  width: 84%;
  padding-bottom: 66%;
  border-radius: 8px;
  background: linear-gradient(160deg, #efe2c4, #d8c39a);
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 14px 26px rgba(30, 16, 4, .45);
}
:root[data-theme="skeuo"] .art__ring {
  display: block;
  width: 70%;
  padding-bottom: 70%;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 62%);
  opacity: .38;
}
:root[data-theme="skeuo"] .art__cube {
  width: 20%;
  border-radius: 22%;
  background: linear-gradient(180deg, #f2f6fb, #c9d3e0);
  box-shadow: inset 0 1px 0 #fff, 0 4px 8px rgba(30, 16, 4, .4);
  --rest: rotate(-8deg);
}
:root[data-theme="skeuo"] .art__pip {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff, #d9a24a 58%, #a06a1d 100%);
  box-shadow: 0 2px 5px rgba(30, 16, 4, .45);
}
:root[data-theme="skeuo"] .art__frame {
  border: 5px solid #f7f2e6;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .18),
    0 1px 0 #fff,
    0 12px 24px rgba(24, 12, 2, .5);
  --rest: rotate(-2deg);
}
:root[data-theme="skeuo"] .art__frame img { border-radius: 2px; }
:root[data-theme="skeuo"] .art__tag {
  border-radius: 8px;
  background: linear-gradient(180deg, #3b2915, #1f150a);
  color: #f9e9bf;
  box-shadow: 0 4px 10px rgba(24, 12, 2, .5), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: rotate(2deg);
}
:root[data-theme="skeuo"] .art__tag span { color: #f9e9bf; }
:root[data-theme="skeuo"] .art__badge { display: none; }
:root[data-theme="skeuo"] .hero__stamp { color: #f2dcae; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* 首屏左侧：一张压在木桌上的横线便签，文字落在纸上才读得清 */
:root[data-theme="skeuo"] .hero__copy {
  position: relative;
  background-color: var(--sk-paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 30px, rgba(120, 150, 190, .32) 30px 31px);
  border-radius: 10px;
  padding: clamp(24px, 3vw, 42px) clamp(24px, 3.2vw, 50px) clamp(26px, 3vw, 40px);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(120, 88, 44, .22),
    0 18px 40px rgba(20, 10, 2, .45),
    0 2px 6px rgba(20, 10, 2, .35);
}
:root[data-theme="skeuo"] .hero__copy::before {
  content: "";
  position: absolute;
  left: clamp(34px, 4.2vw, 58px);
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(201, 75, 63, .4);
}
:root[data-theme="skeuo"] .hero__title { color: #3d2a16; font-size: clamp(2.3rem, 6.2vw, 5.2rem); line-height: .96; }
:root[data-theme="skeuo"] .hero__title em { color: var(--rose); }
:root[data-theme="skeuo"] .hero .tag span,
:root[data-theme="skeuo"] .hero .kicker { color: #8d5a2a; text-shadow: none; }
:root[data-theme="skeuo"] .hero__lead { color: #4a3520; text-shadow: none; }
:root[data-theme="skeuo"] .ghostlink { color: #7a4f22; border-color: #b8862a; }
:root[data-theme="skeuo"] .ghostlink:hover { color: var(--rose); border-color: var(--rose); }

:root[data-theme="skeuo"] .topbar { border-bottom: 1px solid rgba(0, 0, 0, .35); background: linear-gradient(180deg, #4b3018, #38220f); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
:root[data-theme="skeuo"] .topbar.is-stuck { background: linear-gradient(180deg, #4b3018, #38220f); backdrop-filter: none; }

/* 列表：缝线分隔 + 铜扣序号 */
:root[data-theme="skeuo"] .rows { border-top: 2px dashed rgba(120, 88, 44, .55); }
:root[data-theme="skeuo"] .rows__item { border-bottom: 2px dashed rgba(120, 88, 44, .55); }
:root[data-theme="skeuo"] .row::before { background: #8d5a2a; }
:root[data-theme="skeuo"] .row:hover, :root[data-theme="skeuo"] .row:focus-visible { color: var(--paper); }
:root[data-theme="skeuo"] .row__idx { color: var(--rose); }
:root[data-theme="skeuo"] .row__type { color: #8d5a2a; }
:root[data-theme="skeuo"] .row__go { color: var(--rose); }

:root[data-theme="skeuo"] .acc { border-top: 2px dashed rgba(120, 88, 44, .55); }
:root[data-theme="skeuo"] .acc__item { border-bottom: 2px dashed rgba(120, 88, 44, .55); }
:root[data-theme="skeuo"] .acc__btn:hover { background: rgba(180, 140, 80, .18); }
:root[data-theme="skeuo"] .acc__plus { width: 26px; height: 26px; }
:root[data-theme="skeuo"] .acc__item.is-open .acc__plus { background: linear-gradient(180deg, #f0c65a, #b8862a); color: #4a3520; }
:root[data-theme="skeuo"] .acc__title { color: #3d2a16; }
:root[data-theme="skeuo"] .acc__idx { color: var(--rose); opacity: 1; }
:root[data-theme="skeuo"] .acc__inner p { color: #4a3520; }

:root[data-theme="skeuo"] .facts > div { border-top: 1px solid rgba(120, 88, 44, .4); }
:root[data-theme="skeuo"] .facts dt { color: #8d5a2a; }
:root[data-theme="skeuo"] .facts dd { color: #3d2a16; }
:root[data-theme="skeuo"] .copy { color: #4a3520; }
:root[data-theme="skeuo"] .note { color: rgba(74, 53, 32, .8); }

:root[data-theme="skeuo"] .ticker { background: linear-gradient(180deg, #4a3018, #33200d); border-top: 1px solid rgba(255, 240, 200, .18); border-bottom: 1px solid rgba(0, 0, 0, .4); }
:root[data-theme="skeuo"] .ticker__run { color: #f7e6bd; }
:root[data-theme="skeuo"] .ticker__run i { color: #e8b45a; }
/* 流程带：也是摊在木桌上的一张纸，不能直接落在木头上（深棕字读不清） */
:root[data-theme="skeuo"] .flow {
  background-color: var(--sk-paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(120, 150, 190, .35) 31px 32px);
  border-top: 6px solid #c9a86f;
  border-bottom: 6px solid #b8965c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 14px 30px rgba(30, 16, 4, .3);
}
:root[data-theme="skeuo"] .flow__step h3 { color: #3d2a16; }
:root[data-theme="skeuo"] .flow__step p { color: rgba(74, 53, 32, .82); }
:root[data-theme="skeuo"] .flow__list::before { background: rgba(120, 88, 44, .45); }
:root[data-theme="skeuo"] .flow__list li::before { background: #b8862a; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
:root[data-theme="skeuo"] .flow__no { color: #8d5a2a; }

/* 联系区：深色皮革 */
:root[data-theme="skeuo"] .contact {
  background-color: var(--sk-wood-3);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 240, 200, .12), transparent 55%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .12) 0 3px, transparent 3px 7px);
  border-top: 8px solid #2c1a0b;
  box-shadow: inset 0 20px 40px rgba(0, 0, 0, .45);
}
:root[data-theme="skeuo"] .contact::after {
  content: "✻";
  color: rgba(255, 226, 160, .16);
  opacity: 1;
  font-size: clamp(9rem, 22vw, 19rem);
  text-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
:root[data-theme="skeuo"] .mail { color: #ffe9b3; background-image: linear-gradient(#e8b45a, #e8b45a); }
:root[data-theme="skeuo"] .mail:hover { color: #fff6dd; }
:root[data-theme="skeuo"] .copybtn { background: linear-gradient(180deg, #f6e3b4, #d8bc84); color: #4a3520; text-shadow: 0 1px 0 #fff; }
:root[data-theme="skeuo"] .copybtn:hover { background: linear-gradient(180deg, #fff2ce, #e6ca92); }
:root[data-theme="skeuo"] .tel { color: #f7e6bd; border-color: rgba(247, 230, 189, .5); }
:root[data-theme="skeuo"] .kicker--light { color: #e8cfa0; }
:root[data-theme="skeuo"] .kicker--light b { color: #ffd98a; }
:root[data-theme="skeuo"] .note--light { color: rgba(247, 230, 189, .72); }
:root[data-theme="skeuo"] .foot { background: #2c1a0b; color: #e8cfa0; }
:root[data-theme="skeuo"] .ruler i { background: #e8b45a; }
:root[data-theme="skeuo"] .curtain { background: #4a3018; }
:root[data-theme="skeuo"] .curtain__star { color: #c9503f; }
:root[data-theme="skeuo"] .curtain__sky { background: #2c1a0b; }
:root[data-theme="skeuo"] .curtain__title { color: #fdf3d5; }
:root[data-theme="skeuo"] .curtain__title span { color: #f0c65a; text-shadow: 2px 2px 4px rgba(0, 0, 0, .5); }
:root[data-theme="skeuo"] .cursor span { background: #4a3520; color: #fdf3d5; border-radius: 999px; }

/* --- 字体 --- */
:root[data-theme="skeuo"] {
  --display: "Playfair Display", Georgia, "Songti SC", "SimSun", serif;
}