From d91c03002bf1e3740e65aaa6dcddb3d1a5c19f10 Mon Sep 17 00:00:00 2001
From: nobswebdev <nobswebdev@noreply.git.nobswebdev.com>
Date: Mon, 7 Sep 2026 15:43:38 +0200
Subject: [PATCH] Improve hero layout, gallery grid, and anchor scroll offset.

Stack hero actions in a row, center the fifth gallery item, and offset in-page navigation for the sticky header.
---
 css/styles.css | 913 +++++++++++++++++++++++++------------------------
 1 file changed, 467 insertions(+), 446 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index aa45c38..08caccc 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,803 +1,824 @@
-
 :root {
-    --brand: #f78f1e;
-    --brand-deep: #d96f12;
-    --brand-light: #ffc87a;
-    --accent: #009ada;
-    --accent-light: #4db8e8;
-    --bg: #000000;
-    --surface: #0d0d0d;
-    --surface-raised: #141414;
-    --border: #262626;
-    --text: #f0f0f0;
-    --muted: #8b9298;
-    --max-width: 72rem;
-    --header-height: 5rem;
-    --radius: 0.5rem;
-    --radius-lg: 0.75rem;
+  --brand: #f78f1e;
+  --brand-deep: #d96f12;
+  --brand-light: #ffc87a;
+  --accent: #009ada;
+  --accent-light: #4db8e8;
+  --bg: #000000;
+  --surface: #0d0d0d;
+  --surface-raised: #141414;
+  --border: #262626;
+  --text: #f0f0f0;
+  --muted: #8b9298;
+  --max-width: 72rem;
+  --header-height: 5rem;
+  --notice-bar-height: 1.875rem;
+  --site-header-height: calc(var(--header-height) + var(--notice-bar-height));
+  --sticky-offset: calc((var(--site-header-height) + 0.5rem) * 0.5);
+  --radius: 0.5rem;
+  --radius-lg: 0.75rem;
 }
 
 *,
 *::before,
 *::after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 html {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
+}
+
+main > section[id] {
+  scroll-margin-top: var(--sticky-offset);
 }
 
 @media (prefers-reduced-motion: reduce) {
-    html {
-        scroll-behavior: auto;
-    }
+  html {
+    scroll-behavior: auto;
+  }
 }
 
 body {
-    margin: 0;
-    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-    font-size: 1rem;
-    line-height: 1.6;
-    color: var(--text);
-    background-color: var(--bg);
-    -webkit-font-smoothing: antialiased;
+  margin: 0;
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--text);
+  background-color: var(--bg);
+  -webkit-font-smoothing: antialiased;
 }
 
 img,
 svg {
-    display: block;
-    max-width: 100%;
+  display: block;
+  max-width: 100%;
 }
 
 a {
-    color: var(--accent);
-    text-decoration: none;
+  color: var(--accent);
+  text-decoration: none;
 }
 
 a:hover {
-    color: var(--accent-light);
+  color: var(--accent-light);
 }
 
 :focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
 }
 
 .container {
-    width: min(100% - 2rem, var(--max-width));
-    margin-inline: auto;
+  width: min(100% - 2rem, var(--max-width));
+  margin-inline: auto;
 }
 
-
 .site-notice {
-    padding-block: 0.375rem;
-    text-align: center;
-    font-size: 0.75rem;
-    color: var(--muted);
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
+  padding-block: 0.375rem;
+  text-align: center;
+  font-size: 0.75rem;
+  color: var(--muted);
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
 }
 
 .site-notice p {
-    margin: 0;
+  margin: 0;
 }
 
 .site-notice a {
-    color: var(--accent);
-    font-weight: 500;
+  color: var(--accent);
+  font-weight: 500;
 }
 
 .site-notice a:hover {
-    color: var(--accent-light);
+  color: var(--accent-light);
 }
 
 .site-header {
-    position: sticky;
-    top: 0;
-    z-index: 100;
-    min-height: var(--header-height);
-    background: rgba(0, 0, 0, 0.92);
-    border-bottom: 1px solid var(--border);
-    backdrop-filter: blur(8px);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  min-height: var(--header-height);
+  background: rgba(0, 0, 0, 0.92);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(8px);
 }
 
 .site-header__inner {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    min-height: var(--header-height);
-    padding-block: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-height: var(--header-height);
+  padding-block: 0.75rem;
 }
 
 .logo {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .logo:hover {
-    opacity: 0.92;
+  opacity: 0.92;
 }
 
 .logo__img {
-    display: block;
-    width: 200px;
-    height: 50px;
-    max-width: none;
-    object-fit: contain;
+  display: block;
+  width: 200px;
+  height: 50px;
+  max-width: none;
+  object-fit: contain;
 }
 
 .site-nav {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.5rem 1.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1.25rem;
 }
 
 .site-nav a {
-    color: var(--muted);
-    font-size: 0.9375rem;
+  color: var(--muted);
+  font-size: 0.9375rem;
 }
 
 .site-nav a:hover {
-    color: var(--text);
+  color: var(--text);
 }
 
-
 .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.625rem 1.25rem;
-    border: 1px solid transparent;
-    border-radius: var(--radius);
-    font-size: 0.9375rem;
-    font-weight: 600;
-    line-height: 1.4;
-    cursor: pointer;
-    transition: background 0.15s, border-color 0.15s, color 0.15s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.625rem 1.25rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.4;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s;
 }
 
 .btn--primary {
-    color: #fff;
-    background: var(--brand);
-    border-color: var(--brand);
+  color: #fff;
+  background: var(--brand);
+  border-color: var(--brand);
 }
 
 .btn--primary:hover {
-    color: #fff;
-    background: var(--brand-deep);
-    border-color: var(--brand-deep);
+  color: #fff;
+  background: var(--brand-deep);
+  border-color: var(--brand-deep);
 }
 
 .btn--ghost {
-    color: var(--text);
-    background: transparent;
-    border-color: var(--border);
+  color: var(--text);
+  background: transparent;
+  border-color: var(--border);
 }
 
 .btn--ghost:hover {
-    color: var(--text);
-    border-color: var(--muted);
-    background: var(--surface);
+  color: var(--text);
+  border-color: var(--muted);
+  background: var(--surface);
 }
 
-
 .hero {
-    position: relative;
-    padding-block: clamp(3rem, 8vw, 6rem);
-    overflow: hidden;
+  position: relative;
+  padding-block: clamp(3rem, 8vw, 6rem);
+  overflow: hidden;
 }
 
 .hero::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background:
-        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(247, 143, 30, 0.18), transparent),
-        radial-gradient(ellipse 50% 40% at 100% 50%, rgba(0, 154, 218, 0.1), transparent);
-    pointer-events: none;
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(
+      ellipse 80% 60% at 50% -20%,
+      rgba(247, 143, 30, 0.18),
+      transparent
+    ),
+    radial-gradient(
+      ellipse 50% 40% at 100% 50%,
+      rgba(0, 154, 218, 0.1),
+      transparent
+    );
+  pointer-events: none;
 }
 
 .hero__watermark {
-    position: absolute;
-    right: 12%;
-    top: 50%;
-    transform: translateY(-50%);
-    width: min(18rem, 40vw);
-    height: auto;
-    opacity: 0.06;
-    pointer-events: none;
+  position: absolute;
+  right: 12%;
+  top: 50%;
+  transform: translateY(-50%);
+  width: min(18rem, 40vw);
+  height: auto;
+  opacity: 0.06;
+  pointer-events: none;
 }
 
 .hero__content {
-    position: relative;
-    max-width: 42rem;
+  position: relative;
+  max-width: 42rem;
 }
 
 .hero__badge {
-    display: inline-block;
-    margin: 0 0 0.75rem;
-    padding: 0.375rem 0.75rem;
-    border: 1px solid rgba(247, 143, 30, 0.5);
-    border-radius: 999px;
-    background: rgba(247, 143, 30, 0.12);
-    color: var(--brand-light);
-    font-size: 0.8125rem;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
+  display: inline-block;
+  margin: 0 0 0.75rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid rgba(247, 143, 30, 0.5);
+  border-radius: 999px;
+  background: rgba(247, 143, 30, 0.12);
+  color: var(--brand-light);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 
 .hero h1 {
-    margin: 0 0 1.25rem;
-    font-size: clamp(2rem, 5vw, 3rem);
-    font-weight: 700;
-    line-height: 1.15;
-    letter-spacing: -0.03em;
+  margin: 0 0 1.25rem;
+  font-size: clamp(2rem, 5vw, 3rem);
+  font-weight: 700;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
 }
 
 .hero__highlights {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem 0.75rem;
-    margin: 0 0 1.25rem;
-    padding: 0;
-    list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .hero__highlights li {
-    padding: 0.375rem 0.75rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    background: var(--surface);
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: var(--text);
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text);
 }
 
 .hero__highlights li:nth-child(odd) {
-    border-color: rgba(247, 143, 30, 0.35);
+  border-color: rgba(247, 143, 30, 0.35);
 }
 
 .hero__highlights li:nth-child(even) {
-    border-color: rgba(0, 154, 218, 0.35);
+  border-color: rgba(0, 154, 218, 0.35);
 }
 
 .hero__sub {
-    margin: 0 0 2rem;
-    font-size: clamp(1rem, 2vw, 1.125rem);
-    color: var(--muted);
-    line-height: 1.7;
+  margin: 2rem 0 2rem;
+  font-size: clamp(1rem, 2vw, 1.125rem);
+  color: var(--muted);
+  line-height: 1.7;
 }
 
-.hero__actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    gap: 1rem 1.25rem;
+.hero__actions-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem 1.25rem;
 }
 
 .link-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
 }
 
 .link-group__label {
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
 }
 
 .repo-links {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
 }
 
 .repo-links--center {
-    justify-content: center;
+  justify-content: center;
 }
 
-
 .section {
-    padding-block: clamp(3rem, 6vw, 5rem);
+  padding-block: clamp(3rem, 6vw, 5rem);
 }
 
 .section--border {
-    border-top: 1px solid var(--border);
+  border-top: 1px solid var(--border);
 }
 
 .section__title {
-    margin: 0 0 0.5rem;
-    font-size: clamp(1.5rem, 3vw, 2rem);
-    font-weight: 700;
-    letter-spacing: -0.02em;
+  margin: 0 0 0.5rem;
+  font-size: clamp(1.5rem, 3vw, 2rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
 }
 
 .section__lead {
-    margin: 0 0 2rem;
-    max-width: 36rem;
-    color: var(--muted);
+  margin: 0 0 2rem;
+  max-width: 36rem;
+  color: var(--muted);
 }
 
-
 .about p {
-    margin: 0 0 1rem;
-    max-width: 42rem;
-    color: var(--muted);
+  margin: 0 0 1rem;
+  max-width: 42rem;
+  color: var(--muted);
 }
 
 .about p:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
-
 .pillars {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.625rem;
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.625rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .privacy-features {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
-    gap: 0.625rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
+  gap: 0.625rem;
 }
 
 .pillar {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.5rem 0.875rem;
-    border: 1px solid var(--border);
-    border-radius: 999px;
-    background: var(--surface);
-    font-size: 0.8125rem;
-    font-weight: 500;
-    color: var(--text);
-    white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text);
+  white-space: nowrap;
 }
 
 .pillar__dot {
-    width: 0.375rem;
-    height: 0.375rem;
-    border-radius: 50%;
-    flex-shrink: 0;
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
 
 .pillar:nth-child(odd) .pillar__dot {
-    background: var(--brand);
+  background: var(--brand);
 }
 
 .pillar:nth-child(even) .pillar__dot {
-    background: var(--accent);
+  background: var(--accent);
 }
 
-
 .features-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1.25rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.25rem;
 }
 
 @media (max-width: 48rem) {
-    .features-grid {
-        grid-template-columns: 1fr;
-    }
+  .features-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .feature-card {
-    padding: 1.5rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
+  padding: 1.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
 }
 
 .feature-card--lead {
-    border-color: rgba(247, 143, 30, 0.4);
-    background: linear-gradient(135deg, rgba(247, 143, 30, 0.08), rgba(0, 154, 218, 0.05), var(--surface));
+  border-color: rgba(247, 143, 30, 0.4);
+  background: linear-gradient(
+    135deg,
+    rgba(247, 143, 30, 0.08),
+    rgba(0, 154, 218, 0.05),
+    var(--surface)
+  );
 }
 
 .feature-card__icon {
-    width: 2rem;
-    height: 2rem;
-    margin-bottom: 1rem;
-    color: var(--accent);
+  width: 2rem;
+  height: 2rem;
+  margin-bottom: 1rem;
+  color: var(--accent);
 }
 
 .feature-card--lead .feature-card__icon {
-    color: var(--brand);
+  color: var(--brand);
 }
 
 .feature-card h3 {
-    margin: 0 0 0.5rem;
-    font-size: 1.125rem;
-    font-weight: 600;
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
 }
 
 .feature-card__lead {
-    margin: 0 0 1rem;
-    font-size: 0.9375rem;
-    color: var(--muted);
+  margin: 0 0 1rem;
+  font-size: 0.9375rem;
+  color: var(--muted);
 }
 
 .feature-card ul {
-    margin: 0;
-    padding-left: 1.125rem;
-    font-size: 0.9375rem;
-    color: var(--muted);
+  margin: 0;
+  padding-left: 1.125rem;
+  font-size: 0.9375rem;
+  color: var(--muted);
 }
 
 .feature-card li + li {
-    margin-top: 0.375rem;
+  margin-top: 0.375rem;
 }
 
-
 .steps {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.25rem;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    counter-reset: step;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: step;
 }
 
 @media (max-width: 48rem) {
-    .steps {
-        grid-template-columns: 1fr;
-    }
+  .steps {
+    grid-template-columns: 1fr;
+  }
 }
 
 .step {
-    padding: 1.5rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
+  padding: 1.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
 }
 
 .step::before {
-    counter-increment: step;
-    content: counter(step);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    margin-bottom: 1rem;
-    border-radius: 50%;
-    background: var(--brand);
-    color: #fff;
-    font-size: 0.875rem;
-    font-weight: 700;
+  counter-increment: step;
+  content: counter(step);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  margin-bottom: 1rem;
+  border-radius: 50%;
+  background: var(--brand);
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 700;
 }
 
 .step h3 {
-    margin: 0 0 0.5rem;
-    font-size: 1rem;
-    font-weight: 600;
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
 }
 
 .step p {
-    margin: 0;
-    font-size: 0.9375rem;
-    color: var(--muted);
+  margin: 0;
+  font-size: 0.9375rem;
+  color: var(--muted);
 }
 
-
 .roadmap {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.25rem;
-    margin: 0;
-    padding: 0;
-    list-style: none;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 @media (max-width: 48rem) {
-    .roadmap {
-        grid-template-columns: 1fr;
-    }
+  .roadmap {
+    grid-template-columns: 1fr;
+  }
 }
 
 .roadmap__item {
-    padding: 1.5rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
+  padding: 1.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
 }
 
 .roadmap__item h3 {
-    margin: 0 0 0.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--brand);
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--brand);
 }
 
 .roadmap__item p {
-    margin: 0;
-    font-size: 0.9375rem;
-    color: var(--muted);
+  margin: 0;
+  font-size: 0.9375rem;
+  color: var(--muted);
 }
 
-
 .gallery {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1.25rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.25rem;
 }
 
 @media (max-width: 40rem) {
-    .gallery {
-        grid-template-columns: 1fr;
-    }
+  .gallery {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 40.01rem) {
+  .gallery__item--last {
+    grid-column: 1 / -1;
+    justify-self: center;
+    width: calc((100% - 1.25rem) / 2);
+  }
 }
 
 .gallery__item {
-    margin: 0;
+  margin: 0;
 }
 
 .gallery__link {
-    display: block;
-    color: inherit;
-    cursor: zoom-in;
+  display: block;
+  color: inherit;
+  cursor: zoom-in;
 }
 
 .gallery__link:hover {
-    color: inherit;
+  color: inherit;
 }
 
 .gallery__link:hover .gallery__frame {
-    border-color: var(--accent);
+  border-color: var(--accent);
 }
 
 .gallery__frame {
-    aspect-ratio: 16 / 10;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface-raised);
-    overflow: hidden;
+  aspect-ratio: 16 / 10;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+  overflow: hidden;
 }
 
 .gallery__frame img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 .gallery__caption {
-    margin-top: 0.625rem;
-    font-size: 0.875rem;
-    color: var(--muted);
-    text-align: center;
+  margin-top: 0.625rem;
+  font-size: 0.875rem;
+  color: var(--muted);
+  text-align: center;
 }
 
 body:has(.lightbox:target) {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .lightbox {
-    display: none;
-    position: fixed;
-    inset: 0;
-    z-index: 200;
-    align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
 }
 
 .lightbox:target {
-    display: flex;
+  display: flex;
 }
 
 .lightbox__backdrop {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.92);
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.92);
 }
 
 .lightbox__img {
-    position: relative;
-    z-index: 1;
-    max-width: min(95vw, 75rem);
-    max-height: 90vh;
-    width: auto;
-    height: auto;
-    object-fit: contain;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
+  position: relative;
+  z-index: 1;
+  max-width: min(95vw, 75rem);
+  max-height: 90vh;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
 }
 
 .lightbox__close {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    font-size: 1.75rem;
-    line-height: 1;
-    color: var(--text);
-    background: var(--surface-raised);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.75rem;
+  line-height: 1;
+  color: var(--text);
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
 }
 
 .lightbox__close:hover {
-    color: var(--text);
-    border-color: var(--accent);
+  color: var(--text);
+  border-color: var(--accent);
 }
 
-
 .cta-block {
-    text-align: center;
-    padding: 2.5rem 1.5rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
+  text-align: center;
+  padding: 2.5rem 1.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
 }
 
 .cta-block h2 {
-    margin: 0 0 0.5rem;
-    font-size: clamp(1.5rem, 3vw, 2rem);
+  margin: 0 0 0.5rem;
+  font-size: clamp(1.5rem, 3vw, 2rem);
 }
 
 .cta-block p {
-    margin: 0 0 1.5rem;
-    color: var(--muted);
+  margin: 0 0 1.5rem;
+  color: var(--muted);
 }
 
 .cta-block .repo-links {
-    margin-bottom: 1rem;
+  margin-bottom: 1rem;
 }
 
 .cta-block__note {
-    margin-top: 1rem;
-    margin-bottom: 0;
-    font-size: 0.875rem;
+  margin-top: 1rem;
+  margin-bottom: 0;
+  font-size: 0.875rem;
 }
 
-
 .contact-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1.25rem;
-    max-width: 36rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.25rem;
+  max-width: 36rem;
 }
 
 @media (max-width: 32rem) {
-    .contact-grid {
-        grid-template-columns: 1fr;
-    }
+  .contact-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 .contact-card {
-    padding: 1.25rem 1.5rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--surface);
+  padding: 1.25rem 1.5rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface);
 }
 
 .contact-card h3 {
-    margin: 0 0 0.375rem;
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--muted);
+  margin: 0 0 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted);
 }
 
 .contact-card a {
-    font-size: 1rem;
-    font-weight: 500;
-    word-break: break-all;
+  font-size: 1rem;
+  font-weight: 500;
+  word-break: break-all;
 }
 
 .contact__note {
-    margin-top: 1.5rem;
-    font-size: 0.875rem;
-    color: var(--muted);
+  margin-top: 1.5rem;
+  font-size: 0.875rem;
+  color: var(--muted);
 }
 
-
 .site-footer {
-    padding-block: 2rem 2.5rem;
-    border-top: 1px solid var(--border);
+  padding-block: 2rem 2.5rem;
+  border-top: 1px solid var(--border);
 }
 
 .site-footer__inner {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
 }
 
 .site-footer__nav {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem 1.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1.25rem;
 }
 
 .site-footer__nav a {
-    font-size: 0.875rem;
-    color: var(--muted);
+  font-size: 0.875rem;
+  color: var(--muted);
 }
 
 .site-footer__nav a:hover {
-    color: var(--text);
+  color: var(--text);
 }
 
 .site-footer__copy {
-    margin: 0;
-    font-size: 0.8125rem;
-    color: var(--muted);
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--muted);
 }
 
 .site-footer__disclaimer {
-    width: 100%;
-    margin: 1rem 0 0;
-    font-size: 0.75rem;
-    color: var(--muted);
-    opacity: 0.8;
+  width: 100%;
+  margin: 1rem 0 0;
+  font-size: 0.75rem;
+  color: var(--muted);
+  opacity: 0.8;
 }
 
 .site-footer__repo {
-    width: 100%;
-    margin: 0.75rem 0 0;
-    font-size: 0.8125rem;
-    line-height: 1.5;
-    word-break: break-all;
+  width: 100%;
+  margin: 0.75rem 0 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  word-break: break-all;
 }
 
 .site-footer__links {
-    width: 100%;
-    margin-top: 0.75rem;
+  width: 100%;
+  margin-top: 0.75rem;
 }
 
 .site-footer__links-row {
-    margin: 0 0 0.375rem;
-    font-size: 0.8125rem;
-    line-height: 1.6;
-    word-break: break-all;
+  margin: 0 0 0.375rem;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  word-break: break-all;
 }
 
 .site-footer__links-row:last-child {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .site-footer__links-label {
-    display: inline-block;
-    min-width: 5.5rem;
-    margin-right: 0.5rem;
-    font-weight: 600;
-    color: var(--muted);
+  display: inline-block;
+  min-width: 5.5rem;
+  margin-right: 0.5rem;
+  font-weight: 600;
+  color: var(--muted);
 }
 
 .site-footer__links a,
 .site-footer__repo a {
-    color: var(--muted);
+  color: var(--muted);
 }
 
 .site-footer__links a:hover,
 .site-footer__repo a:hover {
-    color: var(--accent-light);
+  color: var(--accent-light);
 }
 
 .site-footer__repo-sep {
-    margin-inline: 0.375rem;
-    color: var(--muted);
-    opacity: 0.6;
+  margin-inline: 0.375rem;
+  color: var(--muted);
+  opacity: 0.6;
 }