/* HearthBuilders website: one stylesheet for every page. No web fonts, scripts or trackers: the pages load nothing
   from anywhere else (see privacy.html). */
:root {
	--sky: #dff2ff;
	--sky-deep: #8fd0f7;
	--grass: #5cb85c;
	--grass-deep: #2f7d32;
	--wood: #8a5a2b;
	--lantern: #f4a531;
	--ink: #1f2a33;
	--ink-soft: #4a5a66;
	--card: #ffffff;
	--page: #f6fbff;
	--line: #d5e6f2;
	--radius: 14px;
	--shadow: 0 6px 24px rgba(20, 50, 80, 0.12);
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--sky: #16283a;
		--sky-deep: #23415e;
		--grass: #6cc76c;
		--grass-deep: #9ee09e;
		--wood: #d9a066;
		--lantern: #ffbf55;
		--ink: #e9f2f8;
		--ink-soft: #b4c5d2;
		--card: #1b2733;
		--page: #111b24;
		--line: #2c3c4b;
		--shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
	}
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--page);
	color: var(--ink);
	font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

img, video { max-width: 100%; display: block; }

a { color: var(--grass-deep); }
a:hover { color: var(--wood); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* --- Top bar --- */
.topbar {
	position: sticky; top: 0; z-index: 10;
	background: color-mix(in srgb, var(--page) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; color: var(--ink); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 15px; }
.nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; }
.nav a:hover { color: var(--ink); }

/* --- Hero --- */
.hero {
	position: relative;
	background: var(--sky-deep) url("assets/hero.jpg") center / cover no-repeat;
	min-height: 440px;
	display: flex; align-items: flex-end;
}
.hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10, 30, 50, 0) 35%, rgba(10, 30, 50, 0.65) 100%);
}
.hero .wrap { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 40px; width: 100%; }
.hero .logo { width: min(497px, 90%); height: auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45)); }
.hero p {
	color: #fff; font-size: 21px; max-width: 640px; margin: 14px 0 22px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.platforms { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
	display: inline-block; padding: 7px 14px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.92); color: #1f2a33; font-weight: 700; font-size: 15px;
}
.pill.soon { background: var(--lantern); color: #2b1a05; }

/* --- Sections --- */
section { padding: 56px 0; }
section.alt { background: var(--sky); }
h1, h2, h3 { line-height: 1.25; }
h2 { font-size: 30px; margin: 0 0 18px; }
h3 { font-size: 20px; margin: 0 0 8px; }
.lead { font-size: 19px; color: var(--ink-soft); max-width: 760px; }

.video {
	border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
	background: #000; aspect-ratio: 16 / 9; width: 100%;
}
.video video { width: 100%; height: 100%; }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 22px; box-shadow: var(--shadow);
}
.card .icon { font-size: 28px; line-height: 1; margin-bottom: 10px; }
.card p { margin: 0; color: var(--ink-soft); }

.safety { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.safety li {
	background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--grass);
	border-radius: 10px; padding: 14px 16px;
}

.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gallery a { display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.gallery img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; transition: transform 0.2s; }
.gallery a:hover img { transform: scale(1.03); }
.gallery figcaption { font-size: 14px; color: var(--ink-soft); padding: 6px 2px 0; }
.gallery figure { margin: 0; }

/* --- Privacy and other text pages --- */
.doc { max-width: 780px; margin: 0 auto; padding: 40px 16px 64px; }
.doc h1 { font-size: 34px; margin-bottom: 4px; }
.doc .updated { color: var(--ink-soft); margin-top: 0; }
.doc h2 { font-size: 23px; margin-top: 36px; }
.doc .summary {
	background: var(--sky); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px;
}
.doc .summary ul { margin: 6px 0 0; padding-left: 22px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 16px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.doc th { background: var(--sky); }
.todo { background: #ffe58a; color: #3a2a00; padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* --- Footer --- */
footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--ink-soft); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; }
footer a { color: var(--ink-soft); }

@media (max-width: 640px) {
	.nav { display: none; }
	.hero { min-height: 360px; }
	.hero p { font-size: 18px; }
	h2 { font-size: 25px; }
	section { padding: 40px 0; }
	.doc table { font-size: 14px; }
}

/* --- The gallery's lightbox (script.js) --- */
body.lb-open { overflow: hidden; }
dialog.lightbox {
	width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; background: rgba(6, 12, 18, 0.94); color: #fff;
	overflow: hidden;
}
dialog.lightbox::backdrop { background: rgba(6, 12, 18, 0.6); }
dialog.lightbox figure {
	margin: 0; width: 100%; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 56px 72px 24px;
}
dialog.lightbox img {
	max-width: 100%; max-height: calc(100% - 40px); object-fit: contain;
	border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
dialog.lightbox figcaption { margin-top: 12px; font-size: 17px; text-align: center; }
.lb-button {
	position: absolute; border: 0; cursor: pointer; color: #fff;
	background: rgba(255, 255, 255, 0.14); width: 52px; height: 52px; border-radius: 50%;
	font-size: 34px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.lb-button:hover, .lb-button:focus-visible { background: rgba(255, 255, 255, 0.28); outline: none; }
.lb-close { top: 14px; right: 14px; font-size: 30px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; top: 26px; left: 20px; font-size: 15px; opacity: 0.8; }
.gallery a { cursor: zoom-in; }

@media (max-width: 640px) {
	dialog.lightbox figure { padding: 64px 8px 80px; }
	.lb-prev, .lb-next { top: auto; bottom: 18px; transform: none; }
	.lb-prev { left: calc(50% - 64px); }
	.lb-next { right: calc(50% - 64px); }
}