diff --git a/.github/_config.yml b/.github/_config.yml
index b28afd3..a5c0930 100644
--- a/.github/_config.yml
+++ b/.github/_config.yml
@@ -31,7 +31,7 @@ title: "{B/qKC}"
 tagline: a decentralized archive of Black queer Kansas City history
 # description appears in meta tags and other locations
 # this description might appear in search result lists, keep around 160 characters max
-description: "This is the official database and site for {B/qKC}: an archival project challenging institutional archival practices within the frame and study of midwestern Black queer history."
+description: "This is the official database for {B/qKC}: an archival project challenging institutional archival practices within the frame and study of midwestern Black queer history."
 # keywords, a short list of subjects describing the collection, separated by semicolon, to appear in rich markup
 keywords: kansas city; history; queer; black
 # creator of the digital collection, to appear in meta tags; we typically use our GitHub usernames but feel free to just use your name
diff --git a/_data/config-metadata.csv b/_data/config-metadata.csv
index 0b5180b..755ddfb 100644
--- a/_data/config-metadata.csv
+++ b/_data/config-metadata.csv
@@ -13,3 +13,4 @@ type,Type,,,DCTERMS.type,
 format,Format,,,,encodingFormat
 language,Language,,,DCTERMS.language,
 rightsstatement,,,,DCTERMS.rights,license
+duration (MM:SS),Duration,,,,
diff --git a/_includes/collection-banner.html b/_includes/collection-banner.html
index 73a0d40..094b4bd 100644
--- a/_includes/collection-banner.html
+++ b/_includes/collection-banner.html
@@ -1,70 +1,368 @@
-{% if page.layout == "home-infographic" and site.data.theme.featured-image %}
+{% if page.layout == "home-infographic" %}
+
+{%- comment -%}
+Carousel Banner: rotates through random collection items
+Always shows starlacoll033 first, then shuffles other items
+{%- endcomment -%}
+
+{%- assign carousel_items = "" | split: "" -%}
+
+{%- comment -%} Get specific items in order {%- endcomment -%}
+{%- assign wanted_ids = "starlacoll033,garycoll009,garycoll005,starlacoll019,starlacoll008,tishacoll028" | split: "," -%}
+
+{%- for wanted_id in wanted_ids -%}
+  {%- for item in site.data[site.metadata] -%}
+    {%- if item.objectid == wanted_id -%}
+      {%- assign carousel_items = carousel_items | push: item -%}
+      {%- break -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endfor -%}
+
 <style>
-#home-banner {
-    background-image: url('{{ site.data.featured_item.src | relative_url }}');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: {{ site.data.theme.home-banner-image-position | default: 'center' }};
+#home-banner-carousel {
+  position: relative;
+  min-height: 380px;
+  max-height: 580px;
+  background-color: #000;
+  overflow: hidden;
 }
+
+.carousel-slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 800ms ease-in-out;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.carousel-slide.active {
+  opacity: 1;
+  z-index: 1;
+}
+
 #home-title-box {
-    padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
-    padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
+  position: relative;
+  z-index: 2;
+  padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
+  padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
 }
+
 @media screen and (max-width: 576px) {
-    #home-title-box {
-        padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
-        padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
-    }
+  #home-title-box {
+    padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
+    padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
+  }
+}
+
+.carousel-controls {
+  position: absolute;
+  top: 1rem;
+  left: 1.25rem;
+  z-index: 10;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.carousel-btn {
+  background: rgba(0, 0, 0, 0.45);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  color: rgba(255, 255, 255, 0.85);
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms ease;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.carousel-btn:hover {
+  color: #ffffff;
+  border-color: rgba(255, 255, 255, 0.75);
+}
+
+.carousel-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.carousel-dots {
+  display: flex;
+  gap: 0.35rem;
+  padding: 0.35rem 0.6rem;
+  background: rgba(0, 0, 0, 0.45);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 4px;
+}
+
+.carousel-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  transition: all 200ms ease;
+}
+
+.carousel-dot:hover {
+  background: rgba(255, 255, 255, 0.65);
+}
+
+.carousel-dot.active {
+  background: #ffffff;
+  width: 18px;
+  border-radius: 3px;
+}
+
+@media (max-width: 575px) {
+  .carousel-controls {
+    top: 0.75rem;
+    left: 0.75rem;
+    gap: 0.4rem;
+  }
+  
+  .carousel-btn {
+    width: 28px;
+    height: 28px;
+  }
+  
+  .carousel-btn svg {
+    width: 12px;
+    height: 12px;
+  }
+  
+  .carousel-dots {
+    padding: 0.3rem 0.5rem;
+  }
+}
+
+.featured-image-label {
+  position: absolute;
+  bottom: 1rem;
+  right: 1.25rem;
+  z-index: 10;
+  padding: 0.35rem 0.6rem;
+  background: rgba(0, 0, 0, 0.45);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  border-radius: 4px;
+  transition: all 200ms ease;
+}
+
+.featured-image-label:hover {
+  border-color: rgba(255, 255, 255, 0.75);
+}
+
+.featured-image-label a {
+  font-size: 0.7rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.85) !important;
+  text-decoration: none;
+  display: block;
+}
+
+.featured-image-label:hover a {
+  color: #ffffff !important;
+}
+
+@media (max-width: 575px) {
+  .featured-image-label {
+    bottom: 0.75rem;
+    right: 0.75rem;
+    padding: 0.3rem 0.5rem;
+  }
+  
+  .featured-image-label a {
+    font-size: 0.65rem;
+  }
 }
 </style>
 
-<div id="home-banner" class="container-fluid mb-0 p-0">
+<div id="home-banner-carousel" class="container-fluid mb-0 p-0">
   <a class="portfolio-site-link"
-   href="https://1800nasi.net/category/bqkc/"
-   title="Main domain to view exhibitions, programs and media features of {B/qKC}">
-   VIEW THE ARCHIVE IN PRACTICE →
-</a>
+     href="https://1800nasi.net/category/bqkc/"
+     title="Main domain to view exhibitions, programs and media features of {B/qKC}">
+    VIEW THE ARCHIVE IN PRACTICE →
+  </a>
+
+  {%- comment -%} Carousel slides {%- endcomment -%}
+  {%- for item in carousel_items -%}
+    <div class="carousel-slide{% if forloop.first %} active{% endif %}"
+         data-slide="{{ forloop.index0 }}"
+         style="background-image: url('{{ item.image_small | relative_url }}');">
+    </div>
+  {%- endfor -%}
+
   <div id="home-title-box" class="position-relative">
     <div class="p-2 text-white bg-dark bg-opacity-75 d-inline-block">
       {% if site.organization-logo-nav %}
-      <a class="d-none d-md-block" href="{{ site.organization-link }}">
-        <img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home">
-      </a>
+        <a class="d-none d-md-block" href="{{ site.organization-link }}">
+          <img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home">
+        </a>
       {% endif %}
       <h1 class="display-4 m-0">{{ site.title }}</h1>
       {% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
     </div>
   </div>
 
-  {% unless site.data.theme.featured-image contains '/' %}
-  <div class="featured-image-label">
-    <a href="{{ site.data.featured_item.link | relative_url }}"
-       title="{{ site.data.featured_item.alt | escape }}">
-       Featured Image
-    </a>
+  {%- comment -%} Carousel controls {%- endcomment -%}
+  <div class="carousel-controls">
+    <button class="carousel-btn" id="carousel-prev" aria-label="Previous slide">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </button>
+    
+    <div class="carousel-dots">
+      {%- for item in carousel_items -%}
+        <div class="carousel-dot{% if forloop.first %} active{% endif %}" data-slide="{{ forloop.index0 }}"></div>
+      {%- endfor -%}
+    </div>
+
+    <button class="carousel-btn" id="carousel-next" aria-label="Next slide">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+  </div>
+
+  {%- comment -%} Featured image label (for current slide) {%- endcomment -%}
+  <div class="featured-image-label">
+    <a href="#" id="carousel-item-link" title="">Featured Image</a>
   </div>
-  {% endunless %}
 </div>
+
+<script>
+(function() {
+  const slides = document.querySelectorAll('.carousel-slide');
+  const dots = document.querySelectorAll('.carousel-dot');
+  const prevBtn = document.getElementById('carousel-prev');
+  const nextBtn = document.getElementById('carousel-next');
+  const itemLink = document.getElementById('carousel-item-link');
+  
+  let currentSlide = 0;
+  let autoplayInterval;
+  
+  let itemData = [
+    {%- for item in carousel_items -%}
+    {
+      objectid: "{{ item.objectid }}",
+      title: "{{ item.title | escape }}",
+      image: "{{ item.image_small | relative_url }}"
+    }{% unless forloop.last %},{% endunless %}
+    {%- endfor -%}
+  ];
+  
+  // Shuffle function
+  function shuffle(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+  }
+  
+  // Shuffle the data on load
+  itemData = shuffle(itemData);
+  
+  // Apply shuffled images to slides
+  slides.forEach((slide, index) => {
+    if (itemData[index]) {
+      slide.style.backgroundImage = `url('${itemData[index].image}')`;
+    }
+  });
+  
+  function showSlide(index) {
+    slides.forEach(s => s.classList.remove('active'));
+    dots.forEach(d => d.classList.remove('active'));
+    
+    currentSlide = (index + slides.length) % slides.length;
+    
+    slides[currentSlide].classList.add('active');
+    dots[currentSlide].classList.add('active');
+    
+    // Update featured image link
+    const baseUrl = '{{ "/" | relative_url }}';
+    itemLink.href = baseUrl + 'items/' + itemData[currentSlide].objectid + '.html';
+    itemLink.title = itemData[currentSlide].title;
+  }
+  
+  function nextSlide() {
+    showSlide(currentSlide + 1);
+  }
+  
+  function prevSlide() {
+    showSlide(currentSlide - 1);
+  }
+  
+  function startAutoplay() {
+    autoplayInterval = setInterval(nextSlide, 5000); // 5 seconds
+  }
+  
+  function stopAutoplay() {
+    clearInterval(autoplayInterval);
+  }
+  
+  // Event listeners
+  prevBtn.addEventListener('click', () => {
+    stopAutoplay();
+    prevSlide();
+    startAutoplay();
+  });
+  
+  nextBtn.addEventListener('click', () => {
+    stopAutoplay();
+    nextSlide();
+    startAutoplay();
+  });
+  
+  dots.forEach((dot, index) => {
+    dot.addEventListener('click', () => {
+      stopAutoplay();
+      showSlide(index);
+      startAutoplay();
+    });
+  });
+  
+  // Initialize
+  showSlide(0);
+  startAutoplay();
+})();
+</script>
+
 {%- else -%}
-  <div class="container">
-    <div class="container position-relative">
-  <a class="portfolio-site-link"
-     href="https://1800nasi.net/category/bqkc/"
-     title="Main domain to view exhibitions, programs and media features of {B/qKC}">
-     ARCHIVE IN PRACTICE →
-  </a>
+{%- comment -%} Non-carousel version for other pages {%- endcomment -%}
+<div class="container">
+  <div class="container position-relative">
+    <a class="portfolio-site-link"
+       href="https://1800nasi.net/category/bqkc/"
+       title="Main domain to view exhibitions, programs and media features of {B/qKC}">
+      ARCHIVE IN PRACTICE →
+    </a>
     <div class="row align-items-center">
       <div id="title" class="{% if site.organization-logo-banner %}col-md-9{% else %}col-12{% endif %}">
         <h1 class="mt-2"><a class="text-dark" href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
         {% if site.tagline %}<p>{{ site.tagline }}</p>{% endif %}
       </div>
       {% if site.organization-logo-banner %}
-      <div class="col-md-3 d-none d-lg-block text-end">
-        <a class="btn btn-outline-light" href="{{ site.organization-link }}">
-          <img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home">
-        </a>
-      </div>
+        <div class="col-md-3 d-none d-lg-block text-end">
+          <a class="btn btn-outline-light" href="{{ site.organization-link }}">
+            <img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home">
+          </a>
+        </div>
       {% endif %}
     </div>
   </div>
-{%- endif -%}
+</div>
+{%- endif -%}
\ No newline at end of file
diff --git a/_layouts/about.html b/_layouts/about.html
index 783613a..53a8c17 100644
--- a/_layouts/about.html
+++ b/_layouts/about.html
@@ -90,7 +90,7 @@ layout: default
             </div>
             <div class="modal-body text-center">
                 <img id="lightbox-img" src="" alt="Image" class="img-fluid">
-                <p id="lightbox-caption" class="mt-3 text-muted"></p>
+                <p id="lightbox-caption" class="mt-3 text-black"></p>
             </div>
         </div>
     </div>
diff --git a/_sass/_custom.scss b/_sass/_custom.scss
index 1507041..2bdc14e 100644
--- a/_sass/_custom.scss
+++ b/_sass/_custom.scss
@@ -1,38 +1,106 @@
 /* 
-    Put your custom SCSS here! 
-    This allows you to override any CollectionBuilder or Bootstrap CSS without modifying the base theme files directly.
+    CollectionBuilder Custom SCSS
+    Design System Implementation - Phase 2
 */
 
-/* base colors */
+/* ============================================================================
+   DESIGN SYSTEM VARIABLES
+   ============================================================================ */
 
 :root {
+  /* COLORS - Base Palette */
   --bg-black: #000000;
   --bg-soft-black: #0e0e0e;
   --text-white: #f5f5f5;
   --text-muted: #bfbfbf;
   --border-white: #ffffff;
+  
+  /* COLORS - Accent (use sparingly!) */
+  --accent-blue: #4da3ff;
+  --accent-blue-dim: #3d8ace;
+  --accent-blue-subtle: rgba(77, 163, 255, 0.15);
+  
+  /* TYPOGRAPHY - Font Sizes */
+  --text-xs: 0.7rem;        /* labels, captions */
+  --text-sm: 0.8rem;        /* small body, metadata */
+  --text-base: 0.98rem;     /* body text */
+  --text-lg: 1.1rem;        /* large body */
+  --text-xl: 1.25rem;       /* page titles (non-home) */
+  --text-2xl: 1.5rem;       /* section headers */
+  --text-3xl: clamp(2rem, 3.4vw, 3rem); /* home title */
+  
+  /* TYPOGRAPHY - Weights & Spacing */
+  --font-normal: 400;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --letter-spacing-tight: 0.04em;
+  --letter-spacing-normal: 0.08em;
+  --letter-spacing-wide: 0.14em;
+  --letter-spacing-wider: 0.16em;
+  --letter-spacing-widest: 0.18em;
+  
+  /* SPACING SCALE (consistent increments) */
+  --space-xs: 0.25rem;      /* 4px */
+  --space-sm: 0.5rem;       /* 8px */
+  --space-md: 1rem;         /* 16px */
+  --space-lg: 1.5rem;       /* 24px */
+  --space-xl: 2rem;         /* 32px */
+  --space-2xl: 2.5rem;      /* 40px */
+  --space-3xl: 3rem;        /* 48px */
+  
+  /* BORDERS & RADIUS */
+  --border-radius: 4px;     /* consistent everywhere */
+  --border-radius-lg: 10px; /* only for home title box */
+  --border-width: 1px;
+  --border-color-subtle: rgba(255, 255, 255, 0.18);
+  --border-color-normal: rgba(255, 255, 255, 0.35);
+  --border-color-strong: rgba(255, 255, 255, 0.75);
+  
+  /* OPACITY LEVELS */
+  --opacity-subtle: 0.15;
+  --opacity-muted: 0.35;
+  --opacity-normal: 0.65;
+  --opacity-strong: 0.85;
+  --opacity-full: 1;
+  
+  /* TRANSITIONS */
+  --transition-fast: 150ms ease-out;
+  --transition-normal: 200ms ease;
+  --transition-slow: 300ms ease;
+  
+  /* OVERLAYS & BACKGROUNDS */
+  --overlay-dark: rgba(0, 0, 0, 0.45);
+  --overlay-darker: rgba(0, 0, 0, 0.75);
+  --overlay-darkest: rgba(0, 0, 0, 0.88);
 }
-/* global black */
+
+/* ============================================================================
+   GLOBAL STYLES
+   ============================================================================ */
 
 body {
   background-color: var(--bg-black);
   color: var(--text-white);
 }
+
 input, textarea {
   color: white;
 }
+
 ::placeholder {
-  color: rgba(255,255,255,0.6);
+  color: rgba(255, 255, 255, var(--opacity-normal));
 }
 
-/* forcing color fixes */
+/* ============================================================================
+   COLOR OVERRIDES
+   ============================================================================ */
 
 .navbar-brand,
 .navbar-brand a,
 .navbar-dark .navbar-brand,
 .navbar-dark .navbar-brand:focus,
 .navbar-dark .navbar-brand:hover {
-  color: #ffffff !important;
+  color: var(--border-white) !important;
 }
 
 .dropdown-item:hover {
@@ -40,30 +108,35 @@ input, textarea {
 }
 
 .text-muted {
-  color: rgba(255, 255, 255, 0.65) !important;
+  color: rgba(255, 255, 255, var(--opacity-normal)) !important;
 }
 
 header .navbar-brand,
 header .navbar-brand *,
 #home-banner-logo {
-  color: #ffffff !important;
+  color: var(--border-white) !important;
 }
 
 header a,
 header a * {
-  color: #ffffff !important;
+  color: var(--border-white) !important;
 }
+
 #header a,
 #header a * {
-  color: #ffffff !important;
+  color: var(--border-white) !important;
 }
 
 #title a.text-dark,
 #title a.text-dark:hover,
 #title a.text-dark:focus {
-  color: #ffffff !important;
+  color: var(--border-white) !important;
 }
-/*footer styling */
+
+/* ============================================================================
+   FOOTER STYLING
+   ============================================================================ */
+
 .footer-top {
   align-items: stretch;
 }
@@ -71,7 +144,7 @@ header a * {
 .footer-logo-spinner {
   display: flex;
   justify-content: flex-end; 
-  padding: 0.5rem 0;
+  padding: var(--space-sm) 0;
 }
 
 .footer-logo-spinner video {
@@ -89,31 +162,35 @@ header a * {
 
 #footer-credits {
   text-align: center;
-  margin-top: 1rem;
+  margin-top: var(--space-md);
 }
 
 .bg-dark,
 .navbar-dark.bg-dark,
 footer.bg-dark {
-  background-color: #000000 !important;
+  background-color: var(--bg-black) !important;
 }
 
 footer,
 #footer,
 .site-footer,
 #collection-footer {
-  background-color: #000000 !important;
-  color: #ffffff;
+  background-color: var(--bg-black) !important;
+  color: var(--border-white);
 }
 
 footer a {
-  color: #ffffff;
+  color: var(--border-white);
 }
+
 footer a:hover {
   color: #cccccc;
 }
 
-/* removing ugly white box on single item pages and fixing text colors */
+/* ============================================================================
+   ITEM PAGE CARD FIXES
+   ============================================================================ */
+
 main[role="main"] .card.mb-4.text-center {
   background-color: transparent !important;
   border: none !important;
@@ -121,15 +198,17 @@ main[role="main"] .card.mb-4.text-center {
 }
 
 main[role="main"] .card.mb-4.text-center img {
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: var(--border-radius-lg);
+  border: var(--border-width) solid var(--border-color-subtle);
 }
 
 main[role="main"] .text-center small {
-  color: rgba(255, 255, 255, 0.75) !important;
+  color: rgba(255, 255, 255, var(--opacity-strong)) !important;
 }
 
-/* links */
+/* ============================================================================
+   LINKS
+   ============================================================================ */
 
 a {
   text-decoration: underline;
@@ -146,19 +225,21 @@ a {
 }
 
 a:hover {
-  color: #bfbfbf;
+  color: var(--text-muted);
 }
 
-/* buttons, color n animations */
+/* ============================================================================
+   BUTTONS - BASE STYLES
+   ============================================================================ */
 
 .btn,
 .btn-outline-secondary,
 .btn-outline-dark,
 .btn-outline-primary {
   background-color: transparent !important;
-  color: #ffffff !important;
-  border: 1px solid #ffffff !important;
-  border-radius: 4px;
+  color: var(--border-white) !important;
+  border: var(--border-width) solid var(--border-white) !important;
+  border-radius: var(--border-radius);
 }
 
 .btn:hover,
@@ -169,18 +250,21 @@ a:hover {
 .btn-outline-dark:focus,
 .btn-outline-primary:hover,
 .btn-outline-primary:focus {
-  background-color: #ffffff !important;
-  color: #000000 !important;
+  background-color: var(--border-white) !important;
+  color: var(--bg-black) !important;
   text-decoration: none;
 }
 
-/* fixing card buttons */
+/* ============================================================================
+   BUTTONS - CARD SPECIFIC
+   ============================================================================ */
+
 .card .btn,
 .bg-white .btn,
 .bg-light .btn {
   background-color: transparent !important;
-  color: #000000 !important;
-  border-color: #000000 !important;
+  color: var(--bg-black) !important;
+  border-color: var(--bg-black) !important;
 }
 
 .card .btn:hover,
@@ -189,114 +273,127 @@ a:hover {
 .bg-white .btn:focus,
 .bg-light .btn:hover,
 .bg-light .btn:focus {
-  background-color: #000000 !important;
-  color: #ffffff !important;
+  background-color: var(--bg-black) !important;
+  color: var(--border-white) !important;
 }
 
-/* browse colors */
+/* ============================================================================
+   BUTTONS - BROWSE PAGE
+   ============================================================================ */
+
 #browse .input-group .btn {
-  background-color: #000000 !important;
-  color: #ffffff !important;
-  border: 1px solid #ffffff !important;
+  background-color: var(--bg-black) !important;
+  color: var(--border-white) !important;
+  border: var(--border-width) solid var(--border-white) !important;
   border-radius: 0 !important;
 }
 
 #browse .input-group .btn:hover,
 #browse .input-group .btn:focus {
-  background-color: #ffffff !important;
-  color: #000000 !important;
+  background-color: var(--border-white) !important;
+  color: var(--bg-black) !important;
 }
 
-/* fixing navbar search colors */
+/* ============================================================================
+   BUTTONS - NAVBAR SEARCH
+   ============================================================================ */
 
 .navbar .input-group .btn {
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
   background-color: transparent !important;
-  border: 1px solid #ffffff !important;
-  color: #ffffff !important;
+  border: var(--border-width) solid var(--border-white) !important;
+  color: var(--border-white) !important;
 }
 
 .navbar .btn .bi-search,
 .navbar .btn svg {
-  color: #ffffff !important;
-  fill: #ffffff !important;
+  color: var(--border-white) !important;
+  fill: var(--border-white) !important;
 }
 
-/* item page buttons */
+/* ============================================================================
+   BUTTONS - ITEM PAGE
+   ============================================================================ */
 
 body.item-page main[role="main"] .text-center a.btn {
   display: inline-block;
   background-color: transparent !important;
-  color: #ffffff !important;
-  border: 1px solid #ffffff !important;
-  border-radius: 4px;
+  color: var(--border-white) !important;
+  border: var(--border-width) solid var(--border-white) !important;
+  border-radius: var(--border-radius);
   text-decoration: none;
 }
 
 body.item-page main[role="main"] .text-center a.btn:hover,
 body.item-page main[role="main"] .text-center a.btn:focus {
-  background-color: #ffffff !important;
-  color: #000000 !important;
+  background-color: var(--border-white) !important;
+  color: var(--bg-black) !important;
 }
 
 main[role="main"] .card.mb-4.text-center .btn-group .btn-outline-primary {
   background-color: transparent !important;
-  color: #ffffff !important;
-  border: 1px solid #ffffff !important;
-  border-radius: 4px;
+  color: var(--border-white) !important;
+  border: var(--border-width) solid var(--border-white) !important;
+  border-radius: var(--border-radius);
   text-decoration: none;
 }
 
 main[role="main"] .card.mb-4.text-center .btn-group .btn-outline-primary:hover,
 main[role="main"] .card.mb-4.text-center .btn-group .btn-outline-primary:focus {
-  background-color: #ffffff !important;
-  color: #000000 !important;
+  background-color: var(--border-white) !important;
+  color: var(--bg-black) !important;
 }
 
-/* map page colors */
+/* ============================================================================
+   MAP PAGE
+   ============================================================================ */
 
 .leaflet-fusesearch-panel .search-input {
-  color: #000000 !important;
-  background-color: #ffffff !important;
-  border: 1px solid #00000033;
+  color: var(--bg-black) !important;
+  background-color: var(--border-white) !important;
+  border: var(--border-width) solid #00000033;
 }
 
 .leaflet-fusesearch-panel .search-input::placeholder {
   color: #555555 !important;
 }
 
-/* homepage browse carousel button */
+/* ============================================================================
+   CAROUSEL BUTTONS
+   ============================================================================ */
 
 .carousel .btn,
 .carousel .btn-outline-primary {
-  color: #ffffff !important;
-  border: 1px solid #ffffff !important;
+  color: var(--border-white) !important;
+  border: var(--border-width) solid var(--border-white) !important;
   background: rgba(0, 0, 0, 0.55) !important;
   backdrop-filter: blur(2px);
 }
 
 .carousel .btn:hover,
 .carousel .btn-outline-primary:hover {
-  background: #ffffff !important;
-  color: #000000 !important;
+  background: var(--border-white) !important;
+  color: var(--bg-black) !important;
 }
 
-/* font styling */
+/* ============================================================================
+   TYPOGRAPHY
+   ============================================================================ */
 
 main h1,
 main h2,
 main h3 {
-  letter-spacing: 0.04em;
+  letter-spacing: var(--letter-spacing-tight);
 }
 
 .section-label {
-  font-size: 0.8rem;
-  letter-spacing: 0.16em;
+  font-size: var(--text-sm);
+  letter-spacing: var(--letter-spacing-wider);
   text-transform: uppercase;
 }
 
 main p {
-  font-size: 0.98rem;
+  font-size: var(--text-base);
   line-height: 1.6;
 }
 
@@ -306,18 +403,21 @@ main p {
 }
 
 #metadata strong {
-  letter-spacing: 0.08em;
+  letter-spacing: var(--letter-spacing-normal);
   text-transform: uppercase;
-  font-size: 0.8rem;
+  font-size: var(--text-sm);
 }
-/* home banner styling */
+
+/* ============================================================================
+   HOME BANNER
+   ============================================================================ */
 
 #home-banner {
   position: relative;
   min-height: 380px;
   max-height: 580px;
-  padding: 3.5rem 0 2.5rem;
-  background-color: #000; 
+  padding: var(--space-3xl) 0 var(--space-2xl);
+  background-color: var(--bg-black); 
 }
 
 #home-title-box {
@@ -327,30 +427,30 @@ main p {
 #home-title-box > .p-2 {
   display: inline-block;
   text-align: left;
-  padding: 1.25rem 1.6rem !important;
-  margin-left: 1.5rem;
-  background: rgba(0, 0, 0, 0.88) !important;
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.25);
+  padding: var(--space-lg) var(--space-xl) !important;
+  margin-left: var(--space-lg);
+  background: var(--overlay-darkest) !important;
+  border-radius: var(--border-radius-lg);
+  border: var(--border-width) solid rgba(255, 255, 255, 0.25);
 }
 
 #home-title-box h1 {
   margin: 0;
-  font-size: clamp(2rem, 3.4vw, 3rem);
+  font-size: var(--text-3xl);
   text-align: left;
-  letter-spacing: 0.04em;
-  font-weight: 700;
+  letter-spacing: var(--letter-spacing-tight);
+  font-weight: var(--font-bold);
 }
 
 #home-title-box h1 a {
-  color: #ffffff !important;
+  color: var(--border-white) !important;
   text-decoration: none;
 }
 
 #home-title-box p {
-  margin: 0.35rem 0 0;
+  margin: var(--space-sm) 0 0;
   font-size: 0.95rem;
-  opacity: 0.85;
+  opacity: var(--opacity-strong);
 }
 
 @media (max-width: 767px) {
@@ -369,17 +469,17 @@ main p {
 #home-banner .featured-image-label {
   position: absolute;
   bottom: 0.75rem;
-  right: 1rem;
-  padding: 0.15rem 0.6rem;
-  background: rgba(0, 0, 0, 0.75); 
+  right: var(--space-md);
+  padding: 0.15rem var(--space-md);
+  background: var(--overlay-darker); 
 }
 
 #home-banner .featured-image-label a {
-  font-size: 0.7rem;
-  letter-spacing: 0.18em;
+  font-size: var(--text-xs);
+  letter-spacing: var(--letter-spacing-widest);
   text-transform: uppercase;
-  font-weight: 700;
-  color: #ffffff !important;
+  font-weight: var(--font-bold);
+  color: var(--border-white) !important;
   text-decoration: none;
 }
 
@@ -388,24 +488,25 @@ main p {
   text-decoration: underline;
 }
 
-
-/* headers on all other pages */
+/* ============================================================================
+   PAGE HEADERS (NON-HOME)
+   ============================================================================ */
 
 main #title h1 {
   margin: 0;
-  font-size: 1.5rem;
-  letter-spacing: 0.04em;
-  font-weight: 700;
+  font-size: var(--text-xl);
+  letter-spacing: var(--letter-spacing-tight);
+  font-weight: var(--font-bold);
   text-transform: none; 
 }
 
 main #title h1 a {
-  color: #ffffff !important;
+  color: var(--border-white) !important;
   text-decoration: none;
 }
 
 main #title p {
-  margin: 0.35rem 0 0;
+  margin: var(--space-sm) 0 0;
   font-size: 0.9rem;
   opacity: 0.8;
 }
@@ -413,34 +514,34 @@ main #title p {
 @media (max-width: 575px) {
   main #title {
     padding: 1.1rem 0 0.8rem;
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-md);
   }
   main #title h1 {
-    font-size: 1.25rem;
+    font-size: var(--text-xl);
   }
 }
 
 #title {
-  padding: 1.5rem 0 1.1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
-  margin-bottom: 1.5rem;
+  padding: var(--space-lg) 0 1.1rem;
+  border-bottom: var(--border-width) solid var(--border-color-subtle);
+  margin-bottom: var(--space-lg);
 }
 
 #title h1 {
   margin: 0;
-  font-size: 1.5rem;
-  letter-spacing: 0.04em;
-  font-weight: 700;
+  font-size: var(--text-xl);
+  letter-spacing: var(--letter-spacing-tight);
+  font-weight: var(--font-bold);
   text-transform: none; 
 }
 
 #title h1 a {
-  color: #ffffff !important;
+  color: var(--border-white) !important;
   text-decoration: none;
 }
 
 #title p {
-  margin: 0.35rem 0 0;
+  margin: var(--space-sm) 0 0;
   font-size: 0.9rem;
   opacity: 0.8;
 }
@@ -448,53 +549,59 @@ main #title p {
 @media (max-width: 575px) {
   #title {
     padding: 1.1rem 0 0.8rem;
-    margin-bottom: 1rem;
+    margin-bottom: var(--space-md);
   }
   #title h1 {
-    font-size: 1.25rem;
+    font-size: var(--text-xl);
   }
 }
-/* top-right portfolio return link */
+
+/* ============================================================================
+   PORTFOLIO RETURN LINK
+   ============================================================================ */
 
 .portfolio-site-link {
   position: absolute;
-  top: 1rem;
+  top: var(--space-md);
   right: 1.25rem;
   z-index: 10;
 
-  font-size: 0.7rem;
-  letter-spacing: 0.14em;
+  font-size: var(--text-xs);
+  letter-spacing: var(--letter-spacing-wide);
   text-transform: uppercase;
-  font-weight: 600;
+  font-weight: var(--font-semibold);
 
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 255, 255, var(--opacity-strong));
   text-decoration: none;
 
-  padding: 0.35rem 0.6rem;
-  border: 1px solid rgba(255, 255, 255, 0.35);
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.45);
+  padding: var(--space-sm) var(--space-md);
+  border: var(--border-width) solid var(--border-color-normal);
+  border-radius: var(--border-radius);
+  background: var(--overlay-dark);
 }
 
 .portfolio-site-link:hover,
 .portfolio-site-link:focus {
-  color: #ffffff;
-  border-color: rgba(255, 255, 255, 0.75);
+  color: var(--border-white);
+  border-color: var(--border-color-strong);
   text-decoration: none;
 }
+
 @media (max-width: 575px) {
   .portfolio-site-link {
     font-size: 0.65rem;
-    padding: 0.3rem 0.5rem;
+    padding: 0.3rem var(--space-sm);
     top: 0.75rem;
     right: 0.75rem;
   }
 }
 
+/* ============================================================================
+   MODAL STYLES
+   ============================================================================ */
 
-/* animations */
 .modal-content .card.mb-4.text-center small {
-  color: #000000 !important;       
+  color: var(--bg-black) !important;       
 }
 
 .modal-header .small.text-muted {
@@ -503,51 +610,51 @@ main #title p {
 
 .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary {
   background-color: transparent !important;
-  color: #000000 !important;    
-  border: 1px solid #000000 !important;
-  border-radius: 4px;
+  color: var(--bg-black) !important;    
+  border: var(--border-width) solid var(--bg-black) !important;
+  border-radius: var(--border-radius);
   text-decoration: none;
 }
 
 .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:hover,
 .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:focus {
-  background-color: #000000 !important;
-  color: #ffffff !important;       
+  background-color: var(--bg-black) !important;
+  color: var(--border-white) !important;       
 }
 
 .modal-body .btn.btn-outline-secondary.btn-sm {
   background-color: transparent !important;
-  color: #000000 !important;    
-  border: 1px solid #000000 !important;
-  border-radius: 4px;
+  color: var(--bg-black) !important;    
+  border: var(--border-width) solid var(--bg-black) !important;
+  border-radius: var(--border-radius);
   text-decoration: none;
 }
 
 .modal-body .btn.btn-outline-secondary.btn-sm:hover,
 .modal-body .btn.btn-outline-secondary.btn-sm:focus {
-  background-color: #000000 !important;
-  color: #ffffff !important;   
+  background-color: var(--bg-black) !important;
+  color: var(--border-white) !important;   
 }
 
 .modal-footer .btn.btn-secondary,
 .modal-footer .btn.btn-primary {
   background-color: transparent !important;
-  color: #000000 !important;    
-  border: 1px solid #000000 !important;
-  border-radius: 4px;
+  color: var(--bg-black) !important;    
+  border: var(--border-width) solid var(--bg-black) !important;
+  border-radius: var(--border-radius);
   text-decoration: none;
 }
 
 .modal-footer .btn.btn-secondary:hover,
 .modal-footer .btn.btn-secondary:focus {
-  background-color: #000000 !important;
-  color: #ffffff !important;       
+  background-color: var(--bg-black) !important;
+  color: var(--border-white) !important;       
 }
 
 .modal-footer .btn.btn-primary:hover,
 .modal-footer .btn.btn-primary:focus {
-  background-color: #000000 !important;
-  color: #ffffff !important;       
+  background-color: var(--bg-black) !important;
+  color: var(--border-white) !important;       
 }
 
 .modal,
@@ -559,16 +666,16 @@ main #title p {
 
 html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary {
   background-color: transparent !important;
-  color: #000000 !important;
-  border: 1px solid #000000 !important;
-  border-radius: 4px;
+  color: var(--bg-black) !important;
+  border: var(--border-width) solid var(--bg-black) !important;
+  border-radius: var(--border-radius);
   text-decoration: none;
 }
 
 html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:hover,
 html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .btn-outline-primary:focus {
-  background-color: #000000 !important;
-  color: #ffffff !important;
+  background-color: var(--bg-black) !important;
+  color: var(--border-white) !important;
 }
 
 .modal .card.mb-4.text-center {
@@ -582,27 +689,29 @@ html body main[role="main"] .modal-content .card.mb-4.text-center .btn-group .bt
   box-shadow: none !important;
 }
 
+/* ============================================================================
+   CARD ANIMATIONS
+   ============================================================================ */
+
 main[role="main"] .card {
   transition:
-    transform 150ms ease-out,
-    box-shadow 150ms ease-out,
-    border-color 150ms ease-out;
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast),
+    border-color var(--transition-fast);
 }
 
-
 main[role="main"] .card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
-  border-color: #ffffff;
+  border-color: var(--border-white);
 }
 
-/* animations off for compound cards (can't figure out bug that keeps them flickering) */
-
+/* Disable animations for compound cards */
 main[role="main"] .row.row-cols-lg-4.g-2 .card,
 main[role="main"] .row.row-cols-lg-4.g-2 .card:hover {
   transform: none !important;
   box-shadow: none !important;
-  border-color: #000000 !important; 
+  border-color: var(--bg-black) !important; 
 }
 
 .modal .card,
@@ -613,56 +722,131 @@ main[role="main"] .row.row-cols-lg-4.g-2 .card:hover {
   transition: none !important;
 }
 
-/* two block quote styles */
+/* ============================================================================
+   QUOTE STYLES - FOUR VARIATIONS
+   ============================================================================ */
 
+/* VARIATION 1: Line Accent (blue left border) */
 .quote-line {
-  margin: 2rem 0;
-  padding-left: 1.25rem;
-  border-left: 4px solid #bbbbbb;
-  color: #dddddd;
+  margin: var(--space-xl) 0;
+  padding-left: var(--space-lg);
+  border-left: 4px solid var(--accent-blue);
+  color: var(--text-white);
 }
 
 .quote-line p {
-  margin: 0.5rem 0;
+  margin: var(--space-sm) 0;
+  font-size: var(--text-base);
+  line-height: 1.6;
 }
 
 .quote-line .quote-attrib {
-  font-size: 0.9rem;
-  color: #aaaaaa;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
   font-style: italic;
+  margin-top: var(--space-md);
 }
 
+/* VARIATION 2: Solid Box (white background) */
 .quote-box {
-  background-color: #ffffff;
-  color: #000000;
-  padding: 1.75rem 2rem;
-  margin: 2.5rem 0;
-  border-radius: 4px;
+  background-color: var(--text-white);
+  color: var(--bg-black);
+  padding: var(--space-xl) var(--space-xl);
+  margin: var(--space-2xl) 0;
+  border-radius: var(--border-radius);
 }
 
 .quote-box .quote-text {
-  font-size: 1.1rem;
+  font-size: var(--text-lg);
   font-style: italic;
-  margin-bottom: 1rem;
+  margin-bottom: var(--space-md);
+  line-height: 1.6;
 }
 
 .quote-box .quote-attrib {
-  font-size: 0.9rem;
+  font-size: var(--text-sm);
   text-align: right;
+  color: #555555;
+}
+
+/* VARIATION 3: Outline Box (transparent with blue border) */
+.quote-outline {
+  background-color: transparent;
+  border: var(--border-width) solid var(--accent-blue);
+  padding: var(--space-xl) var(--space-xl);
+  margin: var(--space-2xl) 0;
+  border-radius: var(--border-radius);
+  position: relative;
+}
+
+.quote-outline::before {
+  content: '"';
+  position: absolute;
+  top: -0.5rem;
+  left: var(--space-lg);
+  font-size: 3rem;
+  line-height: 1;
+  color: var(--accent-blue);
+  background: var(--bg-black);
+  padding: 0 var(--space-sm);
+}
+
+.quote-outline .quote-text {
+  font-size: var(--text-lg);
+  font-style: italic;
+  color: var(--text-white);
+  margin-bottom: var(--space-md);
+  line-height: 1.6;
+}
+
+.quote-outline .quote-attrib {
+  font-size: var(--text-sm);
+  text-align: right;
+  color: var(--accent-blue);
+  font-style: normal;
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+/* VARIATION 4: Minimal (subtle background glow) */
+.quote-minimal {
+  background: var(--accent-blue-subtle);
+  border-left: 3px solid var(--accent-blue);
+  padding: var(--space-lg) var(--space-xl);
+  margin: var(--space-xl) 0;
+  border-radius: var(--border-radius);
+}
+
+.quote-minimal .quote-text {
+  font-size: var(--text-base);
+  font-style: italic;
+  color: var(--text-white);
+  margin-bottom: var(--space-sm);
+  line-height: 1.6;
+}
+
+.quote-minimal .quote-attrib {
+  font-size: var(--text-xs);
+  color: var(--accent-blue);
+  font-style: normal;
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
 }
 
 blockquote {
   max-width: 700px;
 }
 
-/* toc */
+/* ============================================================================
+   TABLE OF CONTENTS (ABOUT PAGE)
+   ============================================================================ */
 
 #about-toc {
-  background-color: #000000;
-  padding: 1rem;
-  margin-bottom: 2rem;
+  background-color: var(--bg-black);
+  padding: var(--space-md);
+  margin-bottom: var(--space-xl);
   position: sticky;
-  top: 1rem;
+  top: var(--space-md);
 }
 
 #about-toc,
@@ -671,11 +855,11 @@ blockquote {
 }
 
 #about-toc-title .btn {
-  background-color: #000000;
-  color: #ffffff;
+  background-color: var(--bg-black);
+  color: var(--border-white);
   width: 100%;
   text-align: left;
-  padding: 0.5rem 0.75rem;
+  padding: var(--space-sm) 0.75rem;
 }
 
 #about-toc-title .btn:hover,
@@ -685,12 +869,12 @@ blockquote {
 
 #about-toc-title svg {
   float: right;
-  fill: #ffffff;
+  fill: var(--border-white);
 }
 
 #about-toc-list {
-  background-color: #000000;
-  padding-top: 1rem;
+  background-color: var(--bg-black);
+  padding-top: var(--space-md);
 }
 
 #about-toc-list ul {
@@ -704,9 +888,9 @@ blockquote {
 
 /* TOC links */
 #about-toc-list a {
-  color: #ffffff;
+  color: var(--border-white);
   text-decoration: none;
-  font-size: 0.8rem;
+  font-size: var(--text-sm);
   line-height: 1.3;
   opacity: 0.3;
   position: relative;
@@ -728,14 +912,14 @@ blockquote {
   top: 0.25em;
   height: 1em;
   width: 3px;
-  background-color: #ffffff;
+  background-color: var(--border-white);
 }
 
 /* Nested hierarchy */
 #about-toc-list ul ul {
-  padding-left: 1rem;
-  border-left: 1px solid #444444;
-  margin-top: 0.25rem;
+  padding-left: var(--space-md);
+  border-left: var(--border-width) solid #444444;
+  margin-top: var(--space-xs);
   align-items: left;
 }
 
@@ -744,10 +928,9 @@ blockquote {
 }
 
 @media (max-width: 768px) {
-  
   #about-toc {
     position: sticky;           
-    bottom: 1rem;             
+    bottom: var(--space-md);             
     margin-bottom: 0;           
     z-index: 998;               
     max-width: 95%;             
@@ -755,35 +938,44 @@ blockquote {
     margin-right: auto;
   }
 
-  
   #scroll-to-top {
     position: fixed;
     bottom: 4.5rem;
-    right: 1rem;
+    right: var(--space-md);
     z-index: 9999;              
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
   }
 }
+
 #scroll-to-top:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
 }
 
-
-/* interp/about page */
+/* ============================================================================
+   ABOUT PAGE LAYOUT
+   ============================================================================ */
 
 #about-wrapper {
   display: grid;
   grid-template-columns: 250px 1fr;
-  gap: 2rem;
+  gap: var(--space-xl);
 }
 
 #about-contents-wrapper {
   max-width: 800px;
-  padding: 0 2rem;
+  padding: 0 var(--space-xl);
   margin: 0 auto;
 }
 
+#about-contents-wrapper ul {
+  font-size: var(--text-base);
+}
+
+#about-contents-wrapper li {
+  font-size: var(--text-base);
+}
+
 #about-contents-wrapper p {
   max-width: 70ch;
   line-height: 1.6;
@@ -796,15 +988,17 @@ blockquote {
 
   #about-contents-wrapper {
     max-width: 100%;
-    padding: 1rem;
+    padding: var(--space-md);
   }
 }
 
-/* wrapped images */
+/* ============================================================================
+   WRAPPED IMAGES
+   ============================================================================ */
 
 .float-img {
   max-width: 40%;
-  margin: 0.5rem 1.5rem 1rem 0;
+  margin: var(--space-sm) var(--space-lg) var(--space-md) 0;
 }
 
 .float-left {
@@ -813,7 +1007,7 @@ blockquote {
 
 .float-right {
   float: right;
-  margin: 0.5rem 0 1rem 1.5rem;
+  margin: var(--space-sm) 0 var(--space-md) var(--space-lg);
 }
 
 .float-img img {
@@ -824,8 +1018,8 @@ blockquote {
 
 .float-img .caption {
   font-size: 0.75rem;
-  color: #bbbbbb;
-  margin-top: 0.25rem;
+  color: var(--text-muted);
+  margin-top: var(--space-xs);
 }
 
 .clearfix::after {
@@ -838,26 +1032,36 @@ blockquote {
   .float-img {
     float: none;
     max-width: 100%;
-    margin: 1rem 0;
+    margin: var(--space-md) 0;
   }
 }
+
+/* ============================================================================
+   TECHNICAL SECTION
+   ============================================================================ */
+
 #technical {
   background-color: #f8f9fa;
-  color: #000;
+  color: var(--bg-black);
 }
 
 #technical .bg-white {
-  background-color: #ffffff !important;
-  color: #000 !important;
+  background-color: var(--border-white) !important;
+  color: var(--bg-black) !important;
 }
 
 #technical h3 {
-  color: #000;
+  color: var(--bg-black);
 }
 
 #technical p {
-  color: #000;
+  color: var(--bg-black);
 }
+
+/* ============================================================================
+   DONOR LIST
+   ============================================================================ */
+
 .donor-list {
   list-style: none;
   padding-left: 0;
@@ -868,93 +1072,75 @@ blockquote {
   font-size: 0.95em;
   color: #555;
 }
+
+/* ============================================================================
+   NAVIGATION
+   ============================================================================ */
+
 .dropdown-header.nav-section-label {
-  font-size: 0.7rem;
+  font-size: var(--text-xs);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-weight: 600;
+  letter-spacing: var(--letter-spacing-normal);
+  font-weight: var(--font-semibold);
   color: rgba(0,0,0,0.6);
-  padding: 0.5rem 1rem;
-}
-.dropdown-header.nav-section-label:not(:first-child) {
-  margin-top: 0.5rem;
-  border-top: 1px solid rgba(0,0,0,0.1);
+  padding: var(--space-sm) var(--space-md);
 }
 
-.spl-autofit {
-    display: none !important;
+.dropdown-header.nav-section-label:not(:first-child) {
+  margin-top: var(--space-sm);
+  border-top: var(--border-width) solid rgba(0,0,0,0.1);
 }
+
+/* ============================================================================
+   SPOTLIGHT FIXES
+   ============================================================================ */
+
+.spl-autofit {
+  display: none !important;
+}
+
+/* ============================================================================
+   IMAGE CONTAINERS
+   ============================================================================ */
+
 .image-container {
-    text-align: center;
-    max-width: 100%;  
-    margin: 0 auto; 
+  text-align: center;
+  max-width: 90%;
+  margin: 0 auto;
 }
 
 .image-container img {
-    width: 100%;  
-    height: auto;  
+  width: 100%;
+  height: auto;
 }
 
 .image-container figcaption {
-    font-size: 0.85rem;
-    width: 100%;  
-    margin-top: 0.5rem;  
-    text-align: center;
-}
-.footnotes {
-  overflow-x: hidden;
-  max-width: 100%;
+  font-size: 0.85rem;
+  width: 100%;
+  margin-top: var(--space-sm);
+  text-align: center;
 }
 
-.footnotes p {
-  word-wrap: break-word;
-  word-break: break-all;
+/* ============================================================================
+   SEARCH SUGGESTIONS
+   ============================================================================ */
+
+.suggestions-container {
+  position: absolute;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: white;
+  border: var(--border-width) solid #ccc;
+  z-index: 100;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-.footnotes a {
-  display: inline-block;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  max-width: 100%;
-  text-overflow: ellipsis;
+.suggestion-item {
+  padding: 8px;
+  cursor: pointer;
 }
 
-@media (max-width: 768px) {
-  .footnotes p {
-    font-size: 14px;
-  }
-
-  .footnotes a {
-    font-size: 12px;
-  }
-}
-
-.modal-body img {
-    max-width: 100%;
-    height: auto;
-}
-
-.modal-body p {
-    font-size: 1rem;
-    line-height: 1.6;
-    color: black;
-}
-#image-lightbox .modal-body #lightbox-caption {
-    color: black !important;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.suggestion-item:hover {
+  background-color: #f0f0f0;
+}
\ No newline at end of file
diff --git a/pages/about.md b/pages/about.md
index 63e3b69..a4d63d8 100644
--- a/pages/about.md
+++ b/pages/about.md
@@ -45,7 +45,7 @@ There is a damning need to be stewards of our own histories and protect them at
 Initially ideated as a series of research articles "liberating" Black queer materials from its local institutions and libraries, {B/qKC}'s mission has evolved into a full-fledged archive with **five core goals**.
 
 <div class="float-img float-right">
-<blockquote class="quote-box">
+<blockquote class="quote-outline">
   <p class="quote-text">"Plainly put, the far right is erasing Blackness from the fabrics of America, so historical collection can no longer be a passive process; it must be applied radically." </p>
   <p class="quote-attrib">Nasir Anthony Montalvo, <a href="https://mdw.art/atlas/thirdspace" target="_blank">"Third Space: Queering Blackness from the Archival Fabrics of Middle America"</a> (MdW Atlas, 2024)</p>
 </blockquote>
@@ -76,11 +76,13 @@ We aim for Black queer stories to occupy public spaces physically and digitally
 
 ###### Nasir Anthony Montalvo, *Founder*
 
-Nasir Anthony Montalvo (b. 1999) is an essayist and memory worker based in Kansas City, MO, and the Founder of {B/qKC}. Montalvo's work has been exhibited locally and nationally in coffee shops, book stores, community fairs and artist galleries. Their art and archival research has also been published in NPR, Syllabus, Sixty Inches From Center, The Advocate, Teen Vogue and KC Studio; along with being used in curricula at Johns Hopkins University, Columbia University and the North Kansas City School District. 
-
-Montalvo holds a 2024-2026 studio residency at Charlotte Street; and has been awarded fellowships and artist grants with The Opportunity Agenda, Diaspora Solidarities Lab, Gray Area and ArtsKC. They earned their Bachelor of Science from Stevens Institute of Technology in 2021.
-
-Montalvo is queer, Afro-Borincane, and from Kissimmee, Florida.
+<blockquote class="quote-line">
+  <p class="quote-text">Nasir Anthony Montalvo (b. 1999) is an essayist and memory worker based in Kansas City, MO, and the Founder of {B/qKC}. Montalvo's work has been exhibited locally and nationally in coffee shops, book stores, community fairs and artist galleries. Their art and archival research has also been published in NPR, Syllabus, Sixty Inches From Center, The Advocate, Teen Vogue and KC Studio; along with being used in curricula at Johns Hopkins University, Columbia University and the North Kansas City School District. </p>
+  
+  <p>Montalvo holds a 2024-2026 studio residency at Charlotte Street; and has been awarded fellowships and artist grants with The Opportunity Agenda, Diaspora Solidarities Lab, Gray Area and ArtsKC. They earned their Bachelor of Science from Stevens Institute of Technology in 2021.</p>
+  
+  <p>Montalvo is queer, Afro-Borincane, and from Kissimmee, Florida. </p>
+</blockquote>
 
 <figure style="display: inline-block; max-width: 50%;">
   <img src="/assets/img/anevay-martz-bqkc.jpg" 
@@ -93,7 +95,9 @@ Montalvo is queer, Afro-Borincane, and from Kissimmee, Florida.
 
 ###### Anevay Martz, *Digitization Intern, Spring/Summer 2025*
 
-Anevay Martz is a junior Sociology major at the University of Missouri–Kansas City, with a double minor in Communications and Race, Ethnic and Gender Studies. As {B/qKC}'s first Intern in 2025. Digitization Intern, Martz helped develop the archive’s Digital Asset Register (DAR) that is being used to power this website, alongside getting Soakie's listed as a historical landmark on Clio.
+<blockquote class="quote-line">
+  <p class="quote-text">Anevay Martz is a junior Sociology major at the University of Missouri–Kansas City, with a double minor in Communications and Race, Ethnic and Gender Studies. As {B/qKC}'s first Intern in 2025. Digitization Intern, Martz helped develop the archive’s Digital Asset Register (DAR) that is being used to power this website, alongside getting Soakie's listed as a historical landmark on Clio.</p>
+</blockquote>
 
 
 <figure style="display: inline-block; max-width: 50%;">
@@ -106,7 +110,9 @@ Anevay Martz is a junior Sociology major at the University of Missouri–Kansas
 
 ###### Eden Barnes, *Community Engagement Intern, Fall 2025*
 
-Eden is a graduate of the University of Missouri Kansas City, with a BA in Sociology with an emphasis in Cultural Anthropology, and a minor in Race, Ethnic, and Gender Studies. As Community Engagement Intern, Eden aided {B/qKC} with day-to-day tasks and the launch of {B/qKC}'s new site.
+<blockquote class="quote-line">
+  <p class="quote-text">Eden is a graduate of the University of Missouri Kansas City, with a BA in Sociology with an emphasis in Cultural Anthropology, and a minor in Race, Ethnic, and Gender Studies. As Community Engagement Intern, Eden aided {B/qKC} with day-to-day tasks and the launch of {B/qKC}'s new site.</p>
+</blockquote>
 
 ---
 ## Our history
@@ -135,6 +141,6 @@ Since 2022, {B/qKC} has launched at least two public exhibitions per year, and e
 {% include cb/credits.html %}
 
 
-<blockquote class="quote-box">
+<blockquote class="quote-minimal">
   <p class="quote-text">Learn more about what's powering this site on <a href="/data/">"Our Data"</a> page!</p>
 </blockquote>
\ No newline at end of file
diff --git a/pages/collections/collection-gary.html b/pages/collections/collection-gary.html
index 7dcf306..fc7fb14 100644
--- a/pages/collections/collection-gary.html
+++ b/pages/collections/collection-gary.html
@@ -27,7 +27,7 @@ Gary Carrington (he/him/his) is referred to as a “pillar” in Kansas City’s
    {% if featured.identifier %}
   <div class="small text-muted mt-2">
     <p class="section-label">
-      Identifier #: 
+      Object ID #: 
       <a 
         href="{{ '/items/' | append: featured.objectid | append: '.html' | relative_url }}"
         class="text-white text-decoration-underline"
diff --git a/pages/collections/collection-starla.html b/pages/collections/collection-starla.html
index bbe7324..019c50d 100644
--- a/pages/collections/collection-starla.html
+++ b/pages/collections/collection-starla.html
@@ -26,7 +26,7 @@ Starla Carr (she/her/hers) has been a pivotal force in developing Kansas City’
    {% if featured.identifier %}
   <div class="small text-muted mt-2">
     <p class="section-label">
-      Identifier #: 
+      Object ID #: 
       <a 
         href="{{ '/items/' | append: featured.objectid | append: '.html' | relative_url }}"
         class="text-white text-decoration-underline"
diff --git a/pages/collections/collection-tisha.html b/pages/collections/collection-tisha.html
index 0ebad95..68237fa 100644
--- a/pages/collections/collection-tisha.html
+++ b/pages/collections/collection-tisha.html
@@ -28,7 +28,7 @@ permalink: /collections/tisha-taylor/
    {% if featured.identifier %}
   <div class="small text-muted mt-2">
     <p class="section-label">
-      Identifier #: 
+      Object ID #: 
       <a 
         href="{{ '/items/' | append: featured.objectid | append: '.html' | relative_url }}"
         class="text-white text-decoration-underline"
diff --git a/pages/copyright.md b/pages/copyright.md
index b9eec41..b4f5721 100644
--- a/pages/copyright.md
+++ b/pages/copyright.md
@@ -45,4 +45,6 @@ Under the following terms:
 
 *You are responsible for obtaining necessary permissions*. {B/qKC}'s collections contain a wide range of content. You are responsible for clearing the necessary rights in order to use the materials in question. For example, if you want to download a photo that is still protected by copyright for use in a research paper, you must determine whether your proposed use requires consent from the copyright holder, and, if so, you must secure the permission of the copyright holder. In some cases, you may also need to secure the consent of people who appear in photographs in our collections.
 
-If you have any questions, please [contact us](/contact/)!
\ No newline at end of file
+<blockquote class="quote-minimal">
+  <p class="quote-text">If you have any questions, please <a href="/contact/">contact us!</a></p>
+</blockquote>
\ No newline at end of file
diff --git a/pages/data.md b/pages/data.md
index 4efd6f4..b30d740 100644
--- a/pages/data.md
+++ b/pages/data.md
@@ -20,7 +20,7 @@ In accordance with our [mission](/about/), {B/qKC} aims to be the true steward o
 
 Rather than relying on a third-party service like Google, DropBox, or Squarespace–with rising costs for usage, ethical concerns around our data and their damaging corporate practices–we've chosen to build this site using **open, decentralized and self-hosted infrastructure**.
 
-<blockquote class="quote-line">
+<blockquote class="quote-minimal">
   <p class="quote-text">A very special thank you to Gray Area, TechSoup and FileCoin Foundation and their Cultural Memory Lab for teaching us a lot about DWeb technology and making this all possible. Learn more about the program on their <a href="https://acceleratingmakers.publicgoodapphouse.org/blog/_blog-posts/introducing-the-cultural-memory-lab-cohort-empowering-community-archives-through-decentralized-technology" target="_blank">website.</a></p>
 </blockquote>
 
@@ -33,7 +33,7 @@ Need to share something online? You Tweet or Instagram it. <br>
 Need to store something? You upload them to an arbitrary "cloud."
 
 <div class="float-img float-right">
-<blockquote class="quote-box">
+<blockquote class="quote-outline">
   <p class="quote-text">“The platforms that host our networked public sphere and inform us about the world are unelected, unaccountable, and often impossible to audit or oversee.”</p>
   <p class="quote-attrib">— Chelsea Barabas, Neha Narula, Ethan Zuckerman,<a href="https://www.dci.mit.edu/projects/the-decentralized-web-defending-internet-freedom-through-decentralization-back-to-the-future" target="_blank"> "The Decentralized Web: Defending Internet Freedom through Decentralization: Back to the Future?" (2017)</a>
 </p>
@@ -142,7 +142,7 @@ This means no Amazon Web Services, no Google Cloud, no third-party entity quietl
 
 By choosing to host this website on our server, we get to control how this site operates, how data is handled, and stay accountable to the people whose stories live here.
 
-<blockquote class="quote-box">
+<blockquote class="quote-line">
   <p class="quote-text">GOOD TO KNOW: {B/qKC} uses the 3-2-1-1-0 preservation strategy: meaning there are 3 copies of all our archival materials (2 of these on IPFS and our server), stored on 2 different types of media, with 1 copy off-site, 1-copy offline, and all with 0 backup errors.</p>
 </blockquote>
 
diff --git a/pages/donate.md b/pages/donate.md
index 7dcccc0..1f1ce21 100644
--- a/pages/donate.md
+++ b/pages/donate.md
@@ -98,9 +98,10 @@ $1,000 <br>
 **Tintoretta Tattoo Studio** <br>
 **Charlotte Street** <br>
 
----
+<blockquote class="quote-minimal">
+  <p class="quote-text">Thank you to Astringent Press, Oddities Prints, Plot Twist Consulting, BLK + BRWN., PH Coffee, Waterbird Coffee, and Café Corazón who have offered in-kind support to this work!</p>
+</blockquote>
 
-*Thank you to Astringent Press, Oddities Prints, Plot Twist Consulting, BLK + BRWN., PH Coffee, Waterbird Coffee, and Café Corazón who have offered in-kind support to this work!*
 
 ---
 
diff --git a/pages/read/erasure.md b/pages/read/erasure.md
index 689bcde..d8da07e 100644
--- a/pages/read/erasure.md
+++ b/pages/read/erasure.md
@@ -84,7 +84,7 @@ Kansas City's Pride Festival (now run by the Kansas City Community Pride Allianc
 
 In conjunction with loss of spaces, we also must examine how sexual desire has served in the oppression of Black queer Kansas Citians.
 
-The Black gay male community of Kansas City, particularly, suffers from this sexual exploitation----as can be seen in the case of the organization, Black-White Men Together-Kansas City (BWMT-KC). Founded by Michael J. Smith in 1980, the National Association of Black and White Men Together (NABWMT) was expressely founded for white gay men to more easily find Black men to have sex with[^15](https://kansascitydefender.com/lgbtqia2/the-erasure-and-sexual-subjugation-of-black-queer-kansas-citians-a-brief-historical-look/#38315f38-0d39-4b4c-b736-a237630ff5dc)^. Smith was described by his peers to be an 'interracialist', believing that Black men were more well-endowed; he would face vitriol in the media for his comments and actions. Despite this, chapters of the organization opened across the nation, including in Kansas City. The local chapter was able to accomplish a great deal in pushing sex education and creating systems of support for gay men, at large----but part of the violence faced by Black queer men is sexual exploitation, which includes fetishization based on race. 
+The Black gay male community of Kansas City, particularly, suffers from this sexual exploitation----as can be seen in the case of the organization, Black-White Men Together-Kansas City (BWMT-KC). Founded by Michael J. Smith in 1980, the National Association of Black and White Men Together (NABWMT) was expressely founded for white gay men to more easily find Black men to have sex with[^15]. Smith was described by his peers to be an 'interracialist', believing that Black men were more well-endowed; he would face vitriol in the media for his comments and actions. Despite this, chapters of the organization opened across the nation, including in Kansas City. The local chapter was able to accomplish a great deal in pushing sex education and creating systems of support for gay men, at large----but part of the violence faced by Black queer men is sexual exploitation, which includes fetishization based on race. 
 
 Similarly to the loss of Black queer space, this sexual violence and the need to feel desired limits access to new futures. Desirability ultimately creates a cycle that seeks not to end white supremacy, but to further it by developing unattainable standards (e.g. sexual endowment) and unwritten codes (e.g. hyper-masculinity) that create power structures amidst Black queer men in competition of the white male gaze. To end white supremacy is to put an end to this sexual desire; and to eradicate the tools by which white men use to subjugate Black queer men to (sexual) dependence.
 
@@ -96,7 +96,7 @@ There exists a paradigm in Kansas City's queer community: wherein Black queer Ka
 
 *I encourage folks looking to create new Black queer futures to read more pedagogy (Frantz Fanon, Da'Shaun L. Harrison, James Baldwin), join local movements for abolition (such as the Reale Justice Network and the Kansas City Defender), and protest rainbow capitalism by holding your own Pride protests and, both, in-and-out of June. If you're not, both, Black and queer, I implore you to seek out Black queer folk, listen to them, and fulfill their needs: donate to gender-affirming surgery funds, bail out Black queer folk in jail, organize against criminalization of queerness, and create true systemic change--rainbow crosswalks will not save you nor I.*
 
-<blockquote class="quote-box">
+<blockquote class="quote-minimal">
   <p class="quote-text">An abridged version of this essay, titled "The Unseen Struggles: Erasure and Racial Inequities in Kansas City's Queer Community," was originally published in the Urban League of Greater Kansas City's 2023 State of Black Kansas City | FROM REDLINING TO CHALK LINES: THE COSTS OF ECONOMIC INJUSTICE. The report can be found on their <a href="https://www.ulkc.org/2023-state-of-black-kc" target="_blank">website</a>.</p>
 </blockquote> 
 
diff --git a/pages/read/mact-kc.md b/pages/read/mact-kc.md
index 11a3ee2..e0e9827 100644
--- a/pages/read/mact-kc.md
+++ b/pages/read/mact-kc.md
@@ -409,7 +409,7 @@ MACT-KC co-chairs ranging from 1987-1993 pose for a photo. From top left to top
   </figcaption>
 </figure> 
 
-<blockquote class="quote-box">
+<blockquote class="quote-minimal">
   <p class="quote-text">“A very special thank you to UMKC's Gay-Lesbian Archives of Mid-America and its Director, Stuart Hinds, for helping gather information on Men of All Colors Together-Kansas City; and serving as a cornerstone for queer Kansas City history.”</p>
 </blockquote>
 
diff --git a/pages/read/out-there.md b/pages/read/out-there.md
index c3edba1..c835581 100644
--- a/pages/read/out-there.md
+++ b/pages/read/out-there.md
@@ -204,7 +204,7 @@ According to a July 11, 1994 article by AP News, however, [the Amendment Coaliti
 
 [Lea Hopkins](https://libweb.umkc.edu/GLAMA/oral-histories-moreinfo/38) has been an instrumental Black, Lesbian organizer in Kansas City for decades. Hopkins was behind the first Gay Pride Parade in Kansas City in 1979, and [43 years later was a Grand Marshall for Kansas City's Pride Alliance Parade earlier this year](https://www.instagram.com/reel/CjsbDmpDkrV/?utm_source=ig_web_copy_link). Because of her work, she has undoubtedly pushed acceptance for Black Queer people to once unthinkable heights in the Midwest. Hopkins' role on Out There was to serve as a spokesperson for GLAAD, presumably because of her extensive involvement with the organization. 
 
-<blockquote class="quote-box">
+<blockquote class="quote-minimal">
   <p class="quote-text"><a href="https://libweb.umkc.edu/GLAMA/oral-histories-moreinfo/38" target="_blank">Listen to Lea Hopkins' interview with Austin R. Williams</a>, as part of GLAMA's Oral History project, as she discusses her early days, moving to New York and becoming involved with Christopher Street, and organizing the first Gay Pride Parade in Kansas City.</p>
 </blockquote>
 
diff --git a/pages/read/soakies.md b/pages/read/soakies.md
index a7cbfcc..87ae6fc 100644
--- a/pages/read/soakies.md
+++ b/pages/read/soakies.md
@@ -89,7 +89,7 @@ If you are the copyright holder and feel for any reason that your work has been
 
 ## Vol_2 of {B/qKC}: Soakie's
 
-<blockquote class="quote-box">
+<blockquote class="quote-outline">
   <p class="quote-text">“After everything is said and done, Soakies was home.”</p>
   <p class="quote-attrib">— Baby Boi, 2023</p>
 </blockquote>
@@ -180,7 +180,7 @@ It was this same sentiment that would lead Colston and his good friend Eric Robi
 
 According to Colston and Robinson, Rinaldo was getting ready to close his shop around the same time Soakie's was becoming a pregame spot for Black queer people in the '90s. The three of them had established a friendly rapport in light of this. In fact, Robinson notes that Rinaldo treated him and the community with kindness and was extremely supportive.
 
-<blockquote class="quote-box">
+<blockquote class="quote-outline">
   <p class="quote-text">“We don't have nowhere to go.”</p>
   <p class="quote-attrib">— Jerry Colston, 2023</p>
 </blockquote>
@@ -273,7 +273,7 @@ Across 1308 Main Street was a large parking lot that became a hangout spot for B
 
 This would become an issue, though, as it drew away from the capital Soakie's owners were receiving, and was also the source of a lot of violence.
 
-<blockquote class="quote-box">
+<blockquote class="quote-minimal">
   <p class="quote-text">† There are currently no photos available in the public domain, or as donated to {B/qKC}, that capture festivities in the parking lot across from Soakie's. If you are in possession of any relevant photographs or material and would like to contribute to this article (and archive, overall) please contact Nasir Montalvo.</p>
 </blockquote>
 
@@ -302,7 +302,7 @@ It wouldn't be that long before Baby Boi became part of the view. Baby Boi would
 
 To my surprise, Baby Boi's DJing career didn't officially start until 2017–and it seems a perfect continuation from performing for, as Baby Boi puts it, "if [they] can give people a good time or experience, let's do it."
 
-<blockquote class="quote-box">
+<blockquote class="quote-minimal">
   <p class="quote-text"><sup>‡</sup>Baby Boi references the late-haunted house, Main Street Morgue: located on 1325 Main Street from the 1970s to the early 00s. The business was shut down as part of the Power & Light Development.</p>
 
   <p class="quote-text"><sup>§</sup>Descriptions of Kansas City's Ballrooms Scene are purposely meant to be ambiguous as to protect a well kept tradition of Kansas City's Black queer community.</p>
@@ -331,7 +331,7 @@ Above all, though, Starla has been an instrumental support system for those arou
 
 It is with great honor that I welcome her collection to {B/qKC}.
 
-<blockquote class="quote-box">
+<blockquote class="quote-minimal">
   <p class="quote-text">The "starla_carr_collection" is one of the inaugural collections digitized and donated to {B/qKC}. The collection consists of various photos from Carr's time as a seamstress, performer and go-er of Soakies in the early 2000s.</p>
 
   <p class="quote-text"><a href="/collections/starla-carr/" target="_blank">view the starla_carr_collection</a></p>
@@ -360,7 +360,7 @@ Outside of Soakie's, Taylor has made a huge impact on the local Black LGBTQ+ sce
 
 It is with great honor that I welcome her collection to {B/qKC}.
 
-<blockquote class="quote-box">
+<blockquote class="quote-minimal">
   <p class="quote-text">The “tisha_taylor_collection” is one of the inaugural collections digitized and donated to {B/qKC}. The collection consists of various photos from Taylor’s time at Soakie’s and Kansas City’s Black Pride in 1999. </p>
 
   <p class="quote-text"><a href="/collections/tisha-taylor/" target="_blank">view the tisha_taylor_collection</a></p>
@@ -393,7 +393,7 @@ Similar to Taylor's sentiments, Carrington was not only instrumental in providin
 
 It is with great honor that I welcome his collection to {B/qKC}.
 
-<blockquote class="quote-box">
+<blockquote class="quote-minimal">
   <p class="quote-text">The “gary_carrington_collection” is one of the inaugural collections digitized and donated to {B/qKC}. The collection consists of various photos from Carrington’s time at Soakie’s, as well as clippings from KC Exposures.</p>
 
   <p class="quote-text"><a href="/collections/gary-carrington/" target="_blank">view the gary_carrington_collection</a></p>