diff --git a/src/scss/_flex.scss b/src/scss/_flex.scss
deleted file mode 100644
index c1dc387..0000000
--- a/src/scss/_flex.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@use "sass:math";
-
-.flex {
-  display: flex;
-  flex-flow: row wrap;
-
-  &--row {
-    flex-direction: row;
-  }
-
-  &--column {
-    flex-direction: column;
-  }
-
-  &--nowrap {
-    flex-wrap: nowrap;
-  }
-
-  &--center {
-    justify-content: center;
-
-    &-v {
-      align-items: center;
-    }
-  }
-
-  &--end {
-    justify-content: flex-end;
-
-    &-v {
-      align-items: flex-end;
-    }
-  }
-
-  > .col {
-    flex: 1 0 0;
-    max-width: 100%;
-
-    &--center {
-      text-align: center;
-
-      &-v {
-        align-self: center;
-      }
-    }
-
-    @for $i from 1 through 12 {
-      &-#{$i} {
-        $width: percentage(math.div($i, 12));
-        flex: 0 0 $width;
-        max-width: $width;
-      }
-      @include mq-desktop {
-        &-d-#{$i} {
-          $width: percentage(math.div($i, 12));
-          flex: 0 0 $width;
-          max-width: $width;
-        }
-      }
-      @include mq-mobile {
-        &-m-#{$i} {
-          $width: percentage(math.div($i, 12));
-          flex: 0 0 $width;
-          max-width: $width;
-        }
-      }
-    }
-  }
-}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
deleted file mode 100644
index 0f0ab56..0000000
--- a/src/scss/_mixins.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@mixin mq-bigscreen() {
-  @media (min-width: 125em) {
-    @content;
-  }
-}
-
-@mixin mq-desktop() {
-  @media (min-width: 50em) {
-    @content;
-  }
-}
-
-@mixin mq-mobile() {
-  @media (max-width: 35em) {
-    @content;
-  }
-}
-
-@mixin theme($theme) {
-  @media (prefers-color-scheme: $theme) {
-    @content;
-  }
-}
-
-@mixin radial-background($primary, $secondary) {
-  background: radial-gradient(circle at top left, $primary 5%, $secondary 100%) fixed no-repeat;
-}
-
-@mixin button($btn-color, $darken: 10%) {
-  box-shadow: 0 0.5em 0 0 darken($btn-color, $darken);
-  background-color: $btn-color;
-
-  &:hover {
-    box-shadow: 0 0.75em 0 0 darken($btn-color, $darken);
-  }
-
-  &:active {
-    box-shadow: 0 0.25em 0 0 darken($btn-color, $darken);
-  }
-}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
deleted file mode 100644
index 3210c5f..0000000
--- a/src/scss/_variables.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-$bg-color-light:       #22759d;
-$bg-color-lighter:     #e93f3f;
-$bg-color-dark:        #33124a;
-$copy-color:           #fff;
-$copy-color-darkgrey:  #303030;
-
-$sebin-primary:        #c64c35;
-$sebin-secondary:      #eda958;
-$sebin-hair-primary:   #4b608f;
-$sebin-hair-secondary: #6684c0;
-$sebin-eyes:           #31c215;
-$sebin-spikes:           $sebin-secondary;
-$sebin-horns:          #413a3a;
-$sebin-tail-spikes:    #7f4539;
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 60bb0f0..b8606b4 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -1,66 +1,269 @@
-@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&family=Exo:ital,wght@0,300;0,900;1,300;1,900&family=Zilla+Slab:wght@700&family=Permanent+Marker&display=swap");
-@import "variables";
-@import "mixins";
-@import "flex";
-
-* {
-  box-sizing: border-box;
-}
+@import "fontfaces";
 
+/* theme colors */
 :root {
-  font-family: "Dosis", sans-serif;
-  font-size: 16px;
-  line-height: 1.5;
-  text-size-adjust: 100%;
-  background-color: $bg-color-dark;
+  --theme-c-dull-red: #c64c35;
+  --theme-c-indian-yellow: #eda958;
+  --theme-c-dusky-blue: #4b608f;
+  --theme-c-glaucous: #6684c0;
+  --theme-c-kelly-green: #31c215;
+  --theme-c-iridium: #413a3a;
+  --theme-c-ironstone: #7f4539;
+
+  --theme-c-dull-red-darker: #762d1f;
+  --theme-c-dull-red-darkest: #39160f;
+  --theme-c-indian-yellow-darker: #c97716;
+  --theme-c-indian-yellow-darkest: #844e0e;
+
+  --theme-c-muted-blue: #22759d;
+  --theme-c-amaranth: #e93f3f;
+  --theme-c-deep-purple: #33124a;
+  --theme-c-charcoal: #303030;
+
+  --theme-c-muted-blue-darker: #195673;
+  --theme-c-amaranth-darker: #800f0f;
+  --theme-c-amaranth-darkest: #690c0c;
+  --theme-c-deep-purple-darker: #170821;
+
+  --theme-c-white: #ffffff;
+  --theme-c-black: #000000;
+
+  --theme-c-dull-red-translucent: #c64c35bf;
+  --theme-c-indian-yellow-translucent: #eda958bf;
+  --theme-c-dusky-blue-translucent: #4b608fbf;
+  --theme-c-glaucous-translucent: #6684c0bf;
+  --theme-c-kelly-green-translucent: #31c215bf;
+  --theme-c-iridium-translucent: #413a3abf;
+  --theme-c-ironstone-translucent: #7f4539bf;
+
+  --theme-c-muted-blue-translucent: #22759dbf;
+  --theme-c-amaranth-translucent: #e93f3fbf;
+  --theme-c-deep-purple-translucent: #33124abf;
+  --theme-c-charcoal-translucent: #303030bf;
+
+  --theme-b-mix-blend-mode: multiply;
+
+  --theme-b-page-background-light: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth) 5%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%
+    );
+  --theme-b-page-background-dark: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth-darker) 5%,
+      transparent 50%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue-darker) 5%,
+      var(--theme-c-deep-purple-darker) 100%
+    );
+
+  --theme-b-navigation-background-light: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth-darker) 20%,
+      transparent 80%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-indian-yellow-darker) 5%,
+      var(--theme-c-dull-red-darker) 100%
+    );
+  --theme-b-navigation-background-dark: radial-gradient(
+      circle at bottom right,
+      var(--theme-c-amaranth-darkest) 20%,
+      transparent 80%
+    ),
+    radial-gradient(
+      circle at top left,
+      var(--theme-c-indian-yellow-darkest) 5%,
+      var(--theme-c-dull-red-darkest) 100%
+    );
+  --theme-b-modal-background-light: radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue) 5%,
+      var(--theme-c-deep-purple) 100%
+    )
+    fixed no-repeat;
+  --theme-b-modal-background-dark: radial-gradient(
+      circle at top left,
+      var(--theme-c-muted-blue-darker) 5%,
+      var(--theme-c-deep-purple-darker) 100%
+    )
+    fixed no-repeat;
 }
 
-html,
-body {
-  min-height: 100%;
+/* general purpose variables */
+:root {
+  --font-family-copy: "Dosis", sans-serif;
+  --font-family-headings: "Zilla Slab", sans-serif;
+
+  --font-size: 18px;
+  --font-size-h1: 3rem;
+  --font-size-h2: 1.825rem;
+  --font-size-h3: 1.225rem;
+
+  --text-line-height: 1.5;
+
+  --paragraph-margin: 1rem;
+
+  --textblock-max-width: 36rem;
+  --refimage-max-width: 50rem;
+
+  --page-background-radial-gradient: var(--theme-b-radial-gradient-light);
+
+  --container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
+  --container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
+  --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
+  --container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
+
+  --container-box-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);
+
+  --section-max-width: 100%;
+
+  --page-background: var(--theme-b-page-background-light);
+  --header-background: var(--theme-b-navigation-background-light);
+  --header-margin: 1rem var(--container-spacing-right-safe) 1rem
+    var(--container-spacing-left-safe);
+  --navigation-justify-content: flex-start;
+  --quickfacts-background: var(--theme-b-page-background-light);
+  --modal-background: var(--theme-b-modal-background-light);
+  --welcome-header-headings-flex-basis: 100%;
+  --welcome-header-headings-margin: 1.5rem 0 0 0;
+  --welcome-header-mainline-font-size: 2rem;
+  --welcome-header-subline-font-size: 1rem;
+
+  --button-group-flex: 1 0 100%;
+
+  --figure-cencor-background-color: var(--theme-c-amaranth);
+  --figure-cencor-width: 50vw;
+  --figure-cencor-height: 35vh;
+
+  --gallery-size: 1rem;
+  --gallery-arrow-position: 1.5rem;
+  --gallery-image-padding: 0 3rem;
+
+  --table-max-width: 45rem;
+  --table-border: 0.0625rem solid var(--theme-c-indian-yellow);
+  --table-cell-padding: 0.25rem 0.5rem;
+
+  --attack-list-max-width: 100%;
+
+  --attack-item-flex: 0 1 100%;
+  --attack-item-flex-flow: row wrap;
+  --attack-item-nth-child-even-text-align: left;
+  --attack-item-first-child-order: auto;
+  --attack-item-illustration-size: auto;
+  --attack-item-illustration-flex: 1 1 var(--attack-item-illustration-size);
+  --attack-item-text-padding: auto;
+
+  --social-links-flex-flow: row wrap;
+  --social-links-flex: 1 1 50%;
+
+  --footer-padding: var(--container-spacing-top-safe) 0
+    var(--container-spacing-bottom-safe) 0;
 }
 
-body.scroll-lock {
-  overflow: hidden;
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--theme-c-deep-purple);
+  --color-background-footer: var(--theme-c-deep-purple);
+
+  --color-heading: var(--theme-c-white);
+  --color-text: var(--theme-c-white);
+  --color-link-text: var();
+  --color-link-text-hover: var();
+  --color-link-text-underline: var();
+
+  --color-button: var(--theme-c-muted-blue);
+  --color-button-box-shadow: var(--theme-c-muted-blue-darker);
+  --color-toggle: var(--theme-c-dull-red);
+  --color-quickfacts-border: var(--theme-c-indian-yellow);
+  --color-modal-border: var(--theme-c-indian-yellow);
+  --color-figure-polaroid-text: var(--theme-c-charcoal);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "Zilla Slab", sans-serif;
-}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --page-background: var(--theme-b-page-background-dark);
+    --header-background: var(--theme-b-navigation-background-dark);
+    --quickfacts-background: var(--theme-b-page-background-dark);
+    --modal-background: var(--theme-b-modal-background-dark);
 
-h1 {
-  font-size: 3em;
-}
-
-h2 {
-  font-size: 1.825em;
-
-  @include mq-desktop {
-    font-size: 2.25em;
+    --color-button: var(--theme-c-deep-purple);
+    --color-button-box-shadow: var(--theme-c-deep-purple-darker);
   }
 }
 
-h3 {
-  font-size: 1.125em;
+/* desktop */
+@media (min-width: 35em) {
+  :root {
+    --font-size: 20px;
+    --font-size-h2: 2.25rem;
+    --font-size-h3: 1.5rem;
+    --navigation-justify-content: center;
+    --welcome-header-headings-flex-basis: 23rem;
+    --welcome-header-headings-margin: 0;
+    --welcome-header-mainline-font-size: var(--font-size-h1);
 
-  @include mq-desktop {
-    font-size: 1.5em;
+    --section-max-width: 34rem;
+
+    --button-group-flex: 0 0 auto;
+
+    --table-cell-padding: 0.5rem 1rem;
+
+    --figure-cencor-width: 20rem;
+    --figure-cencor-height: 20rem;
+
+    --gallery-size: 1.5rem;
+    --gallery-arrow-position: 2rem;
+    --gallery-image-padding: 0 3.5rem;
+
+    --social-links-flex-flow: row nowrap;
+    --social-links-flex: 1 1 auto;
   }
 }
 
-a {
-  color: $copy-color;
+@media (min-width: 45em) {
+  :root {
+    --attack-list-max-width: 55rem;
+
+    --attack-item-flex-flow: row nowrap;
+    --attack-item-nth-child-even-text-align: right;
+    --attack-item-first-child-order: 1;
+    --attack-item-illustration-size: 20rem;
+    --attack-item-illustration-flex: 0 0 var(--attack-item-illustration-size);
+    --attack-item-text-padding: 0 1rem;
+  }
 }
 
-blockquote {
-  font-style: italic;
-  background: linear-gradient(90deg, rgba(#000, 0.5), transparent);
-  margin: 0;
-  border-left: 0.125em solid $sebin-secondary;
-  padding: 1em;
+@media (min-width: 90em) {
+  :root {
+    --header-margin: 1rem auto;
+
+    --attack-list-max-width: 80rem;
+
+    --attack-item-flex: 0 1 50%;
+    --attack-item-nth-child-even-text-align: left;
+    --attack-item-first-child-order: 0;
+  }
+}
+
+/* bigscreen */
+@media (min-width: 120em) {
+  :root {
+    --font-size: 24px;
+  }
+}
+
+/* hyooj */
+@media (min-width: 130em) {
+  :root {
+    --font-size: 28px;
+  }
 }
diff --git a/src/scss/fontfaces.scss b/src/scss/fontfaces.scss
new file mode 100644
index 0000000..7616f3c
--- /dev/null
+++ b/src/scss/fontfaces.scss
@@ -0,0 +1,4 @@
+@import "@/assets/fonts/dosis/dosis";
+@import "@/assets/fonts/exo/exo";
+@import "@/assets/fonts/permanent-marker/permanent-marker";
+@import "@/assets/fonts/zilla-slab/zilla-slab";
diff --git a/src/scss/main.scss b/src/scss/main.scss
new file mode 100644
index 0000000..90d10b3
--- /dev/null
+++ b/src/scss/main.scss
@@ -0,0 +1,202 @@
+@import "@/scss/base";
+
+:root {
+  font-family: var(--font-family-copy);
+  font-size: var(--font-size);
+  text-size-adjust: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+
+  background-color: var(--color-background);
+  color: var(--color-text);
+
+  line-height: var(--text-line-height);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  transition: color 0.5s, background-color 0.5s;
+
+  &:before,
+  &:after {
+    content: "";
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &:before {
+    background: url(@/assets/subtle-prism.svg);
+    mix-blend-mode: multiply;
+    z-index: -1;
+  }
+
+  &:after {
+    background: var(--page-background);
+    z-index: -2;
+  }
+
+  &.scroll-lock {
+    overflow: hidden;
+  }
+}
+
+main {
+  min-height: 100vh;
+  padding: 1rem 0;
+  transition: 0.4s;
+}
+
+section {
+  margin: auto;
+  padding: 0 var(--container-spacing-right-safe) 0
+    var(--container-spacing-left-safe);
+  max-width: var(--section-max-width);
+
+  h1:first-child {
+    margin-top: 0;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-headings);
+}
+
+h1 {
+  font-size: var(--font-size-h1);
+  margin: 1.625rem 0;
+  text-transform: capitalize;
+}
+
+h2 {
+  font-size: var(--font-size-h2);
+  margin: 1.875rem 0;
+}
+
+h3 {
+  font-size: var(--font-size-h3);
+  margin: 1.5rem 0;
+}
+
+p {
+  margin: 1rem 0;
+}
+
+a {
+  color: var(--color-link-text);
+}
+
+blockquote {
+  font-style: italic;
+  background: linear-gradient(90deg, rgba(#000, 0.5), transparent);
+  margin: 0;
+  border-left: 0.125rem solid var(--theme-c-indian-yellow);
+  padding: 1rem;
+}
+
+ul {
+  margin: 1rem 0;
+
+  &.col-2 {
+    columns: 2 auto;
+  }
+
+  &.col-3 {
+    columns: 3 auto;
+  }
+
+  &.col-4 {
+    columns: 4 auto;
+  }
+
+  &.social {
+    display: flex;
+    flex-flow: var(--social-links-flex-flow);
+    justify-content: space-evenly;
+
+    margin: 1rem 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      flex: var(--social-links-flex);
+      padding: 0.25rem;
+      text-align: center;
+
+      &:before {
+        margin: 0 0.375rem 0 0;
+      }
+
+      &.twitter:before {
+        content: "🐦";
+      }
+
+      &.mastodon:before {
+        content: "🐘";
+      }
+
+      &.telegram:before {
+        content: "📨";
+      }
+
+      &.furaffinity:before {
+        content: "🐾";
+      }
+    }
+  }
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  max-width: var(--table-max-width);
+  margin: auto;
+
+  thead {
+    border-top: var(--table-border);
+  }
+
+  tbody {
+    border-top: var(--table-border);
+    border-bottom: var(--table-border);
+
+    tr:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  th,
+  td {
+    padding: var(--table-cell-padding);
+  }
+
+  th {
+    font-weight: bold;
+  }
+}
+
+.nav-logo {
+  display: block;
+  margin: 0 0.5rem 0 0.25rem;
+  height: 2rem;
+  border: 0.125rem solid #fff;
+  border-radius: 100%;
+  box-shadow: var(--container-box-shadow);
+}