/* =========================================================================
   BASIC-256 landing page
   Self-contained styles for front-page.php. Scoped under .b256 to avoid
   colliding with WordPress/Blocksy defaults.
   ========================================================================= */

.b256 {
	--bg-dark: #0a0e1a;
	--bg-dark-2: #0d1224;
	--bg-band: #0f172a;
	--bg-light: #eef2f7;
	--bg-light-2: #f8fafc;
	--card: #ffffff;
	--code-bg: #0d1117;
	--code-head: #161b22;
	--text: #0f172a;
	--text-muted: #64748b;
	--text-invert: #e2e8f0;
	--text-invert-muted: #94a3b8;
	--border: #e2e8f0;
	--border-dark: #1e293b;
	--blue: #2563eb;
	--blue-2: #3b82f6;
	--green: #22c55e;
	--purple: #8b5cf6;
	--pink: #ec4899;
	--orange: #f59e0b;
	--radius: 14px;
	--radius-lg: 20px;
	--maxw: 1120px;
	--shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
	--shadow-code: 0 20px 50px rgba(0, 0, 0, 0.45);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	background: var(--bg-light);
}

.b256 *,
.b256 *::before,
.b256 *::after {
	box-sizing: border-box;
}

.b256 img {
	max-width: 100%;
	display: block;
}

.b256 a {
	color: inherit;
	text-decoration: none;
}

/* Available to assistive technology, absent from the visual design. Used for
   headings that keep the document outline whole where the layout already
   makes the grouping obvious. Not display:none — that would hide it from
   screen readers too, which is the entire point of the class. */
.b256-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.b256 .wrap {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---- Buttons ---------------------------------------------------------- */
.b256 .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
	white-space: nowrap;
}

.b256 .btn:hover { transform: translateY(-1px); }

.b256 .btn-primary {
	background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%);
	color: #fff;
	box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.b256 .btn-gradient {
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
	color: #fff;
	box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}

.b256 .btn-outline-dark {
	background: transparent;
	color: #fff;
	border-color: rgba(148, 163, 184, 0.4);
}
.b256 .btn-outline-dark:hover { border-color: rgba(148, 163, 184, 0.8); }

.b256 .btn-outline-blue {
	background: transparent;
	color: var(--blue-2);
	border-color: var(--blue-2);
	padding: 9px 18px;
}
.b256 .btn-outline-blue:hover { background: rgba(59, 130, 246, 0.12); }

/* =========================================================================
   Header / nav
   ========================================================================= */
.b256-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(10, 14, 26, 0.9);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-dark);
}

.b256-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
}

/* Selector is "a.b256-brand", not ".b256-brand": the generic ".b256 a" rule
   above sets colour to inherit and outranks a lone class, which left the
   wordmark rendering in the inherited dark body colour instead of white. */
.b256 a.b256-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 20px;
	color: #fff;
	letter-spacing: -0.01em;

	/* Size of the square logo mark next to the wordmark. */
	--brand-mark-size: 30px;
}

/* Square logo mark, shared by the header and footer. The artwork is a rounded
   green tile on a white canvas, so the radius clips the leftover white corners
   against the dark background — drop it to 0 for a transparent PNG. */
.b256 .b256-mark {
	width: var(--brand-mark-size, 30px);
	height: var(--brand-mark-size, 30px);
	flex: none;
	border-radius: 22%;
	transition: opacity .15s ease;
}
.b256-brand:hover .b256-mark { opacity: .85; }

.b256-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.b256-menu a {
	color: var(--text-invert-muted);
	font-size: 15px;
	font-weight: 500;
	padding: 6px 0;
	position: relative;
	transition: color .15s ease;
}
.b256-menu a:hover { color: #fff; }
.b256-menu a.active { color: #fff; }
.b256-menu a.active::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 2px;
	background: var(--blue-2);
	border-radius: 2px;
}

.b256-nav-right {
	display: flex;
	align-items: center;
	gap: 18px;
}
.b256-nav-right .icon-link {
	color: var(--text-invert-muted);
	display: inline-flex;
	transition: color .15s ease;
}
.b256-nav-right .icon-link:hover { color: #fff; }

.b256-burger { display: none; }

/* =========================================================================
   Hero
   ========================================================================= */
.b256-hero {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(1200px 500px at 80% -10%, rgba(37, 99, 235, 0.18), transparent 60%),
		linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
	color: #fff;
	padding: 84px 0 96px;

	/* Optional photographic backdrop. The artwork is pale, so it sits at low
	   opacity over the dark gradient — enough to read as texture without
	   fighting the white headline. Tune these two knobs to taste; set
	   --hero-image to none to go back to the flat dark blue. */
	--hero-image: url("../img/hero-bg.jpg");
	--hero-image-opacity: 0.55;
}

/* Image layer: above the gradient, below the copy. */
.b256-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--hero-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: var(--hero-image-opacity);
	pointer-events: none;
}

/* Scrim: darkens the left side so the headline keeps its contrast, and fades
   the hero into the section below. */
.b256-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(10, 14, 26, 0.85) 0%, rgba(10, 14, 26, 0.45) 55%, rgba(10, 14, 26, 0.25) 100%),
		linear-gradient(180deg, transparent 60%, var(--bg-dark-2) 100%);
	pointer-events: none;
}

.b256-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 56px;
	align-items: center;
}

.b256-hero h1 {
	font-size: 54px;
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 22px;
}

.b256-hero p.lead {
	color: var(--text-invert-muted);
	font-size: 18px;
	margin: 0 0 32px;
	max-width: 34em;
}

.b256-hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 34px;
}

.b256-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 28px;
	font-size: 14px;
	color: var(--text-invert-muted);
}
.b256-badge { display: inline-flex; align-items: center; gap: 8px; }
.b256-badge svg { flex: none; }

/* ---- Hero artwork ------------------------------------------------------
   Replaces the old code-editor mockup in the hero. The height is pinned to
   what that mockup used to measure (title bar + 12 code lines + console) so
   the hero grid keeps its original proportions; width follows the image's
   561x428 aspect ratio. */
.b256-hero-art {
	--hero-art-height: 411px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.b256-hero-art picture { display: block; }
.b256-hero-art img {
	height: var(--hero-art-height);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	/* The artwork is transparent PNG on a dark hero — a soft drop shadow keeps
	   it from looking pasted on. */
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.45));
}

/* ---- Code editor mockup ---------------------------------------------- */
.b256-editor {
	background: var(--code-bg);
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-code);
	font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
}

.b256-editor-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--code-head);
	color: var(--text-invert-muted);
	font-size: 13px;
}
.b256-editor-bar .file { font-family: inherit; }
.b256-editor-bar .spacer { flex: 1; }
.b256-editor-bar .bar-icons { display: inline-flex; gap: 14px; opacity: .6; }

.b256-editor-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.b256-editor-body.single { grid-template-columns: 1fr; }

.b256-code {
	padding: 18px 20px;
	font-size: 13px;
	line-height: 1.7;
	overflow-x: auto;
	margin: 0;
	white-space: pre;
	color: #c9d1d9;
}

.tok-com { color: #6b8f71; font-style: italic; }
.tok-key { color: #4ade80; }
.tok-fn  { color: #60a5fa; }
.tok-num { color: #f97316; }
.tok-num-hi { color: #fbbf24; }
.tok-str { color: #f59e0b; }

.b256-canvas {
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.b256-canvas svg { width: 100%; height: auto; max-width: 240px; }

.b256-editor-run {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--code-head);
}
.b256-run-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--green);
	color: #052e12;
	font-weight: 700;
	font-size: 13px;
	border: 0;
	border-radius: 7px;
	padding: 7px 14px;
	font-family: inherit;
}
.b256-clear-btn {
	background: #21262d;
	color: var(--text-invert-muted);
	border: 0;
	border-radius: 7px;
	padding: 7px 14px;
	font-size: 13px;
	font-family: inherit;
}
.b256-console {
	padding: 12px 16px 14px;
	background: var(--code-bg);
	color: #8b949e;
	font-size: 13px;
	font-family: inherit;
}
.b256-console .ok { color: #c9d1d9; }
.b256-console .prompt { color: #4ade80; }

/* Tabs for the second (playground) editor */
.b256-tabs {
	display: flex;
	gap: 4px;
	margin-left: auto;
}
.b256-tab {
	font-size: 13px;
	padding: 3px 12px;
	border-radius: 6px;
	color: var(--text-invert-muted);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.b256-tab.active { background: #21262d; color: #fff; }

.b256-output {
	background: #000;
	color: #d1d5db;
	font-size: 13px;
	line-height: 1.9;
	padding: 16px;
	white-space: pre-line;
}

/* =========================================================================
   Section scaffolding
   ========================================================================= */
.b256-section { padding: 76px 0; }
.b256-section.light { background: var(--bg-light); }
.b256-section.light-2 { background: var(--bg-light-2); }

.b256-section h2.section-title {
	text-align: center;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 48px;
	color: var(--text);
}

.b256-section h2.section-title .accent { color: var(--blue); }

.b256-section .section-sub {
	text-align: center;
	max-width: 62ch;
	margin: -32px auto 42px;
	color: var(--text-muted);
	font-size: 16.5px;
}

/* ---- WebAssembly playground launch card -------------------------------- */

/* Half the width it used to fill. The poster's aspect-ratio takes care of the
   height, so this halves both dimensions with one value. The card is a launch
   button in a window frame rather than the app itself, so it no longer needs
   the full column width to be legible. */
.b256-play {
	max-width: 50%;
	margin-inline: auto;
}

.b256-play-frame {
	background: var(--code-bg);
	border: 1px solid var(--border-dark);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-code);
}

.b256-play-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--code-head);
	color: var(--text-invert-muted);
	font-size: 13px;
	font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace;
}
.b256-play-bar .dot {
	width: 11px; height: 11px;
	border-radius: 999px;
	flex: none;
}
.b256-play-bar .dot.red { background: #ff5f57; }
.b256-play-bar .dot.amber { background: #febc2e; }
.b256-play-bar .dot.green { background: #28c840; }
.b256-play-bar .file { margin-left: 8px; }

/* The poster keeps a screen-shaped aspect box, so the card reads as a window
   onto the app rather than as a banner. */
.b256-play-poster {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	aspect-ratio: 1280 / 800;
	border: 0;
	padding: 24px;
	background:
		radial-gradient(350px 160px at 50% 0%, rgba(37, 99, 235, 0.22), transparent 65%),
		var(--code-bg);
}

.b256-play-cta .btn { margin-bottom: 16px; }

.b256-play-note {
	margin: 0;
	color: var(--text-invert-muted);
	font-size: 13.5px;
	max-width: 42ch;
}
.b256-play-note a {
	color: var(--blue-2);
	font-weight: 600;
	white-space: nowrap;
}
.b256-play-note strong { color: var(--text-invert); }

/* ---- Desktop app screenshot ------------------------------------------- */
.b256-shot {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 48px;
	align-items: center;
}
.b256-shot h2 {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
	color: var(--text);
}
.b256-shot h2 .accent { color: var(--blue); }
.b256-shot p { color: var(--text-muted); margin: 0 0 26px; font-size: 16px; }

.b256-shot-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}
.b256-shot .link-more {
	color: var(--blue);
	font-weight: 600;
	font-size: 15px;
}

.b256-shot-media { margin: 0; }
.b256-shot-media img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	box-shadow: 0 24px 60px rgba(2, 6, 23, 0.22);
}

/* Click-to-enlarge affordance. */
.b256-zoom {
	display: block;
	cursor: zoom-in;
}
.b256-zoom picture { display: block; }
.b256-zoom img { transition: transform .18s ease, box-shadow .18s ease; }
.b256-zoom:hover img {
	transform: translateY(-2px);
	box-shadow: 0 28px 70px rgba(2, 6, 23, 0.28);
}
.b256-zoom:focus-visible {
	outline: 3px solid var(--blue-2);
	outline-offset: 4px;
	border-radius: var(--radius);
}

.b256-shot-media figcaption {
	margin-top: 12px;
	font-size: 13px;
	color: var(--text-muted);
	text-align: center;
}
.b256-shot-media .zoom-hint { color: var(--blue); font-weight: 600; }
.b256-shot-media code {
	font-size: 12.5px;
	background: rgba(2, 6, 23, 0.06);
	padding: 1px 5px;
	border-radius: 4px;
}

/* ---- Why choose (dark band) ------------------------------------------ */
.b256-why {
	background: var(--bg-band);
	border-radius: var(--radius-lg);
	padding: 48px 40px;
	color: #fff;
}
.b256-why h2 {
	text-align: center;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 44px;
	color: #fff;
}
.b256-features {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 28px;
}
.b256-feature { text-align: center; }
.b256-feature .fico {
	width: 62px; height: 62px;
	border-radius: 999px;
	margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
}
.b256-feature h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.b256-feature p { font-size: 13.5px; color: var(--text-invert-muted); margin: 0; }

/* backgrounds for icon circles */
.bg-green { background: var(--green); }
.bg-pink { background: var(--pink); }
.bg-blue { background: var(--blue-2); }
.bg-orange { background: var(--orange); }
.bg-purple { background: var(--purple); }

/* ---- News / downloads / community ------------------------------------ */
.b256-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.b256-col {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: var(--shadow);
}
.b256-col-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.b256-col-head h3 { font-size: 18px; font-weight: 700; margin: 0; color: var(--text); }
.b256-col-head .view-all { color: var(--blue); font-size: 14px; font-weight: 600; }

.b256-item {
	display: flex;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid var(--border);
}
.b256-item:first-of-type { border-top: 0; }
.b256-item .item-ico {
	flex: none;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: var(--bg-light);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px;
}
/* Tints for the line icons that replaced the old emoji. Each pairs a soft
   background with a saturated stroke so the icons read at 22px. */
.b256-item .item-ico.ico-blue   { color: var(--blue);   background: rgba(37, 99, 235, 0.10); }
.b256-item .item-ico.ico-green  { color: #16a34a;       background: rgba(34, 197, 94, 0.12); }
.b256-item .item-ico.ico-purple { color: var(--purple); background: rgba(139, 92, 246, 0.12); }
.b256-item .item-ico.ico-orange { color: #d97706;       background: rgba(245, 158, 11, 0.14); }
.b256-item .item-ico.ico-pink   { color: var(--pink);   background: rgba(236, 72, 153, 0.11); }

.b256-item .item-body { min-width: 0; }
.b256-item h4 { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--text); }
.b256-item h4 a { color: var(--text); transition: color .15s ease; }
.b256-item h4 a:hover { color: var(--blue); }
.b256-item p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.b256-item .meta { font-size: 12.5px; color: #94a3b8; margin-top: 3px; }

/* Nested link list, used where one item points at several outside sites. */
.b256-item .item-links {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.b256-item .item-links li {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding-left: 11px;
	border-left: 2px solid var(--border);
}
.b256-item .item-links a {
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	transition: color .15s ease;
}
.b256-item .item-links a:hover { color: var(--blue-2); text-decoration: underline; }
.b256-item .item-links span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }

/* Platform tints. Defined here rather than in download.css because both the
   homepage rows below and the download pages use them, and only this
   stylesheet loads on every one of those pages. The icons themselves are
   filled with currentColor (see b256_os_icon), so this is the single place
   any of them is coloured. */
.b256 .os-windows      { color: #3b82f6; }
.b256 .os-linux        { color: #f59e0b; }
.b256 .os-raspberry-pi { color: #c7053d; }
.b256 .os-macos,
.b256 .os-apple        { color: #94a3b8; }
.b256 .os-browser      { color: #22c55e; }

/* A download row is a whole link to that platform's page, not a row with a
   link in it — the arrow on the right is decoration, and a visitor should not
   have to hit it. */
.b256-dl {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--border);
	transition: opacity .15s ease;
}
.b256-dl:first-of-type { border-top: 0; }
.b256-dl .os-ico { flex: none; width: 34px; display: flex; justify-content: center; }
.b256-dl .dl-body { flex: 1; min-width: 0; }
.b256-dl .dl-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	transition: color .15s ease;
}
.b256-dl .meta { display: block; font-size: 12.5px; color: #94a3b8; }
.b256-dl .dl-btn {
	color: #cbd5e1;
	display: inline-flex;
	transition: color .15s ease, transform .15s ease;
}
.b256-dl:hover .dl-name { color: var(--blue); }
.b256-dl:hover .dl-btn { color: var(--blue); transform: translateX(2px); }
.b256-dl:focus-visible {
	outline: 2px solid var(--blue-2);
	outline-offset: 3px;
	border-radius: 8px;
}
.b256-col .col-link {
	display: inline-block;
	margin-top: 14px;
	color: var(--blue);
	font-weight: 600;
	font-size: 14px;
}

/* =========================================================================
   Footer
   ========================================================================= */
.b256-footer {
	background: var(--bg-dark);
	color: var(--text-invert-muted);
	padding: 60px 0 34px;
	border-top: 1px solid var(--border-dark);
}
.b256-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 34px;
}
.b256-footer .f-brand {
	display: flex; align-items: center; gap: 10px;
	font-weight: 800; font-size: 19px; color: #fff; margin-bottom: 14px;
	/* Marginally smaller than the header, matching the smaller wordmark. */
	--brand-mark-size: 28px;
}
.b256-footer .f-tag { font-size: 14px; margin: 0 0 18px; max-width: 24em; }
.b256-footer .f-copy { font-size: 13px; color: #64748b; }
.b256-footer h4 {
	color: #fff; font-size: 14px; font-weight: 700;
	margin: 0 0 16px; letter-spacing: .01em;
}
.b256-footer ul { list-style: none; margin: 0; padding: 0; }
.b256-footer ul li { margin-bottom: 10px; }
.b256-footer ul a { font-size: 14px; transition: color .15s ease; }
.b256-footer ul a:hover { color: #fff; }

/* Sections that exist in the layout but have nowhere to point yet. Rendered
   as plain text rather than href="#" links — a "#" link scrolls to the top
   when clicked — and dimmed so they read as unfinished, not broken. */
.b256-footer .f-soon {
	font-size: 14px;
	color: #475569;
	cursor: default;
}

.b256-socials { display: flex; gap: 16px; margin-top: 18px; }
.b256-socials a { color: var(--text-invert-muted); transition: color .15s ease; }
.b256-socials a:hover { color: #fff; }

/* =========================================================================
   Lightbox

   The <dialog> is appended to <body> by lightbox.js, so it sits outside the
   .b256 wrapper and cannot rely on the scoped variables above.
   ========================================================================= */
dialog.b256-lightbox {
	max-width: 96vw;
	max-height: 96vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	cursor: zoom-out;
}

dialog.b256-lightbox::backdrop {
	background: rgba(2, 6, 23, 0.88);
	backdrop-filter: blur(3px);
}

dialog.b256-lightbox img {
	display: block;
	max-width: 96vw;
	/* Cap by height too, so a wide screenshot on a short window still fits
	   entirely on screen instead of running off the bottom. */
	max-height: 96vh;
	width: auto;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 960px) {
	.b256-hero-grid { grid-template-columns: 1fr; gap: 40px; }
	.b256-hero h1 { font-size: 42px; }
	.b256-shot { grid-template-columns: 1fr; gap: 32px; }
	.b256-features { grid-template-columns: repeat(2, 1fr); gap: 32px; }
	.b256-cols { grid-template-columns: 1fr; }
	.b256-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	.b256-menu, .b256-nav-right .btn { display: none; }
	.b256-burger {
		display: inline-flex;
		background: transparent; border: 0; color: #fff; cursor: pointer;
	}
	.b256-hero { padding: 56px 0 64px; }
	.b256-hero h1 { font-size: 34px; }
	/* Below the copy on a phone, so it can shrink rather than crowd the fold. */
	.b256-hero-art { --hero-art-height: 300px; }
	.b256-section { padding: 56px 0; }
	.b256-editor-body { grid-template-columns: 1fr; }
	.b256-why { padding: 36px 22px; }
	.b256-section .section-sub { margin: -22px auto 30px; font-size: 15.5px; }
	.b256-shot h2 { font-size: 24px; }
	/* Keep the poster tall enough to read at phone widths: 4:3 rather than
	   cinematic. Half-width is a desktop luxury — at this size the card needs
	   the whole column or the button and its note stop fitting. */
	.b256-play { max-width: 100%; }
	.b256-play-poster { aspect-ratio: 4 / 3; }
	.b256-footer-grid { grid-template-columns: 1fr; }
}

/* Hidden mobile menu toggled by checkbox */
.b256-mobile-toggle { display: none; }
@media (max-width: 720px) {
	.b256-mobile-menu {
		display: none;
		flex-direction: column;
		gap: 4px;
		padding: 12px 0 6px;
		border-top: 1px solid var(--border-dark);
	}
	.b256-mobile-toggle:checked ~ .b256-mobile-menu { display: flex; }
	.b256-mobile-menu a { color: var(--text-invert-muted); padding: 8px 0; }
}
@media (min-width: 721px) { .b256-mobile-menu { display: none; } }