diff --git a/.gitignore b/.gitignore
index 4f19501..4cf7aec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ _build
 _tmp
 .directory
 *~
+.sass-cache
diff --git a/Makefile b/Makefile
index 05d26f8..21957d6 100644
--- a/Makefile
+++ b/Makefile
@@ -19,16 +19,17 @@ OUTPUTPOSTS = \
   $(BUILDDIR)/index.html $(BUILDDIR)/rss.xml
 
 STYLE != find style -type f
-OUTPUTSTYLE = $(patsubst %,$(BUILDDIR)/%,$(STYLE))
+OUTPUTSTYLE = $(patsubst %.scss,%.css,$(patsubst %,$(BUILDDIR)/%,$(STYLE)))
 
-OUTPUT = $(OUTPUTPOSTS) $(OUTPUTSTYLE)
+SCRIPT != find script -type f
+OUTPUTSCRIPT = $(patsubst %.ts,%.js,$(patsubst %,$(BUILDDIR)/%,$(SCRIPT)))
+
+OUTPUT = $(OUTPUTPOSTS) $(OUTPUTSTYLE) $(OUTPUTSCRIPT)
 
 ALL_TAGS = $(TMPDIR)/all-tags
 POST_LISTS = $(TMPDIR)/post-lists
 COMBO_FILTER = $(TMPDIR)/combo-filter
-EXECS = \
-  $(LAANTAS_SCRIPT) \
-  $(ALL_TAGS) $(POST_LISTS) $(COMBO_FILTER)
+EXECS = $(ALL_TAGS) $(POST_LISTS) $(COMBO_FILTER)
 
 CABAL_FLAGS ?= -O
 
@@ -58,8 +59,17 @@ $(BUILDDIR)/%.html: $(TMPDIR)/%.md   $(POSTDEPS) ; $(call pandoc-simple,meta.htm
 $(BUILDDIR)/rss.xml: $(TMPDIR)/index.md $(POSTDEPS)
 	$(call pandoc,rss.xml,--metadata-file rss.yaml --write html)
 
-.PHONY: langfilter laantas-script
-langfilter laantas-script: %: ; cabal build $@
+$(BUILDDIR)/%.css: %.scss
+	@echo "[sass]" $@
+	mkdir -p $(dir $@)
+	sass --no-source-map -I style $< $@
+
+$(BUILDDIR)/%.js: %.ts
+	@echo "[tsc]" $@
+	mkdir -p $(dir $@)
+	tsc --strict --noUncheckedIndexedAccess --noEmitOnError \
+	    --lib dom,es2021 --target es2015 \
+	    --outDir $(dir $@) $^
 
 # $(1): template file
 # $(2): extra flags
diff --git a/blog-meta/all-tags.hs b/blog-meta/all-tags.hs
index 9bbc6ec..e2e7c02 100644
--- a/blog-meta/all-tags.hs
+++ b/blog-meta/all-tags.hs
@@ -61,8 +61,8 @@ getTags file = do
 makeYAML :: [Set Text] -> LazyBS.ByteString
 makeYAML tags = "---\n" <> yaml <> "\n...\n" where
   yaml = YAML.encode1 $ YAML.obj
-    [("title"    ##= YAML.str "all tags"),
-     ("all-tags" ##= collate tags)]
+    ["title"    ##= YAML.str "all tags", "meta" ##= True,
+     "all-tags" ##= collate tags]
 
 -- | generates a makefile to include that generates the index and individual
 -- tag pages. example:
@@ -112,7 +112,7 @@ data Tag =
 
 instance YAML.ToYAML Tag where
   toYAML (Tag {name, slug, count}) = YAML.obj $
-    [("name" ##= name), ("slug" ##= slug), ("count" ##= count)]
+    ["name" ##= name, "slug" ##= slug, "count" ##= count]
 
 -- | counts occurrences of each tag, and checks they all have distinct slugs
 collate :: [Set Text] -> [Tag]
diff --git a/blog-meta/lib/NiceDate.hs b/blog-meta/lib/NiceDate.hs
index 50ee795..a90305e 100644
--- a/blog-meta/lib/NiceDate.hs
+++ b/blog-meta/lib/NiceDate.hs
@@ -1,10 +1,10 @@
 module NiceDate (niceDate) where
 
-import Text.Pandoc.Definition
-import qualified Data.Map.Strict as Map
-import Misc
 import Control.Monad.Writer
+import Data.Map.Strict qualified as Map
 import Data.Monoid
+import Misc
+import Text.Pandoc.Definition
 
 niceDate :: Meta -> Meta
 niceDate (Meta m) =
diff --git a/blog-meta/lib/SlugTags.hs b/blog-meta/lib/SlugTags.hs
index a614d1f..599f4ba 100644
--- a/blog-meta/lib/SlugTags.hs
+++ b/blog-meta/lib/SlugTags.hs
@@ -1,10 +1,9 @@
 module SlugTags (slugTags) where
 
-import Text.Pandoc.Definition
-import qualified Data.Map.Strict as Map
--- import Text.Pandoc.JSON
+import Data.Map.Strict qualified as Map
 import Data.Text (Text)
 import Misc
+import Text.Pandoc.Definition
 
 slugTags :: Meta -> Meta
 slugTags (Meta m) = Meta $ Map.adjust addSlugs "tags" m
diff --git a/blog-meta/lib/YAML.hs b/blog-meta/lib/YAML.hs
index 4a68d43..19200c3 100644
--- a/blog-meta/lib/YAML.hs
+++ b/blog-meta/lib/YAML.hs
@@ -1,15 +1,15 @@
 {-# OPTIONS_GHC -Wno-orphans #-}
 module YAML (module YAML, module Data.YAML, untagged) where
 
+import Data.ByteString (ByteString)
+import Data.ByteString.Char8 qualified as BS8
+import Data.ByteString.Lazy qualified as LazyBS
+import Data.Text (Text)
+import Data.Text qualified as Text
 import Data.YAML
 import Data.YAML.Event (untagged)
-import Data.Text (Text)
-import qualified Data.Text as Text
 import Misc
-import Data.ByteString (ByteString)
-import qualified Data.ByteString.Char8 as BS8
-import qualified Data.ByteString.Lazy as LazyBS
-import qualified System.IO as IO
+import System.IO qualified as IO
 
 
 str' :: String -> Node ()
diff --git a/blog-meta/post-lists.hs b/blog-meta/post-lists.hs
index cbdbe9a..01d61f9 100644
--- a/blog-meta/post-lists.hs
+++ b/blog-meta/post-lists.hs
@@ -64,7 +64,7 @@ makeTagInfo infos title basename outdir = do
 makeContent :: Text -> [PostInfo] -> LazyBS.ByteString
 makeContent title is' = "---\n" <> YAML.encode1 val <> "...\n" where
   is = sortBy (flip $ comparing date) is'
-  val = YAML.obj [("title" ##= title), ("posts" ##= is)]
+  val = YAML.obj ["title" ##= title, "posts" ##= is, "meta" ##= True]
 
 allTags :: Foldable t => t PostInfo -> Set Text
 allTags = foldMap (Set.fromList . tags)
diff --git a/cabal.project b/cabal.project
index 485c837..15865bd 100644
--- a/cabal.project
+++ b/cabal.project
@@ -4,13 +4,13 @@ packages:
 source-repository-package
   type: git
   location: https://git.rhiannon.website/rhi/lang.git
-  tag: ed54ec4c5af5b2b8ea25f0274e11c2f8c87714c3
+  tag: c4a430facbeaa55a9de8edd69145243475c94087
   subdir: langfilter
 
 source-repository-package
   type: git
   location: https://git.rhiannon.website/rhi/lang.git
-  tag: ed54ec4c5af5b2b8ea25f0274e11c2f8c87714c3
+  tag: c4a430facbeaa55a9de8edd69145243475c94087
   subdir: laantas-script
 
 source-repository-package
diff --git a/posts/new-new-theme.md b/posts/new-new-theme.md
new file mode 100644
index 0000000..8ef62b9
--- /dev/null
+++ b/posts/new-new-theme.md
@@ -0,0 +1,14 @@
+---
+title: <em>new</em> new theme
+date: 2024-12-05
+summary: for real this time. probably
+tags: [december adventure]
+...
+
+yeah i redid it.
+
+it's more _on brand_ now, i think. and the actual css is nice and organised now. i am grudgingly using [sass] now because i really want those mixins. and functions.
+
+so yeah! honestly i don't think there is much to talk about with something like this. you can see the results.
+
+bye
diff --git a/posts/new-theme.md b/posts/new-theme.md
new file mode 100644
index 0000000..f003eb5
--- /dev/null
+++ b/posts/new-theme.md
@@ -0,0 +1,18 @@
+---
+title: new theme
+date: 2024-12-04
+tags: [december adventure]
+summary: wow!
+...
+
+hi today's `@december adventure@` was…
+
+:::banner
+redesigning this page
+:::
+
+maybe you noticed when you opened it. i know it's pretty subtle.
+
+:::aside
+**note to readers from the future**: it was not subtle.
+:::
diff --git a/posts/quorientation.md b/posts/quorientation.md
index d40f526..9c06c34 100644
--- a/posts/quorientation.md
+++ b/posts/quorientation.md
@@ -29,6 +29,8 @@ so. one sentence at a time.
 
 # one
 
+you know! the thing! from the game!
+
 :::glosses
 - suatł pattalal šilbari gulaigúšḿ fulla
 - [ˌsuətɫ̩ ˈpatːɐləlʲ ˈʃilʲbɐɾɪ ɡɔˈlaɪɣɔːʃm̩ fʊɫːɑ]
@@ -37,18 +39,13 @@ so. one sentence at a time.
 - use your warps to skip some floors
 :::
 
-you know! the thing! from the game!
-
-<figure class='floating right'>
-<figcaption> well. from the fan translation </figcaption>
-<img src=quorientation/skip-some-floors.png class=pixel alt=''>
-</figure>
+![well. from the fan translation](quorientation/skip-some-floors.png){.floating .right .pixel}
 
 - out of context, `{!patta}` means door. i suppose a portal would be a magic
   door, an `{!ustaitł patta}`. but in the context of someone making one right
   in front of you, it is clear what kind of door we're talking about.
 
-  :::{.aside .no-line}
+  :::aside
   the word `{!ustail}` also means "songs". did you know there's an old english
   word for magic, `{ġealdor}`, that comes from the proto-germanic `{galdr}`,
   meaning both "song" and "incantation"? i thought it was cute.
@@ -88,7 +85,7 @@ babylon no longer exists, so it doesn't need protecting. go have fun
   mean something like "is possible/necessary".
   "{flowers grow here} is possible".
 
-  :::{.aside .no-line}
+  :::aside
   the similarity of `{!fulla}` and `{!bulla}` is just a weird accident, in case
   you're wondering. i made the words at different times. no etymology puzzle
   here, sorry
@@ -112,7 +109,7 @@ babylon no longer exists, so it doesn't need protecting. go have fun
 
 # abbreviation list
 
-:::{.twocol .abbr-list}
+:::{.abbr-list}
 DEF
 : [definite](https://lang.niss.website/laantas/nouns.html#definiteness)
   ["the"]{.note}
diff --git a/posts/rainbow-quox.md b/posts/rainbow-quox.md
index e71b0bc..17c51f3 100644
--- a/posts/rainbow-quox.md
+++ b/posts/rainbow-quox.md
@@ -6,17 +6,18 @@ summary: q.t. colour scheme generator
 header-includes: |
   <style>
     #relcolor {
-      max-width: 20em; margin: auto;
-      display: grid; grid-template-columns: 1fr 1fr; gap: .5em;
+      max-width: 20em; margin: 1em auto auto;
+      display: grid; grid-template-columns: 1fr 1fr; gap: 3em;
       font-weight: bold;
       --hi: #ea9aa1; --wow: oklch(from var(--hi) l c calc(h + 180));
     }
     #relcolor div {
       text-align: center; font-size: 125%;
-      padding: .4em; border-radius: .5em;
+      padding: .4em;
       color: black;
       background: var(--bg);
       border: 4px solid oklch(from var(--bg) .25 75% h);
+      box-shadow: 0.5em 0.5em 0 color-mix(in srgb, var(--bg) 50%, transparent);
     }
     #hi { --bg: var(--hi); }
     #wow { --bg: var(--wow); }
@@ -69,7 +70,7 @@ if you look at [mdn], you might see this interesting [`hue-rotate()`][hr] thing
 
 well that doesn't sound very encouraging. but maybe it'll be fine.
 
-i shoved [all of the colours][jofo] to hue 0° (using krita's _hue HSL_ blend mode), and used `hue-rotate()` to change it back to the 'main' colour of each region.
+i shoved [all of the colours][jofo] to hue 0° (using krita's `@hue HSL@` blend mode), and used `hue-rotate()` to change it back to the 'main' colour of each region.
 
 it won't look exact, but it'll be close. right?
 
@@ -171,27 +172,27 @@ a good place to start is the same place everyone does: with complementary and tr
 using this as a starting point, i pick some evenly-spaced colours for each bit. the final palettes come out like this!
 
 :::{#result}
-- fins:
+- fins
   <svg viewBox='-0.1 -0.1 8.7 1.2'>
   <rect fill=#770084 width=2 height=1 />
   <rect fill=#9d0058 width=2 height=1 x=2 />
   <rect fill=#a11916 width=2 height=1 x=4 />
   <rect fill=#eead91 width=2 height=1 x=6.5 />
   </svg>
-- body:
+- body
   <svg viewBox='-0.1 -0.1 6.7 1.2'>
   <rect fill=#00709b width=2 height=1 />
   <rect fill=#008fca width=2 height=1 x=2 />
   <rect fill=#7dd1f1 width=2 height=1 x=4.5 />
   </svg>
-- belly:
+- belly
   <svg viewBox='-0.1 -0.1 8.7 1.2'>
   <rect fill=#dc8d7b width=2 height=1 />
   <rect fill=#efa4b0 width=2 height=1 x=2 />
   <rect fill=#f9aba1 width=2 height=1 x=4.5 />
   <rect fill=#e3adbc width=2 height=1 x=6.5 />
   </svg>
-- mask/claws/socks:
+- mask/claws/socks
   <svg viewBox='-0.1 -0.1 9.2 1.2'>
   <rect fill=#ebc1c8 width=2 height=1 />
   <rect fill=#b4aaae width=2 height=1 x=2.5 />
diff --git a/script/hue.ts b/script/hue.ts
new file mode 100644
index 0000000..2d4f459
--- /dev/null
+++ b/script/hue.ts
@@ -0,0 +1,6 @@
+export {}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const hue = `${Math.random() * 360}`;
+  document.documentElement.style.setProperty('--base-hue', hue);
+});
diff --git a/style/colours.scss b/style/colours.scss
new file mode 100644
index 0000000..35c4393
--- /dev/null
+++ b/style/colours.scss
@@ -0,0 +1,43 @@
+
+$lighter: oklch(95% 8% var(--base-hue));
+$light:   oklch(90% 12% var(--base-hue));
+$mid:     oklch(40% 20% var(--base-hue));
+$dark:    oklch(20% 45% var(--base-hue));
+$darker:  oklch(10% 40% var(--base-hue));
+
+$dark-accent:  oklch(56% 40% calc(var(--base-hue) - 180));
+$light-accent: oklch(90% 30% calc(var(--base-hue) - 180));
+
+@function halfalpha($col) {
+  @return color-mix(in srgb, #{$col} 50%, transparent);
+}
+
+
+@mixin color-var($name, $light, $dark: null) {
+  @property #{$name} {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #{$light};
+  }
+  :root {
+    #{$name}: #{$light};
+    @if $dark != null {
+      @media (prefers-color-scheme: dark) { #{$name}: #{$dark}; }
+    }
+  }
+}
+
+@mixin apply-colors($fg, $bg, $accent: null) {
+  --fg: #{$fg};
+  --bg: #{$bg};
+  @if $accent { --accent: #{$accent}; }
+
+  color:      var(--fg);
+  background: var(--bg);
+}
+
+@mixin inverted($padding: 0.5em) {
+  @include apply-colors($fg: var(--counter-fg), $bg: var(--counter-bg),
+                        $accent: var(--counter-accent));
+  padding:    $padding;
+}
diff --git a/style/counters.css b/style/counters.css
index 6821348..53ceb1a 100644
--- a/style/counters.css
+++ b/style/counters.css
@@ -16,53 +16,14 @@
   suffix: " ";
 }
 
-main :is(h1, h2, h3, h4, h5, h6):not(.unnumbered)::before {
-  padding-right: 1ex;
-}
+main h1 {
+  &:not(.unnumbered) { counter-increment: h1; }
 
-main h1:not(.unnumbered) { counter-increment: h1; }
-main h1 { counter-reset: h2 h3 h4 h5 h6; }
-main h1:not(.unnumbered)::before {
-  content: counter(h1, inv-circled);
+  &::before {
+    font-family: PragmataPro;
+    font-style: normal;
+    content: counter(h1, inv-circled);
+    padding-right: 1ex;
+  }
+  &.unnumbered::before { content: "\2B8A"; }
 }
-main h1.unnumbered::before {
-  content: "\2B8A  ";
-}
-
-/*
-
-main h2:not(.unnumbered) { counter-increment: h2; }
-main h2:not(.unnumbered)::before {
-  content: counter(h1) '.' counter(h2);
-}
-main h2 { counter-reset: h3 h4 h5 h6; }
-
-main h3:not(.unnumbered) { counter-increment: h3; }
-main h3 { counter-reset: h4 h5 h6; }
-main h3:not(.unnumbered)::before {
-  content: counter(h1) '.' counter(h2) '.' counter(h3);
-}
-
-main h4:not(.unnumbered) { counter-increment: h4; }
-main h4 { counter-reset: h5 h6; }
-main h4:not(.unnumbered)::before {
-  content:
-    counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4);
-}
-
-main h5:not(.unnumbered) { counter-increment: h5; }
-main h5 { counter-reset: h6; }
-main h5:not(.unnumbered)::before {
-  content:
-    counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.'
-    counter(h5);
-}
-
-main h6:not(.unnumbered) { counter-increment: h6; }
-main h6:not(.unnumbered)::before {
-  content:
-    counter(h1) '.' counter(h2) '.' counter(h3) '.' counter(h4) '.'
-    counter(h5) '.' counter(h6);
-}
-
-*/
diff --git a/style/fonts.scss b/style/fonts.scss
new file mode 100644
index 0000000..30b9891
--- /dev/null
+++ b/style/fonts.scss
@@ -0,0 +1,51 @@
+@import url(fonts/pragmatapro/pragmatapro.css);
+@import url(fonts/muller/muller.css);
+@import url(fonts/junicodevf/junicodevf.css);
+
+
+$normal-weight:       400;
+$bold-weight:         600;
+$boldbold-weight:     700;
+$main-heading-weight: 300;
+$heading-weight:      $bold-weight;
+$small-weight:        500;
+
+$body-size:  14pt;
+$small-size: $body-size * 0.75;
+$code-font-scale: 0.85;
+
+@mixin main-font { font-family: Muller, sans-serif; }
+
+@mixin heading-font { @include main-font; }
+
+@mixin code-font {
+  font-family: PragmataPro, monospace;
+  font-size:   100% * $code-font-scale;
+}
+
+@mixin ipa-font {
+  font-family: JunicodeVF, serif;
+  font-feature-settings: "ccmp", "calt", "liga", "loca", "mark", "mkmk", "ss01";
+  font-weight: 550;
+  font-stretch: 110%;
+}
+
+@mixin small-font {
+  font-size:   80%;
+  font-weight: $small-weight;
+}
+
+@mixin note-font {
+  @include small-font;
+  font-style:  italic;
+}
+
+@mixin symbol-font {
+  font-family: PragmataPro, sans-serif;
+}
+
+@mixin heading-size($level) {
+  $step: 1.2;
+  font-size: #{pow($step, max(4 - $level, 0))}rem;
+}
+
diff --git a/style/meta.scss b/style/meta.scss
new file mode 100644
index 0000000..cd16243
--- /dev/null
+++ b/style/meta.scss
@@ -0,0 +1,34 @@
+@use 'colours' as *;
+@use 'fonts' as *;
+@import url(page.css);
+
+.tag-list {
+  columns: 2;
+}
+
+.post-list li + li {
+  margin-top: 0.5em;
+}
+
+.post-desc {
+  margin: 0;
+  line-height: 125%;
+
+  p { margin: 0; }
+  p + p { margin-top: .5em; }
+}
+
+.post-list > li { list-style: '✎ '; }
+.tag-list > li { list-style: '🏷 '; }
+
+.post-list .date, .tag-list .count, .post-desc {
+  @include note-font;
+}
+
+#toc > ul {
+  columns: 2;
+  margin-left:  2em;
+  margin-right: 2em;
+  > li { list-style: circled; }
+}
+
diff --git a/style/niss.png b/style/niss.png
deleted file mode 100644
index 0e2009e..0000000
Binary files a/style/niss.png and /dev/null differ
diff --git a/style/page.css b/style/page.css
deleted file mode 100644
index 6a16d69..0000000
--- a/style/page.css
+++ /dev/null
@@ -1,708 +0,0 @@
-@import url(counters.css);
-@import url(fonts/schola/schola.css);
-@import url(fonts/muller/muller.css);
-@import url(fonts/junius/junius.css);
-@import url(fonts/pragmatapro/pragmatapro.css);
-
-:root {
-  --ipa-font: JuniusX;
-
-  --light: #feb;
-  --dark:  #325;
-  --mid:   #83869e;
-  --red1:  #f42;
-  --red2:  #d16;
-
-  --fg:  var(--dark);
-  --bg:  var(--light);
-  --accent: var(--red1);
-  --other-accent: var(--red2);
-}
-
-:root {
-  background: var(--bg);
-  color: var(--fg);
-
-  font-family: PragmataPro;
-  font-size: 13pt;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --fg: var(--light);
-    --bg: var(--dark);
-    --accent: var(--red2);
-    --other-accent: var(--red1);
-  }
-}
-
-:root, body { margin: 0; padding: 0; }
-
-main, footer { max-width: 50rem; }
-
-main {
-  min-height: 100%;
-  margin: 1em auto 0;
-  padding: 0.5em 2em;
-
-  line-height: 150%;
-
-  box-sizing: border-box;
-}
-
-header {
-  text-align: center;
-  text-wrap: balance;
-  background: var(--fg);
-  color: var(--bg);
-  --accent: var(--other-accent);
-  padding: 1em;
-}
-
-header h1 {
-  font-size: 200%;
-  margin: 0;
-  font-weight: normal;
-  text-transform: uppercase;
-  letter-spacing: 0.4ch;
-}
-
-/* h1, h2, h3, h4, h5, h6 { */
-main h1 {
-  margin: 1em 0 0.25em;
-
-  font-weight: normal;
-  font-variant-east-asian: full-width;
-  -moz-font-feature-settings: "fwid";
-  -webkit-font-feature-settings: "fwid";
-  font-feature-settings: "fwid";
-
-  clear: both;
-
-  font-size: 100%;
-}
-
-h1 small {
-  font-variant-east-asian: normal;
-  -moz-font-feature-settings: normal;
-  -webkit-font-feature-settings: normal;
-  font-feature-settings: normal;
-}
-
-
-h1 { font-size: 125%; }
-h2 { font-size: 125%; }
-h3 { font-size: 120%; }
-h4 { font-size: 110%; }
-h5 { font-size: 100%; }
-h6 { font-size: 100%; }
-
-main h1 {
-  background: var(--fg);
-  color: var(--bg);
-  padding: 0.25rem 0.75rem;
-  margin-bottom: 1rem;
-}
-
-main :is(h2, h3, h4, h5, h6) {
-  padding: 0.25rem 0.75rem;
-  border-bottom: 2px dotted var(--fg);
-  margin-bottom: 1rem;
-}
-
-hr {
-  border: none;
-  border-bottom: 2px dotted var(--fg);
-  height: 0;
-}
-
-pre + hr {
-  margin-top: 1.5em;
-}
-
-.meta {
-  margin-top: 1rem;
-  display: flex;
-  column-gap: 2em;
-  align-items: baseline;
-  justify-content: center;
-}
-
-header .date {
-  font-variant-east-asian: normal;
-  -moz-font-feature-settings: normal;
-  -webkit-font-feature-settings: normal;
-  font-feature-settings: normal;
-  font-size: 100%;
-
-  margin: 0;
-}
-
-.tags ul {
-  display: inline;
-  padding: 0;
-}
-
-.tags li {
-  list-style: none;
-  display: inline;
-}
-
-.tags li + li {
-  margin-left: 0.75ex;
-}
-
-.tag-list {
-  columns: 2;
-}
-
-.post-list .date, .tag-list .count {
-  font-size: 85%;
-}
-
-.post-list li + li {
-  margin-top: 0.5em;
-}
-
-.post-desc {
-  margin: 0;
-  font-size: small;
-  font-style: italic;
-  line-height: 125%;
-}
-
-.post-desc p {
-  margin: 0;
-}
-.post-desc p + p {
-  margin-top: .5em;
-}
-
-
-a {
-  color: inherit;
-  text-decoration: 2px dotted underline var(--accent);
-}
-a:hover { color: var(--accent); }
-
-b, strong {
-  font-weight: 600;
-}
-
-dfn {
-  font-style: normal;
-  font-weight: 500;
-}
-
-ul li { list-style: '❀ '; }
-.post-list li { list-style: '✒ '; }
-.tag-list li { list-style: ' '; } /* a tag in pragmatapro */
-
-table {
-  margin: auto;
-  border-spacing: 0;
-  border-top: 2px solid var(--fg);
-  border-bottom: 2px solid var(--fg);
-}
-
-th {
-  font-weight: 500;
-}
-
-thead th {
-  border-bottom: 1px solid var(--fg);
-}
-
-td, th {
-  padding: 0 0.5em;
-  vertical-align: text-bottom;
-}
-
-
-pre, code {
-  font-family: PragmataPro;
-  font-size:   inherit;
-}
-
-pre, :not(pre) > code {
-  background:  hsla(0deg 0% 100% / 40%);
-  border:      2px dotted color-mix(in srgb, currentcolor 75%, transparent);
-}
-
-@media (prefers-color-scheme: dark) {
-  pre, :not(pre) > code { background: hsla(0deg 0% 00% / 30%); }
-}
-
-:not(pre) > code { padding: 0 5px; white-space: nowrap; }
-
-pre {
-  clear:   both;
-  width:   min-content;
-  margin:  0.5em auto;
-  padding: 0.5em 0.8em;
-}
-
-
-.ipa, .lang, .ebnf-t {
-  /* font-family: var(--ipa-font); */
-
-  font-feature-settings:
-    "ccmp", "calt", "liga", "loca", "mark", "mkmk", "ss01";
-  /* ss01 to use modern Þþð design, others to make juniusx go brrr
-   * maybe i can just turn loca off but idk what other regional forms
-   * it does that i actually want */
-
-  text-underline-offset: 0.125em;
-}
-
-.lang, .ebnf-t { font-weight: 500; }
-
-.abbr-list dt {
-  font-family: PragmataPro;
-  font-weight: normal;
-}
-
-.abbr, .abbr-list dt {
-  font-variant: all-small-caps;
-}
-
-.scr {
-  height: 1.5em;
-  vertical-align: -40%;
-}
-
-.gloss-split, .gloss-gloss {
-  font-size: 80%;
-}
-
-:is(.gloss, .bigscr) .scr {
-  height: 2em;
-}
-
-.hugescr .scr {
-  height: 4em;
-}
-
-:is(.splash, .example) .scr {
-  height: unset;
-  display: block;
-  margin: auto;
-}
-
-.example {
-  margin: auto;
-}
-
-.example .text {
-  display: block;
-  text-align: center;
-  width: 80%;
-  margin: 0.75em auto 0;
-}
-
-blockquote {
-  font-style: italic;
-}
-
-
-.letter-list {
-  margin: 1.25em auto 0;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-around;
-  width: 80%;
-  row-gap: 0.5em;
-  column-gap: 1.5em;
-}
-
-.letter-list + .letter-list {
-  margin-top: 2.5em;
-}
-
-.letter-list .lang {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.letter-list .scr {
-  height: 3em;
-  margin-left: 0.5em;
-}
-
-.letter-list .text {
-  font-size: 125%;
-}
-
-
-#toc > ul {
-  columns: 2;
-  margin-left:  2em;
-  margin-right: 2em;
-  > li { list-style: circled; }
-}
-
-figure img {
-  max-width: 100%;
-}
-figure:not(.nobg, .hasborder) img:not(.scr) {
-  border: 3px solid currentcolor;
-}
-figure.nobg a img {
-  /* fake outline */
-  filter:
-    drop-shadow(1px 1px 0 currentcolor)
-    drop-shadow(1px -1px 0 currentcolor)
-    drop-shadow(-1px 1px 0 currentcolor)
-    drop-shadow(-1px -1px 0 currentcolor)
-    drop-shadow(1px 0 0 currentcolor)
-    drop-shadow(-1px 0 0 currentcolor)
-    drop-shadow(0 1px 0 currentcolor)
-    drop-shadow(0 -1px 0 currentcolor) ;
-}
-figure.lightbg img {
-  background: var(--light);
-}
-figure:not(.left) {
-  text-align: center;
-}
-figure:not(.left) table {
-  display: inline-table;
-}
-.twocol-grid figure {
-  margin: 0;
-}
-figure table {
-  margin: 1em 0.5em;
-}
-.gloss {
-  border: none;
-  text-align: left;
-}
-
-figure ul {
-  text-align: left;
-  margin-left: 5em;
-  margin-right: 5em;
-  columns: 2;
-}
-figure li {
-  break-inside: avoid;
-}
-
-figcaption {
-  font-size: 80%;
-  line-height: 125%;
-  font-style: italic;
-  margin: 0 auto;
-  text-align: center;
-  text-wrap: balance;
-}
-figcaption em {
-  font-style: normal;
-}
-:not(.floating) > figcaption {
-  width: 75%;
-}
-
-dt {
-  font-weight: 500;
-  display: inline;
-  break-after: avoid;
-}
-
-dd {
-  margin-left: 1em;
-  display: inline;
-  break-before: avoid;
-}
-
-dd::after {
-  content: '';
-  display: block;
-}
-
-u u {
-  text-decoration: double underline;
-}
-
-:is(.twocol, .threecol):not(:is(ul, ol) *) {
-  margin-top: 1em;
-}
-.twocol {
-  columns: 2;
-}
-.threecol {
-  columns: 3;
-}
-.twocol :first-child, .threecol :first-child {
-  margin-top: 0;
-}
-
-.twocol-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1em;
-  margin: 1em 0;
-}
-
-.twocol-grid .gloss {
-  margin-left: 0;
-}
-
-footer {
-  clear: both;
-  border-top: 2px dotted var(--fg);
-  margin: 1.5em auto 3em;
-
-  font-size: 80%;
-  font-weight: 500;
-  text-align: center;
-}
-
-footer ul::before {
-  margin: 0;
-  content: '➸ ';
-}
-
-footer ul::after {
-  margin: 0;
-  content: ' 🐌︎';
-}
-
-footer li {
-  display: inline;
-  list-style: none;
-}
-footer li + li::before { content: ' · '; }
-
-
-.ebnf {
-  border: none;
-}
-
-.ebnf td {
-  padding: 0 0.15em;
-}
-
-.ebnf-nt {
-  font-weight: 500;
-  color: hsl(155deg, 80%, 30%);
-  white-space: nowrap;
-}
-
-.ebnf-punc {
-  color: hsl(25deg, 40%, 30%);
-}
-
-.ebnf-sub, .ebnf-brack {
-  color: hsl(210deg, 80%, 35%);
-  font-weight: 500;
-}
-
-.ebnf-brack {
-  padding: 0 0.05em;
-}
-
-.ebnf-s {
-  font-style: italic;
-  color: hsl(330deg, 80%, 30%);
-}
-
-blockquote {
-  max-width: 85%;
-  border-left: 1px solid black;
-  padding-left: 1em;
-  margin: auto;
-}
-
-
-.note, aside {
-  font-size: 90%;
-}
-
-.note {
-  font-style: italic;
-}
-
-.banner {
-  font-size: 125%;
-  font-weight: bolder;
-  text-align: center;
-  text-wrap: balance;
-}
-.banner p:first-child::before { content: '☛ '; }
-.banner p:last-child::after { content: ' ☚'; }
-
-:is(h1, h2) .note {
-  font-size: 75%;
-}
-
-aside {
-  margin: 0.5em 3em;
-}
-aside:not(.no-line) {
-  padding-left: 1em;
-  border-left: 2px solid var(--fg);
-}
-
-aside > details summary {
-  font-weight: 600;
-}
-
-aside :is(h1, h2, h3, h4, h5, h6) {
-  margin-top: 0.25em;
-  font-weight: 600;
-}
-aside h1 { font-size: 115%; }
-aside :is(h2, h3, h4, h5, h6) { font-size: 100%; }
-
-:is(aside, figure).floating {
-  max-width: 33%;
-}
-aside.floating {
-  padding: 0.25em 0.75em;
-  margin: 0.15em 1em 0;
-}
-figure.floating {
-  margin: 0 0.5em;
-}
-
-aside.floating :first-child { margin-top: 0; }
-aside.floating :last-child { margin-bottom: 0; }
-
-.kw { color: hsl(300deg, 60%,  30%); }
-.pp { color: hsl(343deg, 100%, 40%); /* font-weight: 500; */ }
-.dt { color: hsl(173deg, 100%, 24%); /* font-weight: 500; */ }
-.fu, .at { color: hsl(34deg,  100%, 30%); /* font-weight: 500; */ }
-.va { color: hsl(203deg, 100%, 30%); /* font-weight: 500; */ }
-.cf { color: hsl(276deg, 75%,  35%); /* font-weight: 500; */ }
-.op { color: hsl(220deg, 40%,  33%); }
-.co { color: hsl(221deg, 10%,  39%); /* font-style: italic; */ }
-.bu { color: hsl(120deg, 85%,  25%); }
-.st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 100%, 20%); }
-.wa { color: hsl(350deg, 80%,  25%); text-decoration: wavy 1.5px underline; }
-.al { color: hsl(350deg, 80%,  25%); }
-.cn { color: hsl(343deg, 100%, 30%); }
-
-@media (prefers-color-scheme: dark) {
-  .kw { color: hsl(300deg, 60%,  80%); }
-  .pp { color: hsl(343deg, 100%, 85%); /* font-weight: 500; */ }
-  .dt { color: hsl(193deg, 60%, 74%); /* font-weight: 500; */ }
-  .fu, .at { color: hsl(34deg,  100%, 70%); /* font-weight: 500; */ }
-  .va { color: hsl(203deg, 100%, 75%); /* font-weight: 500; */ }
-  .cf { color: hsl(276deg, 75%,  85%); /* font-weight: 500; */ }
-  .op { color: hsl(220deg, 40%,  70%); }
-  .co { color: hsl(221deg, 10%,  80%); /* font-style: italic; */ }
-  .bu { color: hsl(120deg, 55%,  75%); }
-  .st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 70%, 80%); }
-  .wa { color: hsl(350deg, 80%,  77%); text-decoration: wavy 1.5px underline; }
-  .al { color: hsl(350deg, 80%,  77%); }
-  .cn { color: hsl(343deg, 80%, 70%); }
-}
-
-.floating {
-  float: right;
-  margin: 0.5em 1em 0.5em 2em;
-}
-
-.floating.left {
-  float: left;
-  margin: 0.5em 2em 0.5em 1em;
-}
-
-.shaped {
-  /* maybe one day... */
-  /* shape-outside: attr(src url); */
-  shape-margin: 1em;
-}
-
-.shadow { filter: drop-shadow(5px 5px 8px #0006); }
-
-.pixel {
-  image-rendering: crisp-edges;
-  image-rendering: pixelated;
-}
-
-.emoji {
-  height: 1em;
-  width:  1em;
-  vertical-align: -0.1em;
-}
-
-.bigemoji {
-  height: 2em;
-  width:  2em;
-  vertical-align: -0.2em;
-}
-
-.emojiseq { white-space: nowrap; }
-
-
-.citation {
-  font-size: 90%;
-}
-
-#refs {
-  margin-top: 0.75em;
-}
-.csl-entry {
-  margin-left: 2em;
-  text-indent: -2em;
-}
-/*
-.csl-entry {
-  display: grid;
-  grid-template-columns: 4ch auto;
-  grid-gap: 1ex;
-}
-.csl-left-margin {
-  justify-self: end;
-}
-*/
-
-math[display=block] {
-  border: 2px dotted var(--fg);
-
-  padding: 1em 3em;
-  margin: auto;
-  width: min-content;
-
-}
-.rulebox math[display=block] {
-  border: none;
-  padding: 0;
-}
-
-.texdefs {
-  display: none;
-}
-
-.rulebox {
-  float: right;
-  border: 1px solid var(--fg);
-  background: #ffffff66;
-  padding: .4em 1.2em;
-  margin-left: 3em;
-}
-
-/* the last thing in the :is is for priority fuckery */
-.rulebox :is(p, .math, mjx-container, #asd) {
-  margin: 0;
-  padding: 0;
-}
-
-.clear { clear: both; }
-
-mark {
-  mix-blend-mode: multiply;
-  background: #fbc;
-  padding: 0 0.35ch;
-}
-
-.light {
-  background: var(--light);
-  color: var(--dark);
-}
diff --git a/style/page.scss b/style/page.scss
new file mode 100644
index 0000000..dc76bd8
--- /dev/null
+++ b/style/page.scss
@@ -0,0 +1,617 @@
+@use 'sass:math';
+@use 'colours' as *;
+@use 'fonts' as *;
+
+@import url(counters.css);
+
+
+@layer colordefs {
+  @property --base-hue {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 336;
+  }
+
+  @include color-var(--fg, $darker, $light);
+  @include color-var(--bg, $light, $darker);
+  @include color-var(--counter-fg, $lighter, $lighter);
+  @include color-var(--counter-bg, $dark, $mid);
+  @include color-var(--accent, $dark-accent, $light-accent);
+  @include color-var(--counter-accent, $light-accent, $dark-accent);
+  @include color-var(--box-base, $light, $mid);
+  @include color-var(--box-fg, $darker, $lighter);
+  @include color-var(--box-shadow, halfalpha($mid));
+
+  :root {
+    --gradient: linear-gradient(
+      120deg in oklch,
+      oklch(93% 27.1% 96deg),
+      oklch(84.03% 22% 15deg),
+      oklch(80% 29.3% 303deg),
+      oklch(84% 23% 233deg),
+      oklch(89% 25% 161deg)
+    );
+
+    @media (prefers-color-scheme: dark) {
+      // todo oklch
+      --gradient:
+        linear-gradient(20deg in oklch,
+          hsl(300deg 30% 20%),
+          hsl(220deg 30% 20%),
+          hsl(150deg 30% 20%),
+          hsl(30deg  30% 20%),
+          hsl(350deg 30% 20%));
+    }
+  }
+}
+
+
+@mixin boxy-margin { margin: 1rem 0; }
+
+@mixin boxy-shadow($dst: 0.5rem) {
+  box-shadow: 0.5rem 0.5rem 0 var(--box-shadow);
+}
+
+@function border-style($fg: var(--fg)) { @return 3px solid $fg; }
+
+@mixin boxy-unpadded($bg, $fg: var(--box-fg), $border: $fg, $dst: 0.5em)
+{
+  color:      $fg;
+  background: $bg;
+  border:     border-style($border);
+  @include boxy-shadow;
+}
+
+@mixin boxy($bg, $clear: true, $args...) {
+  @include boxy-unpadded($bg, $args...);
+  @include boxy-margin;
+  padding:  0.5rem 0.8rem;
+  @if $clear {
+    clear: both;
+  } @else {
+    overflow: hidden; // makes the box dodge floats?????? idk why
+  }
+  :first-child { margin-top:    0; }
+  :last-child  { margin-bottom: 0; }
+}
+
+@mixin fake-border {
+  border: none;
+  filter:
+    drop-shadow(1px 1px 0 currentcolor)
+    drop-shadow(1px -1px 0 currentcolor)
+    drop-shadow(-1px 1px 0 currentcolor)
+    drop-shadow(-1px -1px 0 currentcolor)
+    drop-shadow(1px 0 0 currentcolor)
+    drop-shadow(-1px 0 0 currentcolor)
+    drop-shadow(0 1px 0 currentcolor)
+    drop-shadow(0 -1px 0 currentcolor);
+}
+
+@mixin decorations($before, $after: $before, $size: null, $color: null) {
+  &::before, &::after {
+    @include symbol-font;
+    font-style:  normal;
+    @if $size  { font-size: $size; }
+    @if $color { color: $color;    }
+    margin: 0 0.5rem;
+  }
+  &::before { content: $before; }
+  &::after  { content: $after;  }
+}
+
+
+@mixin inline-lists {
+  ul, menu, li { display: inline; }
+  ul, menu { padding-left: 0; }
+  li       { list-style: none;    }
+  li + li  { margin-left: 0.75ex; }
+}
+
+@mixin center {
+  text-align: center;
+  text-wrap: balance;
+}
+
+
+@layer outer {
+  * { box-sizing: border-box; }
+
+  :root {
+    background: var(--gradient) fixed;
+    color:      var(--fg);
+
+    @include main-font;
+    font-size: $body-size;
+    line-height: 150%;
+  }
+
+  body {
+    @include boxy-unpadded(var(--bg));
+    margin: 2em auto;
+
+    $darkbg: oklch(from var(--bg) calc(l * 0.9) calc(c * 1.25) h);
+    background: linear-gradient(to bottom in oklch, var(--bg), $darkbg);
+
+    width: min(54rem, 85vw);
+  }
+
+  main {
+    margin: 0 2rem;
+  }
+}
+
+@layer header {
+  header {
+    @include inverted;
+    @include inline-lists;
+
+    text-align: center;
+    text-wrap: balance;
+    padding: 1em;
+
+    h1 {
+      @include decorations('✿', $size: 60%);
+      @include heading-size(0);
+      @include heading-font;
+      font-weight: $main-heading-weight;
+      font-style: italic;
+      letter-spacing: 0.1ch;
+      margin: { top: 0; bottom: 0.5rem; }
+
+      em { font-weight: $normal-weight; }
+    }
+
+    .meta {
+      @include small-font;
+      display:         flex;
+      gap:             2em;
+      justify-content: center;
+
+      * { display: inline; }
+    }
+  }
+}
+
+@layer footer {
+  footer {
+    @include inverted(0.75rem);
+    @include small-font;
+    @include inline-lists;
+
+    clear: both;
+    margin: 2rem 0 0 0;
+
+    display: flex;
+    justify-content: center;
+
+    menu { @include decorations('➸', ''); }
+  }
+}
+
+@layer headings {
+  main {
+    h1, h2, h3, h4, h5, h6 { @include heading-font; }
+
+    h1 {
+      @include inverted;
+      @include boxy-margin;
+      @include boxy-shadow;
+      @include heading-size(1);
+      letter-spacing: 0.075ch;
+      clear: both;
+    }
+
+    h2 { @include heading-size(2); }
+    h3 { @include heading-size(3); }
+    h4, h5, h6 { font-size: 1rem; }
+
+    h2, h3, h4, h5, h6 {
+      padding: 0.25rem 0.75rem;
+      border-bottom: border-style();
+      margin-bottom: 1rem;
+    }
+  }
+}
+
+@layer links {
+  a {
+    color: inherit;
+    text-decoration: 2px solid underline var(--accent);
+    text-underline-offset: 0.175em;
+    &:hover { color: var(--accent); }
+  }
+}
+
+@layer banner {
+  .banner {
+    @include boxy(var(--accent), $fg: var(--banner-fg),
+                  $border: var(--banner-border));
+    @include decorations('☛', '☚');
+    @include heading-size(2);
+
+    font-weight: $boldbold-weight;
+    width:       fit-content;
+    margin:      auto;
+
+    p { display: inline; }
+
+    &:has(a) {
+      background: var(--accent);
+      a { text-decoration: none; }
+      a:hover { color: var(--counter-accent); }
+    }
+
+    --banner-fg:     #{$lighter};
+    --banner-border: #{$dark};
+    @media (prefers-color-scheme: dark) {
+      --banner-fg:     #{$darker};
+      --banner-border: #{$lighter};
+    }
+  }
+}
+
+
+@layer code {
+  pre {
+    @include code-font;
+    font-size: 1rem * $code-font-scale;
+  }
+
+  :where(:not(pre)) > code {
+    @include code-font;
+    white-space: nowrap;
+  }
+
+  /* syntax highlighting */
+  .kw { color: hsl(300deg, 60%,  30%); }
+  .pp { color: hsl(343deg, 100%, 40%); }
+  .dt { color: hsl(173deg, 100%, 24%); }
+  .fu, .at { color: hsl(34deg,  100%, 30%); }
+  .va { color: hsl(203deg, 100%, 30%); }
+  .cf { color: hsl(276deg, 75%,  35%); }
+  .op { color: hsl(220deg, 40%,  33%); }
+  .co { color: hsl(221deg, 10%,  39%); }
+  .bu { color: hsl(120deg, 85%,  25%); }
+  .st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 100%, 20%); }
+  .wa { color: hsl(350deg, 80%,  25%); text-decoration: wavy 1.5px underline; }
+  .al { color: hsl(350deg, 80%,  25%); }
+  .cn { color: hsl(343deg, 100%, 30%); }
+
+  @media (prefers-color-scheme: dark) {
+    .kw { color: hsl(300deg, 60%,  80%); }
+    .pp { color: hsl(343deg, 100%, 85%); }
+    .dt { color: hsl(193deg, 60%, 74%); }
+    .fu, .at { color: hsl(34deg,  100%, 70%); }
+    .va { color: hsl(203deg, 100%, 75%); }
+    .cf { color: hsl(276deg, 75%,  85%); }
+    .op { color: hsl(220deg, 40%,  70%); }
+    .co { color: hsl(221deg, 10%,  80%); }
+    .bu { color: hsl(120deg, 55%,  75%); }
+    .st, .fl, .dv, .bn, .sc, .ss { color: hsl(143deg, 70%, 80%); }
+    .wa { color: hsl(350deg, 80%,  77%); text-decoration: wavy 1.5px underline; }
+    .al { color: hsl(350deg, 80%,  77%); }
+    .cn { color: hsl(343deg, 80%, 70%); }
+  }
+}
+
+
+
+@layer figures {
+  figure {
+    img { max-width: 100%; }
+
+    &:where(:not(.nobg, .hasborder)) {
+      a       img { border: border-style(); }
+      a:hover img { border: border-style(var(--accent)); }
+    }
+
+    &.nobg a img { @include fake-border; }
+    &.lightbg img { background: var(--light); }
+  }
+
+  figcaption {
+    @include note-font;
+    @include center;
+
+    em { font-style: normal; }
+  }
+
+  :not(.floating) > figcaption { width: 75%; }
+}
+
+
+@layer tables {
+  table {
+    margin: auto;
+    border-spacing: 0;
+    border: { top: border-style(); bottom: border-style(); }
+  }
+
+  th { font-weight: $bold-weight; }
+
+  thead th {
+    border-bottom: border-style(halfalpha(var(--fg)));
+  }
+
+  td, th {
+    padding: 0 0.5em;
+    vertical-align: text-bottom;
+  }
+}
+
+
+@layer boxes {
+  pre, aside, blockquote {
+    $hue: calc(h + var(--hue-nudge));
+    --box-bg: oklch(from var(--box-base) var(--luma) c #{$hue});
+    @include boxy(var(--box-bg), $clear: false);
+
+    --luma: calc(l * 1.05);
+    @media (prefers-color-scheme: dark) { --luma: calc(l / 1.05); }
+  }
+
+  :is(pre, .sourceCode, aside, blockquote) {
+    & + & { margin-top: 1.5em; }
+  }
+
+  pre {
+    --hue-nudge: 60;
+  }
+
+  aside {
+    @include note-font;
+    --hue-nudge: -80;
+  }
+
+  blockquote {
+    @include note-font;
+    --hue-nudge: 180;
+  }
+
+  .light {
+    @include apply-colors($fg: $darker, $bg: $lighter);
+  }
+}
+
+
+@layer conlangs {
+  .ipa { @include ipa-font; }
+
+  .lang, .ebnf-t {
+    @include ipa-font;
+    font-weight: 700;
+    font-variation-settings: "ENLA" 25;
+      /* ENLA (increased x-height) not defined for IPA characters */
+  }
+
+  .scr {
+    vertical-align: -40%;
+    height: 1.5em;
+
+    :is(.gloss, .bigscr) & { height: 2em; }
+    .hugescr & { height: 4em; }
+  }
+
+  .gloss {
+    border: none;
+    text-align: left;
+    & + & { margin-top: 2em; }
+  }
+
+  .gloss-split, .gloss-gloss { @include small-font; }
+
+  .glosses.left .gloss { margin-left: 0; }
+
+  .abbr-list {
+    dl {
+      display: grid;
+      grid-template-columns: 1fr 8fr 1fr 8fr;
+    }
+    dt { @extend .abbr; }
+  }
+
+}
+
+
+@layer spans {
+
+  dfn, b, strong, dt { font-weight: $bold-weight; }
+
+  dfn { font-style: normal; }
+
+  abbr, .abbr { font-variant: all-small-caps; }
+
+  u u { text-decoration: double underline; }
+
+  .note { @include note-font; }
+  :is(h1, h2) .note { font-size: 75%; }
+
+  mark {
+    --mark-hue: calc(var(--hue) + 90)
+    padding: 0 0.35ch;
+    mix-blend-mode: multiply;
+    background: oklch(95% 40% var(--mark-hue) / 30%);
+
+    @media (prefers-color-scheme: dark) {
+      mix-blend-mode: screen;
+    }
+  }
+
+}
+
+@layer lists {
+  :not(ol) > li {
+    list-style: '☀ ';
+
+    &::marker {
+      @include symbol-font;
+      font-size: 80%;
+    }
+  }
+
+}
+
+
+@layer dl {
+
+  dt {
+    font-weight: bold;
+    display: inline;
+    break-after: avoid;
+  }
+
+  dd {
+    margin-left: 1em;
+    display: inline;
+    break-before: avoid;
+  }
+
+  dd::after {
+    content: '';
+    display: block;
+  }
+
+}
+
+@layer twocol {
+  .twocol {
+    columns: 2;
+    > :first-child { margin-top: 0; }
+  }
+
+  .twocol-grid {
+    display:               grid;
+    grid-template-columns: 1fr 1fr;
+    gap:                   1em;
+  }
+}
+
+@layer ebnf {
+
+  .ebnf {
+    border: none;
+  }
+
+  .ebnf td {
+    padding: 0 0.15em;
+  }
+
+  .ebnf-nt {
+    font-weight: bold;
+    color: hsl(155deg, 80%, 30%);
+    white-space: nowrap;
+  }
+
+  .ebnf-punc {
+    color: hsl(25deg, 40%, 30%);
+  }
+
+  .ebnf-sub, .ebnf-brack {
+    color: hsl(210deg, 80%, 35%);
+    font-weight: bold;
+  }
+
+  .ebnf-brack {
+    padding: 0 0.05em;
+  }
+
+  .ebnf-s {
+    font-style: italic;
+    color: hsl(330deg, 80%, 30%);
+  }
+}
+
+
+@layer floats {
+  .floating {
+    max-width: 33%;
+    margin: 0.5em 1em;
+
+    &:not(.left) {
+      float: right;
+      margin-right: 0;
+    }
+
+    &.left {
+      float: left;
+      margin-left: 0;
+    }
+  }
+
+  .shaped { shape-margin: 1em; }
+}
+
+
+@layer images {
+
+  .pixel {
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+  }
+
+  .emoji {
+    height: 1em;
+    width:  1em;
+    vertical-align: -0.1em;
+  }
+
+  .bigemoji {
+    height: 2em;
+    width:  2em;
+    vertical-align: -0.2em;
+  }
+
+  .emojiseq { white-space: nowrap; }
+}
+
+@layer citations {
+
+.citation {
+  font-size: 90%;
+}
+
+#refs {
+  margin-top: 0.75em;
+}
+.csl-entry {
+  margin-left: 2em;
+  text-indent: -2em;
+}
+
+}
+
+@layer math {
+
+  math[display=block] {
+    border: 2px solid var(--fg);
+
+    padding: 1em 3em;
+    margin: auto;
+    width: min-content;
+
+  }
+  .rulebox math[display=block] {
+    border: none;
+    padding: 0;
+  }
+
+  .texdefs {
+    display: none;
+  }
+
+  .rulebox {
+    float: right;
+    border: 1px solid var(--fg);
+    background: #ffffff66;
+    padding: .4em 1.2em;
+    margin-left: 3em;
+
+    // "#asd" for specificity
+    :is(p, .math, mjx-container, #asd) {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+}
diff --git a/style/paper.png b/style/paper.png
deleted file mode 100644
index 5977961..0000000
Binary files a/style/paper.png and /dev/null differ
diff --git a/templates/foot.html b/templates/foot.html
index 2af6f48..63b964e 100644
--- a/templates/foot.html
+++ b/templates/foot.html
@@ -1,10 +1,10 @@
 $if(hide-footer)$$else$
 <footer>
-  <ul>
+  <menu>
     <li><a href=/index.html>all posts</a>
     <li><a href=/all-tags.html>all tags</a>
     <li><a href=/rss.xml>rss</a>
-  </ul>
+  </menu>
 </footer>
 $endif$
 
diff --git a/templates/head.html b/templates/head.html
index 7e6b37c..2cbac9f 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -4,11 +4,16 @@
 <meta name=viewport content="width=device-width, initial-scale=1">
 
 <link rel=stylesheet href=/style/page.css>
+$if(meta)$
+<link rel=stylesheet href=/style/meta.css>
+$endif$
 $for(css)$
 <link rel=stylesheet href=/style/$css$>
 $endfor$
 <link rel=alternate href=/rss.xml type=application/rss+xml>
 
+<script src=/script/hue.js type=module></script>
+
 $for(header-includes)$
 $header-includes$
 $endfor$
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..309f42d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmitOnError": true,
+    "lib": ["ES2021", "dom"],
+    "target": "ES2015"
+  }
+}