@rathnasgala/theme 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala/theme",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "Managed Gala static-site theme payload",
   "license": "MIT",
   "repository": {

package/payload/.gala/managed-files.json

@@ -2,12 +2,16 @@
   "schemaVersion": 1,
   "themePackage": {
     "name": "@rathnasgala/theme",
-    "version": "0.0.17",
+    "version": "0.0.19",
     "availableDesignThemes": [
       "editorial"
     ],
     "securityAdvisories": []
   },
+  "requiredBudgets": {
+    "managedJavaScriptBytes": 65536,
+    "managedCssBytes": 32768
+  },
   "files": {
     ".gala/publish.yml.template": "73080241d89bd09964b797a8bcc8e18471412e11bc873efad76305b60f497d08",
     ".gitignore": "b5fa24e10155097a0d372926fd2e59e6072e7cc2cb6399bbfb4beb8b33ea315b",
@@ -21,7 +25,7 @@
     "lib/render-markdown.js": "40e6d6743b76de6c16d138475f188a4263967530c370d8b26a363f4df58c2caf",
     "lib/seo.js": "107de8804931945b8e73894877fc394d6b535a9d0d969a4ba5b68f2e136e0a17",
     "lib/share-targets.js": "458aff86fab2b62a364442cd8c612565c6e0b53eef2f20cb6237cc562b1e0731",
-    "lib/site-config.js": "ab7cc170dc30c74ea5ef08b8ff6a82f9820998ae4190a06d64375dfd7d515864",
+    "lib/site-config.js": "da7d2dffab62c7346c9930494b85fc6ea735d4f50565bbd0454a04393f8cad96",
     "package-lock.json": "c97a6a2f794aef083a39a8d2628eccc4a3c484e1c6225899b77ec1fb7c466d9e",
     "package.json": "4c60bea06f39aec755ac68caf8d8841c1d59d0f6121fad7f4396231ce14712dc",
     "src/404.njk": "be0d44370ac5402156aaf3d32ea581057bc61ec94c1a5f92bb809733af7a8a20",
@@ -31,7 +35,7 @@
     "src/_data/languages.js": "1358748f7fa2f74406d3295a030827d6229a53e94da72cf712e719d7a356aeac",
     "src/_data/site.js": "d9c001f4cc12a34027dd92303530b11b5402d47613459bb997e22c4bcbea326d",
     "src/_includes/components/ui.njk": "23eb647d8658868449ec6bb809e965a85302124a97639f94d5d28af72df56e4c",
-    "src/_includes/layouts/base.njk": "f504b5a80020b90eb47d59db5e626a4554e2f2d4ef64b3b25c98869830581ebe",
+    "src/_includes/layouts/base.njk": "e73be30738535902599e1c060c11afbd128c86332913114f643dc56dea99fcba",
     "src/_includes/layouts/post.njk": "1accd2832064ad19ee7bf18daf5fa1e60569f32c9b7a547934a6361f747d7eb7",
     "src/assets/embed-codepen.svg": "e9def697f38c466fb2b6652535c4c814e8cbbbefc6e052a69f335aeb27e8356b",
     "src/assets/embed-gist.svg": "fcd9bc2bf29a5c118492b853c0a01390b7539c38ddb985da3c2a6e2f246a39f7",
@@ -39,11 +43,12 @@
     "src/assets/embed-youtube.svg": "10d192f2b14b67664fea88c8cf246321d20190def51d59fad5762e552219b067",
     "src/assets/engagement-comments.js": "b20d9268c9d908b4453a42188eaca25349f25534fb04a9293c9e688a982cd8f8",
     "src/assets/engagement-transport.js": "4f9ca0cd669bf8abc25f2909104e3e4b231657ef97d36a17d06e53454d711786",
+    "src/assets/favicon.svg": "8615e3d96fe37ae9ed14afb1886e7c0e690eef5b10be66ca91cccfd085a74bb6",
     "src/assets/interactions.js": "dd4e343505e528d89596ca67db679b52c989e022f93399193e4377db01fc8a08",
     "src/assets/preferences.js": "789127bee013ed6a1bbf8cefd7b9109291c16220e7a6e09314e3c93c54731d1d",
     "src/assets/search.js": "df425f0239277792ad39f2138bc89cb66cc4ecda5ed59042d46abc2f05372088",
-    "src/assets/theme-mode.js": "3797c84dbaa090b5b21427a31928b5dd97f13d04d99833f5e1e74c6b50e01dcc",
-    "src/assets/theme.css": "94839833f93997415f570041a691da0c96c27992f897e116948077a8b25e8dfa",
+    "src/assets/theme-mode.js": "944b29db11a577961a60ddcfa52f07ef2411f3f3631bea85bd79be16428c08be",
+    "src/assets/theme.css": "cdd41ddb670fb8c823b3490efa2a887d11dd6a1931afa0264deee53283b684d3",
     "src/assets/vendor/hooks.js": "ae6ec58592683ca64fa4d65b20d40b103df62a673bcc4712515cf165950b07f3",
     "src/assets/vendor/htm.js": "e4dac9bc40a6f2ec590413d787ae30bbcfdfcde4f28971ee65d9578271b7aad4",
     "src/assets/vendor/preact.js": "712517dd2a42c3c22b5ab0264ad7e9a2b1e8be6cf97fa00dbedd98203617e616",
@@ -58,7 +63,6 @@
     "src/redirects.11ty.js": "3c163246a59f5364861db6a6f05ae88afc938a5379d86cf42776d8d49b0031f3",
     "src/search-index.11ty.js": "700dc2a2be0ef20de3a828a4612fcf7a082691eade29c6e1d75f09c24b6c6024",
     "src/search.njk": "63f2e8aeebb63c90da2e375eece639ce096cad1eff7f28628cafc46faf7ceee6",
-    "src/settings.njk": "9e6babf4d2774687558618c4fbd109ddfc0f479f52ec2e5d00c373c44ad16676",
     "src/sitemap.11ty.js": "4f233e94fb4a913ad5659116518432ed264984a7b622eba3558c77b4ec6435dc",
     "static/robots.txt": "16ceb5ee3e0dc13aa9adf31a3ebbe45a1d965b8c2b9f72eaf84e5911e140ed95"
   },

package/payload/lib/site-config.js

@@ -7,19 +7,39 @@ const BUDGET_KEYS = Object.freeze([
   'managedCssBytes',
   'ordinaryHtmlBytes'
 ]);
+/*
+ * Only what the theme actually implements. A value here is a promise that choosing it changes how
+ * a publication looks; anything the CSS does not answer to has no business being offered.
+ */
 const DESIGN_VALUES = Object.freeze({
   layout: Object.freeze(['article-first', 'portfolio']),
-  palette: Object.freeze(['default', 'ocean'])
+  palette: Object.freeze(['default', 'ocean']),
+  typography: Object.freeze(['system', 'editorial', 'humanist', 'mono']),
+  density: Object.freeze(['compact', 'comfortable', 'spacious']),
+  spacing: Object.freeze(['compact', 'comfortable', 'spacious']),
+  radius: Object.freeze(['sharp', 'soft', 'round']),
+  motion: Object.freeze(['none', 'subtle', 'expressive']),
+  componentStyle: Object.freeze(['quiet', 'outlined', 'raised'])
 });
 const CONTACT_KEYS = Object.freeze([
   'enabled', 'websiteEnabled', 'phoneEnabled'
 ]);
 
+/*
+ * `layout` and `palette` have always been required. The rest were added later and are optional:
+ * a publication written before they existed is still a valid publication, and the theme falls
+ * back to its own defaults for anything absent. Present-but-unknown is still an error, because
+ * that is a writer expecting something the CSS will not do.
+ */
+const REQUIRED_DESIGN = Object.freeze(['layout', 'palette']);
+
 function validateImplementedDesign(config) {
   if (config?.design == null) return;
   for (const [field, allowed] of Object.entries(DESIGN_VALUES)) {
-    if (!allowed.includes(config.design[field])) {
-      throw new TypeError(`Unsupported design.${field}: ${config.design[field]}`);
+    const value = config.design[field];
+    if (value === undefined && !REQUIRED_DESIGN.includes(field)) continue;
+    if (!allowed.includes(value)) {
+      throw new TypeError(`Unsupported design.${field}: ${value}`);
     }
   }
 }

package/payload/src/_includes/layouts/base.njk

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme }}" data-layout="{{ site.design.layout }}" data-palette="{{ site.design.palette }}" data-mode="system">
+<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme }}" data-layout="{{ site.design.layout }}" data-palette="{{ site.design.palette }}" data-typography="{{ site.design.typography }}" data-density="{{ site.design.density }}" data-spacing="{{ site.design.spacing }}" data-radius="{{ site.design.radius }}" data-motion="{{ site.design.motion }}" data-component-style="{{ site.design.componentStyle }}" data-mode="{{ site.design.colorMode | default('system') }}">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="{{ '/custom.css' | url }}">
     <script src="{{ '/assets/theme-mode.js' | url }}" defer></script>
     <script src="{{ '/assets/preferences.js' | url }}" defer></script>
+    <link rel="icon" href="{{ '/assets/favicon.svg' | url }}" type="image/svg+xml">
     <script src="{{ '/assets/interactions.js' | url }}" defer></script>
     <script type="module" src="{{ '/assets/engagement-comments.js' | url }}"></script>
     <script src="{{ '/assets/search.js' | url }}" defer></script>
@@ -69,17 +70,12 @@
     <dialog id="gala-settings-dialog" class="gala-dialog" aria-labelledby="gala-settings-title">
       <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close settings">Close</button></form>
       <h2 id="gala-settings-title">Reader settings</h2>
-      <section aria-labelledby="gala-dialog-theme-setting">
-        <h3 id="gala-dialog-theme-setting">Appearance</h3>
-        <button type="button" data-theme-mode-toggle aria-label="Color mode: system. Activate for light."><span data-theme-mode-label>Theme: system</span></button>
-      </section>
       <section aria-labelledby="gala-dialog-language-setting">
         <h3 id="gala-dialog-language-setting">Language preference</h3>
         <label>Preferred language
           <select data-language-preference>{% for language in languages %}<option value="{{ language | escape }}">{{ language }}</option>{% endfor %}</select>
         </label>
       </section>
-      <p><a href="{{ '/settings/' | url }}">Open settings page</a></p>
     </dialog>
     <dialog id="gala-search-dialog" class="gala-dialog" aria-labelledby="gala-search-title">
       <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close search">Close</button></form>
@@ -98,7 +94,7 @@
     {% if site.site.id and site.site.id != "unavailable" %}
     <dialog id="gala-account-dialog" class="gala-dialog gala-account-dialog" aria-labelledby="gala-account-title">
       <form method="dialog" class="gala-dialog__close"><button type="submit" aria-label="Close account">Close</button></form>
-      <h2 id="gala-account-title">Gala account</h2>
+      <h2 id="gala-account-title" class="gala-visually-hidden">Gala account</h2>
       <iframe data-gala-session-frame title="Gala account and sign in" allow="identity-credentials-get" src="{{ site.platform.apiBaseUrl or 'https://api.gala67.com' }}/v1/widget/session?siteId={{ site.site.id | escape }}"></iframe>
     </dialog>
     {% endif %}

package/payload/src/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="#8a4b2a"/><path d="M22 11.5c-1.1-1.3-2.8-2-4.6-2-3.6 0-6.4 2.9-6.4 6.5s2.8 6.5 6.4 6.5c3.2 0 5.6-2 6-5h-5.6" fill="none" stroke="#fdfcfb" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/payload/src/assets/theme-mode.js

@@ -1,13 +1,25 @@
 const MODES = ['system', 'light', 'dark'];
 const STORAGE_KEY = 'gala-color-mode';
 
+/*
+ * The reader's own choice always wins. Absent one, the publication's `design.colorMode` decides
+ * what they see first — it is already on the element, server-rendered. This used to fall back to
+ * `system` unconditionally, which meant a writer could set a colour mode and no reader ever saw
+ * it: the setting existed everywhere except in the page.
+ */
+function publicationDefault() {
+  const declared = document.documentElement.dataset.mode;
+  return MODES.includes(declared) ? declared : 'system';
+}
+
 function storedMode() {
   try {
     const mode = localStorage.getItem(STORAGE_KEY);
-    return MODES.includes(mode) ? mode : 'system';
+    if (MODES.includes(mode)) return mode;
   } catch {
-    return 'system';
+    return publicationDefault();
   }
+  return publicationDefault();
 }
 
 function applyMode(mode) {

package/payload/src/assets/theme.css

@@ -1,57 +1,181 @@
+/*
+ * A publication should read like a well-set page, not like a product.
+ *
+ * The chrome is quiet, the type carries the hierarchy, and depth comes from surface and space
+ * rather than from an outline around everything. Every value here is a token so that the ten
+ * `design:` choices in site.config.yml can move the whole page by moving a handful of variables,
+ * instead of each component inventing its own spacing and its own grey.
+ */
 :root {
   color-scheme: light dark;
-  --gala-color-background: light-dark(#fff, #111);
-  --gala-color-text: light-dark(#181818, #f5f5f5);
-  --gala-space-page: clamp(1rem, 4vw, 4rem);
-  --gala-radius-control: 0.5rem;
-  --gala-color-surface: light-dark(#f4f4f4, #1d1d1d);
-  --gala-color-accent: light-dark(#174ea6, #8ab4f8);
-  --gala-color-border: light-dark(#6b6b6b, #aaa);
-  --gala-font-body: system-ui, sans-serif;
-  --gala-content-width: 70rem;
+
+  /* Neutrals carry a slight warmth. A pure grey reads as unconsidered; these were picked. */
+  --gala-color-background: light-dark(#fdfcfb, #131211);
+  --gala-color-surface: light-dark(#f6f4f1, #1c1a18);
+  --gala-color-raised: light-dark(#fffffe, #24211f);
+  --gala-color-text: light-dark(#1a1817, #f2efec);
+  --gala-color-muted: light-dark(#6b645e, #a8a099);
+  --gala-color-border: light-dark(#968e86, #6b645e);
+  --gala-color-hairline: light-dark(#e8e3dd, #2a2724);
+  --gala-color-border-strong: light-dark(#c9c2ba, #46413d);
+  --gala-color-accent: light-dark(#8a4b2a, #e8a87c);
+
+  /* Type. One scale, used everywhere, fluid between a phone and a desk. */
+  --gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --gala-font-display: var(--gala-font-body);
+  --gala-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
+  --gala-text-xs: 0.78rem;
+  --gala-text-sm: 0.875rem;
+  --gala-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
+  --gala-text-lg: clamp(1.15rem, 1.09rem + 0.3vw, 1.3rem);
+  --gala-text-xl: clamp(1.4rem, 1.28rem + 0.6vw, 1.75rem);
+  --gala-text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
+  --gala-text-3xl: clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem);
+  --gala-leading-tight: 1.15;
+  --gala-leading-body: 1.65;
+  --gala-tracking-tight: -0.018em;
+  --gala-tracking-wide: 0.08em;
+  --gala-weight-display: 640;
+
+  /* Space, radius, depth, motion. */
+  --gala-step: 1rem;
+  --gala-space-2xs: calc(var(--gala-step) * 0.25);
+  --gala-space-xs: calc(var(--gala-step) * 0.5);
+  --gala-space-sm: calc(var(--gala-step) * 0.75);
+  --gala-space-md: var(--gala-step);
+  --gala-space-lg: calc(var(--gala-step) * 1.75);
+  --gala-space-xl: calc(var(--gala-step) * 3);
+  --gala-space-page: clamp(1.25rem, 5vw, 4.5rem);
+  --gala-radius-control: 0.625rem;
+  --gala-radius-surface: 1rem;
+  --gala-shadow-low: 0 1px 2px light-dark(rgb(26 24 23 / 6%), rgb(0 0 0 / 40%));
+  --gala-shadow-high:
+    0 1px 2px light-dark(rgb(26 24 23 / 5%), rgb(0 0 0 / 35%)),
+    0 12px 28px -12px light-dark(rgb(26 24 23 / 18%), rgb(0 0 0 / 60%));
+  --gala-motion-fast: 120ms;
+  --gala-motion-base: 220ms;
+  --gala-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  --gala-content-width: 72rem;
+  --gala-measure: 68ch;
   --gala-widget-min-block-size: 8rem;
 }
 
+/* An explicit choice must beat the operating system in both directions, so every colour is
+   restated rather than left to `light-dark()`. */
 :root[data-mode='light'] {
   color-scheme: light;
-  --gala-color-background: #fff;
-  --gala-color-text: #181818;
-  --gala-color-surface: #f4f4f4;
-  --gala-color-accent: #174ea6;
-  --gala-color-border: #6b6b6b;
+  --gala-color-background: #fdfcfb;
+  --gala-color-surface: #f6f4f1;
+  --gala-color-raised: #fffffe;
+  --gala-color-text: #1a1817;
+  --gala-color-muted: #6b645e;
+  --gala-color-border: #968e86;
+  --gala-color-hairline: #e8e3dd;
+  --gala-color-border-strong: #c9c2ba;
+  --gala-color-accent: #8a4b2a;
 }
-
 :root[data-mode='dark'] {
   color-scheme: dark;
-  --gala-color-background: #111;
-  --gala-color-text: #f5f5f5;
-  --gala-color-surface: #1d1d1d;
-  --gala-color-accent: #8ab4f8;
-  --gala-color-border: #aaa;
+  --gala-color-background: #131211;
+  --gala-color-surface: #1c1a18;
+  --gala-color-raised: #24211f;
+  --gala-color-text: #f2efec;
+  --gala-color-muted: #a8a099;
+  --gala-color-border: #6b645e;
+  --gala-color-hairline: #2a2724;
+  --gala-color-border-strong: #46413d;
+  --gala-color-accent: #e8a87c;
 }
 
+/* ---------------------------------------------------------------- palettes */
 :root[data-palette='ocean'] {
-  --gala-color-background: light-dark(#f7fbff, #071b2d);
-  --gala-color-text: light-dark(#102a43, #e8f4ff);
-  --gala-color-surface: light-dark(#d9eaf7, #102f49);
-  --gala-color-accent: light-dark(#005ea8, #78c8ff);
-  --gala-color-border: light-dark(#526d82, #8aa8bf);
+  --gala-color-background: light-dark(#f8fbfd, #0b1a24);
+  --gala-color-surface: light-dark(#eef4f9, #12252f);
+  --gala-color-raised: light-dark(#ffffff, #172d39);
+  --gala-color-text: light-dark(#12242f, #eaf3f8);
+  --gala-color-muted: light-dark(#5a6f7d, #98aebb);
+  --gala-color-border: light-dark(#7d8d99, #5f7d8c);
+  --gala-color-hairline: light-dark(#dde7ee, #1d3644);
+  --gala-color-border-strong: light-dark(#bdccd7, #33505f);
+  --gala-color-accent: light-dark(#0f5f7a, #7fd0e8);
 }
-
 :root[data-palette='ocean'][data-mode='light'] {
-  --gala-color-background: #f7fbff;
-  --gala-color-text: #102a43;
-  --gala-color-surface: #d9eaf7;
-  --gala-color-accent: #005ea8;
-  --gala-color-border: #526d82;
+  color-scheme: light;
+  --gala-color-background: #f8fbfd;
+  --gala-color-surface: #eef4f9;
+  --gala-color-raised: #ffffff;
+  --gala-color-text: #12242f;
+  --gala-color-muted: #5a6f7d;
+  --gala-color-border: #7d8d99;
+  --gala-color-hairline: #dde7ee;
+  --gala-color-border-strong: #bdccd7;
+  --gala-color-accent: #0f5f7a;
 }
-
 :root[data-palette='ocean'][data-mode='dark'] {
-  --gala-color-background: #071b2d;
-  --gala-color-text: #e8f4ff;
-  --gala-color-surface: #102f49;
-  --gala-color-accent: #78c8ff;
-  --gala-color-border: #8aa8bf;
+  color-scheme: dark;
+  --gala-color-background: #0b1a24;
+  --gala-color-surface: #12252f;
+  --gala-color-raised: #172d39;
+  --gala-color-text: #eaf3f8;
+  --gala-color-muted: #98aebb;
+  --gala-color-border: #5f7d8c;
+  --gala-color-hairline: #1d3644;
+  --gala-color-border-strong: #33505f;
+  --gala-color-accent: #7fd0e8;
+}
+
+/* ---------------------------------------------------------------- typography
+   System stacks rather than a downloaded face: a publication must build and render with no call
+   to anyone, and a webfont is bytes on every reader's first paint. These are the good faces the
+   reader's machine already has. */
+:root[data-typography='editorial'] {
+  --gala-font-body: ui-serif, "Iowan Old Style", Charter, "Source Serif 4", Georgia, serif;
+  --gala-font-display: var(--gala-font-body);
+  --gala-weight-display: 600;
+}
+:root[data-typography='humanist'] {
+  --gala-font-body: Optima, Candara, "Gill Sans", "Trebuchet MS", sans-serif;
+  --gala-font-display: var(--gala-font-body);
+}
+:root[data-typography='mono'] {
+  --gala-font-display: var(--gala-font-mono);
+  --gala-weight-display: 560;
+  --gala-tracking-tight: -0.005em;
+}
+
+/* ---------------------------------------------------------------- density */
+:root[data-density='compact'], :root[data-spacing='compact'] {
+  --gala-step: 0.8rem;
+  --gala-leading-body: 1.5;
+}
+:root[data-density='spacious'], :root[data-spacing='spacious'] {
+  --gala-step: 1.25rem;
+  --gala-leading-body: 1.75;
+}
+
+/* ---------------------------------------------------------------- radius */
+:root[data-radius='sharp'] { --gala-radius-control: 0; --gala-radius-surface: 0; }
+:root[data-radius='round'] { --gala-radius-control: 999px; --gala-radius-surface: 1.5rem; }
+
+/* ---------------------------------------------------------------- motion
+   `none` is honoured for everyone; a reader who asks the operating system for less motion is
+   honoured regardless of what the publication chose. */
+:root[data-motion='none'] { --gala-motion-fast: 0ms; --gala-motion-base: 0ms; }
+:root[data-motion='expressive'] { --gala-motion-base: 340ms; }
+@media (prefers-reduced-motion: reduce) {
+  :root { --gala-motion-fast: 0ms; --gala-motion-base: 0ms; }
+  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
+}
+
+/* ---------------------------------------------------------------- surfaces
+   `quiet` sits on the page, `outlined` draws its edge, `raised` lifts. One variable decides,
+   so every card, dialog and chip agrees. */
+:root { --gala-surface-border: var(--gala-color-hairline); --gala-surface-shadow: var(--gala-shadow-low); }
+:root[data-component-style='outlined'] { --gala-surface-border: var(--gala-color-border-strong); }
+:root[data-component-style='raised'] {
+  --gala-surface-border: transparent;
+  --gala-surface-shadow: var(--gala-shadow-high);
 }
 
 :root[data-layout='portfolio'] { --gala-content-width: 82rem; }
@@ -62,15 +186,78 @@ body {
   color: var(--gala-color-text);
   background: var(--gala-color-background);
   font-family: var(--gala-font-body);
+  font-size: var(--gala-text-base);
+  line-height: var(--gala-leading-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Headings carry the hierarchy, so they get the display face, a tighter measure and tighter
+   tracking — large type set at body tracking is the single clearest sign of an unconsidered page. */
+:where(h1, h2, h3, h4) {
+  font-family: var(--gala-font-display);
+  font-weight: var(--gala-weight-display);
+  line-height: var(--gala-leading-tight);
+  letter-spacing: var(--gala-tracking-tight);
+  text-wrap: balance;
+  margin-block: 0 var(--gala-space-sm);
+}
+:where(h1) { font-size: var(--gala-text-3xl); }
+:where(h2) { font-size: var(--gala-text-2xl); }
+:where(h3) { font-size: var(--gala-text-xl); }
+:where(h4) { font-size: var(--gala-text-lg); }
+:where(p, ul, ol, blockquote) { margin-block: 0 var(--gala-space-md); }
+:where(p) { text-wrap: pretty; }
+
+blockquote {
+  margin-inline: 0;
+  padding-inline-start: var(--gala-space-md);
+  border-inline-start: 2px solid var(--gala-color-accent);
+  color: var(--gala-color-muted);
 }
 
+:where(code, kbd, samp) { font-family: var(--gala-font-mono); font-size: 0.9em; }
+:where(pre) {
+  padding: var(--gala-space-md);
+  overflow-x: auto;
+  background: var(--gala-color-surface);
+  border-radius: var(--gala-radius-control);
+}
+:where(hr) { border: 0; border-block-start: 1px solid var(--gala-color-hairline); margin-block: var(--gala-space-xl); }
+:where(table) { border-collapse: collapse; inline-size: 100%; }
+:where(th, td) { padding: var(--gala-space-xs) var(--gala-space-sm); border-block-end: 1px solid var(--gala-color-hairline); text-align: start; }
+
+/* An uppercase label needs air between the letters or it sets as a solid block. */
+.gala-eyebrow, .gala-comment__meta time, .gala-comment__edited {
+  font-size: var(--gala-text-xs);
+  letter-spacing: var(--gala-tracking-wide);
+  text-transform: uppercase;
+  color: var(--gala-color-muted);
+}
+
+/*
+ * Stays with the reader. It used to scroll away, so on a long post the only way back to the site
+ * — or to sign in — was to scroll to the top. The negative inline margin lets the bar's background
+ * reach the edge of the viewport while its contents stay on the page's own measure.
+ */
 .gala-site-header {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 10;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: var(--gala-space-md);
   max-inline-size: var(--gala-content-width);
   margin-inline: auto;
-  margin-block-end: 1.5rem;
+  margin-block-end: var(--gala-space-xl);
+  padding-block: var(--gala-space-xs);
+  background: color-mix(in srgb, var(--gala-color-background) 88%, transparent);
+  backdrop-filter: blur(8px);
+  border-block-end: 1px solid var(--gala-color-hairline);
+}
+@supports not (backdrop-filter: blur(8px)) {
+  .gala-site-header { background: var(--gala-color-background); }
 }
 
 .gala-site-header__actions { display: flex; gap: 0.5rem; }
@@ -85,7 +272,12 @@ body {
   border: 0.125rem solid transparent;
   border-radius: 50%;
 }
-.gala-icon-control:hover { background: var(--gala-color-surface); }
+.gala-icon-control {
+  transition: background var(--gala-motion-fast) var(--gala-ease),
+              color var(--gala-motion-fast) var(--gala-ease);
+  color: var(--gala-color-muted);
+}
+.gala-icon-control:hover { background: var(--gala-color-surface); color: var(--gala-color-text); }
 .gala-icon-control:focus-visible { outline: 0.1875rem solid currentcolor; outline-offset: 0.1875rem; }
 /* Stroked, not filled: the icons are drawn on one 24px grid at a single weight, so they read as
    a set rather than as six unrelated silhouettes. */
@@ -98,12 +290,21 @@ body {
   padding: 1.5rem;
   color: var(--gala-color-text);
   background: var(--gala-color-background);
-  border: 0.125rem solid var(--gala-color-border);
-  border-radius: var(--gala-radius-control);
+  border: 1px solid var(--gala-surface-border);
+  border-radius: var(--gala-radius-surface);
+  box-shadow: var(--gala-shadow-high);
 }
 .gala-dialog::backdrop { background: rgb(0 0 0 / 65%); }
-.gala-dialog__close { float: inline-end; }
-.gala-account-dialog iframe { inline-size: 100%; min-block-size: 22rem; border: 0; }
+/* Sized to what it holds. 22rem was a box for a name and one button, and it showed. */
+.gala-account-dialog { inline-size: min(26rem, calc(100% - 2rem)); }
+.gala-account-dialog iframe {
+  display: block;
+  inline-size: 100%;
+  min-block-size: 7rem;
+  border: 0;
+}
+/* The close control belongs on the same line as the title, not floated above it. */
+.gala-dialog__close { float: inline-end; margin-inline-start: var(--gala-space-md); }
 
 main,
 .gala-page-footer {
@@ -115,14 +316,19 @@ a { color: var(--gala-color-accent); }
 
 button {
   min-block-size: 2.75rem;
-  padding-inline: 1rem;
+  padding-inline: var(--gala-space-md);
   color: inherit;
-  background: transparent;
-  border: 0.125rem solid currentcolor;
+  background: var(--gala-color-surface);
+  border: 1px solid var(--gala-color-border);
   border-radius: var(--gala-radius-control);
   font: inherit;
+  font-size: var(--gala-text-sm);
   cursor: pointer;
+  transition: background var(--gala-motion-fast) var(--gala-ease),
+              border-color var(--gala-motion-fast) var(--gala-ease);
 }
+button:hover { border-color: var(--gala-color-border-strong); background: var(--gala-color-raised); }
+button[disabled] { opacity: 0.55; cursor: not-allowed; }
 
 button:focus-visible {
   outline: 0.1875rem solid currentcolor;
@@ -135,8 +341,9 @@ button:focus-visible {
   display: inline-flex;
   align-items: center;
   min-block-size: 2.75rem;
-  border: 0.125rem solid var(--gala-color-border);
+  border: 1px solid var(--gala-color-border);
   border-radius: var(--gala-radius-control);
+  font-size: var(--gala-text-sm);
 }
 
 .gala-badge,
@@ -146,7 +353,7 @@ button:focus-visible {
 .gala-section-heading > :where(h2, p) { margin-block: 0 0.5rem; }
 .gala-hero { display: grid; gap: 1.5rem; align-items: center; }
 .gala-hero__image { inline-size: 100%; block-size: auto; border-radius: var(--gala-radius-control); }
-.gala-page-content { max-inline-size: 70ch; }
+.gala-page-content { max-inline-size: var(--gala-measure); }
 .gala-page-content :where(img, video) { max-inline-size: 100%; block-size: auto; }
 .gala-author-profile { display: flex; gap: 1rem; padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
 .gala-author-profile img { border-radius: 50%; object-fit: cover; }
@@ -156,7 +363,25 @@ button:focus-visible {
 .gala-card-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; padding: 0; list-style: none; }
 [data-layout='portfolio'] .gala-card-index { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; }
 [data-layout='portfolio'] .gala-card { padding: clamp(1.25rem, 3vw, 2rem); }
-.gala-card { block-size: 100%; box-sizing: border-box; padding: 1.25rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
+/* The surfaces are where `componentStyle` becomes visible: quiet sits on the page, outlined draws
+   its edge, raised lifts. One variable decides, so cards and dialogs cannot drift apart. */
+.gala-card {
+  block-size: 100%;
+  box-sizing: border-box;
+  padding: var(--gala-space-lg);
+  background: var(--gala-color-surface);
+  border: 1px solid var(--gala-surface-border);
+  border-radius: var(--gala-radius-surface);
+  box-shadow: var(--gala-surface-shadow);
+}
+[data-component-style='raised'] .gala-card { background: var(--gala-color-raised); }
+/* The one place the page moves of its own accord, and so the one place `motion` is legible:
+   `subtle` is a short settle, `expressive` a longer one, `none` no movement at all. */
+.gala-card { transition: transform var(--gala-motion-base) var(--gala-ease),
+                         box-shadow var(--gala-motion-base) var(--gala-ease); }
+.gala-card-index li:hover .gala-card { transform: translateY(-2px); box-shadow: var(--gala-shadow-high); }
+[data-motion='none'] .gala-card { transition: none; }
+[data-motion='none'] .gala-card-index li:hover .gala-card { transform: none; }
 .gala-stats-graph { min-block-size: var(--gala-widget-min-block-size); margin-inline: 0; }
 .gala-stats-graph svg { inline-size: 100%; block-size: 8rem; }
 .gala-stats-graph polyline { fill: none; stroke: var(--gala-color-accent); stroke-width: 2; }
@@ -171,12 +396,7 @@ button:focus-visible {
 .gala-search-results h2 { margin-block-start: 0; }
 .gala-toc { padding: 1rem; background: var(--gala-color-surface); }
 .gala-share__fallback { inline-size: min(100%, 36rem); }
-.gala-engagement { min-block-size: var(--gala-widget-min-block-size); }
-.gala-engagement dl { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
-.gala-engagement dl > div { display: grid; gap: 0.25rem; }
-.gala-engagement dd { margin: 0; font-size: 1.25rem; font-weight: 700; }
 .gala-engagement__placeholder { display: grid; min-block-size: var(--gala-widget-min-block-size); align-content: center; margin: 0; }
-.gala-engagement-profile { margin-block: 1.5rem; padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
 .gala-engagement-profile > * { margin-block: 0 0.5rem; }
 .gala-comments { display: grid; gap: 1rem; padding-inline-start: 1.5rem; }
 .gala-comments li { padding: 1rem; background: var(--gala-color-surface); border-radius: var(--gala-radius-control); }
@@ -186,8 +406,6 @@ button:focus-visible {
    reassures rather than sells. Hidden for anyone who opened the account dialog deliberately. */
 .gala-account-dialog__invite { margin-block: 0 1rem; max-inline-size: 34rem; }
 .gala-account-dialog__invite[hidden] { display: none; }
-.gala-reaction-actions,
-.gala-comment-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
 .gala-engagement-actions form,
 [data-comment-editor] { display: grid; gap: 0.5rem; max-inline-size: 42rem; }
 .gala-engagement-actions label { display: grid; gap: 0.5rem; }
@@ -249,3 +467,122 @@ button:focus-visible {
 @media (prefers-reduced-motion: no-preference) {
   @view-transition { navigation: auto; }
 }
+
+/* ---------------------------------------------------------------- the conversation
+   A thread is a hierarchy, and the indent is the only thing that says so. It is drawn with a
+   rule rather than padding alone, so five levels deep still reads as five levels and not as an
+   accident of margin. */
+.gala-comments-island { margin-block-start: var(--gala-space-xl); }
+.gala-comments__heading {
+  font-size: var(--gala-text-lg);
+  margin-block-end: var(--gala-space-md);
+}
+.gala-comments, .gala-comment-replies { list-style: none; margin: 0; padding: 0; }
+.gala-comment-replies {
+  margin-block-start: var(--gala-space-sm);
+  margin-inline-start: var(--gala-space-xs);
+  padding-inline-start: var(--gala-space-md);
+  border-inline-start: 1px solid var(--gala-color-hairline);
+}
+.gala-comment { padding-block: var(--gala-space-sm); }
+.gala-comment + .gala-comment { border-block-start: 1px solid var(--gala-color-hairline); }
+.gala-comment-replies .gala-comment + .gala-comment { border-block-start: 0; }
+.gala-comment__meta {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gala-space-xs);
+  margin-block-end: var(--gala-space-2xs);
+  font-size: var(--gala-text-sm);
+}
+.gala-comment__meta strong { font-weight: 600; }
+.gala-comment__pending { font-size: var(--gala-text-xs); color: var(--gala-color-muted); }
+.gala-comment__body { margin-block: 0; overflow-wrap: anywhere; }
+
+/* The controls stay out of the way until the comment is worth acting on. */
+.gala-comment-actions {
+  display: flex;
+  gap: var(--gala-space-2xs);
+  margin-block-start: var(--gala-space-2xs);
+  opacity: 0.72;
+  transition: opacity var(--gala-motion-fast) var(--gala-ease);
+}
+.gala-comment:hover > .gala-comment-actions,
+.gala-comment:focus-within > .gala-comment-actions { opacity: 1; }
+.gala-comment-actions button {
+  min-block-size: 2rem;
+  padding-inline: var(--gala-space-xs);
+  font-size: var(--gala-text-xs);
+  background: transparent;
+  border-color: transparent;
+  color: var(--gala-color-muted);
+}
+.gala-comment-actions button:hover { color: var(--gala-color-text); background: var(--gala-color-surface); }
+
+.gala-comment__form { display: grid; gap: var(--gala-space-xs); margin-block: var(--gala-space-sm); }
+.gala-comment__form textarea {
+  inline-size: 100%;
+  box-sizing: border-box;
+  padding: var(--gala-space-sm);
+  color: inherit;
+  background: var(--gala-color-raised);
+  border: 1px solid var(--gala-color-border);
+  border-radius: var(--gala-radius-control);
+  font: inherit;
+  font-size: var(--gala-text-sm);
+  line-height: var(--gala-leading-body);
+  resize: vertical;
+}
+.gala-comment__form textarea:focus-visible { outline: 2px solid var(--gala-color-accent); outline-offset: 1px; }
+.gala-comment__controls { display: flex; gap: var(--gala-space-xs); }
+.gala-comments__status, .gala-comments__empty, .gala-comments__prompt {
+  color: var(--gala-color-muted);
+  font-size: var(--gala-text-sm);
+}
+.gala-comments__more { margin-block-start: var(--gala-space-md); }
+
+/* ---------------------------------------------------------------- where the article ends
+   The writing and the conversation about it are different things, and the page has to say so.
+   A footnote used to run straight into the author card with nothing between them. */
+.gala-engagement {
+  /* Space is reserved before the counts arrive, so the page does not jump under the reader. */
+  min-block-size: var(--gala-widget-min-block-size);
+  max-inline-size: var(--gala-content-width);
+  margin-block-start: var(--gala-space-xl);
+  padding-block-start: var(--gala-space-lg);
+  border-block-start: 1px solid var(--gala-color-border);
+}
+.gala-engagement-profile {
+  display: flex;
+  align-items: baseline;
+  gap: var(--gala-space-sm);
+  padding: 0;
+  background: none;
+}
+.gala-engagement-profile h2 { font-size: var(--gala-text-lg); margin: 0; }
+.gala-engagement-profile p { margin: 0; color: var(--gala-color-muted); font-size: var(--gala-text-sm); }
+
+/* Counts read as data, not as three stacked paragraphs. */
+.gala-engagement dl {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gala-space-lg);
+  margin-block: var(--gala-space-md);
+}
+.gala-engagement dl > div { display: flex; flex-direction: column-reverse; gap: 0.1rem; }
+.gala-engagement dt {
+  font-size: var(--gala-text-xs);
+  letter-spacing: var(--gala-tracking-wide);
+  text-transform: uppercase;
+  color: var(--gala-color-muted);
+}
+.gala-engagement dd {
+  margin: 0;
+  font-size: var(--gala-text-lg);
+  font-variant-numeric: tabular-nums;
+}
+
+.gala-reaction-actions { display: flex; flex-wrap: wrap; gap: var(--gala-space-2xs); }
+.gala-comment-actions { display: flex; flex-wrap: wrap; gap: var(--gala-space-2xs); }
+.gala-engagement-actions { display: grid; gap: var(--gala-space-sm); justify-items: start; }
+.gala-engagement-actions > [data-follow-article] { inline-size: auto; }
+.gala-share { margin-block-start: var(--gala-space-lg); }

package/payload/src/settings.njk

@@ -1,19 +0,0 @@
----
-layout: layouts/base.njk
-title: Settings
-permalink: /settings/index.html
----
-<h1>Reader settings</h1>
-<section aria-labelledby="theme-setting">
-  <h2 id="theme-setting">Theme</h2>
-  <button type="button" data-theme-mode-toggle aria-label="Color mode: system. Activate for light.">Theme: system</button>
-</section>
-<section aria-labelledby="language-setting">
-  <h2 id="language-setting">Language preference</h2>
-  <p>Your preference highlights matching choices. The language in the page URL always controls the content.</p>
-  <label>Preferred language
-    <select data-language-preference>
-      {% for language in languages %}<option value="{{ language | escape }}">{{ language }}</option>{% endfor %}
-    </select>
-  </label>
-</section>