/* ============================================================
   skin: slab（建材/瓷磚 磐采）
   材質大板美學：石灰暖白 × 暖石墨 × DM Serif Display。
   建材賣的是表面與空間——大面積色塊、editorial 襯線題註、
   版面像建材樣品牆（material library）的分區陳列。
   ============================================================ */
body.skin-slab {
	--paper: oklch(0.955 0.009 76);
	--paper-dim: oklch(0.923 0.012 76);
	--paper-sunk: oklch(0.968 0.007 76);
	--ink: oklch(0.27 0.014 68);
	--ink-deep: oklch(0.2 0.014 68);
	--text: oklch(0.35 0.012 68);
	--text-soft: oklch(0.47 0.012 68);
	--text-faint: oklch(0.6 0.01 68);
	--hairline: oklch(0.865 0.01 76);
	--hairline-strong: oklch(0.79 0.014 68);
	--font-display: 'DM Serif Display', 'Noto Serif TC', Georgia, serif;
	--font-body: 'DM Sans', 'Noto Sans TC', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body.skin-slab h1, body.skin-slab h2 { letter-spacing: 0; font-weight: 400; }
body.skin-slab .kicker { letter-spacing: 0.32em; font-weight: 500; }
body.skin-slab .btn {
	border-radius: 0;
	font-family: var(--font-body);
	font-weight: 700;
	box-shadow: none;
	letter-spacing: 0.06em;
}
body.skin-slab .wrap .app-grid li { border-top: 4px solid var(--accent); }
body.skin-slab .wrap .stats div { border-top: 4px solid var(--accent); }

/* ---- 版面慣性：頁面像建材樣品牆（大塊面、editorial 留白） ---- */
/* hero：左大留白、右大板色塊（拼貼感） */
body.skin-slab .hero {
	background: linear-gradient(100deg, var(--paper) 55%, var(--paper-dim) 55.2%, var(--paper-dim));
	padding-block: clamp(3rem, 7vw, 5.2rem) 0;
}
body.skin-slab .hero-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
body.skin-slab .hero h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 400; }
/* hero art：大板無框（表面即版面） */
body.skin-slab .hero-grid > div:last-child {
	background: var(--paper-sunk);
	border: 1px solid var(--hairline);
	padding: 1.2rem;
	box-shadow: 0 24px 60px oklch(0.35 0.03 70 / 0.16);
}
/* 產品線＝大板輪替（大卡上下流、大字題註） */
body.skin-slab .wrap .lines { display: grid; gap: 2.6rem; }
body.skin-slab .wrap .lines li {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(1.4rem, 4vw, 3rem);
	align-items: center;
	border: none;
	border-top: 1px solid var(--hairline);
	padding-block: 2.2rem;
	background: none;
}
body.skin-slab .wrap .lines li:nth-child(even) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
body.skin-slab .wrap .lines li:nth-child(even) .line-thumb { order: 2; }
body.skin-slab .wrap .lines li:nth-child(even) .line-body { order: 1; text-align: right; }
body.skin-slab .wrap .lines li:nth-child(even) .line-body .tag { margin-inline: auto 0; }
body.skin-slab .wrap .lines .mono-no {
	grid-column: 1 / -1;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-style: italic;
	color: var(--accent-deep);
}
body.skin-slab .wrap .lines .line-thumb { max-width: none; width: 100%; }
body.skin-slab .wrap .lines .more { grid-column: 1 / -1; }
body.skin-slab .wrap .lines .line-body h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 400; }
@media (max-width: 900px) {
	body.skin-slab .wrap .lines li,
	body.skin-slab .wrap .lines li:nth-child(even) { grid-template-columns: 1fr; }
	body.skin-slab .wrap .lines li:nth-child(even) .line-body { text-align: left; }
}