diff --git a/.gitignore b/.gitignore
index 4cf7aec..4f19501 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,3 @@ _build
 _tmp
 .directory
 *~
-.sass-cache
diff --git a/Makefile b/Makefile
index 21957d6..05d26f8 100644
--- a/Makefile
+++ b/Makefile
@@ -19,17 +19,16 @@ OUTPUTPOSTS = \
   $(BUILDDIR)/index.html $(BUILDDIR)/rss.xml
 
 STYLE != find style -type f
-OUTPUTSTYLE = $(patsubst %.scss,%.css,$(patsubst %,$(BUILDDIR)/%,$(STYLE)))
+OUTPUTSTYLE = $(patsubst %,$(BUILDDIR)/%,$(STYLE))
 
-SCRIPT != find script -type f
-OUTPUTSCRIPT = $(patsubst %.ts,%.js,$(patsubst %,$(BUILDDIR)/%,$(SCRIPT)))
-
-OUTPUT = $(OUTPUTPOSTS) $(OUTPUTSTYLE) $(OUTPUTSCRIPT)
+OUTPUT = $(OUTPUTPOSTS) $(OUTPUTSTYLE)
 
 ALL_TAGS = $(TMPDIR)/all-tags
 POST_LISTS = $(TMPDIR)/post-lists
 COMBO_FILTER = $(TMPDIR)/combo-filter
-EXECS = $(ALL_TAGS) $(POST_LISTS) $(COMBO_FILTER)
+EXECS = \
+  $(LAANTAS_SCRIPT) \
+  $(ALL_TAGS) $(POST_LISTS) $(COMBO_FILTER)
 
 CABAL_FLAGS ?= -O
 
@@ -59,17 +58,8 @@ $(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)
 
-$(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 $@) $^
+.PHONY: langfilter laantas-script
+langfilter laantas-script: %: ; cabal build $@
 
 # $(1): template file
 # $(2): extra flags
diff --git a/blog-meta/all-tags.hs b/blog-meta/all-tags.hs
index e2e7c02..9bbc6ec 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", "meta" ##= True,
-     "all-tags" ##= collate tags]
+    [("title"    ##= YAML.str "all tags"),
+     ("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 a90305e..50ee795 100644
--- a/blog-meta/lib/NiceDate.hs
+++ b/blog-meta/lib/NiceDate.hs
@@ -1,10 +1,10 @@
 module NiceDate (niceDate) where
 
-import Control.Monad.Writer
-import Data.Map.Strict qualified as Map
-import Data.Monoid
-import Misc
 import Text.Pandoc.Definition
+import qualified Data.Map.Strict as Map
+import Misc
+import Control.Monad.Writer
+import Data.Monoid
 
 niceDate :: Meta -> Meta
 niceDate (Meta m) =
diff --git a/blog-meta/lib/SlugTags.hs b/blog-meta/lib/SlugTags.hs
index 599f4ba..a614d1f 100644
--- a/blog-meta/lib/SlugTags.hs
+++ b/blog-meta/lib/SlugTags.hs
@@ -1,9 +1,10 @@
 module SlugTags (slugTags) where
 
-import Data.Map.Strict qualified as Map
+import Text.Pandoc.Definition
+import qualified Data.Map.Strict as Map
+-- import Text.Pandoc.JSON
 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 19200c3..4a68d43 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 System.IO qualified as IO
+import Data.ByteString (ByteString)
+import qualified Data.ByteString.Char8 as BS8
+import qualified Data.ByteString.Lazy as LazyBS
+import qualified System.IO as IO
 
 
 str' :: String -> Node ()
diff --git a/blog-meta/post-lists.hs b/blog-meta/post-lists.hs
index 01d61f9..cbdbe9a 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, "meta" ##= True]
+  val = YAML.obj [("title" ##= title), ("posts" ##= is)]
 
 allTags :: Foldable t => t PostInfo -> Set Text
 allTags = foldMap (Set.fromList . tags)
diff --git a/cabal.project b/cabal.project
index 15865bd..485c837 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: c4a430facbeaa55a9de8edd69145243475c94087
+  tag: ed54ec4c5af5b2b8ea25f0274e11c2f8c87714c3
   subdir: langfilter
 
 source-repository-package
   type: git
   location: https://git.rhiannon.website/rhi/lang.git
-  tag: c4a430facbeaa55a9de8edd69145243475c94087
+  tag: ed54ec4c5af5b2b8ea25f0274e11c2f8c87714c3
   subdir: laantas-script
 
 source-repository-package
diff --git a/posts/new-new-theme.md b/posts/new-new-theme.md
deleted file mode 100644
index 8ef62b9..0000000
--- a/posts/new-new-theme.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-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
deleted file mode 100644
index f003eb5..0000000
--- a/posts/new-theme.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-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 9c06c34..d40f526 100644
--- a/posts/quorientation.md
+++ b/posts/quorientation.md
@@ -29,8 +29,6 @@ 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ʊɫːɑ]
@@ -39,13 +37,18 @@ you know! the thing! from the game!
 - use your warps to skip some floors
 :::
 
-![well. from the fan translation](quorientation/skip-some-floors.png){.floating .right .pixel}
+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>
 
 - 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
+  :::{.aside .no-line}
   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.
@@ -85,7 +88,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
+  :::{.aside .no-line}
   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
@@ -109,7 +112,7 @@ babylon no longer exists, so it doesn't need protecting. go have fun
 
 # abbreviation list
 
-:::{.abbr-list}
+:::{.twocol .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 17c51f3..e71b0bc 100644
--- a/posts/rainbow-quox.md
+++ b/posts/rainbow-quox.md
@@ -6,18 +6,17 @@ summary: q.t. colour scheme generator
 header-includes: |
   <style>
     #relcolor {
-      max-width: 20em; margin: 1em auto auto;
-      display: grid; grid-template-columns: 1fr 1fr; gap: 3em;
+      max-width: 20em; margin: auto;
+      display: grid; grid-template-columns: 1fr 1fr; gap: .5em;
       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;
+      padding: .4em; border-radius: .5em;
       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); }
@@ -70,7 +69,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?
 
@@ -172,27 +171,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
deleted file mode 100644
index 2d4f459..0000000
--- a/script/hue.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-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
deleted file mode 100644
index 35c4393..0000000
--- a/style/colours.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-
-$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 53ceb1a..6821348 100644
--- a/style/counters.css
+++ b/style/counters.css
@@ -16,14 +16,53 @@
   suffix: " ";
 }
 
-main h1 {
-  &:not(.unnumbered) { counter-increment: h1; }
-
-  &::before {
-    font-family: PragmataPro;
-    font-style: normal;
-    content: counter(h1, inv-circled);
-    padding-right: 1ex;
-  }
-  &.unnumbered::before { content: "\2B8A"; }
+main :is(h1, h2, h3, h4, h5, h6):not(.unnumbered)::before {
+  padding-right: 1ex;
 }
+
+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);
+}
+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
deleted file mode 100644
index 30b9891..0000000
--- a/style/fonts.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@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
deleted file mode 100644
index cd16243..0000000
--- a/style/meta.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@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
new file mode 100644
index 0000000..0e2009e
Binary files /dev/null and b/style/niss.png differ
diff --git a/style/page.css b/style/page.css
new file mode 100644
index 0000000..6a16d69
--- /dev/null
+++ b/style/page.css
@@ -0,0 +1,708 @@
+@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
deleted file mode 100644
index dc76bd8..0000000
--- a/style/page.scss
+++ /dev/null
@@ -1,617 +0,0 @@
-@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
new file mode 100644
index 0000000..5977961
Binary files /dev/null and b/style/paper.png differ
diff --git a/templates/foot.html b/templates/foot.html
index 63b964e..2af6f48 100644
--- a/templates/foot.html
+++ b/templates/foot.html
@@ -1,10 +1,10 @@
 $if(hide-footer)$$else$
 <footer>
-  <menu>
+  <ul>
     <li><a href=/index.html>all posts</a>
     <li><a href=/all-tags.html>all tags</a>
     <li><a href=/rss.xml>rss</a>
-  </menu>
+  </ul>
 </footer>
 $endif$
 
diff --git a/templates/head.html b/templates/head.html
index 2cbac9f..7e6b37c 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -4,16 +4,11 @@
 <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
deleted file mode 100644
index 309f42d..0000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "noEmitOnError": true,
-    "lib": ["ES2021", "dom"],
-    "target": "ES2015"
-  }
-}