/* ============================================================
   skin: swatch（紡織/機能布 森嶽）
   atelier 布樣美學：暖米紙底 × 褐墨 × 襯線 Fraunces／Noto Serif TC。
   布是觸覺與色感的商品——色卡、織紋、吊牌是紡織業的通用語言，
   襯線字排出的版面像布樣本（swatch book）而不是機械型錄。
   ============================================================ */
body.skin-swatch {
	--paper: oklch(0.962 0.017 86);
	--paper-dim: oklch(0.932 0.02 84);
	--paper-sunk: oklch(0.975 0.013 86);
	--ink: oklch(0.3 0.032 52);
	--ink-deep: oklch(0.22 0.035 52);
	--text: oklch(0.38 0.028 52);
	--text-soft: oklch(0.5 0.026 52);
	--text-faint: oklch(0.63 0.02 52);
	--hairline: oklch(0.865 0.02 82);
	--hairline-strong: oklch(0.795 0.026 72);
	--font-display: 'Fraunces', 'Noto Serif TC', Georgia, serif;
	--font-body: 'Source Serif 4', 'Noto Serif TC', Georgia, serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* 襯線版面慣性：標題不再全大寫感、行距放鬆 */
body.skin-swatch h1, body.skin-swatch h2, body.skin-swatch h3 {
	letter-spacing: 0;
	font-weight: 600;
}
body.skin-swatch .kicker {
	font-family: var(--font-mono);
	letter-spacing: 0.3em;
}
body.skin-swatch .btn {
	border-radius: 0;
	font-family: var(--font-display);
	letter-spacing: 0.03em;
	font-weight: 600;
}
body.skin-swatch .wrap .stats div { border-top: 1px solid var(--accent-deep); }
body.skin-swatch .wrap .app-grid li { border-top: 1px solid var(--hairline-strong); }

/* ---- 版面慣性：頁面像翻開的布樣本 ---- */
/* hero：暖色大帶＋布紋底，文案置中偏左、art 縮成「貼上的布片」 */
body.skin-swatch .hero {
	background:
		radial-gradient(60rem 30rem at 20% 110%, oklch(0.9 0.04 90), transparent 70%),
		linear-gradient(180deg, var(--paper-dim), var(--paper));
	padding-block: clamp(3rem, 7vw, 5rem) 0;
}
body.skin-swatch .hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: end; }
/* hero art：像貼樣布——微旋轉＋陰影＋紙邊 */
body.skin-swatch .hero-grid > div:last-child {
	background: var(--paper-sunk);
	border: 1px solid var(--hairline);
	box-shadow: 0 14px 34px oklch(0.4 0.05 60 / 0.18);
	padding: 1rem;
	transform: rotate(-1.2deg);
}
/* 產品線＝布樣卡格（swatch cards） */
body.skin-swatch .wrap .lines {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.6rem;
}
body.skin-swatch .wrap .lines li {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hairline-strong);
	border-top: 3px solid var(--accent);
	background: var(--paper-sunk);
	padding: 1.1rem 1.2rem 1.3rem;
}
body.skin-swatch .wrap .lines .line-thumb { max-width: none; width: 100%; order: 2; margin-top: 0.9rem; }
body.skin-swatch .wrap .lines .line-body { order: 3; }
body.skin-swatch .wrap .lines .mono-no {
	order: 1;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 0.95rem;
	color: var(--text-faint);
}
body.skin-swatch .wrap .lines .more { order: 4; margin-top: auto; padding-top: 0.8rem; }
body.skin-swatch .wrap .lines .line-body h3 { font-size: 1.15rem; }
@media (max-width: 900px) {
	body.skin-swatch .wrap .lines { grid-template-columns: 1fr; }
}