/* =========================================================
   Nerdy Guides Ghost theme: brand stylesheet (ported from the Astro design)
   Brand red  #c90000  (nav, buttons, badges, STEP headings)
   Charcoal   #1e1e1e  (header, footer, main text)
   Contrast (WCAG AA): #c90000 on white 6.0:1, white on #c90000 6.0:1,
   #a80000 (small link text) on white 7.9:1, #1e1e1e on white 16.7:1.
   On charcoal, red text uses #ff4d4d (5.1:1) instead of #c90000 (2.8:1).
   ========================================================= */
:root {
	--red: #c90000;
	--red-hover: #a30000;
	--link: #a80000;
	--red-on-dark: #ff4d4d;
	--ink: #1e1e1e;
	--ink-2: #151515;
	--text: #1e1e1e;
	--muted: #595959;
	--bg: #f2f2f2;
	--card: #ffffff;
	--soft: #f6f6f6;
	--border: #e0e0e0;
	--shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px -8px rgb(0 0 0 / 18%);
	--radius: 10px;
	--font: 'Segoe UI', Ubuntu, Roboto, 'Helvetica Neue', Arial, sans-serif;
	--mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Ubuntu Mono', Menlo, Consolas, monospace;
	color-scheme: light;
}
:root[data-theme='dark'] {
	--link: #ff6b6b;
	--text: #e9e9e9;
	--muted: #b5b5b5;
	--bg: #121212;
	--card: #1b1b1b;
	--soft: #232323;
	--border: #303030;
	--shadow: 0 1px 2px rgb(0 0 0 / 40%);
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--gh-font-body, var(--font));
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--text);
	background: var(--bg);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--red); }
:root[data-theme='dark'] a:hover { color: #ff8f8f; }
code, kbd { font-family: var(--mono); font-size: 0.9em; }
kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 0.35em; background: var(--soft); }
.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1.25rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--red); color: #fff; padding: 0.5rem 1rem; z-index: 10; }
.skip-link:focus { left: 0.5rem; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- Header ---------- */
.site-header { background: var(--ink); color: #fff; border-top: 4px solid var(--red); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.brand { display: flex; align-items: center; gap: 0.85rem; min-width: 0; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
/* Header logo: the Club Patch badge (64x64 artwork), 48px on desktop and 40px on small screens */
.brand-logo { display: block; height: 48px; width: auto; flex-shrink: 0; }
.brand-patch { filter: drop-shadow(0 3px 6px rgb(0 0 0 / 45%)); }
/* the patch's own lettering is too small to read at header size, so the site title sits beside it */
.brand-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.brand-name { color: #f4ecdc; font-size: 1.35rem; line-height: 1.1; font-weight: 900; letter-spacing: 0.02em; white-space: nowrap; }
.brand-tagline { font-size: 0.82rem; line-height: 1.3; color: #cfcfcf; letter-spacing: 0.02em; }
.header-actions { display: flex; gap: 0.5rem; }
.icon-btn {
	display: inline-grid; place-items: center; width: 42px; height: 42px;
	border-radius: 50%; border: 1px solid #3a3a3a; background: transparent; color: #fff; cursor: pointer;
}
.icon-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }

/* ---------- Nav bar ---------- */
.site-nav { background: var(--red); box-shadow: 0 2px 0 rgb(0 0 0 / 12%); position: sticky; top: 0; z-index: 5; }
.nav-list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.nav-list a {
	display: flex; align-items: center; gap: 0.45rem; padding: 0.85rem 1rem;
	color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem;
	border-bottom: 3px solid transparent;
}
.nav-list a:hover { background: var(--ink); color: #fff; }
.nav-list a.active { background: var(--red-hover); border-bottom-color: #fff; }
.nav-toggle { display: none; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 2rem; padding-block: 2rem 3rem; align-items: start; }

/* ---------- Badges & buttons ---------- */
.badge {
	display: inline-block; background: var(--red); color: #fff; text-decoration: none;
	font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 0.25rem 0.65rem; border-radius: 4px;
}
.badge:hover { background: var(--ink); color: #fff; }
:root[data-theme='dark'] .badge:hover { background: #fff; color: var(--ink); }
.btn {
	display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start;
	background: var(--red); color: #fff; text-decoration: none; font-weight: 700;
	padding: 0.6rem 1.15rem; border-radius: 6px; transition: background 0.15s ease;
}
.btn:hover { background: var(--ink); color: #fff; }
:root[data-theme='dark'] .btn:hover { background: #fff; color: var(--ink); }

/* ---------- Intro banner ---------- */
.intro-banner {
	background: var(--card); border: 1px solid var(--border); border-left: 6px solid var(--red);
	border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-bottom: 1.75rem; box-shadow: var(--shadow);
}
.intro-banner h1 { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; font-weight: 900; }
.intro-banner p { margin: 0; color: var(--muted); }

/* ---------- Post cards ---------- */
.post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.post-card {
	display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border);
	border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.post-card:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 10px 28px -14px rgb(201 0 0 / 55%); }
.post-card.featured { grid-column: 1 / -1; }
.post-card-image { display: block; overflow: hidden; background: var(--ink); }
.post-card-image img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; transition: transform 0.3s ease; }
.post-card:hover .post-card-image img { transform: scale(1.03); }
.post-card-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.4rem 1.5rem; flex: 1; }
.post-card-title { margin: 0; font-size: 1.3rem; line-height: 1.3; font-weight: 800; }
.post-card.featured .post-card-title { font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.post-card-title a { color: var(--text); text-decoration: none; }
.post-card-title a:hover { color: var(--red); }
:root[data-theme='dark'] .post-card-title a:hover { color: var(--red-on-dark); }
.post-card-excerpt { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.98rem; }
.post-card .btn { margin-top: auto; }
.post-card-body .badge { align-self: flex-start; }
.empty-note { background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.5rem; color: var(--muted); font-style: italic; }

/* ---------- Post meta ---------- */
.post-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0; color: var(--muted); font-size: 0.9rem; }
.post-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.post-meta a { color: var(--link); font-weight: 600; text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.pagination ul { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.page-num, .page-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: 2.5rem; height: 2.5rem; padding: 0 0.8rem;
	border-radius: 6px; background: var(--card); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 700;
}
.page-num:hover, .page-link:hover { border-color: var(--red); color: var(--red); }
.page-num.current { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Archive headers ---------- */
.archive-header {
	background: var(--card); border: 1px solid var(--border); border-top: 5px solid var(--red);
	border-radius: var(--radius); padding: 1.4rem 1.6rem; margin-bottom: 1.75rem; box-shadow: var(--shadow);
}
.archive-kicker { display: flex; align-items: center; gap: 0.4rem; margin: 0; color: var(--link); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.archive-title { margin: 0.2rem 0 0.4rem; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; font-weight: 900; }
.archive-title span { font-size: 1rem; color: var(--muted); font-weight: 600; margin-left: 0.5rem; }
.archive-header p:last-child { margin-bottom: 0; color: var(--muted); }

/* ---------- Single post ---------- */
.post { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--shadow); }
.post-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.post-title { margin: 0; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.18; font-weight: 900; letter-spacing: -0.01em; color: var(--text); }
.post-header .post-meta { justify-content: center; }
.post-cover { margin: 1.75rem 0 1.25rem; }
.post-cover img { width: 100%; border-radius: var(--radius); box-shadow: 0 12px 30px -18px rgb(0 0 0 / 60%); }
.at-a-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.at-a-glance li { background: var(--soft); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem; font-weight: 700; font-size: 0.95rem; }
.at-a-glance span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }

.post-body > :first-child { margin-top: 0; }
.post-body h2 { font-size: 1.6rem; line-height: 1.25; font-weight: 900; margin: 2.5rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--border); }
.post-body h3 { font-size: 1.25rem; font-weight: 800; margin: 2rem 0 0.75rem; }
.post-body h2[id], .post-body h3[id] { scroll-margin-top: calc(var(--nav-h, 3.25rem) + 1.25rem); }
.post-body h2[tabindex='-1']:focus, .post-body h3[tabindex='-1']:focus { outline: none; }
.post-body p, .post-body ul, .post-body ol { margin: 0 0 1.1rem; }
.post-body li { margin-bottom: 0.4rem; }
.post-body :not(pre) > code { background: var(--soft); border: 1px solid var(--border); border-radius: 4px; padding: 0.08em 0.35em; color: var(--text); overflow-wrap: anywhere; }
.post-body strong { font-weight: 800; }

/* STEP headings: the signature element */
.post-body h2.step-heading {
	display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem;
	margin-top: 3rem; padding: 0 0 0.6rem; border-bottom: 3px solid var(--red);
}
.step-num {
	display: inline-block; background: var(--red); color: #fff; font-size: 1.15rem; font-weight: 900;
	letter-spacing: 0.08em; padding: 0.3rem 0.85rem; border-radius: 6px; box-shadow: 0 3px 0 var(--red-hover);
}
.step-title { color: var(--text); }

/* Numbered lists inside posts: red numbered circles */
.post-body ol { list-style: none; counter-reset: step; padding-left: 0; }
.post-body ol > li { counter-increment: step; position: relative; padding-left: 2.75rem; margin-bottom: 1rem; }
.post-body ol > li::before {
	content: counter(step); position: absolute; left: 0; top: 0.05rem; width: 1.9rem; height: 1.9rem;
	display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 0.9rem;
}
:root[data-theme='dark'] .post-body ol > li::before { background: var(--red); }
.post-body ul { padding-left: 1.3rem; }
.post-body ul li::marker { color: var(--red); }

/* Tables */
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.95rem; display: block; overflow-x: auto; }
.post-body th { background: var(--ink); color: #fff; text-align: left; padding: 0.6rem 0.8rem; }
.post-body td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.post-body tr:nth-child(even) td { background: var(--soft); }

/* (code blocks: see Ghost section below) */

/* Callouts */
.callout { border-radius: 8px; padding: 0.9rem 1.15rem; margin: 0 0 1.4rem; }
.callout-title { margin: 0 0 0.35rem; font-size: 1.05rem; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-note { background: var(--ink); color: #f2f2f2; }
.callout-note .callout-title strong { color: var(--red-on-dark); }
.callout-note a { color: #ff8a8a; }
.callout-note :not(pre) > code { background: #333; border-color: #444; color: #fff; }
.callout-tip { background: var(--soft); border: 1px solid var(--border); border-left: 6px solid var(--ink); }
:root[data-theme='dark'] .callout-tip { border-left-color: #8a8a8a; }
.callout-warning { background: #fff2f2; border: 1px solid #f2c4c4; border-left: 6px solid var(--red); }
.callout-warning .callout-title strong { color: var(--link); }
:root[data-theme='dark'] .callout-warning { background: #2a1616; border-color: #4a2020; }
.callout-danger { background: var(--red); color: #fff; }
.callout-danger a { color: #fff; }
.callout-danger :not(pre) > code { background: rgb(0 0 0 / 22%); border-color: transparent; color: #fff; }

/* Requirements box */
.requirements { border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; margin: 1.5rem 0; }
:root[data-theme='dark'] .requirements { border-color: #555; }
.requirements-title { margin: 0; background: var(--ink); color: #fff; font-weight: 800; padding: 0.55rem 1rem; letter-spacing: 0.02em; }
.requirements-body { padding: 0.9rem 1.15rem 0.2rem; }

/* Post footer: tags, prev/next */
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-weight: 700; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.post-nav-link {
	display: flex; flex-direction: column; gap: 0.25rem; background: var(--card); border: 1px solid var(--border);
	border-radius: var(--radius); padding: 1rem 1.2rem; text-decoration: none; box-shadow: var(--shadow);
}
.post-nav-link.next { text-align: right; align-items: flex-end; grid-column: 2; }
.post-nav-link:hover { border-color: var(--red); }
.post-nav-label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: var(--link); }
.post-nav-title { color: var(--text); font-weight: 800; line-height: 1.3; }

/* ---------- Tags ---------- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.tag-cloud a {
	display: inline-flex; align-items: center; gap: 0.35rem; background: var(--soft); border: 1px solid var(--border);
	color: var(--text); text-decoration: none; font-size: 0.85rem; padding: 0.2rem 0.65rem; border-radius: 4px; font-weight: 600;
}
.tag-cloud a span { color: var(--muted); font-size: 0.75rem; }
.tag-cloud a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.tag-cloud a:hover span { color: #fff; }
.tag-cloud.large a { font-size: 1rem; padding: 0.4rem 0.9rem; }

/* ---------- Sidebar ---------- */
.sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.25rem; box-shadow: var(--shadow); font-size: 0.95rem; }
.widget-title {
	margin: 0 0 0.9rem; font-size: 0.9rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;
	padding-bottom: 0.5rem; border-bottom: 3px solid var(--red); display: inline-block;
}
.widget p { margin: 0 0 0.6rem; color: var(--muted); }
.widget-about { background: var(--ink); color: #eee; border-color: var(--ink); }
.widget-about .widget-title { color: #fff; }
.widget-about p { color: #d4d4d4; }
.widget-about .widget-more { color: #ff8a8a; }
.widget-more { font-weight: 700; font-size: 0.9rem; text-decoration: none; display: inline-block; margin-top: 0.6rem; }
.widget-more:hover { text-decoration: underline; }
.search-form { display: flex; }
.search-form input {
	flex: 1; min-width: 0; font: inherit; padding: 0.55rem 0.75rem; border: 2px solid var(--border); border-right: 0;
	border-radius: 6px 0 0 6px; background: var(--card); color: var(--text);
}
.search-form input:focus { outline: none; border-color: var(--red); }
.search-form button { border: 0; background: var(--red); color: #fff; padding: 0 0.9rem; border-radius: 0 6px 6px 0; cursor: pointer; }
.search-form button:hover { background: var(--ink); }
.cat-list, .latest-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px dashed var(--border); }
.cat-list li:last-child { border-bottom: 0; }
.cat-list a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); text-decoration: none; font-weight: 600; }
.cat-list a:hover { color: var(--link); }
.cat-list .count { background: var(--soft); border: 1px solid var(--border); border-radius: 999px; min-width: 1.8rem; text-align: center; font-size: 0.8rem; font-weight: 700; padding: 0 0.45rem; }
.latest-list li { display: grid; grid-template-columns: 80px 1fr; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px dashed var(--border); }
.latest-list li:last-child { border-bottom: 0; }
.latest-thumb img { border-radius: 4px; width: 80px; aspect-ratio: 1200 / 630; object-fit: cover; }
.latest-list a { color: var(--text); text-decoration: none; font-weight: 700; line-height: 1.3; font-size: 0.9rem; }
.latest-list a:hover { color: var(--link); }
.latest-list time { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }

/* ---------- Search page (Pagefind UI) ---------- */
.search-page {
	--pagefind-ui-primary: var(--red);
	--pagefind-ui-text: var(--text);
	--pagefind-ui-background: var(--card);
	--pagefind-ui-border: var(--border);
	--pagefind-ui-tag: var(--soft);
	--pagefind-ui-border-width: 2px;
	--pagefind-ui-border-radius: 8px;
	--pagefind-ui-font: var(--font);
	background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #d0d0d0; border-top: 5px solid var(--red); font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-block: 2.5rem; }
.footer-logo { display: inline-block; margin: 0 0 0.9rem; line-height: 0; }
.footer-logo img { display: block; width: 155px; height: auto; }
.footer-heading { margin: 0 0 0.6rem; color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.35rem; }
.site-footer a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.site-footer a:hover { color: var(--red-on-dark); text-decoration: underline; }
.footer-bottom { background: var(--ink-2); color: #bdbdbd; font-size: 0.85rem; padding-block: 0.9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
	.layout { grid-template-columns: minmax(0, 1fr); }
	.sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 900px) {
	.nav-toggle {
		display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 0; color: #fff;
		font: inherit; font-weight: 700; padding: 0.8rem 0; cursor: pointer;
	}
	.nav-list { display: none; flex-direction: column; padding-bottom: 0.5rem; }
	.nav-list.open { display: flex; }
	.nav-list a { padding: 0.65rem 0.5rem; border-bottom: 0; border-left: 3px solid transparent; }
	.nav-list a.active { border-left-color: #fff; }
}
@media (max-width: 720px) {
	.post-list { grid-template-columns: minmax(0, 1fr); }
	.footer-grid { grid-template-columns: 1fr; gap: 1.25rem; }
	.post-nav { grid-template-columns: 1fr; }
	.post-nav-link.next { grid-column: auto; }
	.brand-tagline { display: none; }
	.brand-logo { height: 40px; }
	.brand { gap: 0.65rem; }
	.brand-name { font-size: 1.2rem; }
	.header-inner { padding-block: 0.8rem; }
	.icon-btn { width: 36px; height: 36px; }
	.header-actions { flex-shrink: 0; gap: 0.35rem; }
	.step-num { font-size: 1rem; }
	.post-body h2 { font-size: 1.35rem; }
}

/* Inline (one-line) callouts */
.callout-inline { font-size: 1.05rem; }
.callout-label strong { margin-right: 0.15rem; }
.callout-note .callout-label strong { color: var(--red-on-dark); }
.callout-warning .callout-label strong { color: var(--link); }
.post.page .post-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 3px solid var(--red); }

/* =========================================================
   Ghost-specific styles
   ========================================================= */

/* Line icons via CSS masks (files in assets/icons/ui) */
.ui-icon {
	display: inline-block; width: 1.05em; height: 1.05em; flex-shrink: 0; vertical-align: -0.15em;
	background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.ui-icon-search { --i: url(../icons/ui/search.svg); }
.ui-icon-moon { --i: url(../icons/ui/moon.svg); }
.ui-icon-sun { --i: url(../icons/ui/sun.svg); }
.ui-icon-menu { --i: url(../icons/ui/menu.svg); }
.ui-icon-calendar { --i: url(../icons/ui/calendar.svg); }
.ui-icon-user { --i: url(../icons/ui/user.svg); }
.ui-icon-folder { --i: url(../icons/ui/folder.svg); }
.ui-icon-tag { --i: url(../icons/ui/tag.svg); }
.ui-icon-arrowLeft { --i: url(../icons/ui/arrowLeft.svg); }
.ui-icon-arrowRight { --i: url(../icons/ui/arrowRight.svg); }
.ui-icon-docker { --i: url(../icons/ui/docker.svg); }
.ui-icon-rss { --i: url(../icons/ui/rss.svg); }
.ui-icon-clock { --i: url(../icons/ui/clock.svg); }
.ui-icon-grid { --i: url(../icons/ui/grid.svg); }
.icon-btn .ui-icon { width: 20px; height: 20px; }
.header-actions .icon-moon, .header-actions .icon-sun { display: inline-flex; }
:root[data-theme='dark'] .header-actions .icon-moon { display: none; }
:root:not([data-theme='dark']) .header-actions .icon-sun { display: none; }

/* Nav icons, picked by the navigation item's slug (Settings > Navigation labels). The cat-<slug> rules are for
   Ghost tag slugs (sidebar categories, tag pages, the tag index); the Docker page's category icons come from
   the page body and the CAT_ICONS defaults in main.js instead. */
.nav-item .ui-icon { --i: url(../icons/ui/info.svg); }
.nav-home .ui-icon { --i: url(../icons/ui/home.svg); }
.nav-media .ui-icon, .cat-media { --i: url(../icons/ui/play.svg); }
.nav-dns-network .ui-icon, .cat-dns-network { --i: url(../icons/ui/globe.svg); }
.nav-dashboards .ui-icon, .cat-dashboards { --i: url(../icons/ui/grid.svg); }
.nav-security .ui-icon, .cat-security { --i: url(../icons/ui/shield.svg); }
.nav-monitoring .ui-icon, .cat-monitoring { --i: url(../icons/ui/pulse.svg); }
.nav-automation .ui-icon, .cat-automation { --i: url(../icons/ui/gear.svg); }
.nav-productivity .ui-icon, .cat-productivity { --i: url(../icons/ui/folder.svg); }
.nav-docker .ui-icon, .cat-docker { --i: url(../icons/ui/docker.svg); }
.nav-about .ui-icon { --i: url(../icons/ui/info.svg); }
.ui-icon[class*='cat-'] { --i: url(../icons/ui/tag.svg); }
.ui-icon.cat-media { --i: url(../icons/ui/play.svg); }
.ui-icon.cat-dns-network { --i: url(../icons/ui/globe.svg); }
.ui-icon.cat-dashboards { --i: url(../icons/ui/grid.svg); }
.ui-icon.cat-security { --i: url(../icons/ui/shield.svg); }
.ui-icon.cat-monitoring { --i: url(../icons/ui/pulse.svg); }
.ui-icon.cat-automation { --i: url(../icons/ui/gear.svg); }
.ui-icon.cat-productivity { --i: url(../icons/ui/folder.svg); }
.ui-icon.cat-docker { --i: url(../icons/ui/docker.svg); }
.nav-docker { background: rgb(0 0 0 / 14%); }

/* App icons (selfh.st) with a lettered fallback in the brand colours */
.app-icon {
	position: relative; display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden;
	width: 2rem; height: 2rem; border-radius: 8px; background: #fff; border: 1px solid var(--border);
}
.app-icon img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.app-icon:not(:has(img)) { background: var(--ink); border-color: var(--ink); }
.app-icon-fallback {
	position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: block; text-align: center;
	color: #fff; font-weight: 900; font-size: 0; line-height: 1; overflow: hidden; white-space: nowrap;
}
.app-icon-fallback::first-letter { font-size: 1rem; }
.app-icon.lg .app-icon-fallback::first-letter { font-size: 2rem; }
.app-icon img + .app-icon-fallback, .app-icon:has(img) .app-icon-fallback { display: none; }
.app-icon.sm { width: 1.9rem; height: 1.9rem; border-radius: 6px; }
.app-icon.md { width: 3rem; height: 3rem; border-radius: 10px; }
.app-icon.lg { width: 4.25rem; height: 4.25rem; border-radius: 14px; box-shadow: var(--shadow); }
:root[data-theme='dark'] .app-icon { background: #f4f4f4; border-color: #3a3a3a; }

.post-card-badges { display: flex; align-items: center; gap: 0.55rem; }
.post-card-noimage { display: block; aspect-ratio: 1200 / 630; background: linear-gradient(135deg, var(--ink) 55%, var(--red) 55%); }
.post-title-row { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.latest-list li { grid-template-columns: 3rem 1fr; }
.latest-icon { display: block; }
.post-cover figcaption { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }

/* Sidebar search button (opens Ghost's built-in search) */
.search-fake {
	display: flex; width: 100%; align-items: stretch; padding: 0; border: 2px solid var(--border); border-radius: 6px;
	background: var(--card); color: var(--muted); font: inherit; cursor: pointer; overflow: hidden; text-align: left;
}
.search-fake > span:first-child { flex: 1; padding: 0.55rem 0.75rem; }
.search-fake-btn { display: grid; place-items: center; background: var(--red); color: #fff; padding: 0 0.9rem; }
.search-fake:hover { border-color: var(--red); }

/* Pagination (Ghost gives prev/next only) */
.pagination .page-num.current { min-width: auto; padding: 0 1rem; }
.paged-title { margin-bottom: 1.25rem; }

/* ---------- Ghost content cards ---------- */
.gh-content > * + * { margin-top: 0; }
.kg-width-wide { position: relative; width: 100%; }
.kg-width-full { position: relative; width: 100%; }
.kg-image-card, .kg-gallery-card, .kg-embed-card, .kg-bookmark-card, .kg-video-card { margin: 0 0 1.5rem; }
.kg-image-card img { margin-inline: auto; border-radius: 8px; }
.kg-image-card figcaption, .kg-code-card figcaption { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }

/* Code blocks: title bar + copy button (main.js) and Prism syntax colours.
   Always charcoal (#1e1e1e) with red accents, in light and dark mode. Token colours keep >= 4.5:1 on #1e1e1e. */
.gh-content pre {
	margin: 0; padding: 1rem 1.15rem; overflow-x: auto; background: var(--ink); color: #ececec;
	font-family: var(--mono); font-size: 0.9rem; line-height: 1.6; border-radius: 0 0 6px 6px; tab-size: 2;
	-webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-color: #555 var(--ink);
}
.gh-content pre:focus { outline: none; }
.gh-content pre:focus-visible { outline: 3px solid var(--red-on-dark); outline-offset: -3px; }
.gh-content pre code { display: block; min-width: max-content; background: none; border: 0; padding: 0; color: inherit; font-size: inherit; white-space: pre; }
.gh-content > pre, .kg-code-card { margin: 0 0 1.4rem; }
.code-wrap { max-width: 100%; min-width: 0; margin: 0 0 1.4rem; border: 1px solid var(--ink); border-radius: 6px; box-shadow: 0 6px 18px -12px rgb(0 0 0 / 60%); overflow: hidden; background: var(--ink); }
:root[data-theme='dark'] .code-wrap { border-color: #3a3a3a; }
.kg-code-card { max-width: 100%; min-width: 0; }
.kg-code-card .code-wrap { margin: 0; }
.code-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	background: #151515; color: #e6e6e6; padding: 0.35rem 0.45rem 0.35rem 0.9rem; border-bottom: 2px solid var(--red);
	font-family: var(--mono); font-size: 0.8rem;
}
.code-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; letter-spacing: 0.02em; }
.code-title::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; border-radius: 50%; background: var(--red); vertical-align: 0.05em; }
.code-copy {
	flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem;
	border: 1px solid transparent; border-radius: 4px; background: var(--red); color: #fff; font: 700 0.8rem var(--font);
	padding: 0.3rem 0.75rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.code-copy-icon { width: 0.95rem; height: 0.95rem; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
	--i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E"); }
.code-copy.is-done .code-copy-icon { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E"); }
.code-copy:hover { background: #fff; color: var(--ink); }
.code-copy:focus { outline: none; }
.code-copy:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.code-copy.is-done { background: #1f7a36; color: #fff; }
.code-copy.is-failed { background: #3a3a3a; color: #fff; border-color: #777; }

/* Prism tokens (brand palette: red for keywords and keys, warm accents, muted comments) */
.gh-content pre .token.comment, .gh-content pre .token.prolog, .gh-content pre .token.doctype, .gh-content pre .token.cdata { color: #9a9a9a; font-style: italic; }
.gh-content pre .token.punctuation { color: #bdbdbd; }
.gh-content pre .token.keyword, .gh-content pre .token.important, .gh-content pre .token.atrule, .gh-content pre .token.rule, .gh-content pre .token.selector { color: #ff6b6b; font-weight: 700; }
.gh-content pre .token.key, .gh-content pre .token.property, .gh-content pre .token.tag, .gh-content pre .token.section { color: #ff8f8f; }
.gh-content pre .token.string, .gh-content pre .token.char, .gh-content pre .token.attr-value, .gh-content pre .token.inserted, .gh-content pre .token.url { color: #a6d98f; }
.gh-content pre .token.number, .gh-content pre .token.boolean, .gh-content pre .token.constant, .gh-content pre .token.null, .gh-content pre .token.symbol { color: #ffb86b; }
.gh-content pre .token.function, .gh-content pre .token.builtin, .gh-content pre .token.class-name, .gh-content pre .token.instruction { color: #f2d479; }
.gh-content pre .token.variable, .gh-content pre .token.parameter, .gh-content pre .token.environment, .gh-content pre .token.attr-name { color: #8cc8ff; }
.gh-content pre .token.operator, .gh-content pre .token.entity, .gh-content pre .token.shebang, .gh-content pre .token.directive { color: #e0b0ff; }
.gh-content pre .token.deleted { color: #ff8f8f; }
.gh-content pre .token.regex { color: #f2d479; }
.gh-content pre .token.bold { font-weight: 700; }
.gh-content pre .token.italic { font-style: italic; }
.gh-content pre .token.namespace { opacity: 0.8; }
.gh-content pre .language-diff .token.inserted, .gh-content pre .token.inserted-sign { background: rgb(166 217 143 / 10%); }
.gh-content pre .token.deleted-sign { background: rgb(255 107 107 / 10%); }

/* Callout cards: grey = Note (charcoal), white = Tip, yellow = Warning, red = Important, green = Requirements */
.gh-content .kg-callout-card { display: flex; gap: 0.6rem; border-radius: 8px; padding: 0.9rem 1.15rem; margin: 0 0 1.4rem; line-height: 1.65; }
.gh-content .kg-callout-emoji { font-size: 1.15rem; line-height: 1.5; }
.gh-content .kg-callout-text { flex: 1; }
.gh-content .kg-callout-text strong:first-child { margin-right: 0.15rem; }
.gh-content .kg-callout-card-grey, .gh-content .kg-callout-card-blue, .gh-content .kg-callout-card-purple, .gh-content .kg-callout-card-pink { background: var(--ink); color: #f2f2f2; }
.gh-content .kg-callout-card-grey strong:first-child, .gh-content .kg-callout-card-blue strong:first-child { color: var(--red-on-dark); }
.gh-content .kg-callout-card-grey a, .gh-content .kg-callout-card-blue a { color: #ff8a8a; }
.gh-content .kg-callout-card-grey code, .gh-content .kg-callout-card-blue code { background: #333 !important; border-color: #444 !important; color: #fff !important; }
.gh-content .kg-callout-card-white { background: var(--soft); border: 1px solid var(--border); border-left: 6px solid var(--ink); }
:root[data-theme='dark'] .gh-content .kg-callout-card-white { border-left-color: #8a8a8a; }
.gh-content .kg-callout-card-yellow { background: #fff2f2; border: 1px solid #f2c4c4; border-left: 6px solid var(--red); color: var(--text); }
.gh-content .kg-callout-card-yellow strong:first-child { color: var(--link); }
:root[data-theme='dark'] .gh-content .kg-callout-card-yellow { background: #2a1616; border-color: #4a2020; }
.gh-content .kg-callout-card-red, .gh-content .kg-callout-card-accent { background: var(--red); color: #fff; }
.gh-content .kg-callout-card-red a, .gh-content .kg-callout-card-accent a { color: #fff; }
.gh-content .kg-callout-card-red code, .gh-content .kg-callout-card-accent code { background: rgb(0 0 0 / 22%) !important; border-color: transparent !important; color: #fff !important; }
.gh-content .kg-callout-card-green { background: var(--card); border: 2px solid var(--ink); }
/* Custom classes usable inside HTML cards: <div class="callout callout-note|tip|warning|danger"> and <div class="requirements"> */

/* Bookmark/toggle cards: keep them on-brand */
.kg-toggle-card { border: 1px solid var(--border) !important; border-left: 4px solid var(--red) !important; border-radius: 8px !important; }
.kg-bookmark-container { border-color: var(--border) !important; color: var(--text) !important; }

/* Tables inside HTML cards */
.gh-content .table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
.gh-content .table-wrap table { display: table; margin: 0; }

/* Ghost portal/search accent */
:root { --ghost-accent-color: #c90000; }

/* ---------- Docker apps directory ---------- */
.docker-page { background: transparent; border: 0; box-shadow: none; padding: 0; }
.docker-intro { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); }
.docker-intro > :last-child { margin-bottom: 0; }
.dir-tools {
	background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem;
	margin-bottom: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.8rem;
}
.js-only { display: none !important; }
.docker-dir.has-js .js-only { display: flex !important; }
.dir-filter input {
	width: 100%; font: inherit; padding: 0.6rem 0.85rem; border: 2px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text);
}
.dir-filter input:focus { outline: none; border-color: var(--red); }
.dir-cats, .dir-az { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.dir-cat {
	display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; border-radius: 999px;
	border: 1px solid var(--border); background: var(--soft); color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.9rem;
}
.dir-cat .dir-cat-count { background: var(--card); border-radius: 999px; padding: 0 0.45rem; font-size: 0.75rem; color: var(--muted); }
.dir-cat:hover { border-color: var(--red); color: var(--red); }
.dir-cat.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.dir-cat.is-active .dir-cat-count { background: rgb(0 0 0 / 22%); color: #fff; }
/* Docker page category icons (main.js): a UI icon mask in the text colour, or an image in a small white box */
.dir-cat-icon.is-pending { display: inline-block; width: 1.05em; height: 1.05em; visibility: hidden; }
.dir-cat-img {
	display: inline-grid; place-items: center; flex-shrink: 0; width: 1.5em; height: 1.5em; padding: 0.12em; overflow: hidden;
	border-radius: 6px; background: #fff; border: 1px solid var(--border);
}
.dir-cat-img img { width: 100%; height: 100%; object-fit: contain; }
.dir-cat-img .app-tile-letter { font-size: 0.8em; color: var(--ink); }
.dir-cat .dir-cat-img { width: 1.35em; height: 1.35em; border-radius: 4px; }
:root[data-theme='dark'] .dir-cat-img { background: #f4f4f4; border-color: #3a3a3a; }
.dir-group > figure, .dir-group > img { margin: 0.75rem 0 1rem; }
/* Font Awesome app icons: a mask in the ink colour (the tile box stays light in dark mode too) */
.app-tile-icon .fa-icon { display: block; width: 78%; height: 78%; }
.app-tile-icon .fa-icon.ui-icon { background-color: var(--ink); }
.fa-icon.is-pending, .dir-cat-icon.is-pending { visibility: hidden; }
.dir-view {
	font: 700 0.85rem var(--font); padding: 0.35rem 0.8rem; border-radius: 6px; border: 2px solid var(--ink);
	background: var(--card); color: var(--text); cursor: pointer; margin-right: 0.35rem;
}
.dir-view.is-active, .dir-view:hover { background: var(--ink); color: #fff; }
:root[data-theme='dark'] .dir-view { border-color: #777; }
.dir-letter {
	display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 4px; text-decoration: none;
	font-weight: 800; font-size: 0.85rem; color: var(--text); background: var(--soft); border: 1px solid var(--border);
}
.dir-letter:hover { background: var(--red); border-color: var(--red); color: #fff; }
.dir-letter.is-disabled { opacity: 0.35; pointer-events: none; }
.dir-legend { margin: 0; font-size: 0.82rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.legend-dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-left: 0.5rem; }
.legend-dot:first-child { margin-left: 0; }
.legend-dot.is-pub { background: var(--red); }
.legend-dot.is-soon { background: var(--border); border: 1px dashed var(--muted); }
.dir-group { margin-bottom: 2rem; scroll-margin-top: 4.5rem; }
.dir-group-title {
	display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem; font-size: 1.35rem; font-weight: 900;
	padding-bottom: 0.4rem; border-bottom: 3px solid var(--red);
}
.dir-group-title small { margin-left: auto; font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.dir-letter-title { font-size: 1.6rem; }
.dir-group-blurb { margin: 0.4rem 0 0.9rem; color: var(--muted); font-size: 0.92rem; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 0.9rem; margin-top: 0.9rem; }
.app-tile {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center;
	padding: 1.1rem 0.6rem 0.9rem; background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--red);
	border-radius: var(--radius); text-decoration: none; color: var(--text); box-shadow: var(--shadow);
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
a.app-tile:hover { transform: translateY(-3px); border-color: var(--red); box-shadow: 0 10px 24px -14px rgb(201 0 0 / 60%); color: var(--text); }
.app-tile-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: #fff; padding: 8px; border: 1px solid var(--border); }
.app-tile-icon img { width: 100%; height: 100%; object-fit: contain; }
.app-tile-name { font-weight: 800; line-height: 1.25; font-size: 0.95rem; }
.app-tile-status { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--link); }
.app-tile.is-soon { border-top-color: var(--border); background: var(--soft); box-shadow: none; cursor: default; }
.app-tile.is-soon .app-tile-icon { filter: grayscale(1); opacity: 0.55; }
.app-tile.is-soon .app-tile-name { color: var(--muted); }
.badge-soon { background: #595959; color: #fff; border-radius: 4px; padding: 0.15rem 0.45rem; letter-spacing: 0.05em; }
:root[data-theme='dark'] .app-tile-icon { background: #f4f4f4; }
.dir-empty { text-align: center; color: var(--muted); font-style: italic; }
[hidden] { display: none !important; }

/* Ghost's own UI elements */
.gh-portal-triggerbtn-wrapper { display: none; }

/* Ghost custom fonts (Settings > Design > Typography) */
h1, h2, h3, h4, .post-card-title { font-family: var(--gh-font-heading, var(--font)); }

/* Guide facts strip (difficulty / time / tested version) at the top of a guide */
.guide-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; }
.guide-facts span { background: var(--soft); border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: 6px; padding: 0.35rem 0.75rem; font-size: 0.9rem; }
@media (max-width: 640px) {
	.post-title-row { flex-direction: column; gap: 0.6rem; }
	.post-title-row .app-icon.lg { width: 3.25rem; height: 3.25rem; }
}

/* Docker page: the page body is the app list; hide its category part until main.js has built the tiles */
.js:not(.dir-ready) [data-dir-source] h2,
.js:not(.dir-ready) [data-dir-source] h2 ~ * { display: none; }
.docker-intro[hidden] { display: none !important; }
.app-tile-letter { font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--ink); }

/* Auto cover: posts without a feature image get a cover in the house style, drawn with CSS.
   All sizes are in container units so it scales like the 1200x630 PNG covers. */
.auto-cover {
	position: relative; display: block; width: 100%; aspect-ratio: 1200 / 630; overflow: hidden; container-type: inline-size;
	background-color: #1e1e1e; color: #fff; font-family: 'Segoe UI', Ubuntu, 'Helvetica Neue', Arial, sans-serif;
	background-image: linear-gradient(#2b2b2b 1px, transparent 1px), linear-gradient(90deg, #2b2b2b 1px, transparent 1px);
	background-size: 3.333cqw 3.333cqw;
}
.auto-cover::before, .auto-cover::after { content: ''; position: absolute; inset: 0; }
.auto-cover::before { background: linear-gradient(135deg, #e00000, #a30000); clip-path: polygon(66.667% 0, 100% 0, 100% 100%, 53.333% 100%); }
.auto-cover::after { background: #c90000; opacity: 0.55; clip-path: polygon(63.333% 0, 65.333% 0, 52% 100%, 50% 100%); }
.ac-text { position: absolute; z-index: 1; left: 6cqw; top: 12.5cqw; width: 46cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 2.2cqw; }
.ac-label { background: #c90000; border-radius: 0.5cqw; padding: 0.75cqw 1.6cqw; font-size: 2cqw; font-weight: 700; letter-spacing: 0.125cqw; text-transform: uppercase; line-height: 1.2; }
.ac-title {
	font-size: 4.9cqw; font-weight: 800; line-height: 1.08; letter-spacing: -0.08cqw;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ac-mark { position: absolute; z-index: 1; left: 6cqw; bottom: 4.8cqw; font-size: 2.333cqw; font-weight: 800; letter-spacing: 0.25cqw; line-height: 1; }
.ac-mark::before { content: ''; position: absolute; left: 0; top: -3.8cqw; width: 4.667cqw; height: 0.5cqw; background: #c90000; }
.ac-mark b { color: #ff4d4d; font-weight: 800; }
.ac-tile { position: absolute; z-index: 1; left: 69.167%; top: 13.75cqw; width: 25cqw; height: 25cqw; padding: 2.333cqw; border-radius: 4.667cqw; background: #1e1e1e; }
.ac-inner {
	display: grid; place-items: center; width: 100%; height: 100%; border-radius: 3.333cqw;
	background: #fff url(../icons/apps/docker.svg) center / 72% no-repeat;
}
.ac-inner:has(img) { background-image: none; }
.ac-inner img { width: 72%; height: 72%; object-fit: contain; }
.post-card-image .auto-cover { transition: transform 0.3s ease; }
.post-card:hover .post-card-image .auto-cover { transform: scale(1.03); }
.post-cover-auto .auto-cover { border-radius: var(--radius); box-shadow: 0 12px 30px -18px rgb(0 0 0 / 60%); }

/* ---------- About page (Pages > About in Ghost admin) ----------
   All the words live in the page body. The hero, cards, homelab specs and contact cards are HTML cards
   using the ng-about-* classes below; everything else is ordinary headings, paragraphs and lists.
   .page-about is the body class Ghost adds for the page with the slug "about".
   The same classes work on any page: Contact, Tools and Homelab use them too (see "Site pages" below). */
.ng-about-hero {
	--cream: #f4ecdc;
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center;
	margin: 0 0 2rem; padding: clamp(1.5rem, 4vw, 2.75rem);
	background-color: var(--ink);
	background-image: linear-gradient(#2b2b2b 1px, transparent 1px), linear-gradient(90deg, #2b2b2b 1px, transparent 1px);
	background-size: 40px 40px;
	border-radius: var(--radius); border-bottom: 5px solid var(--red); color: #d6d6d6;
}
/* when the page title is hidden, the hero becomes the top of the page card */
.post > .post-body:first-child > .ng-about-hero:first-child {
	margin: calc(-1 * clamp(1.25rem, 3vw, 2.5rem)) calc(-1 * clamp(1.25rem, 3vw, 2.5rem)) 2.25rem;
	border-radius: var(--radius) var(--radius) 0 0;
}
.ng-about-hero-logo { width: clamp(150px, 20vw, 220px); height: auto; filter: drop-shadow(0 10px 18px rgb(0 0 0 / 45%)); }
.ng-about-hero-text > * { margin: 0; }
.post-body .ng-about-kicker { margin: 0 0 0.5rem; color: var(--cream); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.ng-about-kicker::before { content: ''; display: inline-block; width: 28px; height: 4px; margin-right: 0.6rem; vertical-align: middle; background: var(--red); }
.ng-about-mission { margin: 0 0 0.85rem; color: #fff; font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.2; font-weight: 900; letter-spacing: -0.01em; }
.post-body .ng-about-lede { margin: 0 0 1.25rem; font-size: 1.05rem; color: #d6d6d6; }
.post-body .ng-about-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.ng-about-btn {
	display: inline-flex; align-items: center; padding: 0.6rem 1.15rem; border: 2px solid var(--red); border-radius: 6px;
	background: var(--red); color: #fff; font-weight: 700; text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.ng-about-btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.ng-about-btn-outline { background: transparent; border-color: var(--cream); color: var(--cream); }

:is(.page-about, .page-contact, .page-tools, .page-homelab) .post-body > h2 { border-bottom: 0; padding-bottom: 0; }
:is(.page-about, .page-contact, .page-tools, .page-homelab) .post-body > h2::after { content: ''; display: block; width: 56px; height: 5px; margin-top: 0.55rem; background: var(--red); }
.page-about .widget-about { display: none; }   /* the sidebar "About" box only links back to this page */

.ng-about-cards, .ng-about-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 0 0 1.4rem; }
.ng-about-card, .ng-about-contact-card {
	display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.2rem 1.2rem;
	background: var(--soft); border: 1px solid var(--border); border-top: 4px solid var(--red); border-radius: 8px;
	color: var(--text); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
a.ng-about-card:hover, a.ng-about-contact-card:hover { color: var(--text); transform: translateY(-3px); border-color: var(--red); box-shadow: 0 10px 24px -14px rgb(201 0 0 / 55%); }
.ng-about-card-kicker { color: var(--link); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.ng-about-card-title { font-size: 1.12rem; line-height: 1.3; font-weight: 800; }
.ng-about-card-text { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.ng-about-card-more { margin-top: auto; padding-top: 0.4rem; color: var(--link); font-weight: 700; font-size: 0.95rem; }

.post-body .ng-about-specs { list-style: none; margin: 0 0 1.4rem; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.post-body .ng-about-specs li { display: flex; align-items: baseline; gap: 1rem; margin: 0; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
.post-body .ng-about-specs li:last-child { border-bottom: 0; }
.post-body .ng-about-specs li:nth-child(even) { background: var(--soft); }
.ng-about-spec-label {
	flex: 0 0 7.5rem; padding: 0.15rem 0.55rem; border-radius: 4px; background: var(--ink); color: #f4ecdc;
	font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-align: center;
}
:root[data-theme='dark'] .ng-about-spec-label { background: var(--red); color: #fff; }

@media (max-width: 640px) {
	.ng-about-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 1.25rem; }
	.post-body .ng-about-actions { justify-content: center; }
	.post-body .ng-about-specs li { flex-direction: column; gap: 0.35rem; }
	.ng-about-spec-label { flex-basis: auto; }
}

/* ---------- Site pages: Contact, Tools, Homelab (Pages in Ghost admin) ----------
   Same idea as About: the words are in the page body, these classes only style the HTML cards.
   .ng-tools / .ng-tool-group: a grid of category cards, each with a .ng-tool-list of tools.
   A tool icon is <img class="ng-tool-icon" src="/assets/icons/apps/<slug>.svg">, or
   <span class="ng-tool-icon ng-tool-letter">G</span> when there is no icon.
   .ng-placeholder marks text NT still has to fill in. */
.post-body .ng-tools { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.ng-tool-group { gap: 0.5rem; }
.post-body .ng-tool-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.post-body .ng-tool-list li { display: grid; grid-template-columns: 2.1rem 1fr; gap: 0.65rem; align-items: start; margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--muted); }
.post-body .ng-tool-list li strong { display: block; color: var(--text); font-size: 1rem; }
.post-body .ng-tool-list li a { font-weight: 700; }
.post-body .ng-tool-icon { width: 2.1rem; height: 2.1rem; margin: 0; padding: 0.3rem; border-radius: 8px; background: #fff; border: 1px solid var(--border); object-fit: contain; box-shadow: none; }
.post-body .ng-tool-letter { display: grid; place-items: center; padding: 0; background: var(--ink); border-color: var(--ink); color: #f4ecdc; font-weight: 900; font-size: 1rem; }
:root[data-theme='dark'] .post-body .ng-tool-icon:not(.ng-tool-letter) { background: #f4f4f4; }
.ng-placeholder { display: inline-block; padding: 0 0.4rem; border: 1px dashed var(--red); border-radius: 4px; background: rgb(201 0 0 / 6%); color: var(--link); font-family: var(--mono); font-size: 0.88em; }
.ng-about-card .ng-about-btn, .ng-about-contact-card .ng-about-btn { align-self: flex-start; margin-top: auto; padding: 0.5rem 1rem; font-size: 0.95rem; }
.ng-about-card .ng-about-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-contact .ng-about-contact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- Nav icons for the site pages ---------- */
.nav-homelab .ui-icon { --i: url(../icons/ui/server.svg); }
.nav-tools .ui-icon { --i: url(../icons/ui/wrench.svg); }
.nav-tags .ui-icon { --i: url(../icons/ui/tag.svg); }
.nav-contact .ui-icon { --i: url(../icons/ui/mail.svg); }
.ui-icon-mail { --i: url(../icons/ui/mail.svg); }
.ui-icon-chat { --i: url(../icons/ui/chat.svg); }
.ui-icon-server { --i: url(../icons/ui/server.svg); }
.ui-icon-wrench { --i: url(../icons/ui/wrench.svg); }

/* ---------- Tags: post-card tags, tag archive, tag index ---------- */
.post-card-badges { flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.badge-tag { background: var(--soft); color: var(--text); border: 1px solid var(--border); padding: 0.2rem 0.55rem; letter-spacing: 0.05em; }
.badge-tag:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
:root[data-theme='dark'] .badge-tag:hover { background: #fff; border-color: #fff; color: var(--ink); }
.tag-title-row { display: flex; align-items: center; gap: 0.85rem; }
.tag-title-row .archive-title { margin: 0.2rem 0 0.4rem; }
.archive-header .archive-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0.6rem 0 0; }
.archive-links a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--link); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.archive-links a:hover { text-decoration: underline; }
.tags-page { display: flex; flex-direction: column; gap: 1.5rem; }
.tags-page > .archive-header { margin: 0; box-shadow: none; }
.tags-intro:empty { display: none; }
.tags-intro > :last-child { margin-bottom: 0; }
.tags-section-title { margin: 0 0 0.9rem; font-size: 1.25rem; font-weight: 900; }
.tags-section-title::after { content: ''; display: block; width: 48px; height: 4px; margin-top: 0.45rem; background: var(--red); }
.tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.tag-tile {
	display: flex; flex-direction: column; gap: 0.3rem; height: 100%; padding: 1rem 1.1rem 1.1rem; border-radius: 8px;
	background: var(--soft); border: 1px solid var(--border); border-top: 4px solid var(--red); color: var(--text); text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.tag-tile:hover { color: var(--text); transform: translateY(-3px); border-color: var(--red); box-shadow: 0 10px 24px -14px rgb(201 0 0 / 55%); }
.tag-tile-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: 0.25rem; border-radius: 8px; background: var(--ink); color: #f4ecdc; }
.tag-tile-icon .ui-icon { width: 1.3rem; height: 1.3rem; }
.tag-tile-name { font-weight: 900; font-size: 1.1rem; }
.tag-tile-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.tag-tile-count { margin-top: auto; padding-top: 0.3rem; color: var(--link); font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Get updates (Portal) widget ---------- */
.widget-newsletter { border-top: 5px solid var(--red); }
.widget-newsletter .widget-title { display: inline-flex; align-items: center; gap: 0.45rem; }
.widget-newsletter strong { color: var(--text); }
.btn-small { padding: 0.5rem 1rem; font-size: 0.92rem; }
.newsletter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.4rem 0 0.75rem; }
.newsletter-signin { font-weight: 700; font-size: 0.92rem; }
.widget p.newsletter-note { margin: 0; font-size: 0.85rem; }
.newsletter-note a { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; }

/* ---------- Comments (Ghost native comments, rendered by Ghost in an iframe) ---------- */
.post-comments {
	margin-top: 1.5rem; padding: clamp(1.1rem, 3vw, 2rem); background: var(--card); border: 1px solid var(--border);
	border-top: 5px solid var(--red); border-radius: var(--radius); box-shadow: var(--shadow);
}
.post-comments iframe { display: block; width: 100%; }

@media (max-width: 640px) {
	.post-body .ng-tools { grid-template-columns: minmax(0, 1fr); }
	.tag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.tag-tile { padding: 0.85rem 0.9rem 0.95rem; }
}
/* a hero without the logo (Contact, Tools, Homelab) uses the full width */
.ng-about-hero:not(:has(.ng-about-hero-logo)) { grid-template-columns: minmax(0, 1fr); }

/* ---------- Contact form (page-contact.hbs, handler in deploy/contact-handler/) ----------
   Sits under the Contact page body inside the same card. Status boxes are hidden until they are the
   URL #target (no-JS redirect) or main.js shows them (.is-shown). */
.contact-form-box { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--border); scroll-margin-top: 4.5rem; }
.contact-form-title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.4rem; font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-weight: 900; }
.contact-form-title .ui-icon { color: var(--red); }
:root[data-theme='dark'] .contact-form-title .ui-icon { color: var(--red-on-dark); }
.contact-form-intro { margin: 0 0 1.2rem; color: var(--muted); max-width: 46rem; }
.contact-form { display: grid; gap: 1rem; max-width: 46rem; }
.cf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; gap: 1rem; }
.cf-field { display: grid; align-content: start; gap: 0.35rem; min-width: 0; }
.cf-field label { font-weight: 700; font-size: 0.95rem; }
.cf-field input, .cf-field textarea {
	width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--soft);
	border: 2px solid var(--border); border-radius: 6px; padding: 0.6rem 0.75rem; transition: border-color 0.15s ease, background 0.15s ease;
}
.cf-field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.5; }
.cf-field input:hover, .cf-field textarea:hover { border-color: #bdbdbd; }
:root[data-theme='dark'] .cf-field input:hover, :root[data-theme='dark'] .cf-field textarea:hover { border-color: #4a4a4a; }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--red); background: var(--card); box-shadow: 0 0 0 3px rgb(201 0 0 / 18%); }
.cf-field [aria-invalid='true'] { border-color: var(--red); background: rgb(201 0 0 / 5%); }
.cf-hint { margin: 0; font-size: 0.85rem; color: var(--muted); }
.cf-error { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--link); }
.cf-error:empty { display: none; }
.cf-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.cf-submit { border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem; padding: 0.7rem 1.3rem; }
.cf-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
:root[data-theme='dark'] .cf-submit:focus-visible { outline-color: #fff; }
.cf-submit[disabled] { opacity: 0.7; cursor: progress; }
.cf-live { margin: 0; font-size: 0.92rem; color: var(--muted); }
.cf-live:empty { display: none; }
.cf-status {
	display: none; margin: 0 0 1.2rem; max-width: 46rem; padding: 0.85rem 1rem; border-radius: 8px;
	border: 1px solid var(--border); border-left: 6px solid var(--red); background: var(--soft); color: var(--text); line-height: 1.5;
}
.cf-status:target, .cf-status.is-shown { display: block; }
.cf-status.is-dismissed { display: none; }
.cf-status:focus { outline: none; }
.cf-status-ok { background: #eef8f0; border-color: #cfe9d5; border-left-color: #1f8a3b; }
.cf-status-error { background: #fdf0f0; border-color: #f1caca; border-left-color: var(--red); }
:root[data-theme='dark'] .cf-status-ok { background: #13261a; border-color: #24452e; border-left-color: #3fbf62; }
:root[data-theme='dark'] .cf-status-error { background: #2a1515; border-color: #4d2424; border-left-color: var(--red-on-dark); }
.cf-status strong { display: block; }
.contact-form.is-sent { display: none; }
.cf-status .cf-again { display: flex; width: max-content; margin-top: 0.75rem; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 0.92rem; }
@media (max-width: 640px) {
	.contact-form-box { margin-top: 1.6rem; padding-top: 1.4rem; }
	.cf-submit { width: 100%; justify-content: center; }
}

/* ---------- Guide extras: table of contents, related guides, reading time ----------
   main.js builds the TOC from the H2s (H3s nested) on guides with 4+ H2s. Over 1040px it is the first sidebar
   widget and stays in view (the sidebar stretches to the article height so sticky works to the end); below
   that it is a collapsible <details> above the guide. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.toc-list, .toc-sub { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin: 0; }
.toc-list a {
	display: flex; align-items: baseline; gap: 0.5rem; padding: 0.38rem 0.6rem 0.38rem 0.75rem; border-left: 3px solid transparent;
	color: var(--muted); text-decoration: none; font-size: 0.9rem; line-height: 1.35; border-radius: 0 4px 4px 0;
}
.toc-list a:hover, :root[data-theme='dark'] .toc-list a:hover { color: var(--text); background: var(--soft); border-left-color: var(--border); }
.toc-list a.is-active { color: var(--text); font-weight: 700; background: rgb(201 0 0 / 7%); border-left-color: var(--red); }
:root[data-theme='dark'] .toc-list a.is-active { background: rgb(255 77 77 / 10%); border-left-color: var(--red-on-dark); }
.toc-sub a { padding-left: 1.6rem; font-size: 0.84rem; }
.toc-step {
	flex-shrink: 0; display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
	border-radius: 4px; background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 900; transform: translateY(-0.05em);
}
.toc-list a:not(.is-active) .toc-step { background: var(--ink); }
:root[data-theme='dark'] .toc-list a:not(.is-active) .toc-step { background: #3a3a3a; }

.toc-widget { position: sticky; top: calc(var(--nav-h, 3.25rem) + 1rem); z-index: 2; max-height: calc(100vh - var(--nav-h, 3.25rem) - 2rem); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0.8rem; scrollbar-width: thin; }
.toc-widget .widget-title { display: flex; align-items: center; gap: 0.45rem; }
.toc-widget .widget-title .ui-icon { color: var(--red); }
:root[data-theme='dark'] .toc-widget .widget-title .ui-icon { color: var(--red-on-dark); }
.has-toc .sidebar { align-self: stretch; }
.toc-inline { display: none; }

@media (max-width: 1040px) {
	.toc-widget { display: none; }
	.toc-inline:not([hidden]) { display: block; margin: 0 0 1.6rem; border: 1px solid var(--border); border-left: 5px solid var(--red); border-radius: 8px; background: var(--soft); }
	.toc-summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; cursor: pointer; font-weight: 800; list-style: none; }
	.toc-summary::-webkit-details-marker { display: none; }
	.toc-summary::after { content: ''; margin-left: auto; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease; }
	.toc-inline[open] .toc-summary::after { transform: rotate(-135deg) translateY(-2px); }
	.toc-summary .ui-icon { color: var(--red); }
	:root[data-theme='dark'] .toc-summary .ui-icon { color: var(--red-on-dark); }
	.toc-count { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
	.toc-summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 6px; }
	.toc-inline nav { padding: 0 0.6rem 0.8rem 0.4rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
	.toc-inline .toc-list a { font-size: 0.95rem; padding-block: 0.45rem; }
}

/* Related guides (post.hbs, {{#get}} on the primary tag) */
.related { margin-top: 1.5rem; background: var(--card); border: 1px solid var(--border); border-top: 5px solid var(--red); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; box-shadow: var(--shadow); }
.related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; margin-bottom: 0.9rem; }
.related-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.25rem; font-weight: 900; }
.related-title .ui-icon { color: var(--red); }
:root[data-theme='dark'] .related-title .ui-icon { color: var(--red-on-dark); }
.related-more { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; font-size: 0.9rem; color: var(--link); text-decoration: none; }
.related-more:hover { text-decoration: underline; }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; }
.related-card {
	display: flex; gap: 0.75rem; align-items: flex-start; height: 100%; padding: 0.8rem; border: 1px solid var(--border); border-radius: 8px;
	background: var(--soft); color: var(--text); text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.related-card:hover { color: var(--text); transform: translateY(-2px); border-color: var(--red); box-shadow: 0 10px 24px -16px rgb(201 0 0 / 60%); }
.related-icon { flex-shrink: 0; }
.related-icon .app-icon { width: 2.6rem; height: 2.6rem; }
.related-text { display: grid; gap: 0.3rem; min-width: 0; }
.related-card-title { font-size: 0.98rem; line-height: 1.3; }
.related-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 0.82rem; }