/* ==========================================================================
   Ndovu - the etelej.com lab design system.
   Self-owned: dark-first, editorial publication direction. Serif display,
   sans body, mono data accents. Seeded by the Jev lab briefing artifact.
   Loaded only by /lab/ pages; must never affect other routes.
   ========================================================================== */

:root{
	--bg: #161411;
	--bg: oklch(0.155 0.006 70);
	--bg-raised: #1e1b16;
	--bg-raised: oklch(0.19 0.008 70);
	--bg-sunken: #100f0c;
	--bg-sunken: oklch(0.125 0.005 70);
	--ink: #eae6dd;
	--ink: oklch(0.92 0.008 80);
	--ink-dim: #b3ada0;
	--ink-dim: oklch(0.72 0.01 80);
	--ink-faint: #857f72;
	--ink-faint: oklch(0.55 0.01 80);
	--line: #4a463d;
	--line: oklch(0.32 0.01 80);
	--line-soft: #3b382f;
	--line-soft: oklch(0.26 0.01 80);
	--accent: #e3a13e;
	--accent: oklch(0.8 0.15 75);
	--accent-ink: #2e2011;
	--accent-ink: oklch(0.24 0.06 70);
	--serif: "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--sans: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
	background:var(--bg);color:var(--ink);
	font-family:var(--sans);font-size:16px;line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}

.lab-wrap{max-width:1060px;margin:0 auto;padding:0 24px}
@media(max-width:640px){.lab-wrap{padding:0 18px}}

/* ---------- topbar ---------- */
.lab-topbar{
	border-bottom:1px solid var(--line-soft);
	font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
}
.lab-topbar .lab-wrap{display:flex;align-items:center;gap:16px;height:44px}
.lab-topbar nav{margin-left:auto;display:flex;gap:14px}
.lab-topbar a{color:var(--ink-dim);text-decoration:none}
.lab-topbar a:hover{color:var(--ink)}
.lab-brand{color:var(--accent) !important;text-decoration:none;font-weight:600}
.lab-crumb{color:var(--ink-faint)}
@media(max-width:640px){.lab-topbar nav{display:none}}

/* ---------- hero ---------- */
.lab-hero{padding:72px 0 56px;border-bottom:1px solid var(--line-soft)}
.lab-kicker{
	font-family:var(--mono);font-size:12px;letter-spacing:.14em;
	text-transform:uppercase;color:var(--accent);margin-bottom:20px;
}
.lab-hero h1{
	font-family:var(--serif);font-weight:400;
	font-size:clamp(40px,6.4vw,68px);line-height:1.05;letter-spacing:-0.01em;
	max-width:16ch;
}
.lab-dek{
	font-family:var(--serif);font-size:clamp(18px,2.2vw,21px);
	line-height:1.5;color:var(--ink-dim);max-width:56ch;margin-top:22px;
}

/* ---------- index: groups and items ---------- */
.lab-group{padding:48px 0;border-bottom:1px solid var(--line-soft)}
.lab-group:last-of-type{border-bottom:none}
.lab-group-head{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.lab-chip{
	font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
	color:var(--accent-ink);background:var(--accent);padding:3px 8px;border-radius:2px;
}
.lab-count{font-family:var(--mono);font-size:11px;color:var(--ink-faint);letter-spacing:.06em}
.lab-items{list-style:none}
.lab-item{
	border:1px solid var(--line-soft);background:var(--bg-raised);
	margin-top:14px;
}
.lab-item-link{
	display:block;padding:22px 24px;text-decoration:none;color:inherit;
}
.lab-item-link:hover{background:var(--bg-sunken)}
.lab-item-date{
	display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
	color:var(--accent);margin-bottom:8px;
}
.lab-item-title{
	display:block;font-family:var(--serif);font-weight:400;
	font-size:clamp(24px,3.2vw,32px);line-height:1.15;margin-bottom:8px;
}
.lab-item-summary{display:block;color:var(--ink-dim);font-size:14.5px;max-width:68ch}
.lab-item-media{
	display:flex;gap:16px;padding:0 24px 18px;flex-wrap:wrap;
}
.lab-media-link{
	font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
	color:var(--ink-dim);text-decoration:none;text-transform:uppercase;
}
.lab-media-link:hover{color:var(--ink)}
.lab-media-link em{font-style:normal;color:var(--accent)}

/* ---------- item page ---------- */
.lab-itempage .lab-hero{padding:56px 0 48px}
.lab-itempage .lab-hero h1{max-width:22ch}
.lab-meta{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;
	font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-faint);
}
.lab-meta .lab-chip{color:var(--accent-ink)}
.lab-article{padding:56px 0;border-bottom:1px solid var(--line-soft)}
.lab-article h2{
	font-family:var(--serif);font-weight:400;
	font-size:clamp(26px,3.4vw,36px);line-height:1.15;margin:44px 0 16px;max-width:26ch;
}
.lab-article h2:first-child{margin-top:0}
.lab-article h3{font-family:var(--sans);font-weight:600;font-size:16px;margin:28px 0 8px}
.lab-article p{max-width:68ch;color:var(--ink-dim)}
.lab-article p+p{margin-top:14px}
.lab-article p strong,.lab-article li strong{color:var(--ink)}
.lab-article .lab-lede{font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink)}
.lab-article a{color:var(--accent)}
.lab-article ul,.lab-article ol{max-width:68ch;padding-left:20px;color:var(--ink-dim);margin:14px 0}
.lab-article li{margin-top:8px}
.lab-article ul.plain{list-style:none;padding-left:0}
.lab-article ul.plain li{padding-left:18px;position:relative}
.lab-article ul.plain li::before{content:"\203A";position:absolute;left:0;color:var(--accent)}
.lab-article code{
	font-family:var(--mono);font-size:.88em;background:var(--bg-sunken);
	border:1px solid var(--line-soft);padding:1px 5px;border-radius:3px;color:var(--ink);
}
.lab-article blockquote{
	border-left:2px solid var(--accent);padding:4px 0 4px 18px;margin:22px 0;
	font-family:var(--serif);font-size:17px;color:var(--ink);max-width:62ch;
}
.lab-article .lab-small{font-family:var(--mono);font-size:12px;color:var(--ink-faint)}

/* ---------- share bar ---------- */
.lab-share{
	border:1px solid var(--line-soft);background:var(--bg-raised);
	padding:18px 22px;margin-top:44px;
}
.lab-share-label{
	font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
	text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px;
}
.lab-share-row{display:flex;gap:10px;flex-wrap:wrap}
.lab-share-row a,.lab-share-row button{
	font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
	color:var(--ink-dim);background:var(--bg);border:1px solid var(--line);
	padding:8px 14px;border-radius:2px;text-decoration:none;cursor:pointer;
}
.lab-share-row a:hover,.lab-share-row button:hover{color:var(--ink);border-color:var(--accent)}
.lab-share-row button{font:inherit}
.lab-share-row button.is-copied{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

/* ---------- item footer ---------- */
.lab-itemfooter{padding:48px 0 80px;border-top:1px solid var(--line-soft)}
.lab-itemfooter .lab-wrap{
	font-family:var(--mono);font-size:12px;color:var(--ink-faint);line-height:1.9;
}
.lab-itemfooter a{color:var(--ink-dim)}
.lab-itemfooter a:hover{color:var(--ink)}