Add original and proposed sites

Original/baseline.css

@@ -0,0 +1,323 @@
+/* Reset */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+/* Variables */
+:root {
+    --desktop-font-size: 1.2rem/1.5;
+    --mobile-font-size: 1rem/1.4;
+    --text-color: #2d2d2d;
+    --muted-color: #858585;
+    --link-color: blue;
+    --link-color-alt: darkblue;
+
+    --primary-color: lightsteelblue;
+    --secondary-color: aliceblue;
+    --tertiary-color: whitesmoke;
+
+    --page-baground: #eeeeee;
+    --content-background: #ffffff;
+
+    --display-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
+    --primary-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto, Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
+    --secondary-font: "Georgia", serif;
+    --monospace-font: monospace;
+
+    --roundness: 0.5rem;
+}
+
+/* Typography */
+body {
+    color: var(--text-color);
+    margin: 0 auto;
+    max-width: 75ch;
+    padding: 0 0.5rem;
+    background-color: var(--page-baground);
+}
+body, input, button {
+    font: var(--desktop-font-size) var(--primary-font);
+}
+
+h1,h2,h3,h4,h5,h6,p,blockquote,dl,img,figure {
+    margin: 2rem 0;
+}
+
+h1,h2,h3,h4,h5,h6 { font-weight: bold; line-height: 1.2; font-family: var(--display-font); }
+h1 { font-size: 200%; }
+h2 { font-size: 150%; }
+h3 { font-size: 120%; }
+h4,h5,h6 { font-size: 100%; }
+h5, h6 { text-transform: uppercase; }
+
+header h1 { border-bottom: 1px solid; }
+
+p { margin: 2rem 0; }
+
+a,a:visited { color: var(--link-color); }
+a:hover,a:focus { color: var(--link-color-alt); }
+
+strong, time, b { font-weight: bold; }
+em, dfn, i { font-style: italic; }
+sub { font-size: 60%; vertical-align: bottom; }
+small { font-size: 80%; }
+
+blockquote, q {
+    background: var(--secondary-color);
+    border-left: 10px solid var(--primary-color);
+    display: block;
+    font-family: var(--secondary-font);
+    padding: 1rem;
+    border-radius: var(--roundness);
+}
+blockquote p:first-child { margin-top: 0; }
+blockquote p:last-child { margin-bottom: 0; }
+cite {
+    font-family: var(--secondary-font);
+    font-style: italic;
+    font-weight: bold;
+    margin-top: 1rem;
+}
+
+kbd,code,samp,pre,var { font-family: var(--monospace-font); }
+code, pre {
+    background: var(--tertiary-color);
+    overflow: auto;
+    padding: 0.5rem 1rem;
+}
+code pre , pre code { padding: 0; }
+
+h1+h2,
+h3+h4{
+    margin-top: -1.2em;
+    margin-bottom: 1.2em;
+    color: var(--muted-color)
+}
+
+/* Elements */
+hr {
+    background: var(--text-color);
+    border: 0;
+    height: 1px;
+    margin: 4rem 0;
+}
+
+img {
+    display: block;
+    height: auto; 
+    max-width: 100%; 
+}
+
+figure {
+    border: 1px solid var(--primary-color);
+    display: inline-block;
+    padding: 1rem;
+    width: 100%;
+}
+figure img { margin: 0 auto; }
+figure figcaption { font-size: 80%; margin-top: 0.5rem; text-align: center; }
+
+ul, ol { margin: 2rem 0; padding: 0 0 0 4rem; }
+
+dl dd { padding-left: 2rem; }
+
+
+ul.links,
+nav ul {
+    list-style: none;
+    padding-left: 0px;
+    margin: 0px;
+}
+ul.links li,
+nav ul li {
+    display: inline-block;
+    margin-right: 18px;
+    margin-bottom: 8px;
+}
+
+table {
+    border: 1px solid var(--primary-color);
+    border-collapse: collapse;
+    table-layout: fixed;
+    text-align: left;
+    width: 100%;
+}
+table caption { margin: 2rem 0; }
+table tr { border-bottom: 1px solid var(--primary-color); }
+table tbody tr:nth-child(even) { background: var(--tertiary-color); }
+table th { background: var(--secondary-color); font-weight: bold; }
+table th, table td { padding: 1rem; }
+table th:not(last-of-type), table td:not(last-of-type) { border-right: 1px solid var(--primary-color); }
+
+input,
+button { 
+    appearance: none; 
+    border: 1px solid var(--muted-color);
+    display: block;
+    margin: 0.5rem 0;
+    padding: 0.8rem; 
+    border-radius: var(--roundness);
+    background-color: var(--page-background);
+    color: var(--text-color);
+}
+input:focus,
+input:active {
+     background-color: var(--secondary-color); border-color: var(--primary-color);
+}
+
+input[type=button],
+input[type=submit],
+input[type=reset],
+button {
+    padding: 0.2rem 0.8rem; 
+    background-color: var(--tertiary-color);
+    display: inline-block;
+}
+
+input[type=button]:hover,
+input[type=submit]:hover,
+input[type=reset]:hover,
+button:hover {
+    background-color: var(--secondary-color);
+}
+
+input[type=button]:active,
+input[type=submit]:active,
+input[type=reset]:active,
+button:active {
+    background-color: var(--secondary-color);
+    border-color: var(--primary-color);
+    color: var(--muted-color);
+}
+input[type=button]:focus,
+input[type=submit]:focus,
+input[type=reset]:focus,
+button:focus {
+     border-color: var(--primary-color);
+}
+
+header[role=banner] {
+    background: var(--content-background);
+    background-position: center;
+    background-size: cover;
+
+    margin-top: -32px;
+    padding-top: 32px;
+    padding-bottom: 32px;
+    margin-bottom: 32px;
+
+    width: 100vw;
+    margin-left: calc(-50vw + min(75ch, 100vw)/2 - 8px);
+    padding-left: calc(50vw - min(75ch, 100vw)/2 + 8px);
+    padding-right: calc(50vw - min(75ch, 100vw)/2 + 8px);
+
+    box-shadow: 0px 0px 10px rgba(75, 75, 75, 0.6);
+}
+
+article,
+section {
+    background-color: var(--content-background);
+    border-radius: var(--roundness);
+    
+    margin: 0 0 1em;
+    width: 100%;
+    
+    page-break-inside: avoid;
+    break-inside: avoid-column; 
+
+    box-sizing: border-box;
+    padding: 8px 18px 18px 18px;
+    border: 1px solid var(--tertiary-color);
+
+}
+
+footer {
+    padding-bottom: 32px;
+}
+
+/* Classes */
+.muted {
+    color: var(--muted-color);
+}
+
+.border-primary {
+    border-color: var(--primary-color);
+}
+.border-secondary {
+    border-color: var(--secondary-color);
+}
+.border-tertiary {
+    border-color: var(--tertiary-color);
+}
+
+.background-primary {
+    background-color: var(--primary-color);
+}
+.background-secondary {
+    background-color: var(--secondary-color);
+}
+.background-tertiary {
+    background-color: var(--tertiary-color);
+}
+
+
+/* Mobile Styling */
+@media screen and (max-width: 75ch) {
+    body, input {
+        font: var(--mobile-font-size) var(--primary-font);
+    }
+    table { table-layout: auto; }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text-color: #fff;
+        --muted-color: #c5c5c5;
+        --link-color: orange;
+        --link-color-alt: yellow;
+        --primary-color: orange;
+        --secondary-color: black;
+        --tertiary-color: #2d2d2d;
+
+        --page-baground: #2b2b2b;
+        --content-background: #191919;
+    }
+
+
+    .light-only {
+        display: none !important;
+    }
+
+    header[role=banner] {
+        box-shadow: inset 0px -3px 5px rgba(75, 75, 75, 1);
+    }
+}
+
+
+@media (prefers-color-scheme: light) {
+    .dark-only {
+        display: none !important;
+    }
+}

Original/global.css

@@ -0,0 +1,85 @@
+
+.cards {
+    margin-top: 40px;
+    column-count: 2;
+    column-gap: 1em;
+}
+
+.cards > section {
+    margin: 0 0 1em;
+    width: 100%;
+    
+    page-break-inside: avoid;
+    break-inside: avoid-column; 
+    flex-direction: column;
+
+}
+
+section {
+    overflow:hidden;
+}
+
+section img:first-child {
+    margin: -8px -18px 8px -18px;
+    max-width: calc(100% + 36px);
+}
+
+header[role=banner] {
+    background:
+        linear-gradient(
+                rgba(199, 228, 255, 0.8),
+                rgba(199, 228, 255, 0.8)
+        ),
+        url("milky-way-4526277.jpg"),
+        linear-gradient(#b6bdc3, #cedce7);
+    background-position: center center;
+    background-size: cover;
+}
+
+
+.image-attribution {
+    display: inline-block;
+    padding: 16px;
+    transition: background 0.2s;
+    border-radius: 8px;
+}
+.image-attribution .attribution {
+    /* display: none; */
+    opacity: 0;
+    transition: opacity 0.2s;
+    margin-left: 8px;
+}
+.image-attribution:hover {
+    background-color: var(--content-background);
+}
+.image-attribution:hover .attribution {
+    display: inline;
+    opacity: 1;
+}
+
+@media (prefers-color-scheme: dark) {
+    header[role=banner] {
+        background:
+            linear-gradient(
+                rgba(43, 54, 65, 0.6),
+                rgba(43, 54, 65, 0.6)
+            ),
+            url("milky-way-4526277.jpg"),
+            linear-gradient(#b6bdc3, #cedce7);
+        
+            background-position: center center;
+        background-size: cover;
+    }
+}
+@media screen and (max-width: 75ch) {
+    .cards {
+        column-count: 1;
+    }
+    header > div {
+        padding: 18px;
+    }
+}
+
+footer {
+    text-align: center;
+}

Original/index-scripts.js

@@ -0,0 +1,40 @@
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+
+function getMeetingDateText(startDate) {
+    let nextMeeting = new Date(startDate);
+
+    if(nextMeeting.getMonth() == 0) {
+        // No meeting in January
+        nextMeeting.setDate(1);
+        nextMeeting.setMonth(nextMeeting.getMonth() + 1);
+        return getMeetingDateText(nextMeeting);
+    }
+    
+    const currentWeekday = nextMeeting.getDay();
+    if(currentWeekday != 2) {
+        nextMeeting.setDate(nextMeeting.getDate() + (currentWeekday > 2 ? 9 - currentWeekday : 2 - currentWeekday));
+    }
+    if(nextMeeting.getDate() <= 7) {
+        nextMeeting.setDate(nextMeeting.getDate() + 7);
+    }
+    if(nextMeeting.getDate() > 14) {
+        // We have passed the meeting for this month
+        nextMeeting.setDate(1);
+        nextMeeting.setMonth(nextMeeting.getMonth() + 1);
+        return getMeetingDateText(nextMeeting);
+    }
+    
+    return nextMeeting.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+}
+
+function setNextMeetingText() {
+    const text = getMeetingDateText(new Date());
+    document.getElementById("nextMeeting").innerHTML = text;
+}
+
+window.addEventListener("load", () => {
+    setNextMeetingText();
+});
+    
+
+// @license-end

Original/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en-nz">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+        <title>Astrologue Operating System</title>
+        <link rel="stylesheet" href="baseline.css">
+        <link rel="stylesheet" href="global.css">
+        <script type="text/javascript" src="index-scripts.js"></script>
+        <!-- <link rel="stylesheet" href="baseline.css"> -->
+        <style type="text/css">
+
+        </style>
+    </head>
+    <body>
+        <header role="banner">
+            <div>
+                <h1>
+                    <a style="color: var(--text-color); text-decoration: none;" href="https://zl4gq.nz">
+                        <img class="light-only" src="astrologue-light.png" alt="Astrologue Operating System">
+                        <img class="dark-only" src="astrologue-dark.png" alt="Astrologue Operating System">
+                    </a>
+                </h1>
+                <p>
+                    An operating system for change, Astrologue aims to prove paradigm shifting concepts in personal computing and put the power of general purpose computers back into the hands of regular people.
+                </p>
+                <p>
+                    <small>With self sufficiency, resilience, and software freedom as core philosophies, Astrologue is an exciting project for anyone wanting to reduce their reliance on big tech.</small>
+                </p>
+                <nav>
+                    <ul class="links">
+                        <li><a href="/">Home</a></li>
+                        <li><a href="/">News</a> (<a href="/">RSS</a>)</li>
+                        <li><a href="/">Download</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <div class="cards">
+            <section>
+                <img src="people-4817872_1920.jpg">
+                <h3>Infrastructure Optional</h3>
+                <p>
+                    In an increasingly connected world, technology becomes more dependent on the cloud and central points of failure. Astrologue aims to push the bounds on what can be done in situations where infrastructure might be lacking.
+                </p>
+            </section>
+            <section>
+                <img src="stars-2630050_1280.jpg">
+                <h3>Peer to Peer</h3>
+                <p>
+                    Astrologue has new peer-to-peer software enabling access to apps and updates in situations where traditional operating systems may fall short. A paradigm shift away from energy hungry data centres.
+                </p>
+            </section>
+        </div>
+        <section>
+            <h3>Software Freedom</h3>
+            <p>
+                Astrologue believes that you should be able to do what you want with hardware that you own. Core to this is being able to run software for whatever purpose you wish, having the freedom to share the software, and modify it to do what needs done.
+            </p>
+        </section>
+        <footer>
+            <small>
+
+            </small>
+        </footer>
+    </body>
+</html>

Proposed/assets/css/style.css

@@ -0,0 +1,771 @@
+:root {
+  color-scheme: light;
+  --bg: #f2ebda;
+  --surface: #f9f4e6;
+  --ink: #262016;
+  --ink-soft: #6b5d49;
+  --line: #d9caa9;
+  --rubric: #96302c;
+  --lapis: #2c4a9e;
+  --lapis-field: #22357a;
+  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%23d3ac52' opacity='.35'%3E%3Cpath d='M30 31l1.4 3.6 3.6 1.4-3.6 1.4-1.4 3.6-1.4-3.6-3.6-1.4 3.6-1.4z'/%3E%3Cpath d='M128 18.5l1 2.5 2.5 1-2.5 1-1 2.5-1-2.5-2.5-1 2.5-1z'/%3E%3Cpath d='M76 116l1.1 2.9 2.9 1.1-2.9 1.1-1.1 2.9-1.1-2.9-2.9-1.1 2.9-1.1z'/%3E%3Cpath d='M170 83.2l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3Cpath d='M44 165.3l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3Cpath d='M150 154l1.1 2.9 2.9 1.1-2.9 1.1-1.1 2.9-1.1-2.9-2.9-1.1 2.9-1.1z'/%3E%3Ccircle cx='100' cy='70' r='1.2'/%3E%3Ccircle cx='182' cy='142' r='1'/%3E%3Ccircle cx='14' cy='104' r='1'/%3E%3C/g%3E%3C/svg%3E");
+  --gold: #a8801f;
+  --gold-ink: #7c5f13;
+  --gold-soft: #cdb377;
+  --btn-bg: #24377a;
+  --btn-fg: #f6efdd;
+  --shadow: 0 30px 60px -35px rgb(38 28 12 / 0.45);
+  --glow: radial-gradient(90rem 40rem at 50% -12rem, rgb(255 250 235 / 0.55), transparent 70%);
+  --vignette: radial-gradient(140% 120% at 50% 50%, transparent 62%, rgb(87 66 27 / 0.08));
+  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
+  --divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cg fill='none' stroke='%23a8801f' stroke-width='1'%3E%3Cpath d='M0 8h92'/%3E%3Cpath d='M148 8h92'/%3E%3C/g%3E%3Cg fill='%23a8801f'%3E%3Cpath d='M120 1l7 7-7 7-7-7z'/%3E%3Ccircle cx='103' cy='8' r='1.8'/%3E%3Ccircle cx='96' cy='8' r='1.8'/%3E%3Ccircle cx='137' cy='8' r='1.8'/%3E%3Ccircle cx='144' cy='8' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --bg: #111426;
+    --surface: #1a2038;
+    --ink: #ece0c6;
+    --ink-soft: #a9b1cd;
+    --line: #343c60;
+    --rubric: #d47f74;
+    --lapis: #9fb5ec;
+    --lapis-field: #1c2a58;
+    --gold: #d3ac52;
+    --gold-ink: #d3ac52;
+    --gold-soft: #8a7440;
+    --btn-bg: #d3ac52;
+    --btn-fg: #221a10;
+    --shadow: 0 30px 60px -35px rgb(0 0 0 / 0.7);
+    --glow: radial-gradient(90rem 40rem at 50% -12rem, rgb(110 140 235 / 0.08), transparent 70%);
+    --vignette: radial-gradient(140% 120% at 50% 50%, transparent 58%, rgb(4 8 22 / 0.5));
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 5.5rem;
+}
+
+body {
+  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
+  font-size: 1.125rem;
+  line-height: 1.65;
+  color: var(--ink);
+  background-color: var(--bg);
+  background-image: var(--noise);
+  border-top: 3px solid var(--gold);
+  -webkit-font-smoothing: antialiased;
+}
+
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image: var(--glow), var(--vignette);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+h1,
+h2,
+h3 {
+  font-family: "Cinzel", Georgia, serif;
+  font-weight: 600;
+  line-height: 1.15;
+  text-wrap: balance;
+}
+
+a {
+  color: var(--lapis);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+a:hover {
+  color: var(--rubric);
+}
+
+:focus-visible {
+  outline: 2px solid var(--rubric);
+  outline-offset: 3px;
+}
+
+::selection {
+  background: var(--gold);
+  color: #221a10;
+}
+
+.container {
+  width: min(72rem, 100% - 3rem);
+  margin-inline: auto;
+}
+
+.container--prose {
+  width: min(50rem, 100% - 3rem);
+}
+
+.skip-link {
+  position: fixed;
+  top: 0.75rem;
+  left: 0.75rem;
+  z-index: 100;
+  padding: 0.6rem 1rem;
+  font-family: "Cinzel", serif;
+  font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  color: #221a10;
+  background: var(--gold);
+  text-decoration: none;
+  transform: translateY(-300%);
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+}
+
+.masthead {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background: color-mix(in srgb, var(--bg) 88%, transparent);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--line);
+}
+
+.masthead__inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 2rem;
+  padding-block: 0.75rem;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+  text-decoration: none;
+  color: inherit;
+}
+
+.sigil__ring {
+  stroke: var(--gold);
+}
+
+.sigil__star {
+  fill: var(--gold);
+}
+
+.sigil__core {
+  fill: var(--lapis);
+}
+
+.brand__text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.brand__name {
+  font-family: "Cinzel", serif;
+  font-weight: 700;
+  font-size: 1.3rem;
+  letter-spacing: 0.12em;
+}
+
+.brand__tagline {
+  font-style: italic;
+  font-size: 0.88rem;
+  color: var(--ink-soft);
+}
+
+.site-nav__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1.6rem;
+  padding: 0;
+  list-style: none;
+}
+
+.site-nav__list a:not(.nav-cta) {
+  font-variant: small-caps;
+  font-size: 1.08rem;
+  letter-spacing: 0.06em;
+  color: var(--ink);
+  text-decoration: none;
+  background-image: linear-gradient(var(--gold), var(--gold));
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  background-size: 0% 1px;
+  transition: background-size 0.25s ease, color 0.25s ease;
+}
+
+.site-nav__list a:not(.nav-cta):hover {
+  color: var(--gold-ink);
+  background-size: 100% 1px;
+}
+
+.nav-cta {
+  font-family: "Cinzel", serif;
+  font-size: 0.82rem;
+  letter-spacing: 0.08em;
+  color: var(--btn-fg);
+  background: var(--btn-bg);
+  border: 1px solid var(--gold);
+  padding: 0.45rem 1rem;
+  text-decoration: none;
+  transition: background-color 0.25s ease, color 0.25s ease;
+}
+
+.nav-cta:hover {
+  background: var(--gold);
+  color: #221a10;
+}
+
+.band {
+  padding-block: clamp(3rem, 8vw, 5.5rem);
+}
+
+.band--sky {
+  --ink: #ece0c6;
+  --ink-soft: #b9c2df;
+  --gold: #d3ac52;
+  --gold-ink: #d3ac52;
+  --gold-soft: #c9b06a;
+  --rubric: #e09a90;
+  --surface: var(--lapis-field);
+  color: var(--ink);
+  background-color: var(--lapis-field);
+  background-image: var(--stars), radial-gradient(80rem 34rem at 50% -10rem, rgb(127 160 232 / 0.16), transparent 70%);
+  border-block: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
+}
+
+.kicker {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  margin-bottom: 1.1rem;
+}
+
+.kicker::before,
+.kicker::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--gold-soft));
+}
+
+.kicker::after {
+  background: linear-gradient(90deg, var(--gold-soft), transparent);
+}
+
+.kicker span {
+  font-family: "Cinzel", serif;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--gold-ink);
+  white-space: nowrap;
+}
+
+.section-head {
+  max-width: 44rem;
+  margin-inline: auto;
+  margin-bottom: clamp(2rem, 5vw, 3.25rem);
+  text-align: center;
+}
+
+.section-head h2 {
+  font-size: clamp(1.7rem, 1rem + 2.4vw, 2.6rem);
+}
+
+.section-head__intro {
+  margin-top: 1rem;
+  color: var(--ink-soft);
+  text-wrap: pretty;
+}
+
+.hero {
+  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 8vw, 5.5rem);
+}
+
+.hero__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.8fr);
+  gap: clamp(2.5rem, 6vw, 5rem);
+  align-items: center;
+}
+
+.hero__title {
+  font-size: clamp(2.3rem, 1.2rem + 4vw, 4rem);
+  margin-bottom: 1.5rem;
+}
+
+.hero__accent {
+  display: block;
+  font-family: "EB Garamond", serif;
+  font-style: italic;
+  font-weight: 500;
+  font-size: 0.72em;
+  color: var(--rubric);
+}
+
+.lede {
+  font-size: 1.22rem;
+  max-width: 56ch;
+  color: var(--ink);
+  text-wrap: pretty;
+}
+
+.dropcap::first-letter {
+  font-family: "UnifrakturMaguntia", "Cinzel", serif;
+  float: left;
+  font-size: 3.1em;
+  line-height: 0.78;
+  padding: 0.08em 0.12em 0 0;
+  color: var(--rubric);
+}
+
+.hero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2.2rem;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.8rem 1.6rem;
+  font-family: "Cinzel", serif;
+  font-size: 0.92rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+  border: 1px solid var(--gold);
+  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
+}
+
+.btn--primary {
+  background: var(--btn-bg);
+  color: var(--btn-fg);
+}
+
+.btn--primary:hover {
+  background: var(--gold);
+  color: #221a10;
+}
+
+.btn--ghost {
+  background: transparent;
+  color: var(--ink);
+  border-color: color-mix(in srgb, var(--ink) 45%, transparent);
+}
+
+.btn--ghost:hover {
+  color: var(--gold-ink);
+  border-color: var(--gold);
+}
+
+.hero__note {
+  margin-top: 1.1rem;
+  font-size: 0.92rem;
+  font-style: italic;
+  color: var(--ink-soft);
+}
+
+.folio {
+  position: relative;
+  padding: 0.75rem;
+  background-color: var(--lapis-field);
+  background-image: var(--stars);
+  border: 1px solid var(--gold-soft);
+  box-shadow: var(--shadow);
+}
+
+.folio img {
+  width: 100%;
+  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
+}
+
+.folio figcaption {
+  padding-top: 0.7rem;
+  font-size: 0.85rem;
+  font-style: italic;
+  text-align: center;
+  color: rgb(236 224 198 / 0.75);
+}
+
+.corner {
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  border: 0 solid var(--gold);
+}
+
+.corner--tl {
+  top: -2px;
+  left: -2px;
+  border-top-width: 2px;
+  border-left-width: 2px;
+}
+
+.corner--tr {
+  top: -2px;
+  right: -2px;
+  border-top-width: 2px;
+  border-right-width: 2px;
+}
+
+.corner--bl {
+  bottom: -2px;
+  left: -2px;
+  border-bottom-width: 2px;
+  border-left-width: 2px;
+}
+
+.corner--br {
+  bottom: -2px;
+  right: -2px;
+  border-bottom-width: 2px;
+  border-right-width: 2px;
+}
+
+.divider {
+  width: min(240px, 60vw);
+  height: 16px;
+  margin: 0 auto;
+  border: 0;
+  background: var(--divider) center / contain no-repeat;
+}
+
+.grid-pillars {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: 1.5rem;
+}
+
+.pillar {
+  padding: 1.7rem 1.5rem 1.9rem;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  box-shadow: inset 0 2px 0 var(--gold-soft);
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+}
+
+.pillar:hover {
+  transform: translateY(-3px);
+  border-color: var(--gold-soft);
+  box-shadow: inset 0 2px 0 var(--gold);
+}
+
+.pillar__num {
+  font-family: "Cinzel", serif;
+  font-weight: 700;
+  font-size: 1rem;
+  letter-spacing: 0.1em;
+  color: var(--gold-ink);
+}
+
+.pillar h3 {
+  margin: 0.5rem 0 0.6rem;
+  font-size: 1.12rem;
+}
+
+.pillar p:last-child {
+  font-size: 1rem;
+  color: var(--ink-soft);
+  text-wrap: pretty;
+}
+
+.labours {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
+  gap: 2.25rem 1.5rem;
+  padding: 0;
+  list-style: none;
+  counter-reset: month;
+}
+
+.month {
+  text-align: center;
+}
+
+.month img {
+  width: clamp(96px, 60%, 128px);
+  aspect-ratio: 1;
+  margin-inline: auto;
+  margin-bottom: 0.9rem;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 1px solid var(--gold-soft);
+  box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--gold-soft);
+  transition: box-shadow 0.25s ease, transform 0.25s ease;
+}
+
+.month:hover img {
+  transform: translateY(-3px);
+  box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--gold), 0 14px 30px -18px rgb(0 0 0 / 0.5);
+}
+
+.month h3 {
+  font-size: 0.95rem;
+  letter-spacing: 0.08em;
+}
+
+.labour-name {
+  font-style: italic;
+  color: var(--rubric);
+}
+
+.month p:last-child {
+  margin-top: 0.3rem;
+  font-size: 0.92rem;
+  color: var(--ink-soft);
+}
+
+.entry {
+  display: grid;
+  grid-template-columns: 8.5rem minmax(0, 1fr);
+  gap: 1.5rem;
+  padding-block: 1.6rem;
+}
+
+.entry + .entry {
+  border-top: 1px solid var(--line);
+}
+
+.entry__time {
+  font-family: "Cinzel", serif;
+  font-size: 0.82rem;
+  letter-spacing: 0.06em;
+  color: var(--rubric);
+}
+
+.entry__body h3 {
+  font-size: 1.25rem;
+  margin-bottom: 0.35rem;
+}
+
+.entry__body p {
+  font-size: 1rem;
+  color: var(--ink-soft);
+  text-wrap: pretty;
+}
+
+.cta-band {
+  position: relative;
+  max-width: 46rem;
+  margin-inline: auto;
+  padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.5rem, 6vw, 3.5rem);
+  text-align: center;
+  background: var(--surface);
+  border: 1px solid var(--gold-soft);
+}
+
+.cta-band::before,
+.cta-band::after {
+  content: "";
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  border: 0 solid var(--gold);
+}
+
+.cta-band::before {
+  top: 8px;
+  left: 8px;
+  border-top-width: 2px;
+  border-left-width: 2px;
+}
+
+.cta-band::after {
+  bottom: 8px;
+  right: 8px;
+  border-bottom-width: 2px;
+  border-right-width: 2px;
+}
+
+.cta-band .kicker {
+  margin-inline: auto;
+  max-width: 30rem;
+}
+
+.cta-band h2 {
+  font-size: clamp(1.6rem, 1rem + 2vw, 2.3rem);
+}
+
+.cta-band__lede {
+  margin-top: 0.8rem;
+  color: var(--ink-soft);
+}
+
+.cta-band .hero__actions {
+  justify-content: center;
+}
+
+.cta-band .hero__note {
+  margin-top: 1.3rem;
+}
+
+#download.band {
+  padding-top: clamp(1.5rem, 5vw, 3rem);
+}
+
+.site-footer {
+  background-color: color-mix(in srgb, var(--lapis-field) 68%, #0a0f24);
+  background-image: var(--stars);
+  color: #ece0c6;
+  padding: clamp(2.75rem, 7vw, 4rem) 0 2.25rem;
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 2rem 1.5rem;
+}
+
+.foot-brand {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  max-width: 26rem;
+}
+
+.foot-brand .sigil {
+  flex-shrink: 0;
+}
+
+.foot-brand p {
+  font-size: 0.98rem;
+  font-style: italic;
+  color: rgb(236 224 198 / 0.78);
+}
+
+.foot-title {
+  font-family: "Cinzel", serif;
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: #cdb377;
+  margin-bottom: 0.9rem;
+}
+
+.foot-list {
+  padding: 0;
+  list-style: none;
+}
+
+.foot-list li + li {
+  margin-top: 0.45rem;
+}
+
+.foot-list a {
+  color: rgb(236 224 198 / 0.88);
+  font-size: 0.98rem;
+  text-decoration: none;
+}
+
+.foot-list a:hover {
+  color: #d3ac52;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.colophon {
+  margin-top: 2.5rem;
+  padding-top: 1.4rem;
+  border-top: 1px solid rgb(236 224 198 / 0.22);
+  font-size: 0.88rem;
+  font-style: italic;
+  text-align: center;
+  color: rgb(236 224 198 / 0.62);
+}
+
+@media (max-width: 60rem) {
+  .hero__grid {
+    grid-template-columns: 1fr;
+  }
+
+  .folio {
+    max-width: 26rem;
+    margin-inline: auto;
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .foot-brand {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 38rem) {
+  .entry {
+    grid-template-columns: 1fr;
+    gap: 0.4rem;
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .kicker span {
+    letter-spacing: 0.18em;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+@media print {
+  body {
+    background: none;
+    color: #000;
+  }
+
+  body::after,
+  .masthead .site-nav,
+  .hero__actions,
+  .btn {
+    display: none;
+  }
+
+  .folio {
+    box-shadow: none;
+  }
+}

Proposed/index.html

@@ -0,0 +1,285 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Astrologue — a Linux distribution for every season</title>
+  <meta name="description" content="Astrologue is a resilient Linux distribution that ships its complete source code and can reproduce itself, build for build, in any season.">
+  <meta name="color-scheme" content="light dark">
+  <meta name="theme-color" content="#f2ebda" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#111426" media="(prefers-color-scheme: dark)">
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='27' fill='none' stroke='%23a8801f' stroke-width='4'/%3E%3Cpath d='M32 8l6 18 18 6-18 6-6 18-6-18-18-6 18-6z' fill='%23a8801f'/%3E%3Ccircle cx='32' cy='32' r='4' fill='%232c4a9e'/%3E%3C/svg%3E">
+  <meta property="og:title" content="Astrologue — a Linux distribution for every season">
+  <meta property="og:description" content="Resilient, reproducible, and shipped with every seed of its own making.">
+  <meta property="og:type" content="website">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..700&amp;family=EB+Garamond:ital,wght@0,400..800;1,400..800&amp;family=UnifrakturMaguntia&amp;display=swap">
+  <link rel="stylesheet" href="assets/css/style.css">
+</head>
+<body>
+  <a class="skip-link" href="#main">Skip to content</a>
+
+  <header class="masthead">
+    <div class="container masthead__inner">
+      <a class="brand" href="#overview">
+        <svg class="sigil" width="42" height="42" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
+          <circle class="sigil__ring" cx="32" cy="32" r="27" fill="none" stroke-width="3"/>
+          <path class="sigil__star" d="M32 8l6 18 18 6-18 6-6 18-6-18-18-6 18-6z"/>
+          <circle class="sigil__core" cx="32" cy="32" r="4"/>
+        </svg>
+        <span class="brand__text">
+          <span class="brand__name">Astrologue</span>
+          <span class="brand__tagline">a Linux distribution, kept by the seasons</span>
+        </span>
+      </a>
+      <nav class="site-nav" aria-label="Primary">
+        <ul class="site-nav__list">
+          <li><a href="#overview">Overview</a></li>
+          <li><a href="#pillars">Pillars</a></li>
+          <li><a href="#labours">Labours</a></li>
+          <li><a href="#chronicle">Chronicle</a></li>
+          <li><a class="nav-cta" href="#download">Download</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <main id="main">
+
+    <section class="hero" id="overview">
+      <div class="container hero__grid">
+        <div class="hero__copy">
+          <p class="kicker"><span>A Linux distribution · kept by the guild</span></p>
+          <h1 class="hero__title">
+            Every month, a labour.
+            <span class="hero__accent">Every build, a harvest.</span>
+          </h1>
+          <p class="lede dropcap">Astrologue is a Linux distribution built for resilience. It ships its entire source, signs every artifact, and can reproduce itself from scratch — the same seed, the same crop, on any machine, in any season.</p>
+          <div class="hero__actions">
+            <a class="btn btn--primary" href="#download">Download 2026.09 “Harvest”</a>
+            <a class="btn btn--ghost" href="#pillars">Verify &amp; build from source</a>
+          </div>
+          <p class="hero__note">x86-64 · 1.4 GB · SHA-256 &amp; Minisign signatures · full build manifest</p>
+        </div>
+
+        <figure class="folio">
+          <!-- Template note: replace this placeholder with a public-domain illumination from the Labours of the Months, e.g. the Très Riches Heures du Duc de Berry (c. 1412–1416). -->
+          <img src="https://picsum.photos/seed/astrologue-folio/720/900.jpg" width="720" height="900" alt="Placeholder artwork standing in for a Labours of the Months illumination">
+          <span class="corner corner--tl" aria-hidden="true"></span>
+          <span class="corner corner--tr" aria-hidden="true"></span>
+          <span class="corner corner--bl" aria-hidden="true"></span>
+          <span class="corner corner--br" aria-hidden="true"></span>
+          <figcaption>The Labours of the Months, fol. 11 — placeholder art</figcaption>
+        </figure>
+      </div>
+    </section>
+
+    <section class="band band--plain" id="pillars">
+      <div class="container">
+        <header class="section-head">
+          <p class="kicker"><span>What we hold</span></p>
+          <h2>The Four Pillars of the Craft</h2>
+        </header>
+        <div class="grid-pillars">
+          <article class="pillar">
+            <p class="pillar__num">I.</p>
+            <h3>Built to weather</h3>
+            <p>Signed updates, offline-first tools, and no single point of failure. Astrologue is composed to keep working when the wider world does not.</p>
+          </article>
+          <article class="pillar">
+            <p class="pillar__num">II.</p>
+            <h3>Nothing hidden under the cloak</h3>
+            <p>Every package, patch, and byte of the image ships with its complete build recipe. Read it, fork it, learn from it, mend it.</p>
+          </article>
+          <article class="pillar">
+            <p class="pillar__num">III.</p>
+            <h3>The same harvest, twice</h3>
+            <p>Deterministic builds make any machine the same machine. Verify our image bit for bit — then reproduce it yourself, seed to crop.</p>
+          </article>
+          <article class="pillar">
+            <p class="pillar__num">IV.</p>
+            <h3>Kept by the guild</h3>
+            <p>Maintainers, mirrors, and mentors tend the distribution like an orchard: slowly, openly, and for everyone.</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="band band--sky" id="labours">
+      <div class="container">
+        <header class="section-head">
+          <p class="kicker"><span>The turning wheel</span></p>
+          <h2>The Labours of the Months</h2>
+          <p class="section-head__intro">Medieval almanacs gave every month its proper labour — sowing, reaping, threshing, feasting. Astrologue keeps the same calendar for its own craft: every season of the project has its work, and every work has its season.</p>
+        </header>
+        <ol class="labours">
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-01/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of January" loading="lazy">
+            <h3>January</h3>
+            <p class="labour-name">The Feast</p>
+            <p>The release is signed, sealed, and sent to the mirrors.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-02/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of February" loading="lazy">
+            <h3>February</h3>
+            <p class="labour-name">The Fireside</p>
+            <p>Quiet weeks: documentation mended, errata kept warm.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-03/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of March" loading="lazy">
+            <h3>March</h3>
+            <p class="labour-name">Pruning</p>
+            <p>Dead code and stale dependencies cut away for new growth.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-04/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of April" loading="lazy">
+            <h3>April</h3>
+            <p class="labour-name">The Garden</p>
+            <p>New contributors take to the rows; features are sown.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-05/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of May" loading="lazy">
+            <h3>May</h3>
+            <p class="labour-name">Hawking</p>
+            <p>The falcon flies the whole estate: audits and bug hunts.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-06/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of June" loading="lazy">
+            <h3>June</h3>
+            <p class="labour-name">Haymaking</p>
+            <p>The first patches come in and are left to dry in review.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-07/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of July" loading="lazy">
+            <h3>July</h3>
+            <p class="labour-name">Reaping</p>
+            <p>The heavy merges; the mainline stands tall and gold.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-08/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of August" loading="lazy">
+            <h3>August</h3>
+            <p class="labour-name">Threshing</p>
+            <p>Grain from chaff: tests separate what is kept.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-09/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of September" loading="lazy">
+            <h3>September</h3>
+            <p class="labour-name">The Vintage</p>
+            <p>Point releases pressed, bottled, and laid down in the cellar.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-10/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of October" loading="lazy">
+            <h3>October</h3>
+            <p class="labour-name">Sowing</p>
+            <p>Next year’s toolchain is seeded in the cold field.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-11/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of November" loading="lazy">
+            <h3>November</h3>
+            <p class="labour-name">Acorn Gathering</p>
+            <p>Archives weighed and stored; mirrors fattened for winter.</p>
+          </li>
+          <li class="month">
+            <img src="https://picsum.photos/seed/labour-12/280/280.jpg" width="280" height="280" alt="Placeholder medallion for the labour of December" loading="lazy">
+            <h3>December</h3>
+            <p class="labour-name">The Culling</p>
+            <p>Legacy is slaughtered; the final image baked for the feast.</p>
+          </li>
+        </ol>
+      </div>
+    </section>
+
+    <section class="band band--plain" id="chronicle">
+      <div class="container container--prose">
+        <header class="section-head">
+          <p class="kicker"><span>News from the estate</span></p>
+          <h2>The Chronicle</h2>
+        </header>
+        <article class="entry">
+          <p class="entry__time"><time datetime="2026-08-12">12 August 2026</time></p>
+          <div class="entry__body">
+            <h3>The threshing is complete</h3>
+            <p>Astrologue 2026.08 closes forty-one issues and strips two legacy init scripts. Bit-for-bit reproduction confirmed on three independent machines.</p>
+          </div>
+        </article>
+        <article class="entry">
+          <p class="entry__time"><time datetime="2026-06-02">2 June 2026</time></p>
+          <div class="entry__body">
+            <h3>A new mirror in the south</h3>
+            <p>The guild welcomes a southern-hemisphere mirror; downloads now circle the globe, and no storm takes the whole network down.</p>
+          </div>
+        </article>
+        <article class="entry">
+          <p class="entry__time"><time datetime="2026-03-21">21 March 2026</time></p>
+          <div class="entry__body">
+            <h3>The pruning report</h3>
+            <p>One hundred and thirty stale packages removed this season. The image sheds 212 MB and gains, as always, its agility.</p>
+          </div>
+        </article>
+      </div>
+    </section>
+
+    <hr class="divider" aria-hidden="true">
+
+    <section class="band band--plain" id="download">
+      <div class="container">
+        <div class="cta-band">
+          <p class="kicker"><span>The harvest is in</span></p>
+          <h2>Take up the labour</h2>
+          <p class="cta-band__lede">Carry Astrologue with you, or grow it yourself from seed. Both paths begin at the same gate.</p>
+          <div class="hero__actions">
+            <a class="btn btn--primary" href="#download">Download Astrologue 2026.09</a>
+            <a class="btn btn--ghost" href="#pillars">Verify &amp; build from source</a>
+          </div>
+          <p class="hero__note">x86-64 · 1.4 GB · SHA-256 &amp; Minisign signatures · full build manifest</p>
+        </div>
+      </div>
+    </section>
+
+  </main>
+
+  <footer class="site-footer">
+    <div class="container">
+      <div class="footer-grid">
+        <div class="foot-brand">
+          <svg class="sigil" width="42" height="42" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
+            <circle class="sigil__ring" cx="32" cy="32" r="27" fill="none" stroke-width="3"/>
+            <path class="sigil__star" d="M32 8l6 18 18 6-18 6-6 18-6-18-18-6 18-6z"/>
+            <circle class="sigil__core" cx="32" cy="32" r="4"/>
+          </svg>
+          <p>A Linux distribution kept by the seasons — resilient, reproducible, and shipped with every seed of its own making.</p>
+        </div>
+        <nav aria-label="The estate">
+          <p class="foot-title">The Estate</p>
+          <ul class="foot-list">
+            <li><a href="#download">Download</a></li>
+            <li><a href="#download">Mirrors</a></li>
+            <li><a href="#pillars">Verify an image</a></li>
+            <li><a href="#chronicle">Release notes</a></li>
+          </ul>
+        </nav>
+        <nav aria-label="The guild hall">
+          <p class="foot-title">The Guild Hall</p>
+          <ul class="foot-list">
+            <li><a href="#pillars">Contribute</a></li>
+            <li><a href="#pillars">Source</a></li>
+            <li><a href="#pillars">Code of conduct</a></li>
+            <li><a href="#chronicle">The post</a></li>
+          </ul>
+        </nav>
+        <nav aria-label="The almanac">
+          <p class="foot-title">The Almanac</p>
+          <ul class="foot-list">
+            <li><a href="#pillars">Handbook</a></li>
+            <li><a href="#pillars">FAQ</a></li>
+            <li><a href="#chronicle">Roadmap</a></li>
+            <li><a href="#chronicle">Feeds</a></li>
+          </ul>
+        </nav>
+      </div>
+      <p class="colophon">Set in Cinzel and EB Garamond, rubricated in vermilion and illuminated in gold. Astrologue is free software, licensed GPL-3.0-or-later: take it, tend it, pass it on.</p>
+    </div>
+  </footer>
+</body>
+</html>