@rathnasgala/theme 0.0.18 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rathnasgala/theme",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "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.18",
+    "version": "0.0.20",
     "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": "da7d2dffab62c7346c9930494b85fc6ea735d4f50565bbd0454a04393f8cad96",
+    "lib/site-config.js": "3ed45daef0b7f79d94bf0c648c4fe7d8bf517534e4645a4b43d952dfc434ddc4",
     "package-lock.json": "c97a6a2f794aef083a39a8d2628eccc4a3c484e1c6225899b77ec1fb7c466d9e",
     "package.json": "4c60bea06f39aec755ac68caf8d8841c1d59d0f6121fad7f4396231ce14712dc",
     "src/404.njk": "be0d44370ac5402156aaf3d32ea581057bc61ec94c1a5f92bb809733af7a8a20",
@@ -29,9 +33,9 @@
     "src/_data/engagementSnapshot.js": "9217dacebfaf008f7a0ad67ff4e8d1fa8fba609a9dc7e3430c78c5b32024da0e",
     "src/_data/feedLinks.js": "06c93352ebd888acb431a1c9a8be6ecff757895468e9f2d336761038751c2d5e",
     "src/_data/languages.js": "1358748f7fa2f74406d3295a030827d6229a53e94da72cf712e719d7a356aeac",
-    "src/_data/site.js": "d9c001f4cc12a34027dd92303530b11b5402d47613459bb997e22c4bcbea326d",
+    "src/_data/site.js": "6f9b754876ab7cfa93f02a38be2962edce8245423c354426a1465513caec7911",
     "src/_includes/components/ui.njk": "23eb647d8658868449ec6bb809e965a85302124a97639f94d5d28af72df56e4c",
-    "src/_includes/layouts/base.njk": "6914da799eb31fea3fc230ab196252129ccca90f27ccb08bbcee81741a91ced4",
+    "src/_includes/layouts/base.njk": "638457f6c10f3ba866e8c70715678298096a668568e99456bef4167ebf1111e7",
     "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/interactions.js": "dd4e343505e528d89596ca67db679b52c989e022f93399193e4377db01fc8a08",
+    "src/assets/favicon.svg": "8615e3d96fe37ae9ed14afb1886e7c0e690eef5b10be66ca91cccfd085a74bb6",
+    "src/assets/interactions.js": "4b65dcfcc23682616b15071d746da053bcc3a6bc5df36e11dc5698dd3348f314",
     "src/assets/preferences.js": "789127bee013ed6a1bbf8cefd7b9109291c16220e7a6e09314e3c93c54731d1d",
     "src/assets/search.js": "df425f0239277792ad39f2138bc89cb66cc4ecda5ed59042d46abc2f05372088",
     "src/assets/theme-mode.js": "944b29db11a577961a60ddcfa52f07ef2411f3f3631bea85bd79be16428c08be",
-    "src/assets/theme.css": "2a2367f2c875121cc95bc789a0d5889960813e660ca7722b328b39b4ff5068a8",
+    "src/assets/theme.css": "300f6c2ffd7e63a948cfdb46b2d0f4abdbce5f5c4da7ee2cca5633d9795277c4",
     "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

@@ -13,13 +13,9 @@ const BUDGET_KEYS = Object.freeze([
  */
 const DESIGN_VALUES = Object.freeze({
   layout: Object.freeze(['article-first', 'portfolio']),
-  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'])
+  palette: Object.freeze(['default', 'ocean', 'forest', 'plum']),
+  theme: Object.freeze(['editorial', 'modern', 'technical']),
+  colorMode: Object.freeze(['system', 'light', 'dark'])
 });
 const CONTACT_KEYS = Object.freeze([
   'enabled', 'websiteEnabled', 'phoneEnabled'
@@ -33,7 +29,14 @@ const CONTACT_KEYS = Object.freeze([
  */
 const REQUIRED_DESIGN = Object.freeze(['layout', 'palette']);
 
+/** A free colour, not a menu — but still a colour. */
+const ACCENT = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+
 function validateImplementedDesign(config) {
+  const accent = config?.design?.accent;
+  if (accent !== undefined && !(typeof accent === 'string' && ACCENT.test(accent.trim()))) {
+    throw new TypeError(`Unsupported design.accent: ${accent}`);
+  }
   if (config?.design == null) return;
   for (const [field, allowed] of Object.entries(DESIGN_VALUES)) {
     const value = config.design[field];

package/payload/src/_data/site.js

@@ -1,5 +1,16 @@
+import { accentPair } from '../../lib/accent.js';
 import { loadSiteConfiguration } from '../../lib/site-config.js';
 
 export default async function siteConfiguration() {
-  return loadSiteConfiguration();
+  const configuration = await loadSiteConfiguration();
+  /*
+   * The writer picks one colour; the page needs two, because the same colour cannot be readable on
+   * both a light and a dark ground. Derived here rather than in CSS so the contrast is exact — a
+   * `color-mix()` approximation can land under 4.5:1 and nobody would know until a reader could
+   * not read a link.
+   *
+   * An absent or unparseable value leaves this undefined, and the look's own accent stands.
+   */
+  const accent = accentPair(configuration?.design?.accent);
+  return accent ? { ...configuration, accent } : configuration;
 }

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-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') }}">
+<html lang="{{ post.language or site.site.defaultLanguage }}" data-theme="{{ site.design.theme | default('modern') }}" data-layout="{{ site.design.layout }}" data-palette="{{ site.design.palette | default('default') }}" data-mode="{{ site.design.colorMode | default('system') }}"{% if site.accent %} style="--gala-accent-light: {{ site.accent.light }}; --gala-accent-dark: {{ site.accent.dark }}"{% endif %}>
   <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/interactions.js

@@ -392,6 +392,16 @@ if (sessionFrame) {
       else pending.reject(new Error(event.data.error?.code || 'ENGAGEMENT_WRITE_FAILED'));
       return;
     }
+    /* The frame is cross-origin, so its content height is not readable from here — it reports
+       its own, and the box is sized to it. Without this the account panel scrolled inside a fixed
+       box, clipping the first line of its own text. */
+    if (event.data?.type === 'gala-session-height') {
+      const height = Number(event.data.height);
+      if (Number.isFinite(height) && height > 0 && height < 2000) {
+        sessionFrame.style.height = `${Math.ceil(height)}px`;
+      }
+      return;
+    }
     if (event.data?.type !== 'gala-session') return;
     sessionUser = event.data.user && typeof event.data.user.id === 'string' ? event.data.user : null;
     const control = document.querySelector('[data-user-control]');

package/payload/src/assets/theme.css

@@ -18,7 +18,9 @@
   --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);
+  --gala-color-accent: light-dark(
+    var(--gala-accent-light, #8a4b2a),
+    var(--gala-accent-dark, #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;
@@ -48,7 +50,6 @@
   --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%));
@@ -73,7 +74,7 @@
   --gala-color-border: #968e86;
   --gala-color-hairline: #e8e3dd;
   --gala-color-border-strong: #c9c2ba;
-  --gala-color-accent: #8a4b2a;
+  --gala-color-accent: var(--gala-accent-light, #8a4b2a);
 }
 :root[data-mode='dark'] {
   color-scheme: dark;
@@ -85,7 +86,7 @@
   --gala-color-border: #6b645e;
   --gala-color-hairline: #2a2724;
   --gala-color-border-strong: #46413d;
-  --gala-color-accent: #e8a87c;
+  --gala-color-accent: var(--gala-accent-dark, #e8a87c);
 }
 
 /* ---------------------------------------------------------------- palettes */
@@ -110,7 +111,7 @@
   --gala-color-border: #7d8d99;
   --gala-color-hairline: #dde7ee;
   --gala-color-border-strong: #bdccd7;
-  --gala-color-accent: #0f5f7a;
+  --gala-color-accent: var(--gala-accent-light, #0f5f7a);
 }
 :root[data-palette='ocean'][data-mode='dark'] {
   color-scheme: dark;
@@ -122,62 +123,150 @@
   --gala-color-border: #5f7d8c;
   --gala-color-hairline: #1d3644;
   --gala-color-border-strong: #33505f;
-  --gala-color-accent: #7fd0e8;
+  --gala-color-accent: var(--gala-accent-dark, #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'] {
+
+/* Two more, because colour is the choice a writer actually wants to make — and the one that is
+   safe to offer, since a palette only swaps values every rule already reads and each is checked
+   for contrast in both modes. */
+:root[data-palette='forest'] {
+  --gala-color-background: light-dark(#fbfcfa, #101410);
+  --gala-color-surface: light-dark(#f0f4ee, #182018);
+  --gala-color-raised: light-dark(#ffffff, #1f271f);
+  --gala-color-text: light-dark(#18201a, #eef3ec);
+  --gala-color-muted: light-dark(#5b665d, #9aa89b);
+  --gala-color-border: light-dark(#849084, #5e685f);
+  --gala-color-hairline: light-dark(#e2e9df, #232b23);
+  --gala-color-border-strong: light-dark(#5b665d, #7d897e);
+  --gala-color-accent: light-dark(#2f6b3f, #8fd3a1);
+}
+:root[data-palette='forest'][data-mode='light'] {
+  color-scheme: light;
+  --gala-color-background: #fbfcfa;
+  --gala-color-surface: #f0f4ee;
+  --gala-color-raised: #ffffff;
+  --gala-color-text: #18201a;
+  --gala-color-muted: #5b665d;
+  --gala-color-border: #849084;
+  --gala-color-hairline: #e2e9df;
+  --gala-color-border-strong: #5b665d;
+  --gala-color-accent: var(--gala-accent-light, #2f6b3f);
+}
+:root[data-palette='forest'][data-mode='dark'] {
+  color-scheme: dark;
+  --gala-color-background: #101410;
+  --gala-color-surface: #182018;
+  --gala-color-raised: #1f271f;
+  --gala-color-text: #eef3ec;
+  --gala-color-muted: #9aa89b;
+  --gala-color-border: #5e685f;
+  --gala-color-hairline: #232b23;
+  --gala-color-border-strong: #7d897e;
+  --gala-color-accent: var(--gala-accent-dark, #8fd3a1);
+}
+:root[data-palette='plum'] {
+  --gala-color-background: light-dark(#fdfbfd, #141016);
+  --gala-color-surface: light-dark(#f5eff5, #1d1720);
+  --gala-color-raised: light-dark(#ffffff, #241d28);
+  --gala-color-text: light-dark(#1f1820, #f2ecf3);
+  --gala-color-muted: light-dark(#665c69, #a99dac);
+  --gala-color-border: light-dark(#948a95, #6b606d);
+  --gala-color-hairline: light-dark(#ebe2ec, #281f2b);
+  --gala-color-border-strong: light-dark(#665c69, #8b7f8d);
+  --gala-color-accent: light-dark(#7a3d76, #dda6d8);
+}
+:root[data-palette='plum'][data-mode='light'] {
+  color-scheme: light;
+  --gala-color-background: #fdfbfd;
+  --gala-color-surface: #f5eff5;
+  --gala-color-raised: #ffffff;
+  --gala-color-text: #1f1820;
+  --gala-color-muted: #665c69;
+  --gala-color-border: #948a95;
+  --gala-color-hairline: #ebe2ec;
+  --gala-color-border-strong: #665c69;
+  --gala-color-accent: var(--gala-accent-light, #7a3d76);
+}
+:root[data-palette='plum'][data-mode='dark'] {
+  color-scheme: dark;
+  --gala-color-background: #141016;
+  --gala-color-surface: #1d1720;
+  --gala-color-raised: #241d28;
+  --gala-color-text: #f2ecf3;
+  --gala-color-muted: #a99dac;
+  --gala-color-border: #6b606d;
+  --gala-color-hairline: #281f2b;
+  --gala-color-border-strong: #8b7f8d;
+  --gala-color-accent: var(--gala-accent-dark, #dda6d8);
+}
+
+/* ---------------------------------------------------------------- the looks
+ *
+ * Three, each designed whole.
+ *
+ * This replaced nine independent knobs — typeface, spacing, density, radius, motion, surfaces,
+ * palette — which a writer set one at a time, blind, and only saw combined after a deploy. Nine
+ * knobs is several hundred looks, and nobody had seen most of them: `mono` + `round` + `spacious`
+ * + `raised` produced monospace headings inside page-wide pills, and it was reachable in four
+ * clicks. A look is a set of decisions that agree with each other, so it is chosen as a set.
+ */
+
+/* Calm, serif, generous. For essays and long reading. */
+:root[data-theme='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;
+  --gala-step: 1.1rem;
+  --gala-leading-body: 1.7;
+  --gala-radius-control: 0.5rem;
+  --gala-radius-surface: 0.75rem;
+  --gala-measure: 66ch;
+  --gala-surface-border: var(--gala-color-hairline);
+  --gala-surface-shadow: none;
 }
 
-/* ---------------------------------------------------------------- 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;
+/* Crisp, sans, a little tighter. The default, and the safe one. */
+:root[data-theme='modern'] {
+  --gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --gala-font-display: var(--gala-font-body);
+  --gala-weight-display: 640;
+  --gala-step: 1rem;
+  --gala-leading-body: 1.65;
+  --gala-radius-control: 0.625rem;
+  --gala-radius-surface: 1rem;
+  --gala-measure: 70ch;
+  --gala-surface-border: transparent;
+  --gala-surface-shadow: var(--gala-shadow-high);
 }
 
-/* ---------------------------------------------------------------- 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; }
+/* For writing about code: mono for the furniture, never for the prose or the headings. */
+:root[data-theme='technical'] {
+  --gala-font-body: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --gala-font-display: var(--gala-font-body);
+  --gala-weight-display: 660;
+  --gala-tracking-tight: -0.022em;
+  --gala-step: 0.9rem;
+  --gala-leading-body: 1.6;
+  --gala-radius-control: 0.375rem;
+  --gala-radius-surface: 0.5rem;
+  --gala-measure: 74ch;
+  --gala-surface-border: var(--gala-color-border-strong);
+  --gala-surface-shadow: none;
+}
+/* Mono is an accent here — labels, counts, metadata — not a face to set a page in. */
+:root[data-theme='technical'] .gala-eyebrow,
+:root[data-theme='technical'] .gala-engagement dt,
+:root[data-theme='technical'] .gala-comment__meta time {
+  font-family: var(--gala-font-mono);
+}
+
+/* Motion is not a choice a writer has to make; it is a property of a considered page. */
 @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; }
 
 body {
@@ -235,13 +324,29 @@ blockquote {
   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; }
@@ -279,8 +384,21 @@ blockquote {
   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%;
+  /* Height is set from the frame's own report; this is only what it shows before that arrives. */
+  block-size: 7rem;
+  border: 0;
+  /* The frame owns its layout and reports its size, so it never needs to scroll inside the box. */
+  overflow: hidden;
+}
+/* The close control belongs on the same line as the title, not floated above it. */
+.gala-dialog { display: grid; gap: var(--gala-space-sm); }
+.gala-dialog__close { justify-self: end; margin: 0; }
+.gala-dialog > h2 { margin-block: 0; }
 
 main,
 .gala-page-footer {
@@ -350,14 +468,11 @@ button:focus-visible {
   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; }
@@ -372,23 +487,14 @@ 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); }
 .gala-engagement-actions { display: grid; gap: 1rem; margin-block-start: 1.5rem; }
 .gala-engagement-actions[hidden] { display: none; }
 /* Shown only when signing in interrupted something the reader had already decided to do, so it
    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; }
@@ -522,3 +628,49 @@ button:focus-visible {
   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-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>