@font-face {
			font-family: "Gilroy";
			src: url("../fonts/Gilroy-Light.woff2") format('woff2');
			font-weight: 300;
			font-style: normal;
			font-display: swap;
		}
@font-face {
			font-family: "Gilroy";
			src: url("../fonts/Gilroy-LightItalic.woff2") format('woff2');
			font-weight: 300;
			font-style: italic;
			font-display: swap;
		}
@font-face {
			font-family: "Gilroy";
			src: url("../fonts/Gilroy-Regular.woff2") format('woff2');
			font-weight: 400;
			font-style: normal;
			font-display: swap;
		}
@font-face {
			font-family: "Gilroy";
			src: url("../fonts/Gilroy-RegularItalic.woff2") format('woff2');
			font-weight: 400;
			font-style: italic;
			font-display: swap;
		}
@font-face {
			font-family: "Gilroy";
			src: url("../fonts/Gilroy-Medium.woff2") format('woff2');
			font-weight: 500;
			font-style: normal;
			font-display: swap;
		}
@font-face {
			font-family: "Gilroy";
			src: url("../fonts/Gilroy-SemiBold.woff2") format('woff2');
			font-weight: 600;
			font-style: normal;
			font-display: swap;
		}
@font-face {
			font-family: "Gilroy";
			src: url("../fonts/Gilroy-Bold.woff2") format('woff2');
			font-weight: 700;
			font-style: normal;
			font-display: swap;
		}

		:root {
			--bg: #f6f4ed; --surface: #ffffff;
			--text: #000000; --text-light: #555555; --text-muted: #999999;
			--border: rgba(0,0,0,0.07); --teal: #8caaab; --teal-dark: #6e8b8d;
			--nav-border: rgba(0,0,0,0.06); --divider: rgba(0,0,0,0.08);
			--toggle-bg: rgba(0,0,0,0.06); --toggle-icon-color: #555;
			--blockquote-border: #8caaab;
			--tag-bg: rgba(140,170,171,0.12); --tag-color: #6e8b8d;
			--step-bg: rgba(140,170,171,0.07); --step-border: rgba(140,170,171,0.25);
			--section-label-bg: rgba(140,170,171,0.10);
		}
		html.dark {
			--bg: #1f1f1f; --surface: #2a2a2a;
			--text: #ffffff; --text-light: #bcbcbc; --text-muted: #888888;
			--border: rgba(255,255,255,0.07); --nav-border: rgba(255,255,255,0.06);
			--divider: rgba(255,255,255,0.07);
			--toggle-bg: rgba(255,255,255,0.1); --toggle-icon-color: #bcbcbc;
			--blockquote-border: #6e8b8d;
			--tag-bg: rgba(140,170,171,0.15); --tag-color: #8caaab;
			--step-bg: rgba(140,170,171,0.08); --step-border: rgba(140,170,171,0.2);
			--section-label-bg: rgba(140,170,171,0.12);
		}
		*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
		html { scroll-behavior: smooth; background: var(--bg); transition: background 0.3s ease; }
		body { font-family: "Gilroy", sans-serif; font-weight: 300; background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background 0.3s ease, color 0.3s ease; }
		a { text-decoration: none; color: inherit; }
		nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; background: var(--bg); border-bottom: 1px solid var(--nav-border); transition: background 0.3s ease, border-color 0.3s ease; }
		.nav-logo { font-size: 22px; font-weight: 400; letter-spacing: 0.02em; color: var(--text); transition: color 0.3s ease; }
		.nav-blog-link { font-size: 13px; font-weight: 300; color: var(--text-muted); margin-left: auto; margin-right: 20px; transition: color 0.2s ease; }
		.nav-blog-link:hover { color: var(--text); }
		.dm-toggle { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--toggle-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; }
		.icon-sun { display: none; }
		html.dark .icon-moon { display: none; }
		html.dark .icon-sun { display: block; }
		.post-hero-wrap { width: 100%; max-height: 520px; overflow: hidden; position: relative; }
		.post-hero-wrap img { width: 100%; height: 520px; object-fit: cover; object-position: center 35%; display: block; }
		.post-hero-wrap--contain { aspect-ratio: 16/9; height: auto; background: #c6cacc; }
		.post-hero-wrap--contain img { object-fit: contain; height: auto; }
		.post-section-divider { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--divider); }
		.post-hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to top, var(--bg), transparent); transition: background 0.3s ease; }
		.post-wrapper { max-width: 700px; margin: 0 auto; padding: 56px 32px 96px; }
		.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--text-muted); margin-bottom: 36px; transition: color 0.2s ease, gap 0.2s ease; }
		.back-link:hover { color: var(--text); gap: 10px; }
		.post-meta-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
		.post-tag { display: inline-block; font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tag-color); background: var(--tag-bg); padding: 4px 10px; border-radius: 50px; transition: color 0.3s ease, background 0.3s ease; }
		.post-date-read { font-size: 12px; color: var(--text-muted); transition: color 0.3s ease; }
		.post-title { font-size: clamp(28px, 5vw, 44px); font-weight: 400; color: var(--text); line-height: 1.2; margin-bottom: 20px; transition: color 0.3s ease; }
		.post-standfirst { font-size: 18px; font-weight: 300; color: var(--text-light); line-height: 1.7; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--divider); transition: color 0.3s ease, border-color 0.3s ease; }
		.post-body { font-size: 17px; line-height: 1.85; color: var(--text); transition: color 0.3s ease; }
		.post-body p { margin-bottom: 26px; }
		.post-body h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 400; color: var(--text); line-height: 1.3; margin: 52px 0 16px; transition: color 0.3s ease; }
		.post-body h3 { font-size: clamp(16px, 2vw, 19px); font-weight: 400; color: var(--text); margin: 36px 0 12px; transition: color 0.3s ease; }
		.post-body blockquote { border-left: 3px solid var(--blockquote-border); padding: 6px 0 6px 24px; margin: 36px 0; font-size: 19px; font-style: italic; color: var(--text-light); line-height: 1.65; transition: color 0.3s ease, border-color 0.3s ease; }
		.post-body strong { font-weight: 500; }
		.post-body ul, .post-body ol { padding-left: 24px; margin-bottom: 26px; }
		.post-body li { margin-bottom: 8px; line-height: 1.75; }
		.section-label { display: inline-block; font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); background: var(--section-label-bg); padding: 4px 10px; border-radius: 50px; margin-bottom: 16px; transition: color 0.3s ease, background 0.3s ease; }
		.how-to { background: var(--step-bg); border: 1px solid var(--step-border); border-radius: 16px; padding: 24px 28px; margin: 8px 0 32px; transition: background 0.3s ease, border-color 0.3s ease; }
		.how-to-label { font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; display: block; transition: color 0.3s ease; }
		.how-to ol { padding-left: 20px; margin: 0; font-size: 15px; line-height: 1.75; color: var(--text-light); transition: color 0.3s ease; }
		.how-to ol li { margin-bottom: 7px; }
		.how-to h4 { font-size: 13px; font-weight: 400; color: var(--text-muted); margin: 16px 0 8px; letter-spacing: 0.04em; transition: color 0.3s ease; }
		
		/* SERIES NUMBER BADGE */
		.series-badge {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 64px;
			height: 64px;
			border-radius: 50%;
			border: 2px solid var(--text);
			margin-bottom: 28px;
			transition: border-color 0.3s ease;
			flex-shrink: 0;
		}
		.series-badge span {
			font-family: "Gilroy", sans-serif;
			font-size: 22px;
			font-weight: 700;
			color: var(--text);
			letter-spacing: -0.02em;
			line-height: 1;
			transition: color 0.3s ease;
		}
/* ── SHARE BUTTON ── */
		.share-wrap {
			display: inline-flex;
			align-items: center;
			gap: 10px;
		}
		.share-wrap-label {
			font-family: "Gilroy", sans-serif;
			font-size: 12px;
			font-weight: 300;
			letter-spacing: 0.06em;
			color: var(--text-muted);
			transition: color 0.3s;
		}
		.share-btn-wrap {
			position: relative;
			display: inline-flex;
		}
		.share-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			border: 1.5px solid var(--border);
			background: transparent;
			color: var(--text-light);
			cursor: pointer;
			transition: background 0.2s ease, color 0.2s ease,
			            border-color 0.2s ease, transform 0.15s ease;
		}
		.share-btn:hover {
			background: var(--surface);
			border-color: var(--teal);
			color: var(--teal-dark);
			transform: translateY(-1px);
		}
		.share-btn:active { transform: scale(0.95); }
		.share-btn svg { flex-shrink: 0; pointer-events: none; }
		.share-tooltip {
			display: none;
			position: absolute;
			bottom: calc(100% + 6px);
			left: 50%;
			transform: translateX(-50%);
			background: var(--text);
			color: var(--bg);
			font-family: "Gilroy", sans-serif;
			font-size: 11px;
			font-weight: 400;
			padding: 4px 10px;
			border-radius: 6px;
			white-space: nowrap;
		}
		.share-btn-wrap.show-tip .share-tooltip { display: block; }
		footer { background: #1f1f1f; color: #bcbcbc; padding: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-family: "Gilroy", sans-serif; }
		.footer-tagline { font-size: 13px; font-weight: 300; letter-spacing: 0.04em; color: #bcbcbc; }
		.footer-links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
		.footer-links a { font-size: 12px; font-weight: 300; color: #888; transition: color 0.2s ease; }
		.footer-links a:hover { color: #bcbcbc; }

		/* ── RESPONSIVE ── */
		* { box-sizing: border-box; }
		img { max-width: 100%; height: auto; }

		@media (max-width: 680px) {
			html, body { overflow-x: hidden; width: 100%; }
			nav { padding: 16px 20px; }
			.nav-blog-link { margin-right: 12px; font-size: 12px; }
			.post-hero-wrap { max-height: 300px; }
			.post-hero-wrap img { height: 300px; object-fit: cover; width: 100%; }
			.post-wrapper { padding: 36px 20px 64px; max-width: 100%; }
			.post-title { font-size: clamp(22px, 6.5vw, 32px); }
			.post-standfirst { font-size: 15px; line-height: 1.65; }
			.post-body { font-size: 16px; }
			.post-body h2 { font-size: clamp(18px, 5vw, 22px); margin: 40px 0 12px; }
			.post-body blockquote { font-size: 16px; padding-left: 16px; }
			.post-body ul, .post-body ol { padding-left: 20px; }
			.how-to { padding: 18px; border-radius: 12px; }
			.how-to ol { font-size: 14px; }
			.series-badge { width: 48px; height: 48px; margin-bottom: 20px; }
			.series-badge span { font-size: 16px; }
			.post-meta-row { gap: 8px; }
			.share-wrap { gap: 8px; }
			.share-btn { width: 40px; height: 40px; }
			.back-link { margin-bottom: 24px; }
		}

		@media (max-width: 390px) {
			.post-wrapper { padding: 28px 16px 56px; }
			.post-title { font-size: clamp(20px, 7vw, 28px); }
			.post-hero-wrap img { height: 240px; }
			.series-badge { width: 44px; height: 44px; }
			.series-badge span { font-size: 14px; }
		}