diff --git a/eleventy.config.js b/eleventy.config.js
index 54f899c..2f4ceee 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -32,7 +32,7 @@ export default async function (eleventyConfig) {
   );
 
   eleventyConfig.addPlugin(eleventyPluginWebc, {
-    components: ['src/components/**/*.webc', 'npm:@11ty/eleventy-img/*.webc']
+    components: ['src/components/*.webc', 'npm:@11ty/eleventy-img/*.webc']
   });
   eleventyConfig.addPlugin(eleventyPluginNavigation);
   eleventyConfig.addPlugin(eleventyImagePlugin, IMAGE_TRANSFORM_OPTS);
diff --git a/src/components/abilities.webc b/src/components/abilities.webc
index 2aa9fcd..8635535 100644
--- a/src/components/abilities.webc
+++ b/src/components/abilities.webc
@@ -1,4 +1,4 @@
-<figure webc:for="ability of abilities" webc:root="override">
+<figure class="ability" webc:for="ability of abilities">
   <eleventy-image
     webc:if="img"
     class="image"
@@ -8,14 +8,14 @@
     sizes="(min-width: 64em) 500px, 250px"
   ></eleventy-image
   ><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
-  <figcaption>
-    <p @text="ability.name"></p>
-    <p @text="ability.description"></p>
+  <figcaption class="caption">
+    <p class="title" @text="ability.name"></p>
+    <p class="description" @text="ability.description"></p>
   </figcaption>
 </figure>
 
-<style webc:scoped="ability">
-  :host {
+<style>
+  .ability {
     display: grid;
     grid-template:
       'image' 15em
@@ -29,43 +29,42 @@
     @media (min-width: 45em) {
       grid-template: 'image caption' 1fr / 15em 1fr;
     }
-  }
 
-  :host :where(.image, .no-image) {
-    grid-area: image;
-    display: grid;
-    place-items: center;
-    width: 15em;
-    height: 15em;
-  }
+    & .image,
+    & .no-image {
+      grid-area: image;
+      display: grid;
+      place-items: center;
+      width: 15em;
+      height: 15em;
+    }
 
-  :host .image {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
+    & .image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
 
-  :host .no-image {
-    text-align: center;
+    & .no-image {
+      text-align: center;
 
-    border: 0.125em dashed var(--clr-box-border);
-    padding: 1em;
-  }
+      border: 0.125em dashed var(--clr-box-border);
+      padding: 1em;
+    }
 
-  :host figcaption {
-    grid-area: caption;
+    & .caption {
+      grid-area: caption;
+    }
 
-    display: grid;
-    gap: 0.5em;
-  }
+    & .title {
+      font-family: var(--font-family-headings);
+      font-size: 1.5em;
+      font-weight: bold;
+      margin-block: 0;
 
-  :host figcaption p {
-    margin: 0;
-  }
-
-  :host figcaption p:first-child {
-    font-family: var(--font-family-headings);
-    font-size: 1.5em;
-    font-weight: bold;
+      & + .description {
+        margin-block: 0.5em 0;
+      }
+    }
   }
 </style>
diff --git a/src/components/card.webc b/src/components/card.webc
index 0d63978..7330557 100644
--- a/src/components/card.webc
+++ b/src/components/card.webc
@@ -1,4 +1,4 @@
-<a :href="href" :class="char" webc:root="override">
+<a class="character-card" :href="href" :class="char">
   <div class="image">
     <slot name="image"></slot>
   </div>
@@ -8,8 +8,8 @@
   </div>
 </a>
 
-<style webc:scoped="character-card">
-  :host {
+<style>
+  .character-card {
     display: grid;
     align-content: start;
 
@@ -23,59 +23,61 @@
     border-radius: 1em;
 
     overflow: hidden;
-  }
 
-  :host:hover img {
-    scale: 1.1;
-  }
+    &:hover {
+      img {
+        scale: 1.1;
+      }
+    }
 
-  :host .image {
-    overflow: hidden;
-    aspect-ratio: 3/2;
-  }
+    & .image {
+      overflow: hidden;
+      aspect-ratio: 3/2;
+    }
 
-  :host img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    scale: 1;
-    transition: scale 0.2s ease-in-out;
-  }
+    & img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      scale: 1;
+      transition: scale 0.2s ease-in-out;
+    }
 
-  :host .text {
-    --card-spacing: 1.5rem;
-    padding-block: var(--card-spacing);
-    padding-inline: var(--card-spacing);
-  }
+    & .text {
+      --card-spacing: 1.5rem;
+      padding-block: var(--card-spacing);
+      padding-inline: var(--card-spacing);
+    }
 
-  :host h2 {
-    position: relative;
-    font-size: 1.375rem;
-    margin-block: 0 0.5em;
-    padding-block: 0 0.5em;
-  }
+    & h2 {
+      position: relative;
+      font-size: 1.375rem;
+      margin-block: 0 0.5em;
+      padding-block: 0 0.5em;
 
-  :host h2::after {
-    content: '';
-    position: absolute;
-    display: block;
-    left: 0;
-    bottom: 0;
-    height: 0.125em;
-    width: 2em;
-    border-radius: 1em;
-    background: linear-gradient(
-      to right,
-      oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
-      oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
-    );
-  }
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        left: 0;
+        bottom: 0;
+        height: 0.125em;
+        width: 2em;
+        border-radius: 1em;
+        background: linear-gradient(
+          to right,
+          oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
+          oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
+        );
+      }
+    }
 
-  :host p {
-    margin-block: 0;
-  }
+    & p {
+      margin-block: 0;
 
-  :host p ~ p {
-    margin-block: 1em 0;
+      & + p {
+        margin-block: 1em 0;
+      }
+    }
   }
 </style>
diff --git a/src/components/colors.webc b/src/components/colors.webc
index 30b81de..e2cbe73 100644
--- a/src/components/colors.webc
+++ b/src/components/colors.webc
@@ -1,4 +1,4 @@
-<ul webc:root="override">
+<ul class="character-colors">
   <li class="color" webc:for="color of colors">
     <div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
     <p class="heading" @text="color.name"></p>
@@ -6,8 +6,8 @@
   </li>
 </ul>
 
-<style webc:scoped="character-colors">
-  :host {
+<style>
+  .character-colors {
     --columns: repeat(auto-fit, minmax(15em, 1fr));
     --clearance: 0.25rem;
     --color-box-size: calc(var(--clearance) * 14);
@@ -23,62 +23,63 @@
       --color-box-size: 5em;
       --columns: repeat(auto-fit, minmax(8em, 1fr));
     }
-  }
 
-  :host .color {
-    --areas: 'color heading' 'color value';
-    --rows: repeat(2, 1fr);
-    --columns: var(--color-box-size) 1fr;
+    & .color {
+      --areas: 'color heading' 'color value';
+      --rows: repeat(2, 1fr);
+      --columns: var(--color-box-size) 1fr;
 
-    display: grid;
-    grid-template-areas: var(--areas);
-    grid-template-rows: var(--rows);
-    grid-template-columns: var(--columns);
+      display: grid;
+      grid-template-areas: var(--areas);
+      grid-template-rows: var(--rows);
+      grid-template-columns: var(--columns);
 
-    background-color: var(--clr-color-box-background);
+      background-color: var(--clr-color-box-background);
 
-    border: var(--border-thin) solid var(--clr-box-border);
-    border-radius: 0.5em;
+      border: var(--border-thin) solid var(--clr-box-border);
+      border-radius: 0.5em;
 
-    overflow: clip;
+      overflow: clip;
 
-    @media (min-width: 35em) {
-      --areas: 'color' 'heading' 'value';
-      --rows: var(--color-box-size) 1fr auto;
-      --columns: 1fr;
+      @media (min-width: 35em) {
+        --areas: 'color' 'heading' 'value';
+        --rows: var(--color-box-size) 1fr auto;
+        --columns: 1fr;
+      }
+    }
+
+    & .color-box {
+      grid-area: color;
+      width: 100%;
+      height: 100%;
+    }
+
+    & .heading,
+    & .value {
+      text-align: left;
+      margin: 0;
+      padding-block: calc(var(--clearance) * 2);
+      padding-inline: calc(var(--clearance) * 2);
+    }
+
+    & .heading {
+      grid-area: heading;
+      align-self: start;
+
+      font-size: 0.625em;
+      line-height: 1.2;
+      color: var(--clr-heading-data);
+      text-transform: uppercase;
+
+    }
+
+    & .value {
+      grid-area: value;
+      align-self: end;
+
+      font-size: 0.75em;
+
+      padding-block: 0 calc(var(--clearance) * 2);
     }
   }
-
-  :host .color-box {
-    grid-area: color;
-    width: 100%;
-    height: 100%;
-  }
-
-  :host :where(.heading, .value) {
-    text-align: left;
-    margin: 0;
-    padding-block: calc(var(--clearance) * 2);
-    padding-inline: calc(var(--clearance) * 2);
-  }
-
-  :host .heading {
-    grid-area: heading;
-    align-self: start;
-
-    font-size: 0.625em;
-    line-height: 1.2;
-    text-align: start;
-    color: var(--clr-heading-data);
-    text-transform: uppercase;
-  }
-
-  :host .value {
-    grid-area: value;
-    align-self: end;
-
-    font-size: 0.75em;
-
-    padding-block: 0 calc(var(--clearance) * 2);
-  }
 </style>
diff --git a/src/components/head/page-head-base.webc b/src/components/head/page-head-base.webc
deleted file mode 100644
index 38d16c9..0000000
--- a/src/components/head/page-head-base.webc
+++ /dev/null
@@ -1,29 +0,0 @@
-<style>
-  :root {
-    --font-size: 18px;
-    --font-family-headings: 'Sour Gummy', sans-serif;
-    --font-family-copy: 'Poppins', serif;
-
-    --page-spacing: 1em;
-
-    --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));
-
-    --border-thin: 0.0625em;
-    --border-radius: 0.75em;
-
-    @media (min-height: 64em) {
-      --page-spacing: 3em;
-    }
-
-    @media (min-width: 80em) {
-      --font-size: 20px;
-    }
-
-    @media (min-width: 120em) {
-      --font-size: 24px;
-    }
-  }
-</style>
diff --git a/src/components/head/page-head-colors.webc b/src/components/head/page-head-colors.webc
deleted file mode 100644
index e84b6e8..0000000
--- a/src/components/head/page-head-colors.webc
+++ /dev/null
@@ -1,130 +0,0 @@
-<style>
-  /* theme colors */
-  :root {
-    --base-luminance: 20%;
-    --base-chroma: 0.01;
-    --base-hue: 275deg;
-
-    --theme-c-primary: oklch(var(--base-luminance) var(--base-chroma) var(--base-hue));
-
-    --theme-c-primary-950: oklch(from var(--theme-c-primary) 5% c h);
-    --theme-c-primary-900: oklch(from var(--theme-c-primary) 10% c h);
-    --theme-c-primary-850: oklch(from var(--theme-c-primary) 15% c h);
-    --theme-c-primary-800: oklch(from var(--theme-c-primary) 20% c h);
-    --theme-c-primary-750: oklch(from var(--theme-c-primary) 25% c h);
-    --theme-c-primary-700: oklch(from var(--theme-c-primary) 30% c h);
-    --theme-c-primary-650: oklch(from var(--theme-c-primary) 35% c h);
-    --theme-c-primary-600: oklch(from var(--theme-c-primary) 40% c h);
-    --theme-c-primary-550: oklch(from var(--theme-c-primary) 45% c h);
-    --theme-c-primary-500: oklch(from var(--theme-c-primary) 50% c h);
-    --theme-c-primary-450: oklch(from var(--theme-c-primary) 55% c h);
-    --theme-c-primary-400: oklch(from var(--theme-c-primary) 60% c h);
-    --theme-c-primary-350: oklch(from var(--theme-c-primary) 65% c h);
-    --theme-c-primary-300: oklch(from var(--theme-c-primary) 70% c h);
-    --theme-c-primary-250: oklch(from var(--theme-c-primary) 75% c h);
-    --theme-c-primary-200: oklch(from var(--theme-c-primary) 80% c h);
-    --theme-c-primary-150: oklch(from var(--theme-c-primary) 85% c h);
-    --theme-c-primary-100: oklch(from var(--theme-c-primary) 90% c h);
-    --theme-c-primary-50: oklch(from var(--theme-c-primary) 95% c h);
-  }
-
-  /* semantic color variables for this project */
-  :root {
-    --clr-page-background: var(--theme-c-primary-100);
-    --clr-text: var(--theme-c-primary-900);
-
-    --clr-nav-background: var(--theme-c-primary-200);
-    --clr-nav-border: var(--theme-c-primary-250);
-    --clr-nav-link-hover: var(--theme-c-primary-400);
-
-    --clr-box-background: var(--theme-c-primary-150);
-    --clr-box-border: var(--theme-c-primary-250);
-    --clr-box-shadow: var(--theme-c-primary-200);
-    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
-    --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
-
-    --clr-color-box-background: var(--theme-c-primary-200);
-
-    --clr-quick-info-bg-start: var(--theme-c-primary-100);
-    --clr-quick-info-bg-end: var(--theme-c-primary-150);
-
-    @media (prefers-color-scheme: dark) {
-      --clr-page-background: var(--theme-c-primary-850);
-      --clr-text: var(--theme-c-primary-100);
-
-      --clr-nav-background: var(--theme-c-primary-700);
-      --clr-nav-border: var(--theme-c-primary-650);
-      --clr-nav-link-hover: var(--theme-c-primary-500);
-
-      --clr-box-background: var(--theme-c-primary-750);
-      --clr-box-border: var(--theme-c-primary-700);
-      --clr-box-shadow: var(--theme-c-primary-800);
-
-      --clr-color-box-background: var(--theme-c-primary-700);
-
-      --clr-quick-info-bg-start: var(--theme-c-primary-700);
-      --clr-quick-info-bg-end: var(--theme-c-primary-750);
-    }
-  }
-
-  .sebin {
-    --clr-accent-1: oklch(58% 0.16 33deg); /* scales */
-    --clr-accent-2: oklch(78% 0.13 68deg); /* chest */
-    --clr-accent-3: oklch(49% 0.08 265deg); /* hair */
-    --clr-accent-4: oklch(71% 0.23 141deg); /* eyes */
-    --clr-accent-5: oklch(36% 0.01 17deg); /* horns */
-    --clr-accent-6: oklch(46% 0.08 32deg); /* tail spikes */
-
-    --clr-selection: var(--clr-accent-1);
-    --clr-selection-text: var(--theme-c-primary-100);
-    --clr-nav-link-active: var(--clr-accent-1);
-    --clr-heading-underline: var(--clr-accent-1);
-    --clr-heading-data: var(--clr-accent-1);
-    --clr-link: var(--clr-accent-1);
-    --clr-link-underline: var(--clr-accent-1);
-    --clr-gallery-indicator: var(--clr-accent-1);
-  }
-
-  .viktor {
-    --clr-accent-1: oklch(85% 0.04 56deg); /* front */
-    --clr-accent-2: oklch(35% 0.03 50deg); /* arms, legs */
-    --clr-accent-3: oklch(30% 0.04 22deg); /* back main */
-    --clr-accent-4: oklch(26% 0.03 19deg); /* back spine */
-    --clr-accent-5: oklch(71% 0.08 236deg); /* highlights, tissue */
-    --clr-accent-6: oklch(95% 0.02 69deg); /* tail club */
-    --clr-accent-7: oklch(90% 0.07 199deg); /* eyes primary */
-    --clr-accent-8: oklch(75% 0.09 228deg); /* eyes secondary */
-
-    --clr-selection: var(--clr-accent-8);
-    --clr-selection-text: var(--theme-c-primary-100);
-    --clr-nav-link-active: var(--clr-accent-8);
-    --clr-heading-underline: var(--clr-accent-8);
-    --clr-heading-data: var(--clr-accent-8);
-    --clr-link: var(--clr-accent-8);
-    --clr-link-underline: var(--clr-accent-8);
-    --clr-timeline-stroke: var(--clr-accent-8);
-    --clr-gallery-indicator: var(--clr-accent-8);
-
-    @media (prefers-color-scheme: light) {
-      --clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
-    }
-  }
-
-  .jarek {
-    --clr-accent-1: oklch(69% 0.11 71deg); /* fur primary */
-    --clr-accent-2: oklch(56% 0.1 98deg); /* mane */
-    --clr-accent-3: oklch(76% 0.03 112deg); /* eyes */
-    --clr-accent-4: oklch(81% 0.07 74deg); /* horn */
-    --clr-accent-5: oklch(84% 0.07 111deg); /* trii */
-    --clr-accent-6: oklch(69% 0.12 95deg); /* naughty */
-
-    --clr-selection: var(--clr-accent-1);
-    --clr-selection-text: var(--theme-c-primary-100);
-    --clr-nav-link-active: var(--clr-accent-1);
-    --clr-heading-underline: var(--clr-accent-1);
-    --clr-heading-data: var(--clr-accent-1);
-    --clr-link: var(--clr-accent-1);
-    --clr-link-underline: var(--clr-accent-1);
-    --clr-gallery-indicator: var(--clr-accent-1);
-  }
-</style>
diff --git a/src/components/head/page-head-fonts.webc b/src/components/head/page-head-fonts.webc
deleted file mode 100644
index 9402a11..0000000
--- a/src/components/head/page-head-fonts.webc
+++ /dev/null
@@ -1,504 +0,0 @@
-<style>
-  /* poppins-thin-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 100;
-    font-stretch: 100%;
-    src: local('Poppins Thin'), local('Poppins-Thin'),
-      url(../fonts/poppins/poppins-thin-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-thin-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 100;
-    font-stretch: 100%;
-    src: local('Poppins Thin'), local('Poppins-Thin'),
-      url(../fonts/poppins/poppins-thin-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-light-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 300;
-    font-stretch: 100%;
-    src: local('Poppins Light'), local('Poppins-Light'),
-      url(../fonts/poppins/poppins-light-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-light-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 300;
-    font-stretch: 100%;
-    src: local('Poppins Light'), local('Poppins-Light'),
-      url(../fonts/poppins/poppins-light-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-medium-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 500;
-    font-stretch: 100%;
-    src: local('Poppins Medium'), local('Poppins-Medium'),
-      url(../fonts/poppins/poppins-medium-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-medium-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 500;
-    font-stretch: 100%;
-    src: local('Poppins Medium'), local('Poppins-Medium'),
-      url(../fonts/poppins/poppins-medium-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 400;
-    font-stretch: 100%;
-    src: local('Poppins Regular'), local('Poppins-Regular'),
-      url(../fonts/poppins/poppins-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 400;
-    font-stretch: 100%;
-    src: local('Poppins Regular'), local('Poppins-Regular'),
-      url(../fonts/poppins/poppins-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-extralight-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 200;
-    font-stretch: 100%;
-    src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
-      url(../fonts/poppins/poppins-extralight-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-extralight-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 200;
-    font-stretch: 100%;
-    src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
-      url(../fonts/poppins/poppins-extralight-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-black-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 900;
-    font-stretch: 100%;
-    src: local('Poppins Black'), local('Poppins-Black'),
-      url(../fonts/poppins/poppins-black-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-black-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 900;
-    font-stretch: 100%;
-    src: local('Poppins Black'), local('Poppins-Black'),
-      url(../fonts/poppins/poppins-black-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-semibold-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 600;
-    font-stretch: 100%;
-    src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
-      url(../fonts/poppins/poppins-semibold-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-semibold-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 600;
-    font-stretch: 100%;
-    src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
-      url(../fonts/poppins/poppins-semibold-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-bold-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 700;
-    font-stretch: 100%;
-    src: local('Poppins Bold'), local('Poppins-Bold'),
-      url(../fonts/poppins/poppins-bold-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-bold-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 700;
-    font-stretch: 100%;
-    src: local('Poppins Bold'), local('Poppins-Bold'),
-      url(../fonts/poppins/poppins-bold-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-extrabold-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 800;
-    font-stretch: 100%;
-    src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
-      url(../fonts/poppins/poppins-extrabold-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-extrabold-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: normal;
-    font-weight: 800;
-    font-stretch: 100%;
-    src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
-      url(../fonts/poppins/poppins-extrabold-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-thin-italic-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 100;
-    font-stretch: 100%;
-    src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
-      url(../fonts/poppins/poppins-thin-italic-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-thin-italic-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 100;
-    font-stretch: 100%;
-    src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
-      url(../fonts/poppins/poppins-thin-italic-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-extralight-italic-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 200;
-    font-stretch: 100%;
-    src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
-      url(../fonts/poppins/poppins-extralight-italic-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-extralight-italic-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 200;
-    font-stretch: 100%;
-    src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
-      url(../fonts/poppins/poppins-extralight-italic-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-light-italic-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 300;
-    font-stretch: 100%;
-    src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
-      url(../fonts/poppins/poppins-light-italic-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-light-italic-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 300;
-    font-stretch: 100%;
-    src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
-      url(../fonts/poppins/poppins-light-italic-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-medium-italic-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 500;
-    font-stretch: 100%;
-    src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
-      url(../fonts/poppins/poppins-medium-italic-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-medium-italic-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 500;
-    font-stretch: 100%;
-    src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
-      url(../fonts/poppins/poppins-medium-italic-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-semibold-italic-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 600;
-    font-stretch: 100%;
-    src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
-      url(../fonts/poppins/poppins-semibold-italic-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-semibold-italic-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 600;
-    font-stretch: 100%;
-    src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
-      url(../fonts/poppins/poppins-semibold-italic-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-bold-italic-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 700;
-    font-stretch: 100%;
-    src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
-      url(../fonts/poppins/poppins-bold-italic-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-bold-italic-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 700;
-    font-stretch: 100%;
-    src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
-      url(../fonts/poppins/poppins-bold-italic-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-extrabold-italic-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 800;
-    font-stretch: 100%;
-    src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
-      url(../fonts/poppins/poppins-extrabold-italic-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-extrabold-italic-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 800;
-    font-stretch: 100%;
-    src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
-      url(../fonts/poppins/poppins-extrabold-italic-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-italic-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 400;
-    font-stretch: 100%;
-    src: local('Poppins Italic'), local('Poppins-Italic'),
-      url(../fonts/poppins/poppins-italic-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-italic-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 400;
-    font-stretch: 100%;
-    src: local('Poppins Italic'), local('Poppins-Italic'),
-      url(../fonts/poppins/poppins-italic-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* poppins-black-italic-latin */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 900;
-    font-stretch: 100%;
-    src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
-      url(../fonts/poppins/poppins-black-italic-latin.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-      U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
-    font-display: swap;
-  }
-
-  /* poppins-black-italic-latin-ext */
-  @font-face {
-    font-family: Poppins;
-    font-style: italic;
-    font-weight: 900;
-    font-stretch: 100%;
-    src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
-      url(../fonts/poppins/poppins-black-italic-latin-ext.woff2) format('woff2');
-    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
-    font-display: swap;
-  }
-
-  /* latin-ext */
-  @font-face {
-    font-family: 'Sour Gummy';
-    font-style: italic;
-    font-weight: 100 900;
-    font-stretch: 100%;
-    font-display: swap;
-    src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTN1IOK1G.woff2)
-      format('woff2');
-    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
-      U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
-      U+2C60-2C7F, U+A720-A7FF;
-  }
-
-  /* latin */
-  @font-face {
-    font-family: 'Sour Gummy';
-    font-style: italic;
-    font-weight: 100 900;
-    font-stretch: 100%;
-    font-display: swap;
-    src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTNNIOA.woff2)
-      format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-      U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-
-  /* latin-ext */
-  @font-face {
-    font-family: 'Sour Gummy';
-    font-style: normal;
-    font-weight: 100 900;
-    font-stretch: 100%;
-    font-display: swap;
-    src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBNfNFQPA.woff2)
-      format('woff2');
-    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
-      U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
-      U+2C60-2C7F, U+A720-A7FF;
-  }
-
-  /* latin */
-  @font-face {
-    font-family: 'Sour Gummy';
-    font-style: normal;
-    font-weight: 100 900;
-    font-stretch: 100%;
-    font-display: swap;
-    src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBDfNE.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
-      U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-</style>
diff --git a/src/components/head/page-head-style.webc b/src/components/head/page-head-style.webc
deleted file mode 100644
index 2a15fe5..0000000
--- a/src/components/head/page-head-style.webc
+++ /dev/null
@@ -1,32 +0,0 @@
-<style>
-  :root {
-    font-family: var(--font-family-copy);
-    font-size: var(--font-size);
-  }
-
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    background-color: var(--clr-page-background);
-    color: var(--clr-text);
-
-    margin: 0;
-    min-height: 100dvh;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-family: var(--font-family-headings);
-  }
-
-  ::selection {
-    color: var(--clr-selection-text);
-    background-color: var(--clr-selection);
-  }
-</style>
diff --git a/src/components/navigation.webc b/src/components/navigation.webc
index 668f0e6..d5e40b6 100644
--- a/src/components/navigation.webc
+++ b/src/components/navigation.webc
@@ -1,28 +1,28 @@
-<nav :aria-label="label" webc:root="override">
+<nav class="character-nav" :aria-label="label">
   <label for="nav-toggle">
-    <icon icon="bars"></icon>
+    <icon icon="bars" webc:nokeep></icon>
   </label>
   <input type="checkbox" id="nav-toggle" />
   <template
     webc:nokeep
     @html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
-      listClass: 'list',
-      listItemClass: 'item',
-      listItemHasChildrenClass: 'hasChildren',
-      activeListItemClass: 'item-active',
+    listClass: 'list',
+    listItemClass: 'item',
+    listItemHasChildrenClass: 'hasChildren',
+    activeListItemClass: 'item-active',
 
-      anchorClass: 'link',
-      activeAnchorClass: 'link-active',
+    anchorClass: 'link',
+    activeAnchorClass: 'link-active',
 
-      activeKey: $data.eleventyNavigation.key,
+    activeKey: $data.eleventyNavigation.key,
 
-      showExcerpt: false
-    })"
+    showExcerpt: false
+  })"
   ></template>
 </nav>
 
-<style webc:scoped="character-nav">
-  :host {
+<style>
+  .character-nav {
     --nav-spacing: 1em;
     --nav-background-color: var(--clr-nav-background);
     --nav-border: var(--border-thin) solid var(--clr-box-border);
@@ -48,97 +48,99 @@
     @media (min-width: 64em) {
       --nav-spacing: 2em;
     }
-  }
 
-  :host:has(#nav-toggle:checked) .list {
-    opacity: 1;
-  }
+    &:has(#nav-toggle:checked) {
+      & .list {
+        opacity: 1;
+      }
 
-  :host:has(#nav-toggle:checked) .item {
-    height: 100%;
-  }
+      & .item {
+        height: 100%;
+      }
+    }
 
-  :host label[for='nav-toggle'] {
-    width: 1.5em;
-    height: 1.5em;
-    margin-block: 0.75em;
-    margin-inline: 1em;
+    & label[for='nav-toggle'] {
+      width: 1.5em;
+      height: 1.5em;
+      margin-block: 0.75em;
+      margin-inline: 1em;
 
-    @media (min-width: 35em) {
+      &:hover {
+        cursor: pointer;
+      }
+
+      @media (min-width: 35em) {
+        display: none;
+      }
+    }
+
+    & #nav-toggle {
       display: none;
     }
-  }
 
-  :host label[for='nav-toggle']:hover {
-    cursor: pointer;
-  }
+    & .list {
+      --nav-items-position: absolute;
+      --nav-items-orientation: column nowrap;
 
-  :host #nav-toggle {
-    display: none;
-  }
+      position: var(--nav-items-position);
+      top: 3em;
 
-  :host .list {
-    --nav-items-position: absolute;
-    --nav-items-orientation: column nowrap;
+      display: flex;
+      flex-flow: var(--nav-items-orientation);
 
-    position: var(--nav-items-position);
-    top: 3em;
+      text-align: end;
+      list-style: none;
 
-    display: flex;
-    flex-flow: var(--nav-items-orientation);
+      background-color: var(--clr-nav-background);
 
-    text-align: end;
-    list-style: none;
+      margin: 0;
+      border: var(--border-thin) solid var(--clr-nav-border);
+      border-block-start: none;
+      border-inline-end: none;
+      border-end-start-radius: 0.75em;
+      padding-inline: var(--nav-spacing);
 
-    background-color: var(--clr-nav-background);
+      z-index: 3;
+      opacity: 0;
+      transition: opacity 0.4s ease-in-out;
 
-    margin: 0;
-    border: var(--border-thin) solid var(--clr-nav-border);
-    border-block-start: none;
-    border-inline-end: none;
-    border-end-start-radius: 0.75em;
-    padding-inline: var(--nav-spacing);
-
-    z-index: 3;
-    opacity: 0;
-    transition: opacity 0.4s ease-in-out;
-
-    @media (min-width: 35em) {
-      --nav-items-position: static;
-      --nav-items-orientation: row nowrap;
-      align-items: start;
-      gap: 1em;
-      opacity: 1;
+      @media (min-width: 35em) {
+        --nav-items-position: static;
+        --nav-items-orientation: row nowrap;
+        align-items: start;
+        gap: 1em;
+        opacity: 1;
+      }
     }
-  }
 
-  :host .item {
-    overflow: hidden;
-    height: 0;
-    transition: height 0.4s ease-in-out;
+    & .item {
+      overflow: hidden;
+      height: 0;
+      transition: height 0.4s ease-in-out;
 
-    @media (min-width: 35em) {
-      height: 100%;
+      @media (min-width: 35em) {
+        height: 100%;
+      }
     }
-  }
 
-  :host .link {
-    display: block;
+    & .link {
+      display: block;
 
-    font-weight: 500;
-    text-decoration: none;
-    color: var(--clr-nav-link, inherit);
+      font-weight: 500;
+      text-decoration: none;
+      color: var(--clr-nav-link, inherit);
 
-    padding-block: calc(var(--nav-spacing) / 2);
+      padding-block: calc(var(--nav-spacing) / 2);
 
-    transition: color 0.4s ease;
-  }
+      transition: color 0.4s ease;
 
-  :host .link:hover {
-    color: var(--clr-nav-link-hover);
-  }
+      &:hover {
+        color: var(--clr-nav-link-hover);
+      }
+    }
 
-  :host .link-active {
-    color: var(--clr-nav-link-active);
+    & .link-active {
+      color: var(--clr-nav-link-active);
+    }
   }
 </style>
diff --git a/src/components/page-content.webc b/src/components/page-content.webc
index 559957b..8c0ed41 100644
--- a/src/components/page-content.webc
+++ b/src/components/page-content.webc
@@ -1,11 +1,11 @@
-<section webc:root="override">
-  <navigation label="Character" :collection="char"></navigation>
+<section class="page-content">
+  <navigation label="Character" page :collection="char" webc:nokeep></navigation>
 
   <slot></slot>
 </section>
 
-<style webc:scoped="page-content">
-  :host {
+<style>
+  .page-content {
     width: 100%;
 
     background-color: var(--clr-box-background);
@@ -13,55 +13,55 @@
     border-radius: var(--border-radius);
 
     overflow: clip;
-  }
 
-  :host :where(h1, h2, h3, h4, h5, h6) {
-    --heading-spacing: 0.25em;
-    position: relative;
-    font-weight: bold;
-    margin-block: 0 var(--heading-spacing);
-    padding-block: 0 var(--heading-spacing);
-  }
+    & :where(h1, h2, h3, h4, h5, h6) {
+      --heading-spacing: 0.25em;
+      position: relative;
+      font-weight: bold;
+      margin-block: 0 var(--heading-spacing);
+      padding-block: 0 var(--heading-spacing);
 
-  :host :where(h1, h2, h3, h4, h5, h6)::after {
-    content: '';
-    position: absolute;
-    display: block;
-    left: 0;
-    bottom: 0;
-    height: 0.125em;
-    width: 2em;
-    border-radius: 1em;
-    background: linear-gradient(
-      to right,
-      oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
-      oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
-    );
-  }
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        left: 0;
+        bottom: 0;
+        height: 0.125em;
+        width: 2em;
+        border-radius: 1em;
+        background: linear-gradient(
+          to right,
+          oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
+          oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
+        );
+      }
+    }
 
-  :host h1 {
-    font-size: 3em;
-  }
+    & h1 {
+      font-size: 3em;
+    }
 
-  :host h2 {
-    font-size: 2em;
-  }
+    & h2 {
+      font-size: 2em;
+    }
 
-  :host p {
-    text-align: justify;
-  }
+    & p {
+      text-align: justify;
+    }
 
-  :host article a {
-    color: inherit;
-    text-decoration: underline;
-    text-underline-offset: 0.1875em;
-    text-decoration-thickness: 0.125em;
-    text-decoration-skip-ink: all;
-    text-decoration-color: var(--clr-link-underline);
-    transition: color 0.2s ease;
-  }
+    & article a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 0.1875em;
+      text-decoration-thickness: 0.125em;
+      text-decoration-skip-ink: all;
+      text-decoration-color: var(--clr-link-underline);
+      transition: color 0.2s ease;
 
-  :host article a:hover {
-    color: var(--clr-link);
+      &:hover {
+        color: var(--clr-link);
+      }
+    }
   }
 </style>
diff --git a/src/components/profile.webc b/src/components/profile.webc
index 1c1b261..5912a62 100644
--- a/src/components/profile.webc
+++ b/src/components/profile.webc
@@ -1,4 +1,4 @@
-<aside webc:root="override">
+<aside class="profile">
   <div class="avatar">
     <slot name="avatar"></slot>
   </div>
@@ -11,8 +11,8 @@
   <slot></slot>
 </aside>
 
-<style webc:scoped="profile">
-  :host {
+<style>
+  .profile {
     --sidebar-position: static;
     --sidebar-padding: 1rem;
     --sidebar-grid-columns: auto 1fr;
@@ -45,44 +45,45 @@
       --sidebar-top-text-align: center;
       --sidebar-avatar-size: 10em;
     }
-  }
 
-  :host .avatar {
-    grid-area: avatar;
-    justify-self: center;
+    & .avatar {
+      grid-area: avatar;
+      justify-self: center;
 
-    & img {
-      width: var(--sidebar-avatar-size);
-      height: var(--sidebar-avatar-size);
-      aspect-ratio: 1/1;
-      border-radius: 1em;
-      object-fit: cover;
+      & img {
+        width: var(--sidebar-avatar-size);
+        height: var(--sidebar-avatar-size);
+        aspect-ratio: 1/1;
+        border-radius: 1em;
+        object-fit: cover;
+      }
+    }
+
+    & .name,
+    & .species {
+      font-family: var(--font-family-headings);
+      text-align: var(--sidebar-top-text-align);
+    }
+
+    & .name {
+      grid-area: name;
+      align-self: end;
+      font-size: 1.375em;
+      font-weight: bold;
+      margin: 0;
+    }
+
+    & .species {
+      grid-area: species;
+      align-self: start;
+      font-size: 0.75em;
+      margin: 0;
+    }
+
+    & > :last-child {
+      grid-area: traits;
+      border-block-start: var(--border-thin) solid var(--clr-box-border);
+      padding-block: 0.75em 0;
     }
   }
-
-  :host :where(.name, .species) {
-    font-family: var(--font-family-headings);
-    text-align: var(--sidebar-top-text-align);
-  }
-
-  :host .name {
-    grid-area: name;
-    align-self: end;
-    font-size: 1.375em;
-    font-weight: bold;
-    margin: 0;
-  }
-
-  :host .species {
-    grid-area: species;
-    align-self: start;
-    font-size: 0.75em;
-    margin: 0;
-  }
-
-  :host > :last-child {
-    grid-area: traits;
-    border-block-start: var(--border-thin) solid var(--clr-box-border);
-    padding-block: 0.75em 0;
-  }
 </style>
diff --git a/src/components/quick-info.webc b/src/components/quick-info.webc
index c555a20..d0eb770 100644
--- a/src/components/quick-info.webc
+++ b/src/components/quick-info.webc
@@ -1,10 +1,10 @@
-<div webc:root="override">
+<div class="quick-info">
   <h3 class="title">Key Facts</h3>
   <slot></slot>
 </div>
 
-<style webc:scoped="quick-info">
-  :host {
+<style>
+  .quick-info {
     position: relative;
     background: linear-gradient(
       to bottom right,
@@ -19,26 +19,26 @@
     padding: 1em;
 
     z-index: 1;
-  }
 
-  :host::before {
-    content: '';
-    position: absolute;
-    inset: var(--border-thin);
-    background: linear-gradient(
-      to bottom right,
-      var(--clr-quick-info-bg-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
-    );
-    border-radius: inherit;
-    z-index: -1;
-  }
+    &::before {
+      content: '';
+      position: absolute;
+      inset: var(--border-thin);
+      background: linear-gradient(
+        to bottom right,
+        var(--clr-quick-info-bg-start) 0%,
+        var(--clr-quick-info-bg-end) 50%
+      );
+      border-radius: inherit;
+      z-index: -1;
+    }
 
-  :host .title {
-    margin-block: 0 1em;
-  }
+    & .title {
+      margin-block: 0 1em;
+    }
 
-  :host > :last-child {
-    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+    & > :last-child {
+      grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+    }
   }
 </style>
diff --git a/src/components/ref-gallery.webc b/src/components/ref-gallery.webc
index 58f6669..7e139b4 100644
--- a/src/components/ref-gallery.webc
+++ b/src/components/ref-gallery.webc
@@ -8,20 +8,6 @@
 
   const TOLERANCE = 2;
 
-  const debounce = (fn, delay = 300) => {
-    let timer = 0;
-    const debounced = (...args) => {
-      if (!args) args = [];
-      clearTimeout(timer);
-
-      timer = setTimeout(() => {
-        fn.apply(fn, args);
-      }, delay);
-    };
-
-    return debounced;
-  };
-
   const isAtStart = () => Math.floor(track.scrollLeft) <= TOLERANCE;
   const isAtEnd = () => {
     const { scrollLeft, offsetWidth, scrollWidth } = track;
@@ -55,7 +41,12 @@
   const prev = () => scrollToIndex(currentIndex - 1);
   const next = () => scrollToIndex(currentIndex + 1);
 
-  const resizeObserver = new ResizeObserver(() => debounce(scrollToIndex(currentIndex)));
+  const resizeObserver = new ResizeObserver(() => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      scrollToIndex(currentIndex);
+    }, 100);
+  });
   resizeObserver.observe(track);
 
   const galleryObserver = new IntersectionObserver(
@@ -98,16 +89,15 @@
   images.forEach((el) => galleryObserver.observe(el));
   prevButton.addEventListener('click', prev);
   nextButton.addEventListener('click', next);
-  track.addEventListener('scroll', () => debounce(updateActiveStates(currentIndex)));
   document.addEventListener('DOMContentLoaded', () => initializeGallery());
 </script>
 
-<section aria-label="Image gallery" webc:root="override">
+<section class="gallery" aria-label="Image gallery">
   <button class="prev" aria-label="Previous Image">
-    <icon icon="chevron-left"></icon>
+    <icon icon="chevron-left" webc:nokeep></icon>
   </button>
   <button class="next" aria-label="Next Image">
-    <icon icon="chevron-right"></icon>
+    <icon icon="chevron-right" webc:nokeep></icon>
   </button>
 
   <div class="track">
@@ -117,8 +107,8 @@
   <nav class="gallery-nav" aria-label="Gallery"></nav>
 </section>
 
-<style webc:scoped="gallery">
-  :host {
+<style>
+  .gallery {
     display: grid;
     grid-auto-columns: auto 1fr auto;
     grid-template-areas:
@@ -126,147 +116,152 @@
       '. progress .';
     align-items: center;
     gap: 1em;
-  }
 
-  :host :where(.prev, .next, .indicator-btn) {
-    position: relative;
+    & .prev,
+    & .next,
+    & .indicator-btn {
+      position: relative;
 
-    font-size: 1.25em;
-    color: var(--clr-text);
-    cursor: pointer;
+      font-size: 1.25em;
+      color: var(--clr-text);
+      cursor: pointer;
 
-    background: linear-gradient(
-      to bottom right,
-      var(--clr-box-gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
-    );
+      background: linear-gradient(
+        to bottom right,
+        var(--clr-box-gradient-start) 0%,
+        var(--clr-box-gradient-end) 50%
+      );
 
-    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
+      box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
 
-    border: none;
-    border-radius: 100%;
-    padding: 0.875em;
+      border: none;
+      border-radius: 100%;
+      padding: 0.875em;
 
-    z-index: 1;
-  }
+      z-index: 1;
 
-  :host :where(.prev, .next, .indicator-btn):active::after {
-    background: linear-gradient(
-      to top left,
-      var(--clr-quick-info-bg-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
-    );
-  }
+      &:active::after {
+        background: linear-gradient(
+          to top left,
+          var(--clr-quick-info-bg-start) 0%,
+          var(--clr-quick-info-bg-end) 50%
+        );
+      }
 
-  :host :where(.prev, .next, .indicator-btn)::after {
-    content: '';
-    position: absolute;
-    inset: var(--border-thin);
-    background: linear-gradient(
-      to bottom right,
-      var(--clr-quick-info-bg-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
-    );
-    border-radius: inherit;
-    z-index: -1;
-  }
+      &::after {
+        content: '';
+        position: absolute;
+        inset: var(--border-thin);
+        background: linear-gradient(
+          to bottom right,
+          var(--clr-quick-info-bg-start) 0%,
+          var(--clr-quick-info-bg-end) 50%
+        );
+        border-radius: inherit;
+        z-index: -1;
+      }
+    }
 
-  :host :where(.prev, .next) {
-    grid-row: track;
-  }
+    & .prev,
+    & .next {
+      grid-row: track;
 
-  :host :where(.prev, .next):disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
 
-  :host :where(.prev, .next) svg {
-    position: absolute;
-    inset: 0;
-    padding: 0.375em;
-  }
+      & svg {
+        position: absolute;
+        inset: 0;
+        padding: 0.375em;
+      }
+    }
 
-  :host .prev {
-    grid-column: prev;
-    left: 0.5em;
-  }
+    & .prev {
+      grid-column: prev;
+      left: 0.5em;
+    }
 
-  :host .next {
-    grid-column: next;
-    right: 0.5em;
-  }
+    & .next {
+      grid-column: next;
+      right: 0.5em;
+    }
 
-  :host .track {
-    grid-row: track;
-    grid-column: prev / next;
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 100%;
-    gap: 2em;
+    & .track {
+      grid-row: track;
+      grid-column: prev / next;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 100%;
+      gap: 2em;
 
-    border-radius: 1em;
+      border-radius: 1em;
 
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-    scrollbar-width: none;
-  }
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
 
-  :host .track > * {
-    scroll-snap-align: center;
-  }
+      & > * {
+        scroll-snap-align: center;
+      }
 
-  :host .track::-webkit-scrollbar {
-    display: none;
-  }
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
 
-  :host .ref-image :first-child {
-    grid-row: image / caption;
-  }
+    & .ref-image {
+      & :first-child {
+        grid-row: image / caption;
+      }
 
-  :host .ref-image img {
-    width: 100%;
-    height: 80vw;
-    object-fit: cover;
-  }
+      & img {
+        width: 100%;
+        height: 80vw;
+        object-fit: cover;
+      }
 
-  :host .ref-image .caption {
-    font-size: 0.875em;
-    text-wrap: balance;
+      & .caption {
+        font-size: 0.875em;
+        text-wrap: balance;
 
-    background: oklch(from var(--clr-box-background) l c h / 0.75);
+        background: oklch(from var(--clr-box-background) l c h / 0.75);
 
-    padding-block: 0.5em;
-    padding-inline: 1em;
-  }
+        padding-block: 0.5em;
+        padding-inline: 1em;
+      }
+    }
 
-  :host .gallery-nav {
-    --indicator-size: 2.5em;
+    & .gallery-nav {
+      --indicator-size: 2.5em;
 
-    grid-row: progress;
-    grid-column: prev / next;
+      grid-row: progress;
+      grid-column: prev / next;
 
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
-    gap: 0.5em;
-    place-content: center;
-    place-items: center;
-    font-size: 0.875em;
-  }
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(1em, 100%), var(--indicator-size)));
+      gap: 0.5em;
+      place-content: center;
+      place-items: center;
+      font-size: 0.875em;
+    }
 
-  :host .indicator-btn {
-    font-size: 1em;
-    width: var(--indicator-size);
-    height: var(--indicator-size);
-    padding: 0;
-    aspect-ratio: 1 / 1;
-  }
+    & .indicator-btn {
+      font-size: 1em;
+      width: var(--indicator-size);
+      height: var(--indicator-size);
+      padding: 0;
+      aspect-ratio: 1 / 1;
+    }
 
-  :host .indicator-btn[aria-current='true']::after {
-    background: linear-gradient(
-      to top left,
-      var(--clr-quick-info-bg-start) 0%,
-      var(--clr-quick-info-bg-end) 50%
-    );
+    & .indicator-btn[aria-current='true']::after {
+      background: linear-gradient(
+        to top left,
+        var(--clr-quick-info-bg-start) 0%,
+        var(--clr-quick-info-bg-end) 50%
+      );
+    }
   }
 </style>
diff --git a/src/components/ref-img.webc b/src/components/ref-img.webc
index e9c97d5..185652d 100644
--- a/src/components/ref-img.webc
+++ b/src/components/ref-img.webc
@@ -1,4 +1,4 @@
-<figure webc:root="override">
+<figure class="ref-image">
   <eleventy-image
     class="image"
     :class="(dropshadow ? 'dropshadow' : '')"
@@ -14,8 +14,8 @@
   </figcaption>
 </figure>
 
-<style webc:scoped="ref-image">
-  :host {
+<style>
+  .ref-image {
     display: grid;
     grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
     place-content: center;
@@ -24,27 +24,26 @@
     margin-block: 0;
     margin-inline: auto;
 
-  }
+    & :first-child {
+      grid-area: image;
+    }
 
-  :host :first-child {
-    grid-area: image;
-  }
+    & img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      max-height: 35rem;
+      object-fit: contain;
+      border-radius: 1em;
+    }
 
-  :host img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    max-height: 35rem;
-    object-fit: contain;
-    border-radius: 1em;
-  }
+    & .dropshadow {
+      filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
+    }
 
-  :host .dropshadow {
-    filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
-  }
-
-  :host .caption {
-    grid-area: caption;
-    text-align: center;
+    & .caption {
+      grid-area: caption;
+      text-align: center;
+    }
   }
 </style>
diff --git a/src/components/timeline.webc b/src/components/timeline.webc
index a576552..59dfe39 100644
--- a/src/components/timeline.webc
+++ b/src/components/timeline.webc
@@ -1,4 +1,4 @@
-<ul webc:root="override">
+<ul class="timeline">
   <li class="job" webc:for="job of jobs">
     <icon class="icon" :icon="job.icon"></icon>
     <p class="title" @text="job.title"></p>
@@ -6,8 +6,8 @@
   </li>
 </ul>
 
-<style webc:scoped="timeline">
-  :host {
+<style>
+  .timeline {
     --timeline-circle-size: 3rem;
     --timeline-circle-background: var(--clr-box-background);
     --timeline-stroke-color: var(--clr-timeline-stroke);
@@ -20,72 +20,70 @@
       --timeline-circle-size: 4rem;
     }
 
-  }
+    & .job {
+      display: grid;
+      grid-template-areas:
+        'icon title'
+        'line text';
+      column-gap: 1em;
 
-  :host .job {
-    display: grid;
-    grid-template-areas:
-      'icon title'
-      'line text';
-    column-gap: 1em;
+      &::before {
+        content: '';
 
-  }
+        grid-row: icon / line;
+        grid-column: line;
+        justify-self: center;
 
-  :host .job::before {
-    content: '';
+        width: var(--timeline-stroke-thickness);
+        height: 100%;
 
-    grid-row: icon / line;
-    grid-column: line;
-    justify-self: center;
+        background-color: var(--timeline-stroke-color);
+      }
 
-    width: var(--timeline-stroke-thickness);
-    height: 100%;
+      &:first-child::before {
+        align-self: end;
+        height: calc(100% - var(--timeline-circle-size));
+      }
 
-    background-color: var(--timeline-stroke-color);
-  }
+      &:last-child::before {
+        grid-row: icon;
+        align-self: start;
+        height: 50%;
+      }
+    }
 
-  :host .job:first-child::before {
-    align-self: end;
-    height: calc(100% - var(--timeline-circle-size));
-  }
+    & .icon {
+      grid-area: icon;
+      align-self: center;
 
-  :host .job:last-child::before {
-    grid-row: icon;
-    align-self: start;
-    height: 50%;
-  }
+      width: var(--timeline-circle-size);
+      height: var(--timeline-circle-size);
 
-  :host .icon {
-    grid-area: icon;
-    align-self: center;
+      background-color: var(--timeline-circle-background);
 
-    width: var(--timeline-circle-size);
-    height: var(--timeline-circle-size);
+      border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
+      border-radius: 100%;
+      padding: calc(var(--timeline-circle-size) * 0.2);
+    }
 
-    background-color: var(--timeline-circle-background);
+    & .title {
+      grid-area: title;
+      align-self: center;
 
-    border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
-    border-radius: 100%;
-    padding: calc(var(--timeline-circle-size) * 0.2);
-  }
+      font-family: var(--font-family-headings);
+      font-size: calc(var(--timeline-circle-size) / 2);
+      font-weight: bold;
+      text-align: start;
+      margin-block: calc(var(--timeline-circle-size) / 4);
+    }
 
-  :host .title {
-    grid-area: title;
-    align-self: center;
+    & .text {
+      grid-area: text;
 
-    font-family: var(--font-family-headings);
-    font-size: calc(var(--timeline-circle-size) / 2);
-    font-weight: bold;
-    text-align: start;
-    margin-block: calc(var(--timeline-circle-size) / 4);
-  }
-
-  :host .text {
-    grid-area: text;
-
-    margin-inline: 0;
-    margin-block: 0;
-    line-height: 1.5;
-    text-align: justify;
+      margin-inline: 0;
+      margin-block: 0;
+      line-height: 1.5;
+      text-align: justify;
+    }
   }
 </style>
diff --git a/src/components/traits.webc b/src/components/traits.webc
index 1bc0880..1f955a7 100644
--- a/src/components/traits.webc
+++ b/src/components/traits.webc
@@ -1,13 +1,13 @@
-<ul webc:root="override">
+<ul class="trait-list">
   <li class="trait" webc:for="trait of traits">
-    <div class="icon-box"><icon :@icon="trait.icon"></icon></div>
+    <div class="icon-box"><icon :icon="trait.icon" webc:nokeep></icon></div>
     <p class="type" @text="trait.type"></p>
     <p class="text" @text="trait.text"></p>
   </li>
 </ul>
 
-<style webc:scoped="trait-list">
-  :host {
+<style>
+  .trait-list {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
     gap: 0.75em;
@@ -16,7 +16,7 @@
     padding: 0;
   }
 
-  :host .trait {
+  .trait {
     display: grid;
     grid-template-areas:
       'icon type'
@@ -25,59 +25,57 @@
     column-gap: 0.75em;
     justify-items: start;
 
-  }
+    & .icon-box {
+      position: relative;
+      grid-area: icon;
 
-  :host .icon-box {
-    position: relative;
-    grid-area: icon;
+      width: 2em;
+      height: 2em;
 
-    width: 2em;
-    height: 2em;
+      background: linear-gradient(
+        to bottom right,
+        var(--clr-box-gradient-start) 0%,
+        var(--clr-box-gradient-end) 50%
+      );
 
-    background: linear-gradient(
-      to bottom right,
-      var(--clr-box-gradient-start) 0%,
-      var(--clr-box-gradient-end) 50%
-    );
+      box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
+      border-radius: 0.5em;
+      overflow: hidden;
+      z-index: 1;
 
-    box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
-    border-radius: 0.5em;
-    overflow: hidden;
-    z-index: 1;
+      &::before {
+        content: '';
+        position: absolute;
+        inset: var(--border-thin);
+        background-color: var(--clr-box-background);
+        border-radius: inherit;
+        z-index: -1;
+      }
+    }
 
-  }
+    & svg {
+      padding: 0.5em;
+    }
 
-  :host .icon-box::before {
-    content: '';
-    position: absolute;
-    inset: var(--border-thin);
-    background-color: var(--clr-box-background);
-    border-radius: inherit;
-    z-index: -1;
-  }
+    & p {
+      margin-block: 0;
+    }
 
-  :host svg {
-    padding: 0.5em;
-  }
+    & .type {
+      font-size: 0.625em;
+      color: var(--clr-heading-data);
+      text-align: left;
+      text-transform: uppercase;
+      grid-area: type;
+    }
 
-  :host p {
-    margin-block: 0;
-  }
-
-  :host .type {
-    font-size: 0.625em;
-    color: var(--clr-heading-data);
-    text-align: left;
-    text-transform: uppercase;
-    grid-area: type;
-  }
-
-  :host .text {
-    font-size: 0.75em;
-    text-align: left;
-    margin-block: 0;
-    margin-inline: 0;
-    color: var(--clr-text);
-    grid-area: data;
+    & .text {
+      font-size: 0.75em;
+      text-align: left;
+      margin-block: 0;
+      margin-inline: 0;
+      color: var(--clr-text);
+      grid-area: data;
+    }
   }
 </style>
diff --git a/src/css/base.css b/src/css/base.css
new file mode 100644
index 0000000..43144db
--- /dev/null
+++ b/src/css/base.css
@@ -0,0 +1,28 @@
+:root {
+  --font-size: 18px;
+  --font-family-headings: 'Sour Gummy', sans-serif;
+  --font-family-copy: 'Poppins', serif;
+
+  --page-spacing: 1em;
+
+  --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));
+
+  --border-thin: 0.0625em;
+  --border-radius: 0.75em;
+
+
+  @media (min-height: 64em) {
+    --page-spacing: 3em;
+  }
+
+  @media (min-width: 80em) {
+    --font-size: 20px;
+  }
+
+  @media (min-width: 120em) {
+    --font-size: 24px;
+  }
+}
diff --git a/src/css/colors.css b/src/css/colors.css
new file mode 100644
index 0000000..ed43c56
--- /dev/null
+++ b/src/css/colors.css
@@ -0,0 +1,128 @@
+/* theme colors */
+:root {
+  --base-luminance: 20%;
+  --base-chroma: 0.01;
+  --base-hue: 275deg;
+
+  --theme-c-primary: oklch(var(--base-luminance) var(--base-chroma) var(--base-hue));
+
+  --theme-c-primary-950: oklch(from var(--theme-c-primary) 5% c h);
+  --theme-c-primary-900: oklch(from var(--theme-c-primary) 10% c h);
+  --theme-c-primary-850: oklch(from var(--theme-c-primary) 15% c h);
+  --theme-c-primary-800: oklch(from var(--theme-c-primary) 20% c h);
+  --theme-c-primary-750: oklch(from var(--theme-c-primary) 25% c h);
+  --theme-c-primary-700: oklch(from var(--theme-c-primary) 30% c h);
+  --theme-c-primary-650: oklch(from var(--theme-c-primary) 35% c h);
+  --theme-c-primary-600: oklch(from var(--theme-c-primary) 40% c h);
+  --theme-c-primary-550: oklch(from var(--theme-c-primary) 45% c h);
+  --theme-c-primary-500: oklch(from var(--theme-c-primary) 50% c h);
+  --theme-c-primary-450: oklch(from var(--theme-c-primary) 55% c h);
+  --theme-c-primary-400: oklch(from var(--theme-c-primary) 60% c h);
+  --theme-c-primary-350: oklch(from var(--theme-c-primary) 65% c h);
+  --theme-c-primary-300: oklch(from var(--theme-c-primary) 70% c h);
+  --theme-c-primary-250: oklch(from var(--theme-c-primary) 75% c h);
+  --theme-c-primary-200: oklch(from var(--theme-c-primary) 80% c h);
+  --theme-c-primary-150: oklch(from var(--theme-c-primary) 85% c h);
+  --theme-c-primary-100: oklch(from var(--theme-c-primary) 90% c h);
+  --theme-c-primary-50: oklch(from var(--theme-c-primary) 95% c h);
+}
+
+/* semantic color variables for this project */
+:root {
+  --clr-page-background: var(--theme-c-primary-100);
+  --clr-text: var(--theme-c-primary-900);
+
+  --clr-nav-background: var(--theme-c-primary-200);
+  --clr-nav-border: var(--theme-c-primary-250);
+  --clr-nav-link-hover: var(--theme-c-primary-400);
+
+  --clr-box-background: var(--theme-c-primary-150);
+  --clr-box-border: var(--theme-c-primary-250);
+  --clr-box-shadow: var(--theme-c-primary-200);
+  --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
+  --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
+
+  --clr-color-box-background: var(--theme-c-primary-200);
+
+  --clr-quick-info-bg-start: var(--theme-c-primary-100);
+  --clr-quick-info-bg-end: var(--theme-c-primary-150);
+
+  @media (prefers-color-scheme: dark) {
+    --clr-page-background: var(--theme-c-primary-850);
+    --clr-text: var(--theme-c-primary-100);
+
+    --clr-nav-background: var(--theme-c-primary-700);
+    --clr-nav-border: var(--theme-c-primary-650);
+    --clr-nav-link-hover: var(--theme-c-primary-500);
+
+    --clr-box-background: var(--theme-c-primary-750);
+    --clr-box-border: var(--theme-c-primary-700);
+    --clr-box-shadow: var(--theme-c-primary-800);
+
+    --clr-color-box-background: var(--theme-c-primary-700);
+
+    --clr-quick-info-bg-start: var(--theme-c-primary-700);
+    --clr-quick-info-bg-end: var(--theme-c-primary-750);
+  }
+}
+
+.sebin {
+  --clr-accent-1: oklch(58% 0.16 33deg); /* scales */
+  --clr-accent-2: oklch(78% 0.13 68deg); /* chest */
+  --clr-accent-3: oklch(49% 0.08 265deg); /* hair */
+  --clr-accent-4: oklch(71% 0.23 141deg); /* eyes */
+  --clr-accent-5: oklch(36% 0.01 17deg); /* horns */
+  --clr-accent-6: oklch(46% 0.08 32deg); /* tail spikes */
+
+  --clr-selection: var(--clr-accent-1);
+  --clr-selection-text: var(--theme-c-primary-100);
+  --clr-nav-link-active: var(--clr-accent-1);
+  --clr-heading-underline: var(--clr-accent-1);
+  --clr-heading-data: var(--clr-accent-1);
+  --clr-link: var(--clr-accent-1);
+  --clr-link-underline: var(--clr-accent-1);
+  --clr-gallery-indicator: var(--clr-accent-1);
+}
+
+.viktor {
+  --clr-accent-1: oklch(85% 0.04 56deg); /* front */
+  --clr-accent-2: oklch(35% 0.03 50deg); /* arms, legs */
+  --clr-accent-3: oklch(30% 0.04 22deg); /* back main */
+  --clr-accent-4: oklch(26% 0.03 19deg); /* back spine */
+  --clr-accent-5: oklch(71% 0.08 236deg); /* highlights, tissue */
+  --clr-accent-6: oklch(95% 0.02 69deg); /* tail club */
+  --clr-accent-7: oklch(90% 0.07 199deg); /* eyes primary */
+  --clr-accent-8: oklch(75% 0.09 228deg); /* eyes secondary */
+
+  --clr-selection: var(--clr-accent-8);
+  --clr-selection-text: var(--theme-c-primary-100);
+  --clr-nav-link-active: var(--clr-accent-8);
+  --clr-heading-underline: var(--clr-accent-8);
+  --clr-heading-data: var(--clr-accent-8);
+  --clr-link: var(--clr-accent-8);
+  --clr-link-underline: var(--clr-accent-8);
+  --clr-timeline-stroke: var(--clr-accent-8);
+  --clr-gallery-indicator: var(--clr-accent-8);
+
+  @media (prefers-color-scheme: light) {
+    --clr-accent-8: oklch(from var(--clr-accent-7) 60% calc(c * 3) h);
+  }
+}
+
+.jarek {
+  --clr-accent-1: oklch(69% 0.11 71deg); /* fur primary */
+  --clr-accent-2: oklch(56% 0.1 98deg); /* mane */
+  --clr-accent-3: oklch(76% 0.03 112deg); /* eyes */
+  --clr-accent-4: oklch(81% 0.07 74deg); /* horn */
+  --clr-accent-5: oklch(84% 0.07 111deg); /* trii */
+  --clr-accent-6: oklch(69% 0.12 95deg); /* naughty */
+
+  --clr-selection: var(--clr-accent-1);
+  --clr-selection-text: var(--theme-c-primary-100);
+  --clr-nav-link-active: var(--clr-accent-1);
+  --clr-heading-underline: var(--clr-accent-1);
+  --clr-heading-data: var(--clr-accent-1);
+  --clr-link: var(--clr-accent-1);
+  --clr-link-underline: var(--clr-accent-1);
+  --clr-gallery-indicator: var(--clr-accent-1);
+}
diff --git a/src/css/fonts.css b/src/css/fonts.css
new file mode 100644
index 0000000..89b13ec
--- /dev/null
+++ b/src/css/fonts.css
@@ -0,0 +1,497 @@
+/* poppins-thin-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 100;
+  font-stretch: 100%;
+  src: local('Poppins Thin'), local('Poppins-Thin'), url(../fonts/poppins/poppins-thin-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-thin-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 100;
+  font-stretch: 100%;
+  src: local('Poppins Thin'), local('Poppins-Thin'),
+    url(../fonts/poppins/poppins-thin-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-light-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 300;
+  font-stretch: 100%;
+  src: local('Poppins Light'), local('Poppins-Light'),
+    url(../fonts/poppins/poppins-light-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-light-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 300;
+  font-stretch: 100%;
+  src: local('Poppins Light'), local('Poppins-Light'),
+    url(../fonts/poppins/poppins-light-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-medium-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  src: local('Poppins Medium'), local('Poppins-Medium'),
+    url(../fonts/poppins/poppins-medium-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-medium-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  src: local('Poppins Medium'), local('Poppins-Medium'),
+    url(../fonts/poppins/poppins-medium-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: local('Poppins Regular'), local('Poppins-Regular'), url(../fonts/poppins/poppins-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: local('Poppins Regular'), local('Poppins-Regular'),
+    url(../fonts/poppins/poppins-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-extralight-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 200;
+  font-stretch: 100%;
+  src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
+    url(../fonts/poppins/poppins-extralight-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-extralight-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 200;
+  font-stretch: 100%;
+  src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
+    url(../fonts/poppins/poppins-extralight-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-black-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 900;
+  font-stretch: 100%;
+  src: local('Poppins Black'), local('Poppins-Black'),
+    url(../fonts/poppins/poppins-black-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-black-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 900;
+  font-stretch: 100%;
+  src: local('Poppins Black'), local('Poppins-Black'),
+    url(../fonts/poppins/poppins-black-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-semibold-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
+    url(../fonts/poppins/poppins-semibold-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-semibold-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
+    url(../fonts/poppins/poppins-semibold-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-bold-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: local('Poppins Bold'), local('Poppins-Bold'), url(../fonts/poppins/poppins-bold-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-bold-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: local('Poppins Bold'), local('Poppins-Bold'),
+    url(../fonts/poppins/poppins-bold-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-extrabold-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 800;
+  font-stretch: 100%;
+  src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
+    url(../fonts/poppins/poppins-extrabold-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-extrabold-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 800;
+  font-stretch: 100%;
+  src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
+    url(../fonts/poppins/poppins-extrabold-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-thin-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 100;
+  font-stretch: 100%;
+  src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
+    url(../fonts/poppins/poppins-thin-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-thin-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 100;
+  font-stretch: 100%;
+  src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
+    url(../fonts/poppins/poppins-thin-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-extralight-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 200;
+  font-stretch: 100%;
+  src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
+    url(../fonts/poppins/poppins-extralight-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-extralight-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 200;
+  font-stretch: 100%;
+  src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
+    url(../fonts/poppins/poppins-extralight-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-light-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 300;
+  font-stretch: 100%;
+  src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
+    url(../fonts/poppins/poppins-light-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-light-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 300;
+  font-stretch: 100%;
+  src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
+    url(../fonts/poppins/poppins-light-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-medium-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 500;
+  font-stretch: 100%;
+  src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
+    url(../fonts/poppins/poppins-medium-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-medium-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 500;
+  font-stretch: 100%;
+  src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
+    url(../fonts/poppins/poppins-medium-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-semibold-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
+    url(../fonts/poppins/poppins-semibold-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-semibold-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
+    url(../fonts/poppins/poppins-semibold-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-bold-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
+    url(../fonts/poppins/poppins-bold-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-bold-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
+    url(../fonts/poppins/poppins-bold-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-extrabold-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 800;
+  font-stretch: 100%;
+  src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
+    url(../fonts/poppins/poppins-extrabold-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-extrabold-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 800;
+  font-stretch: 100%;
+  src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
+    url(../fonts/poppins/poppins-extrabold-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: local('Poppins Italic'), local('Poppins-Italic'),
+    url(../fonts/poppins/poppins-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: local('Poppins Italic'), local('Poppins-Italic'),
+    url(../fonts/poppins/poppins-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-black-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 900;
+  font-stretch: 100%;
+  src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
+    url(../fonts/poppins/poppins-black-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-black-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 900;
+  font-stretch: 100%;
+  src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
+    url(../fonts/poppins/poppins-black-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Sour Gummy';
+  font-style: italic;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTN1IOK1G.woff2)
+    format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
+    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Sour Gummy';
+  font-style: italic;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTNNIOA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Sour Gummy';
+  font-style: normal;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBNfNFQPA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
+    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Sour Gummy';
+  font-style: normal;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBDfNE.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 0000000..c0db3a8
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,30 @@
+:root {
+  font-family: var(--font-family-copy);
+  font-size: var(--font-size);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--clr-page-background);
+  color: var(--clr-text);
+
+  margin: 0;
+  min-height: 100dvh;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-headings);
+}
+
+::selection {
+  color: var(--clr-selection-text);
+  background-color: var(--clr-selection);
+}
diff --git a/src/index.webc b/src/index.webc
index 61caeaa..8fd479b 100644
--- a/src/index.webc
+++ b/src/index.webc
@@ -14,7 +14,7 @@
   </header>
 
   <div class="characters">
-    <card webc:for="char of characters" :href="`/${char}/`">
+    <card webc:for="char of characters" :href="`/${char}/`" webc:nokeep>
       <eleventy-image
         slot="image"
         :src="getAvatar(char)"
diff --git a/src/jarek/anatomy.md b/src/jarek/anatomy.md
index b8aed3a..7304279 100644
--- a/src/jarek/anatomy.md
+++ b/src/jarek/anatomy.md
@@ -6,4 +6,4 @@ eleventyNavigation:
 
 Jarek's color palette:
 
-<colors :@colors="$data.getColors()"></colors>
+<colors :colors="getColors()" webc:nokeep></colors>
diff --git a/src/layouts/base.webc b/src/layouts/base.webc
index 99198b5..4a3f038 100644
--- a/src/layouts/base.webc
+++ b/src/layouts/base.webc
@@ -4,12 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Character Ref</title>
-
-    <template webc:is="page-head-base" webc:nokeep></template>
-    <template webc:is="page-head-fonts" webc:nokeep></template>
-    <template webc:is="page-head-colors" webc:nokeep></template>
-    <template webc:is="page-head-style" webc:nokeep></template>
-
+    <link rel="stylesheet" href="../css/base.css" />
+    <link rel="stylesheet" href="../css/fonts.css" />
+    <link rel="stylesheet" href="../css/colors.css" />
+    <link rel="stylesheet" href="../css/style.css" />
     <link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
     <script type="module" :src="getBundleFileUrl('js')" webc:keep></script>
   </head>
diff --git a/src/layouts/character.webc b/src/layouts/character.webc
index d1bb350..1131ef2 100644
--- a/src/layouts/character.webc
+++ b/src/layouts/character.webc
@@ -3,7 +3,7 @@ layout: base.webc
 ---
 
 <main :class="firstName.toLowerCase()">
-  <profile>
+  <profile webc:nokeep>
     <eleventy-image
       slot="avatar"
       :src="`src/img/${firstName.toLowerCase()}/avatar.png`"
@@ -12,10 +12,10 @@ layout: base.webc
     ></eleventy-image>
     <template webc:nokeep slot="name" @text="getFullName()"></template>
     <template webc:nokeep slot="species" @text="species"></template>
-    <traits :@traits="$data.getTraits()"></traits>
+    <traits :traits="getTraits()" webc:nokeep></traits>
   </profile>
 
-  <page-content :@char="$data.firstName.toLowerCase()">
+  <page-content :char="firstName.toLowerCase()" webc:nokeep>
     <h1 @text="$data.eleventyNavigation.key"></h1>
     <article @raw="content"></article>
   </page-content>
diff --git a/src/sebin/abilities.md b/src/sebin/abilities.md
index 0d6748e..8605248 100644
--- a/src/sebin/abilities.md
+++ b/src/sebin/abilities.md
@@ -8,8 +8,4 @@ Since Sebin is a fire dragon there's a myriad of abilities he has at his disposa
 
 ## Attacks
 
-<abilities
-    :@abilities="attacks"
-    :@img="true"
-    :@char="$data.firstName.toLowerCase()"
-></abilities>
+<abilities :abilities="attacks" :img="true" :char="firstName.toLowerCase()" webc:nokeep></abilities>
diff --git a/src/sebin/anatomy.md b/src/sebin/anatomy.md
index aed88fa..12ca088 100644
--- a/src/sebin/anatomy.md
+++ b/src/sebin/anatomy.md
@@ -2,6 +2,27 @@
 eleventyNavigation:
   key: Anatomy
   order: 2
+refs:
+  sebinFront:
+    src: ref-front.png
+    alt: Sebin Ref
+    artist: draftgon
+    href: https://bsky.app/profile/draftgon.bsky.social
+  sebinBack:
+    src: ref-back.png
+    alt: Sebin Ref
+    artist: draftgon
+    href: https://bsky.app/profile/draftgon.bsky.social
+  sebinExpressions:
+    src: ref-expressions.png
+    alt: Sebin's expressions
+    artist: draftgon
+    href: https://bsky.app/profile/draftgon.bsky.social
+  sebinUpperBody:
+    src: ref-upper-body.png
+    alt: Sebin's upper body closeup
+    artist: Nidhogg
+    href: https://bsky.app/profile/nidthedragon.bsky.social
 gallery: [
   {
     alt: Sebin looking aloof (but chill),
@@ -52,19 +73,20 @@ gallery: [
 ---
 
 <ref-img
-    src="ref-front.png"
-    alt="Sebin Ref"
-    artist="draftgon"
-    href="https://bsky.app/profile/draftgon.bsky.social"
-    :width="[1000]"
-    :@char="$data.firstName.toLowerCase()"
-    :@dropshadow="true"
+  :char="firstName.toLowerCase()"
+  :src="refs.sebinFront.src"
+  :alt="refs.sebinFront.alt"
+  :width="[1000]"
+  :artist="refs.sebinFront.artist"
+  :href="refs.sebinFront.href"
+  :dropshadow="true"
+  webc:nokeep
 ></ref-img>
 
-<colors :@colors="$data.getColors()"></colors>
+<colors :colors="getColors()" webc:nokeep></colors>
 
-<quick-info>
-  <traits :@traits="$data.getTraits('general')"></traits>
+<quick-info webc:nokeep>
+  <traits :traits="getTraits('general')" webc:nokeep></traits>
 </quick-info>
 
 Sebin is the offspring of a human and a dragon. Like a human, he is a bipedal plantigrade. Most of his body is covered with red scales. Yellow scales run from the underside of his jaw over his chest and legs to the underside of the tip of his tail. These scales are particularly hard and function like plate armor to better protect vital organs.
@@ -78,17 +100,18 @@ Sebin has a muscular build that he keeps in shape with regular exercise.
 ## Wings
 
 <ref-img
-    src="ref-back.png"
-    alt="Sebin Ref"
-    artist="draftgon"
-    href="https://bsky.app/profile/draftgon.bsky.social"
-    :width="[1000]"
-    :@char="$data.firstName.toLowerCase()"
-    :@dropshadow="true"
+  :char="firstName.toLowerCase()"
+  :src="refs.sebinBack.src"
+  :alt="refs.sebinBack.alt"
+  :width="[1000]"
+  :artist="refs.sebinBack.artist"
+  :href="refs.sebinBack.href"
+  :dropshadow="true"
+  webc:nokeep
 ></ref-img>
 
-<quick-info>
-  <traits :@traits="$data.getTraits('wings')"></traits>
+<quick-info webc:nokeep>
+  <traits :traits="getTraits('wings')" webc:nokeep></traits>
 </quick-info>
 
 Sebin's wings have a span of about 4.17 meters (13'8"). They function very much like a second pair of arms: two interconnected limbs that form a bendable arm, at the end of which sits a hand-like structure, adorned with a talon in exchange for a thumb, with a sturdy membrane stretched between its long fingers. On solid ground, he keeps his wings closed so as not to accidentally bump into anything with them. Sebin also pays a lot of attention to his wings when working out, so that they can keep carrying him reliably through the air. Though, he only travels short to medium distances through the air before he has to take a rest - as long as the airspace in the area has been declared open for wing bearers.
@@ -96,17 +119,18 @@ Sebin's wings have a span of about 4.17 meters (13'8"). They function very much
 ## Head
 
 <ref-img
-    src="ref-expressions.png"
-    alt="Sebin's expressions"
-    artist="draftgon"
-    href="https://bsky.app/profile/draftgon.bsky.social"
-    :width="[1000]"
-    :@char="$data.firstName.toLowerCase()"
-    :@dropshadow="true"
+  :char="firstName.toLowerCase()"
+  :src="refs.sebinExpressions.src"
+  :alt="refs.sebinExpressions.alt"
+  :width="[1000]"
+  :artist="refs.sebinExpressions.artist"
+  :href="refs.sebinExpressions.href"
+  :dropshadow="true"
+  webc:nokeep
 ></ref-img>
 
-<quick-info>
-  <traits :@traits="$data.getTraits('head')"></traits>
+<quick-info webc:nokeep>
+  <traits :traits="getTraits('head')" webc:nokeep></traits>
 </quick-info>
 
 Despite what one might expect with reptilians, Sebin's pupils are rounded instead of slit-shaped. Yellow spikes running above his eyelids serve as eyebrows. These spikes are also found along his jaw bone. Two pointed, slightly curved, black horns protrude from his head. He usually wears his medium-length, blue hair loose. His long, pointed ears are very flexible, allowing him to hear sounds around him without having to turn his head. They are also used for non-verbal communication, to express emotions through body language. His hearing perceives a wider range of frequencies, making it superior to that of a human. His jaws are equipped with razor-sharp teeth that effortlessly sink into anything he manages to bite, be it nourishment or adversaries. Embedded between them lies his tongue, which is typically pointed for reptilians. Glands in his throat produce a mixture which he uses to spit fire, which can reach up to around 100 °C (212 °F).
@@ -114,17 +138,18 @@ Despite what one might expect with reptilians, Sebin's pupils are rounded instea
 ## Upper body
 
 <ref-img
-    src="ref-upper-body.png"
-    alt="Sebin's upper body closeup"
-    artist="Nidhogg"
-    href="https://bsky.app/profile/nidthedragon.bsky.social"
-    :width="[1000]"
-    :@char="$data.firstName.toLowerCase()"
-    :@dropshadow="true"
+  :char="firstName.toLowerCase()"
+  :src="refs.sebinUpperBody.src"
+  :alt="refs.sebinUpperBody.alt"
+  :width="[1000]"
+  :artist="refs.sebinUpperBody.artist"
+  :href="refs.sebinUpperBody.href"
+  :dropshadow="true"
+  webc:nokeep
 ></ref-img>
 
-<quick-info>
-  <traits :@traits="$data.getTraits('muscle')"></traits>
+<quick-info webc:nokeep>
+  <traits :traits="getTraits('muscle')" webc:nokeep></traits>
 </quick-info>
 
 At the age of 17, Sebin gradually began to keep his body in shape on a regular basis. His favorite exercises include weightlifting (with both dumbbells and barbells), lat pulldown, leg press and cable curls. He works out three days a week with one day off between training days, rotating the body regions he trains each day.
@@ -135,32 +160,34 @@ Sebin is very concerned with an even distribution of muscle mass, but pays parti
 
 An assortment of additional references how Sebin can be drawn.
 
-<ref-gallery>
+<ref-gallery webc:nokeep>
   <ref-img webc:for="ref of [...Array(9).keys()]"
+    :char="firstName.toLowerCase()"
     :src="`ref-muscle-${ref + 1}.png`"
-    :alt="$data.gallery[ref].alt"
+    :alt="gallery[ref].alt"
+    :artist="gallery[ref].artist"
+    :href="gallery[ref].href"
     :width="[500, 1000]"
-    :href="$data.gallery[ref].href"
-    :@artist="$data.gallery[ref].artist"
-    :@char="$data.firstName.toLowerCase()"
-    :@dropshadow="false"
+    :dropshadow="false"
+    webc:nokeep
   ></ref-img>
 </ref-gallery>
 
 ## Penis
 
 <ref-img
-    src="ref-penis.png"
-    alt="Sebin's manly parts"
-    artist="draftgon"
-    href="https://bsky.app/profile/draftgon.bsky.social"
-    :width="[500, 1000]"
-    :@char="$data.firstName.toLowerCase()"
-    :@dropshadow="true"
+  :char="firstName.toLowerCase()"
+  src="ref-penis.png"
+  alt="Sebin's manly parts"
+  artist="draftgon"
+  href="https://bsky.app/profile/draftgon.bsky.social"
+  :width="[500, 1000]"
+  :dropshadow="true"
+  webc:nokeep
 ></ref-img>
 
-<quick-info>
-  <traits :@traits="$data.getTraits('naughty')"></traits>
+<quick-info webc:nokeep>
+  <traits :traits="getTraits('naughty')" webc:nokeep></traits>
 </quick-info>
 
 Despite his reptilian appearance, Sebin has nipples, a feature of the human side of his family. Furthermore, his external testicles represent another humanized feature. Where relatives of his ilk possess a slit in which the penis lies protectively, Sebin possesses a pouch-like sheath from which the tip of the penis protrudes slightly. The shape of his shaft is predominantly humanoid, but it is surrounded by ridges and has no equivalent of a foreskin. When aroused, the coal-black shaft swells and pushes out of the sheath until fully erect, the sheath wrapping around the root of the shaft like a ring. However, he can also push it out in a flaccid state, e.g. when needing to pass water.
diff --git a/src/sebin/clothing.md b/src/sebin/clothing.md
index 3192dd1..bbb8386 100644
--- a/src/sebin/clothing.md
+++ b/src/sebin/clothing.md
@@ -28,14 +28,15 @@ gallery: [
 
 Sebin knows how to dress!
 
-<ref-gallery>
+<ref-gallery webc:nokeep>
   <ref-img webc:for="ref of Array(4).keys()" 
+    :char="firstName.toLowerCase()"
     :src="`ref-clothes-${ref + 1}.png`"
-    :alt="$data.gallery[ref].alt"
-    :href="$data.gallery[ref].href"
+    :alt="gallery[ref].alt"
+    :artist="gallery[ref].artist"
+    :href="gallery[ref].href"
     :width="[500, 1000]"
-    :@char="$data.firstName.toLowerCase()"
-    :@artist="$data.gallery[ref].artist"
-    :@dropshadow="false"
+    :dropshadow="false"
+    webc:nokeep
   ></ref-img>
 </ref-gallery>
diff --git a/src/sebin/overdrive.md b/src/sebin/overdrive.md
index 03b4aca..fa504ab 100644
--- a/src/sebin/overdrive.md
+++ b/src/sebin/overdrive.md
@@ -2,16 +2,23 @@
 eleventyNavigation:
   key: Overdrive
   order: 4
+refs:
+  overdrive:
+    src: ref-overdrive.jpg
+    alt: Sebin Overdrive Ref
+    artist: CVictorrosso
+    href: https://bsky.app/profile/cvictorrosso.bsky.social
 ---
 
 <ref-img
-    src="ref-overdrive.jpg"
-    alt="Sebin Overdrive Ref"
-    artist="CVictorrosso"
-    href="https://bsky.app/profile/cvictorrosso.bsky.social"
-    :width="[1000]"
-    :@char="$data.firstName.toLowerCase()"
-    :@dropshadow="false"
+  :char="firstName.toLowerCase()"
+  :src="refs.overdrive.src"
+  :alt="refs.overdrive.alt"
+  :width="[1000]"
+  :artist="refs.overdrive.artist"
+  :href="refs.overdrive.href"
+  :dropshadow="false"
+  webc:nokeep
 ></ref-img>
 
 Sebin can enter an Overdrive Form which greatly increases his strength and abilities but it comes at a cost.
@@ -24,8 +31,4 @@ Direct body contact with Sebin during overdrive causes 3rd degree burns as he em
 
 ## Attacks
 
-<abilities
-    :@abilities="overdriveAttacks"
-    :@img="false"
-    :@char="$data.firstName.toLowerCase()"
-></abilities>
+<abilities :abilities="overdriveAttacks" :img="false" :char="firstName.toLowerCase()" webc:nokeep></abilities>
diff --git a/src/viktor/anatomy.md b/src/viktor/anatomy.md
index faa5d10..f9adcbd 100644
--- a/src/viktor/anatomy.md
+++ b/src/viktor/anatomy.md
@@ -2,18 +2,30 @@
 eleventyNavigation:
   key: Anatomy
   order: 2
+refs:
+  viktorRef:
+    src: ref-SFW.png
+    alt: Viktor Ref
+    artist: sabertoofs
+    href: https://bsky.app/profile/sabertoofs.bsky.social
+  viktorPinup:
+    src: pinup-SFW.png
+    alt: Viktor Ref
+    artist: sabertoofs
+    href: https://bsky.app/profile/sabertoofs.bsky.social
 ---
 
 <ref-img
-    src="ref-SFW.png"
-    alt="Viktor Ref"
-    artist="sabertoofs"
-    href="https://bsky.app/profile/sabertoofs.bsky.social"
-    :@char="$data.firstName.toLowerCase()"
-    :@dropshadow="true"
+  :char="firstName.toLowerCase()"
+  :src="refs.viktorRef.src"
+  :alt="refs.viktorRef.alt"
+  :artist="refs.viktorRef.artist"
+  :href="refs.viktorRef.href"
+  :dropshadow="true"
+  webc:nokeep
 ></ref-img>
 
-<colors :@colors="$data.getColors()"></colors>
+<colors :colors="getColors()" webc:nokeep></colors>
 
 Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly bicolored, with several shades of brown.
 
@@ -22,12 +34,13 @@ His forehead, nose, chest, belly and crotch are of light desert sand colors that
 His cheeks, shoulders, back and thighs, in contrast, stand out with a rich walnut brown, which is also found on the sides of his tail. From the back of his head, down his spine and across the top of his tail is a continuous strip of deep dark cedar brown. Arms and legs are distinguished by a light earthy brown.
 
 <ref-img
-    src="pinup-SFW.png"
-    alt="Viktor Ref"
-    artist="sabertoofs"
-    href="https://bsky.app/profile/sabertoofs.bsky.social"
-    :@char="$data.firstName.toLowerCase()"
-    :@dropshadow="true"
+  :char="firstName.toLowerCase()"
+  :src="refs.viktorPinup.src"
+  :alt="refs.viktorPinup.alt"
+  :artist="refs.viktorPinup.artist"
+  :href="refs.viktorPinup.href"
+  :dropshadow="true"
+  webc:nokeep
 ></ref-img>
 
 His entire body is speckled with scattered aquamarine spots, which come in pairs of one large and one small spot. The only exceptions are the spots on his cheeks and behind his lower cheek horns, which come in threes and his the top side of his snout, which sports a big single spot. Mouth, tongue, nostrils and any other tissue of his body also feature this color.
diff --git a/src/viktor/career.md b/src/viktor/career.md
index 9a977b5..fd5096b 100644
--- a/src/viktor/career.md
+++ b/src/viktor/career.md
@@ -7,4 +7,4 @@ eleventyNavigation:
 Viktor's had many different jobs in the past, some of which where very formative, other's just
 paid the bills.
 
-<timeline :@jobs="jobs"></timeline>
+<timeline :@jobs="jobs" webc:nokeep></timeline>
diff --git a/src/viktor/index.md b/src/viktor/index.md
index fc7c75a..b4f8f56 100644
--- a/src/viktor/index.md
+++ b/src/viktor/index.md
@@ -14,8 +14,8 @@ Viktor prefers to keep it simple. He's not particularly fond of the dependence o
 
 ## Sexuality
 
-<quick-info>
-  <traits :@traits="$data.getTraits('naughty')"></traits>
+<quick-info webc:nokeep>
+  <traits :traits="getTraits('naughty')" webc:nokeep></traits>
 </quick-info>
 
 As a teenager, Viktor noticed that he felt a bit differently about the boys in his class. Especially in gym class, his eyes tended to linger longer on his classmates as they rough-housed in the locker room, as pubescent boys do. However, he could never quite come to terms with the idea that he might be a little different from his friends, who were all beginning to take an interest in girls, unlike him, who was more interested in his buddies.