diff --git a/src/_includes/layouts/base.html b/src/_includes/layouts/base.html
index fae8088..dc9c2ce 100644
--- a/src/_includes/layouts/base.html
+++ b/src/_includes/layouts/base.html
@@ -22,10 +22,10 @@
                     src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"></script>
         {% endif %}
     </head>
-    <body class="[ flex-col ]">
+    <body class="flex-col">
         {% noRobots %}
         {% include "partials/header.html" %}
-        <main id="main" class="[ flow flex-1 wrapper ]" tabindex="-1">
+        <main id="main" class="flow flex-1 wrapper" tabindex="-1">
             {{ content | safe }}
         </main>
         {% include "partials/footer.html" %}
diff --git a/src/_includes/layouts/book.html b/src/_includes/layouts/book.html
index bb075f8..9c46c8e 100644
--- a/src/_includes/layouts/book.html
+++ b/src/_includes/layouts/book.html
@@ -38,10 +38,10 @@ layout: "layouts/base"
     </div>
 </footer>
 <hr class="my-2">
-<ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+<ul class="categories cluster list-none p-0 line-height-m">
     {% for tag in tags | filter("book") %}
         <li>
-            <a class="[ button ]" href="/books/tag/{{ tag | slugify }}">
+            <a class="button" href="/books/tag/{{ tag | slugify }}">
                 {% include "svgs/frame.svg" %}
             {{ tag }}</a>
         </li>
diff --git a/src/_includes/layouts/game.html b/src/_includes/layouts/game.html
index f2ce8b0..9edb458 100644
--- a/src/_includes/layouts/game.html
+++ b/src/_includes/layouts/game.html
@@ -41,10 +41,10 @@ layout: "layouts/base"
     </div>
 </footer>
 <hr class="my-2">
-<ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+<ul class="categories cluster list-none p-0 line-height-m">
     {% for tag in tags | filter("game") %}
         <li>
-            <a class="[ button ]" href="/books/tag/{{ tag | slugify }}">
+            <a class="button" href="/books/tag/{{ tag | slugify }}">
                 {% include "svgs/frame.svg" %}
             {{ tag }}</a>
         </li>
diff --git a/src/_includes/layouts/post.html b/src/_includes/layouts/post.html
index d4a2fc5..09860ee 100644
--- a/src/_includes/layouts/post.html
+++ b/src/_includes/layouts/post.html
@@ -3,15 +3,15 @@ layout: "layouts/base"
 ---
 
 {% from "macros/date.njk" import format %}
-<article class="[ flow ]">
-    <header class="[ flow flow-space-1 mb-2 ]">
+<article class="flow">
+    <header class="flow flow-space-1 mb-2">
         {{ format(page.date) }}
         <h1>{{ title }}</h1>
-        <p class="[ text-fadeText flow-space-0.25 ]">{{ excerpt }}</p>
-        <ul class="[ categories ] [ cluster list-none p-0 flow-space-2 line-height-m ]">
+        <p class="text-fadeText flow-space-0.25">{{ excerpt }}</p>
+        <ul class="categories cluster list-none p-0 flow-space-2 line-height-m">
             {% for tag in tags | filter(["post"]) %}
                 <li>
-                    <a class="[ button ]" href="/tags/{{ tag | slugify }}">
+                    <a class="button" href="/tags/{{ tag | slugify }}">
                         {% include "svgs/frame.svg" %}
                     {{ tag }}</a>
                 </li>
diff --git a/src/_includes/macros/catalogue.njk b/src/_includes/macros/catalogue.njk
deleted file mode 100644
index 69ba1d5..0000000
--- a/src/_includes/macros/catalogue.njk
+++ /dev/null
@@ -1,26 +0,0 @@
-{% from "macros/utils.njk" import stars %}
-{% macro one(post, format, showType = true) %}
-    <article class="[ posts-list-item column-gap-0.5 justify-between line-height-m ]">
-        <div class="[ cluster gap-0.5 ]">
-            <a href="{{ post.url }}" class="[ line-height-m ]">{{ post.data.title }}</a>
-            {% if showType %}<p class="[ font-size-s text-fadeText ]">{{ post.data.tags[1] }}</p>{% endif %}
-        </div>
-        <div class="[ cluster ]">
-            {% if post.data.rating %}{{ stars(post.data.rating) }}{% endif %}
-        </div>
-    </article>
-{% endmacro %}
-{% macro list(posts, showType = true) %}
-    <ol class="[ flow p-0 ]" role="list">
-        {% for post in posts %}<li>{{ one(post, format, showType) }}</li>{% endfor %}
-    </ol>
-{% endmacro %}
-{% macro yearList(posts, year, format = "MM/DD", showType = true) %}
-    <section class="[ flow ]">
-        <header class="[ cluster gap-0.5 ]">
-            <h2>{{ year }}</h2>
-            <p class="[ pill ]">{{ posts | length }}</p>
-        </header>
-        {{ list(posts, format) }}
-    </section>
-{% endmacro %}
diff --git a/src/_includes/macros/date.njk b/src/_includes/macros/date.njk
index 75570bb..21c70c2 100644
--- a/src/_includes/macros/date.njk
+++ b/src/_includes/macros/date.njk
@@ -1,6 +1,6 @@
 {% macro format(dateString) %}
-    <time class="[ date ] [ flex items-center gap-0.5 text-fadeText ]"
+    <time class="date flex items-center gap-0.5 text-fadeText"
           datetime="{{ dateString }}">
-        <span class="[ text-primary line-height-s ]">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
+        <span class="text-primary line-height-s">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
     </time>
 {% endmacro %}
diff --git a/src/_includes/macros/posts.njk b/src/_includes/macros/posts.njk
index a7189a0..99a64f5 100644
--- a/src/_includes/macros/posts.njk
+++ b/src/_includes/macros/posts.njk
@@ -1,20 +1,20 @@
 {% macro one(post, fmt = "MM/DD") %}
-    <article class="[ posts-list-item column-gap-0.5 justify-between line-height-l ]">
+    <article class="posts-list-item column-gap-0.5 justify-between line-height-l">
         <a href="{{ post.url }}">{{ post.data.title }}</a>
-        <time datetime="{{ post.date }}" class="[ text-fadeText ]">{{ post.date | formatDate(fmt) }}</time>
-        <p class="[ text-fadeText font-size-s line-height-m ]">{{ post.data.excerpt }}</p>
+        <time datetime="{{ post.date }}" class="text-fadeText">{{ post.date | formatDate(fmt) }}</time>
+        <p class="text-fadeText font-size-s line-height-m">{{ post.data.excerpt }}</p>
     </article>
 {% endmacro %}
 {% macro list(posts, format = "MM/DD") %}
-    <ol class="[ flow p-0 ]" role="list">
-        {% for post in posts %}<li class="[ flow-space-0.5 ]">{{ one(post, format) }}</li>{% endfor %}
+    <ol class="flow p-0" role="list">
+        {% for post in posts %}<li class="flow-space-0.5">{{ one(post, format) }}</li>{% endfor %}
     </ol>
 {% endmacro %}
 {% macro yearList(posts, year, format = "MM/DD") %}
-    <section class="[ flow ]">
-        <header class="[ cluster gap-0.5 ]">
+    <section class="flow">
+        <header class="cluster gap-0.5">
             <h2>{{ year }}</h2>
-            <p class="[ pill ]">{{ posts | length }}</p>
+            <p class="pill">{{ posts | length }}</p>
         </header>
         {{ list(posts, format) }}
     </section>
diff --git a/src/_includes/macros/utils.njk b/src/_includes/macros/utils.njk
index 8caa05a..e1dcc18 100644
--- a/src/_includes/macros/utils.njk
+++ b/src/_includes/macros/utils.njk
@@ -1,13 +1,13 @@
 {% macro stars(number) %}
     {% set filledStars = number %}
     {% set emptyStars = 5 - number %}
-    <ul class="[ stars ] [ flex list-none p-0 mb-0 text-primary ]"
+    <ul class="stars flex list-none p-0 mb-0 text-primary"
         aria-description="{{ number }} out of 5 stars">
         {% for i in range(0, filledStars) %}
-            <li class="[ star-filled ]">{% include "svgs/star.svg" %}</li>
+            <li class="star-filled">{% include "svgs/star.svg" %}</li>
         {% endfor %}
         {% for i in range(0, emptyStars) %}
-            <li class="[ star-empty ]">{% include "svgs/star-empty.svg" %}</li>
+            <li class="star-empty">{% include "svgs/star-empty.svg" %}</li>
         {% endfor %}
     </ul>
 {% endmacro %}
diff --git a/src/_includes/partials/catalogue-types.html b/src/_includes/partials/catalogue-types.html
deleted file mode 100644
index d59ade1..0000000
--- a/src/_includes/partials/catalogue-types.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% set catalogueTypes = collections.catalogueByType | keys %}
-<ul class="[ cluster p-0 gap-0.5 ]" role="list">
-    <li>
-        <a class="[ button ]" href="/catalogue">all<span class="[ button__count ]">{{ collections.catalogue | length }}</span></a>
-    </li>
-    {% for type in catalogueTypes %}
-        <li>
-            <a class="[ button ]" href="/catalogue/{{ type | pluralize }}">{{ type | pluralize }}<span class="[ button__count ]">{{ collections.catalogueByType[ type ] | length }}</span></a>
-        </li>
-    {% endfor %}
-</ul>
diff --git a/src/_includes/partials/footer.html b/src/_includes/partials/footer.html
index adf2401..e981342 100644
--- a/src/_includes/partials/footer.html
+++ b/src/_includes/partials/footer.html
@@ -1,9 +1,9 @@
-<footer class="[ bg-surface mt-1.5 py-1.5 ]">
-    <div class="[ wrapper flow ]">
-        <div class="[ repel ]">
+<footer class="bg-surface mt-1.5 py-1.5">
+    <div class="wrapper flow">
+        <div class="repel">
             <p>&copy; {{ meta.author }} 2018 - 2025.</p>
             <nav>
-                <ul class="[ cluster p-0 m-0 line-height-m ]" role="list">
+                <ul class="cluster p-0 m-0 line-height-m" role="list">
                     {% for link in navigation.bottom %}
                         <li>
                             <a href="{{ link.url }}">{{ link.text }}</a>
@@ -12,21 +12,19 @@
                 </ul>
             </nav>
         </div>
-        <div class="[ repel ]">
-            <nav class="[ flow-space-0.5 ]">
-                <ul class="[ cluster p-0 m-0 gap-0.5 ]" role="list">
+        <div class="repel">
+            <nav class="flow-space-0.5">
+                <ul class="cluster p-0 m-0 gap-0.5" role="list">
                     <li>
-                        <span class="[ visually-hidden ]">Feeds</span>
-                        <a href="/feeds"
-                           class="[ button button--alt ]"
-                           aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
+                        <span class="visually-hidden">Feeds</span>
+                        <a href="/feeds" class="button button--alt" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
                     </li>
                     {% for key, url in meta.social %}
                         {% set alt = key | capitalize %}
                         <li>
-                            <span class="[ visually-hidden ]">{{ alt }}</span>
+                            <span class="visually-hidden">{{ alt }}</span>
                             <a href="{{ url }}"
-                               class="[ button button--alt ]"
+                               class="button button--alt"
                                target="_blank"
                                rel="me external noreferrer noopener"
                                aria-label="View {{ alt }} page">{% include "svgs/social-" + key + ".svg" %}</a>
@@ -34,7 +32,7 @@
                     {% endfor %}
                 </ul>
             </nav>
-            <ul class="[ cluster p-0 m-0 ]" role="list">
+            <ul class="cluster p-0 m-0" role="list">
                 <li>
                     <a href="/webrings">Webrings</a>
                 </li>
diff --git a/src/_includes/partials/header.html b/src/_includes/partials/header.html
index 593a12a..618c8fa 100644
--- a/src/_includes/partials/header.html
+++ b/src/_includes/partials/header.html
@@ -1,9 +1,9 @@
-<header class="[ navbar ][ py-1 mb-2 ]">
+<header class="navbar py-1 mb-2">
     <a href="#main">Skip to content</a>
-    <div class="[ wrapper ]">
-        <nav class="[ repel ]">
-            <div class="[ site-logo ] [ flex items-center gap-0.5 ]">
-                <a class="[ logo ] [ flex items-center justify-center ]"
+    <div class="wrapper">
+        <nav class="repel">
+            <div class="site-logo flex items-center gap-0.5">
+                <a class="logo flex items-center justify-center"
                    aria-label="Go to index"
                    href="{{ meta.url }}">
                     <img eleventy:ignore
@@ -12,9 +12,7 @@
                          height="32"
                          alt="" />
                 </a>
-                <a class="[ wordmark ] [ flex ]"
-                   href="{{ meta.url }}"
-                   aria-label="Go to index">
+                <a class="wordmark flex" href="{{ meta.url }}" aria-label="Go to index">
                     <svg height="0" width="0">
                         <filter id="3d_text" color-interpolation-filters="sRGB">
                         <feDropShadow dx="0" dy="1" stdDeviation="0" flood-opacity="1" flood-color="var(--color-shadow)" />
diff --git a/src/_includes/partials/menu.html b/src/_includes/partials/menu.html
index 56c6465..51b68ea 100644
--- a/src/_includes/partials/menu.html
+++ b/src/_includes/partials/menu.html
@@ -1,10 +1,10 @@
-<ul class="[ menu ] [ list-none cluster p-0 m-0 ]">
+<ul class="menu list-none cluster p-0 m-0">
     {% for item in navigation.top %}
         <li>
-            <a class="[ button button--alt font-size-s line-height-m ]"
+            <a class="button button--alt font-size-s line-height-m"
                href="{{ item.url }}">
                 {% include "svgs/" + item.icon + ".svg" %}
-                <span class="[ visually-hidden ]">{{ item.text }}</span></a>
+                <span class="visually-hidden">{{ item.text }}</span></a>
         </li>
     {% endfor %}
 </ul>
diff --git a/src/index.html b/src/index.html
index 40bb9b1..6cdf189 100644
--- a/src/index.html
+++ b/src/index.html
@@ -33,7 +33,7 @@ permalink: /
         <h2>Other pages</h2>
         <p>Some of my other pages you can check out!</p>
     </header>
-    <ul class="[ cluster p-0 gap-0.5 list-none ]" role="list">
+    <ul class="cluster p-0 gap-0.5 list-none" role="list">
         <li>
             <a href="/about" class="button">About</a>
         </li>
diff --git a/src/pages/404.html b/src/pages/404.html
index 68e7d39..ed504b5 100644
--- a/src/pages/404.html
+++ b/src/pages/404.html
@@ -4,7 +4,7 @@ title: 404 - Can't Find That Frog
 youtube: true
 ---
 
-<section class="[ flow ]">
+<section class="flow">
     <h1>404 🍞</h1>
     <p>Couldn't find what you're looking for. But would you like some bread for your journey home? 🥖</p>
     {% youtube "GQw-aEk05qY", "Call 1800 Tobë ( Bread Ad )" %}
diff --git a/src/pages/blogroll.html b/src/pages/blogroll.html
index 7499d13..213265f 100644
--- a/src/pages/blogroll.html
+++ b/src/pages/blogroll.html
@@ -3,7 +3,7 @@ title: Blogroll
 description: A collection of my favourite sites.
 ---
 
-<section class="[ flow ]">
+<section class="flow">
     <h1>Blogroll</h1>
     <p>A collection of my favourite sites, in no particular order.</p>
     <p>
diff --git a/src/pages/books/index.html b/src/pages/books/index.html
index daf37ec..ecdecac 100644
--- a/src/pages/books/index.html
+++ b/src/pages/books/index.html
@@ -13,10 +13,10 @@ permalink: "books/index.html"
     <h2>
         <a href="tags">Tags</a>
     </h2>
-    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+    <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="tag/{{ tag.tag | slugify }}">
+                <a class="button" href="tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>
diff --git a/src/pages/books/tags.html b/src/pages/books/tags.html
index 7646bc0..df7b128 100644
--- a/src/pages/books/tags.html
+++ b/src/pages/books/tags.html
@@ -7,10 +7,10 @@ permalink: "books/tags/index.html"
 {% set tags = collections.book | allTagCounts(["book"]) %}
 <section class="flow">
     <h1>Tagged in Books</h1>
-    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+    <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                <a class="button" href="../tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>
diff --git a/src/pages/contact.html b/src/pages/contact.html
index 2a2b4a3..747b9f3 100644
--- a/src/pages/contact.html
+++ b/src/pages/contact.html
@@ -86,6 +86,18 @@ permalink: "/contact/index.html"
                 <td>Battle.net</td>
                 <td>Armitage#1801</td>
             </tr>
+            <tr>
+                <td>Apple Music</td>
+                <td>
+                    <a href="https://music.apple.com/profile/wonderfulfrog" target="_blank">wonderfulfrog</a>
+                </td>
+            </tr>
+            <tr>
+                <td>Backloggd</td>
+                <td>
+                    <a href="https://www.backloggd.com/u/wonderfulfrog" target="_blank">wonderfulfrog</a>
+                </td>
+            </tr>
         </tbody>
     </table>
 </section>
diff --git a/src/pages/fun/ray.html b/src/pages/fun/ray.html
index 213e020..88231a5 100644
--- a/src/pages/fun/ray.html
+++ b/src/pages/fun/ray.html
@@ -1,5 +1,6 @@
 ---
 permalink: /ray/index.html
+layout: null
 ---
 
 Welcome to your space Ray. The content will never change.
diff --git a/src/pages/games/index.html b/src/pages/games/index.html
index 1db6701..8ae7c7a 100644
--- a/src/pages/games/index.html
+++ b/src/pages/games/index.html
@@ -15,10 +15,10 @@ permalink: "games/index.html"
     <h2>
         <a href="tags">Tags</a>
     </h2>
-    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+    <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="tag/{{ tag.tag | slugify }}">
+                <a class="button" href="tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>
diff --git a/src/pages/games/tags.html b/src/pages/games/tags.html
index 4f176e8..c019718 100644
--- a/src/pages/games/tags.html
+++ b/src/pages/games/tags.html
@@ -7,10 +7,10 @@ permalink: "games/tags/index.html"
 {% set tags = collections.game | allTagCounts(["game"]) %}
 <section class="flow">
     <h1>Tagged in Games</h1>
-    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+    <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                <a class="button" href="../tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>
diff --git a/src/pages/links.md b/src/pages/links.md
deleted file mode 100644
index c0854d6..0000000
--- a/src/pages/links.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Links
----
-
-# Find me online
-
-Other places I have an online presence.
-
-## Socials
-
-- [Mastodon][mastodon]
-
-- [Last.fm][lastfm]
-
-- [GitHub][github]
-
-- [Apple Music][applemusic]
-
-- [LinkedIn][linkedin]
-
-- [Backloggd][backloggd]
-
-[mastodon]: {{ meta.social.mastodon }}
-[lastfm]: {{ meta.social.lastfm }}
-[github]: {{ meta.social.github }}
-[applemusic]: https://music.apple.com/profile/wonderfulfrog
-[linkedin]: https://www.linkedin.com/in/devin-haska-bb90a7253
-[backloggd]: https://www.backloggd.com/u/wonderfulfrog
diff --git a/src/pages/now.html b/src/pages/now.html
index f664b23..a62027c 100644
--- a/src/pages/now.html
+++ b/src/pages/now.html
@@ -8,7 +8,7 @@ description: What's going on now and all the latest with myself.
 <p>What am I doing right now? Everything on here is automatically generated from various data sources.</p>
 {% if letterboxd.length > 0 %}
     <h2>🍿 Movies</h2>
-    <ul class="[ media-grid ][ p-0 ]" role="list">
+    <ul class="media-grid p-0" role="list">
         {% for movie in letterboxd %}
             <li class="radius-0.5">
                 <a href="{{ movie.url }}"
@@ -17,7 +17,7 @@ description: What's going on now and all the latest with myself.
                     {% set textContent %}
                         {{ movie.title }}
                     {% endset %}
-                    <p class="[ visually-hidden ]">{{ movie.title }}</p>
+                    <p class="visually-hidden">{{ movie.title }}</p>
                     {% if movie.imgSrc %}
                         <img src="{{ movie.imgSrc }}" alt="" />
                     {% else %}
@@ -28,6 +28,6 @@ description: What's going on now and all the latest with myself.
         {% endfor %}
     </ul>
 {% endif %}
-<p class="[ font-size-s mt-2 ]">
+<p class="font-size-s mt-2">
     What is a `/now` page? Check out <a href="https://nownownow.com/about">nownownow.com</a>.
 </p>
diff --git a/src/pages/posts.html b/src/pages/posts.html
index 8ff2bf5..0c47611 100644
--- a/src/pages/posts.html
+++ b/src/pages/posts.html
@@ -10,7 +10,7 @@ description: Read all of my posts.
 </p>
 {% set itemsByYear = collections.post | reverse | organizeByDate %}
 {% set years = itemsByYear | keys | sort("desc") %}
-<section class="[ flow ]">
+<section class="flow">
     {% for year in years %}
         {% set itemsInYear = itemsByYear[year] %}
         {{ yearList(itemsInYear, year) }}
diff --git a/src/pages/styleguide.html b/src/pages/styleguide.html
index aa3650b..7dfacf7 100644
--- a/src/pages/styleguide.html
+++ b/src/pages/styleguide.html
@@ -23,24 +23,24 @@ description: A demo of the site's theme.
     An abbreviation: <abbr title="Hypertext Markup Language">HTML</abbr>
 </p>
 <hr />
-<div class="[ flex ]">
-    <div class="[ size-2 ]" style="background-color: var(--color-primary)"></div>
-    <div class="[ size-2 ]" style="background-color: var(--color-secondary)"></div>
-    <div class="[ size-2 ]" style="background-color: var(--color-background)"></div>
-    <div class="[ size-2 ]" style="background-color: var(--color-surface)"></div>
-    <div class="[ size-2 ]" style="background-color: var(--color-border)"></div>
-    <div class="[ size-2 ]" style="background-color: var(--color-text)"></div>
-    <div class="[ size-2 ]" style="background-color: var(--color-fadeText)"></div>
-    <div class="[ size-2 ]" style="background-color: var(--color-shadow)"></div>
+<div class="flex">
+    <div class="size-2" style="background-color: var(--color-primary)"></div>
+    <div class="size-2" style="background-color: var(--color-secondary)"></div>
+    <div class="size-2" style="background-color: var(--color-background)"></div>
+    <div class="size-2" style="background-color: var(--color-surface)"></div>
+    <div class="size-2" style="background-color: var(--color-border)"></div>
+    <div class="size-2" style="background-color: var(--color-text)"></div>
+    <div class="size-2" style="background-color: var(--color-fadeText)"></div>
+    <div class="size-2" style="background-color: var(--color-shadow)"></div>
 </div>
 <hr />
-<div class="[ flex gap-1 ]">
-    <a href="#" class="[ button ]">A button</a>
-    <a href="#" class="[ button ]">A button with count <span class="[ button__count ]">4</span></a>
+<div class="flex gap-1">
+    <a href="#" class="button">A button</a>
+    <a href="#" class="button">A button with count <span class="button__count">4</span></a>
 </div>
-<div class="[ flex flex-wrap gap-1 ]">
-    <p class="[ pill ]">A pill</p>
-    <p class="[ pill ]">99+</p>
+<div class="flex flex-wrap gap-1">
+    <p class="pill">A pill</p>
+    <p class="pill">99+</p>
 </div>
 <hr />
 <a href="#">A link</a>
diff --git a/src/pages/tag.html b/src/pages/tag.html
index 38ef73a..2d97ef4 100644
--- a/src/pages/tag.html
+++ b/src/pages/tag.html
@@ -17,7 +17,7 @@ eleventyComputed:
 </p>
 {% set itemsByYear = collections.postsByTag[tag] | reverse | organizeByDate %}
 {% set years = itemsByYear | keys | sort("desc") %}
-<section class="[ flow ]">
+<section class="flow">
     {% for year in years %}
         {% set itemsInYear = itemsByYear[year] %}
         {{ yearList(itemsInYear, year) }}
diff --git a/src/pages/tags.html b/src/pages/tags.html
index a858f24..65c8b0d 100644
--- a/src/pages/tags.html
+++ b/src/pages/tags.html
@@ -4,12 +4,12 @@ description: Browse posts by all tags.
 ---
 
 {% set tags = collections.post | allTagCounts %}
-<section class="[ flow ]">
+<section class="flow">
     <h1>{{ title }}</h1>
-    <ol class="[ cluster p-0 gap-0.5 ]" role="list">
+    <ol class="cluster p-0 gap-0.5" role="list">
         {% for tag in tags %}
             <li>
-                <a href="/tags/{{ tag.tag | slugify }}" class="[ button ]">{{ tag.tag }} <span class="[ button__count ]">{{ tag.count }}</span></a>
+                <a href="/tags/{{ tag.tag | slugify }}" class="button">{{ tag.tag }} <span class="button__count">{{ tag.count }}</span></a>
             </li>
         {% endfor %}
     </ol>
diff --git a/src/pages/watching/movies/recent.html b/src/pages/watching/movies/recent.html
index b286662..8a832b7 100644
--- a/src/pages/watching/movies/recent.html
+++ b/src/pages/watching/movies/recent.html
@@ -12,10 +12,10 @@ permalink: "watching/movies/recent/index.html"
     <h2>
         <a href="../tags">Tags</a>
     </h2>
-    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+    <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                <a class="button" href="../tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>
diff --git a/src/pages/watching/movies/tags.html b/src/pages/watching/movies/tags.html
index 6588db4..e474bd2 100644
--- a/src/pages/watching/movies/tags.html
+++ b/src/pages/watching/movies/tags.html
@@ -7,10 +7,10 @@ permalink: "watching/movies/tags/index.html"
 {% set tags = collections.movie | allTagCounts(["movie"]) %}
 <section class="flow">
     <h1>Tagged in Movies</h1>
-    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+    <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                <a class="button" href="../tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>
diff --git a/src/pages/watching/shows/recent.html b/src/pages/watching/shows/recent.html
index a254b38..2a142be 100644
--- a/src/pages/watching/shows/recent.html
+++ b/src/pages/watching/shows/recent.html
@@ -12,10 +12,10 @@ permalink: "watching/shows/recent/index.html"
     <h2>
         <a href="../tags">Tags</a>
     </h2>
-    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+    <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                <a class="button" href="../tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>
diff --git a/src/pages/watching/shows/tags.html b/src/pages/watching/shows/tags.html
index e630dd9..effd950 100644
--- a/src/pages/watching/shows/tags.html
+++ b/src/pages/watching/shows/tags.html
@@ -7,10 +7,10 @@ permalink: "watching/shows/tags/index.html"
 {% set tags = collections.tv | allTagCounts(["tv"]) %}
 <section class="flow">
     <h1>Tagged in Shows</h1>
-    <ul class="[ categories ] [ cluster list-none p-0 line-height-m ]">
+    <ul class="categories cluster list-none p-0 line-height-m">
         {% for tag in tags %}
             <li>
-                <a class="[ button ]" href="../tag/{{ tag.tag | slugify }}">
+                <a class="button" href="../tag/{{ tag.tag | slugify }}">
                     {% include "svgs/frame.svg" %}
                 {{ tag.tag }}</a>
             </li>
diff --git a/src/pages/webrings.html b/src/pages/webrings.html
index eabf2c5..2bb2afd 100644
--- a/src/pages/webrings.html
+++ b/src/pages/webrings.html
@@ -12,23 +12,23 @@ description: What's a webring?
     <a href="https://cs.sjoy.lol/" target="_blank">CSS JOY Webring</a>
 </h2>
 <p>For those of us who take joy in messing around with CSS :)</p>
-<ul class="[ cluster ][ list-none p-0 ]">
+<ul class="cluster list-none p-0">
     <li>
-        <a class="[ button ]"
+        <a class="button"
            href="https://webri.ng/webring/cssjoy/previous?via=https://wonderfulfrog.com/">
             {% include "svgs/arrow-left.svg" %}
             <span class="visually-hidden">Previous website</span>
         </a>
     </li>
     <li>
-        <a class="[ button ]"
+        <a class="button"
            href="https://webri.ng/webring/cssjoy/random?via=https://wonderfulfrog.com/">
             {% include "svgs/dice.svg" %}
             <span class="visually-hidden">Random website</span>
         </a>
     </li>
     <li>
-        <a class="[ button ]"
+        <a class="button"
            href="https://webri.ng/webring/cssjoy/next?via=https://wonderfulfrog.com/">
             {% include "svgs/arrow-right.svg" %}
             <span class="visually-hidden">Next website</span>
