feat(look): en akse mere — hvordan det læses, ikke hvor lyst det er

Fire udseender ved siden af de fem temaer: Verdande, Rolig (serif, mere luft),
Tæt (flere rækker, mindre luft) og Terminal (én bredde til det hele). De ganges ud
til tyve udseender fra otte små blokke CSS frem for at kræve en blok hver.

To akser, fordi det er to spørgsmål. Den, der vil have en serif om natten, skal
ikke opgive den mørke palet for at få den — og prøven holder netop det fast: at
vælge en skrift må ikke trække temaet med sig.

Udseendet sættes før første optegning, ligesom temaet. Ellers bliver siden sat op
i én skrift og derefter i en anden, og det er et synligt spring.

Det er også det ærlige svar på at ligne noget andet. Standarden er bevidst
genkendelig — det var det, der blev bedt om — men et program med ét muligt
udseende har lånt en form, det ikke kan give tilbage. Med udseender er ligheden en
indstilling blandt flere frem for det eneste, det kan være.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/app.css

@@ -444,3 +444,72 @@ button {
 	white-space: nowrap;
 	border: 0;
 }
+
+/* --- looks -----------------------------------------------------------------
+ *
+ * A second axis, beside the colour themes.
+ *
+ * A theme answers "how bright"; a look answers "what does it feel like to read".
+ * Typeface, how tight the rows sit, how round the corners are. They are separate
+ * because they are separate questions: somebody who wants a serif face at night
+ * should not have to give up the dark palette to get it.
+ *
+ * It is also the honest answer to looking like something else. The default is
+ * deliberately familiar — that is what was asked for — but a program with one
+ * possible appearance has borrowed a shape it cannot give back. With looks, the
+ * resemblance is one setting among several rather than the only thing it can be.
+ */
+
+/* Serif, roomier, softer. For reading and writing rather than scanning — which is
+   what a program with notes in it is half the time. */
+[data-look='rolig'] {
+	--font: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
+	--text-base: 1.0625rem;
+	--text-sm: 0.9375rem;
+	--radius: 10px;
+	--radius-lg: 16px;
+	--s2: 0.5625rem;
+	--s3: 0.875rem;
+	--s4: 1.25rem;
+}
+
+[data-look='rolig'] body {
+	line-height: 1.65;
+	letter-spacing: 0.006em;
+}
+
+/* Tighter. More rows on a screen, squarer corners, less air — for a long list
+   read at a glance rather than a page read a paragraph at a time. */
+[data-look='taet'] {
+	--text-base: 0.875rem;
+	--text-sm: 0.78125rem;
+	--text-xs: 0.6875rem;
+	--radius: 5px;
+	--radius-lg: 8px;
+	--radius-sm: 3px;
+	--s1: 0.1875rem;
+	--s2: 0.375rem;
+	--s3: 0.5625rem;
+	--s4: 0.75rem;
+}
+
+[data-look='taet'] body {
+	line-height: 1.4;
+}
+
+/* One face for everything, including the prose. Not a joke setting: a monospaced
+   list of tasks lines up in a way a proportional one never does, and some people
+   read code all day and want the same shapes here. */
+[data-look='terminal'] {
+	--font: var(--font-mono);
+	--text-base: 0.875rem;
+	--text-sm: 0.8125rem;
+	--radius: 3px;
+	--radius-lg: 4px;
+	--radius-sm: 2px;
+}
+
+[data-look='terminal'] body {
+	line-height: 1.5;
+	letter-spacing: -0.01em;
+}