diff --git a/style.css b/style.css
index 6dcc074..bce5998 100644
--- a/style.css
+++ b/style.css
@@ -1,3176 +1,3176 @@
-/*
-Theme Name: Peptide Starter
-Theme URI: https://github.com/peptiderepo/peptide-starter
-Description: Premium, accessible WordPress theme for scientific peptide reference database
-Author: Peptide Repo
-Author URI: https://peptiderepo.com
-Version: 2.1.8
-License: GPL v2 or later
-License URI: https://www.gnu.org/licenses/gpl-2.0.html
-Text Domain: peptide-starter
-Domain Path: /languages
-Requires at least: 6.0
-Requires PHP: 7.4
-*/
-
-/* ============================================================================
-   CSS ARCHITECTURE
-   ============================================================================
-
-   This stylesheet organizes theme styles in the following order:
-   1. CSS Reset
-   2. CSS Custom Properties (design tokens)
-   3. Typography & Font Loading
-   4. Global Styles & Layout
-   5. Components (buttons, cards, forms, badges)
-   6. Regions (header, footer, main)
-   7. Pages (home, archive, single)
-   8. Animations & Transitions
-   9. Accessibility (focus, reduced motion)
-   10. Dark Mode (color overrides)
-   11. Responsive (mobile-first breakpoints)
-
-   Philosophy:
-   - Use CSS custom properties for all design tokens
-   - Avoid !important on global elements (breaks plugins)
-   - Scope styles with specificity, not cascade tricks
-   - Respect plugin namespaces (.pn-*, .ps-*)
-   - Mobile-first responsive approach
-
-   ============================================================================ */
-
-/* ============================================================================
-   1. CSS RESET
-   ============================================================================ */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  padding: 0;
-}
-
-p {
-  margin: 0;
-}
-
-ul, ol {
-  list-style: none;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-button, input, textarea, select {
-  font: inherit;
-  color: inherit;
-}
-
-img, svg {
-  max-width: 100%;
-  display: block;
-}
-
-/* ============================================================================
-   2. CSS CUSTOM PROPERTIES (Design Tokens)
-   ============================================================================ */
-
-:root {
-  /* ---- FONT FAMILIES ---- */
-  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
-  --font-mono: "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
-
-  /* ---- TYPOGRAPHY SCALE (tightened for better content density) ---- */
-  /* H1 */
-  --text-h1: 36px;
-  --text-h1-weight: 700;
-  --text-h1-lh: 1.2;
-  --text-h1-ls: -0.02em;
-
-  /* H2 */
-  --text-h2: 30px;
-  --text-h2-weight: 700;
-  --text-h2-lh: 1.25;
-  --text-h2-ls: -0.015em;
-
-  /* H3 */
-  --text-h3: 24px;
-  --text-h3-weight: 600;
-  --text-h3-lh: 1.3;
-  --text-h3-ls: -0.01em;
-
-  /* H4 */
-  --text-h4: 20px;
-  --text-h4-weight: 600;
-  --text-h4-lh: 1.35;
-  --text-h4-ls: 0;
-
-  /* H5 */
-  --text-h5: 17px;
-  --text-h5-weight: 700;
-  --text-h5-lh: 1.4;
-  --text-h5-ls: 0;
-
-  /* H6 */
-  --text-h6: 15px;
-  --text-h6-weight: 500;
-  --text-h6-lh: 1.4;
-  --text-h6-ls: 0;
-
-  /* Body (slightly smaller for density — still readable) */
-  --text-body-lg: 15px;
-  --text-body-md: 13px;
-  --text-body-sm: 12px;
-
-  /* Labels & Captions */
-  --text-label: 11px;
-  --text-label-weight: 500;
-  --text-caption: 11px;
-  --text-overline: 10px;
-  --text-overline-weight: 600;
-
-  /* Code */
-  --text-code-inline: 14px;
-  --text-code-block: 13px;
-  --text-code-lh: 1.6;
-
-  /* ---- SPACING SCALE (8px base grid) ---- */
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-  --spacing-xl: 32px;
-  --spacing-2xl: 48px;
-  --spacing-3xl: 64px;
-  --spacing-4xl: 80px;
-  --spacing-5xl: 96px;
-
-  /* ---- BUTTON PADDING (unified per Design Director) ---- */
-  --btn-padding-y: var(--spacing-md);
-  --btn-padding-x: var(--spacing-xl);
-
-  /* ---- LIGHT MODE COLOR PALETTE ---- */
-  /* Brand Colors */
-  --color-brand-primary: #0066CC;
-  --color-status-success: #059669;
-  --color-status-warning: #F59E0B;
-  --color-status-error: #DC2626;
-
-  /* Accent Colors (Clawdiverse-inspired warm tints for cards/categories) */
-  --color-accent-warm: #F59E0B;
-  --color-accent-mint: #D1FAE5;
-  --color-accent-lavender: #EDE9FE;
-  --color-accent-peach: #FEE2D5;
-  --color-accent-sky: #DBEAFE;
-
-  /* Featured badge */
-  --color-featured-bg: #FEF3C7;
-  --color-featured-text: #92400E;
-
-  /* Text Colors */
-  --color-text-primary: #111827;
-  --color-text-secondary: #6B7280;
-  --color-text-tertiary: #9CA3AF;
-
-  /* Border Colors */
-  --color-border-default: #E5E7EB;
-  --color-border-subtle: #F3F4F6;
-
-  /* Background Colors (warm off-white base, à la Clawdiverse) */
-  --color-bg-primary: #FAFAF7;
-  --color-bg-secondary: #F5F3EE;
-  --color-bg-tertiary: #EDEAE3;
-
-  /* Component-Specific Colors */
-  --color-input-focus: #0066CC;
-  --color-link-hover: #0052A3;
-  --color-badge-bg: #DBEAFE;
-  --color-badge-text: #0066CC;
-  --color-code-bg: #F3F4F6;
-  --color-code-text: #111827;
-
-  /* ---- SHADOWS & ELEVATION ---- */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
-
-  /* ---- BORDERS & RADIUS ---- */
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-
-  /* ---- TRANSITIONS ---- */
-  --transition-fast: 150ms ease-out;
-  --transition-normal: 200ms ease-out;
-  --transition-slow: 300ms ease-in-out;
-
-  /* ---- FOCUS RING (per Design Director fix: 15% opacity) ---- */
-  --focus-color: #0066CC;
-  --focus-width: 2px;
-  --focus-offset: 2px;
-  --focus-shadow: 0 0 0 4px rgba(0, 102, 204, 0.15);
-
-  /* ---- CONTAINER WIDTHS ---- */
-  --container-sm: 640px;
-  --container-md: 768px;
-  --container-lg: 900px;
-  --container-xl: 1024px;
-  --container-2xl: 1280px;
-
-  /* ---- Z-INDEX SCALE ---- */
-  --z-dropdown: 10;
-  --z-sticky: 20;
-  --z-fixed: 30;
-  --z-modal-backdrop: 40;
-  --z-modal: 50;
-}
-
-/* ============================================================================
-   3. TYPOGRAPHY & FONT LOADING
-   ============================================================================ */
-
-/* Load Inter from Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-/* Base typography */
-body {
-  font-family: var(--font-sans);
-  font-size: var(--text-body-md);
-  line-height: 1.6;
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-primary);
-}
-
-/* Headings */
-h1 {
-  font-size: var(--text-h1);
-  font-weight: var(--text-h1-weight);
-  line-height: var(--text-h1-lh);
-  letter-spacing: var(--text-h1-ls);
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-md);
-}
-
-h2 {
-  font-size: var(--text-h2);
-  font-weight: var(--text-h2-weight);
-  line-height: var(--text-h2-lh);
-  letter-spacing: var(--text-h2-ls);
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-md);
-  margin-top: var(--spacing-lg);
-}
-
-h3 {
-  font-size: var(--text-h3);
-  font-weight: var(--text-h3-weight);
-  line-height: var(--text-h3-lh);
-  letter-spacing: var(--text-h3-ls);
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-sm);
-  margin-top: var(--spacing-lg);
-}
-
-h4 {
-  font-size: var(--text-h4);
-  font-weight: var(--text-h4-weight);
-  line-height: var(--text-h4-lh);
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-sm);
-  margin-top: var(--spacing-md);
-}
-
-h5 {
-  font-size: var(--text-h5);
-  font-weight: var(--text-h5-weight);
-  line-height: var(--text-h5-lh);
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-sm);
-}
-
-h6 {
-  font-size: var(--text-h6);
-  font-weight: var(--text-h6-weight);
-  line-height: var(--text-h6-lh);
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-sm);
-}
-
-/* Paragraph */
-p {
-  font-size: var(--text-body-md);
-  line-height: 1.6;
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-md);
-}
-
-/* Small text */
-small, .text-small {
-  font-size: var(--text-body-sm);
-  color: var(--color-text-secondary);
-}
-
-/* Code */
-code {
-  font-family: var(--font-mono);
-  font-size: var(--text-code-inline);
-  background-color: var(--color-code-bg);
-  color: var(--color-code-text);
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-}
-
-pre {
-  font-family: var(--font-mono);
-  font-size: var(--text-code-block);
-  line-height: var(--text-code-lh);
-  background-color: var(--color-code-bg);
-  color: var(--color-code-text);
-  padding: var(--spacing-md);
-  border-radius: var(--radius-md);
-  overflow-x: auto;
-  margin-bottom: var(--spacing-md);
-}
-
-pre code {
-  background: none;
-  padding: 0;
-  border-radius: 0;
-}
-
-/* ============================================================================
-   4. GLOBAL STYLES & LAYOUT
-   ============================================================================ */
-
-html {
-  scroll-behavior: smooth;
-  overflow-x: hidden;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-/* Skip Link (accessibility) */
-.skip-link {
-  position: absolute;
-  left: -9999px;
-  z-index: var(--z-modal);
-  padding: var(--spacing-md);
-  background: var(--color-brand-primary);
-  color: white;
-  text-decoration: none;
-  border-radius: var(--radius-sm);
-}
-
-.skip-link:focus {
-  left: var(--spacing-md);
-  top: var(--spacing-md);
-}
-
-/* Main content area */
-#main {
-  flex: 1;
-  width: 100%;
-}
-
-/* Container for page content */
-.ps-container {
-  max-width: var(--container-lg);
-  margin: 0 auto;
-  padding: 0 var(--spacing-lg);
-  width: 100%;
-}
-
-.ps-container-wide {
-  max-width: var(--container-2xl);
-  margin: 0 auto;
-  padding: 0 var(--spacing-lg);
-  width: 100%;
-}
-
-/* ============================================================================
-   5. LINK STYLING (Scope: body content vs navigation)
-   ============================================================================ */
-
-/* Body content links: underlined */
-.site-content a,
-.post-content a,
-article a,
-.page-content a {
-  color: var(--color-brand-primary);
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
-  transition: color var(--transition-normal);
-}
-
-.site-content a:hover,
-.post-content a:hover,
-article a:hover,
-.page-content a:hover {
-  color: var(--color-link-hover);
-}
-
-.site-content a:focus,
-.post-content a:focus,
-article a:focus,
-.page-content a:focus {
-  outline: var(--focus-width) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-
-/* Footer links: underlined */
-.site-footer a {
-  color: var(--color-brand-primary);
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
-  transition: color var(--transition-normal);
-}
-
-.site-footer a:hover {
-  color: var(--color-link-hover);
-}
-
-/* Navigation links: NO underline (context is clear) */
-nav a {
-  text-decoration: none;
-}
-
-/* ============================================================================
-   6. COMPONENTS
-   ============================================================================ */
-
-/* ---- BUTTONS ---- */
-
-.ps-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-sm);
-  padding: var(--btn-padding-y) var(--btn-padding-x);
-  border: none;
-  border-radius: var(--radius-md);
-  font-family: var(--font-sans);
-  font-size: var(--text-body-md);
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-normal);
-  text-decoration: none;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.ps-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.ps-btn:focus {
-  outline: none;
-  box-shadow: var(--focus-shadow);
-}
-
-/* Primary Button */
-.ps-btn-primary {
-  background-color: var(--color-brand-primary);
-  color: white;
-}
-
-.ps-btn-primary:hover {
-  background-color: var(--color-link-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.2);
-}
-
-.ps-btn-primary:active {
-  transform: translateY(0);
-}
-
-/* Secondary Button (ghost/outline style) */
-.ps-btn-secondary {
-  background-color: transparent;
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-}
-
-.ps-btn-secondary:hover {
-  background-color: var(--color-bg-secondary);
-  border-color: var(--color-brand-primary);
-  color: var(--color-brand-primary);
-}
-
-/* Tertiary Button */
-.ps-btn-tertiary {
-  background-color: transparent;
-  color: var(--color-brand-primary);
-  border: 1px solid var(--color-brand-primary);
-}
-
-.ps-btn-tertiary:hover {
-  background-color: var(--color-brand-primary);
-  color: white;
-}
-
-/* Button Sizes */
-.ps-btn-sm {
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-size: var(--text-body-sm);
-}
-
-.ps-btn-lg {
-  padding: var(--spacing-lg) var(--spacing-2xl);
-  font-size: var(--text-body-lg);
-}
-
-.ps-btn-full {
-  width: 100%;
-}
-
-/* ---- CARDS ---- */
-
-.ps-card {
-  background-color: var(--color-bg-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-lg);
-  transition: all var(--transition-normal);
-}
-
-.ps-card:hover {
-  border-color: var(--color-brand-primary);
-  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
-}
-
-.ps-card-header {
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-card-title {
-  font-size: var(--text-h5);
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: var(--spacing-sm);
-}
-
-.ps-card-meta {
-  font-size: var(--text-caption);
-  color: var(--color-text-secondary);
-}
-
-.ps-card-content {
-  font-size: var(--text-body-md);
-  line-height: 1.6;
-  color: var(--color-text-primary);
-}
-
-/* ---- FEATURED IMAGES ---- */
-
-.ps-featured-image {
-  width: 100%;
-  text-align: center;
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-
-.ps-featured-image img {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-  margin: 0 auto;
-  border-radius: var(--radius-lg);
-}
-
-/* ---- BADGES & TAGS ---- */
-
-.ps-badge {
-  display: inline-block;
-  padding: 4px 8px;
-  border-radius: var(--radius-md);
-  font-size: var(--text-label);
-  font-weight: var(--text-label-weight);
-  background-color: var(--color-badge-bg);
-  color: var(--color-badge-text);
-  white-space: nowrap;
-}
-
-.ps-badge-success {
-  background-color: #D1FAE5;
-  color: var(--color-status-success);
-}
-
-.ps-badge-warning {
-  background-color: #FEF3C7;
-  color: var(--color-status-warning);
-}
-
-.ps-badge-error {
-  background-color: #FEE2E2;
-  color: var(--color-status-error);
-}
-
-.ps-tag {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  padding: 4px 8px;
-  border-radius: var(--radius-md);
-  font-size: var(--text-label);
-  background-color: var(--color-bg-tertiary);
-  color: var(--color-text-primary);
-  cursor: pointer;
-  transition: all var(--transition-normal);
-}
-
-.ps-tag:hover {
-  background-color: var(--color-border-default);
-}
-
-.ps-tag-close {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-/* ---- FORMS ---- */
-
-input[type="text"],
-input[type="email"],
-input[type="password"],
-input[type="search"],
-input[type="number"],
-input[type="url"],
-textarea,
-select {
-  width: 100%;
-  padding: var(--spacing-md);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  font-family: var(--font-sans);
-  font-size: var(--text-body-md);
-  background-color: var(--color-bg-primary);
-  color: var(--color-text-primary);
-  transition: all var(--transition-normal);
-}
-
-input[type="text"]:focus,
-input[type="email"]:focus,
-input[type="password"]:focus,
-input[type="search"]:focus,
-input[type="number"]:focus,
-input[type="url"]:focus,
-textarea:focus,
-select:focus {
-  outline: none;
-  border-color: var(--color-brand-primary);
-  box-shadow: var(--focus-shadow);
-  background-color: var(--color-bg-secondary);
-}
-
-/* Form labels */
-label {
-  display: block;
-  margin-bottom: var(--spacing-sm);
-  font-size: var(--text-label);
-  font-weight: var(--text-label-weight);
-  color: var(--color-text-primary);
-}
-
-/* Form groups */
-.ps-form-group {
-  margin-bottom: var(--spacing-lg);
-}
-
-/* Form error state (per Design Director) */
-input.ps-error,
-textarea.ps-error,
-select.ps-error {
-  border-color: var(--color-status-error);
-  background-color: rgba(220, 38, 38, 0.02);
-}
-
-.ps-form-error {
-  color: var(--color-status-error);
-  font-size: var(--text-caption);
-  margin-top: 4px;
-  font-weight: var(--text-label-weight);
-}
-
-/* Checkboxes & Radios */
-input[type="checkbox"],
-input[type="radio"] {
-  width: 18px;
-  height: 18px;
-  margin: 0;
-  margin-right: var(--spacing-sm);
-  cursor: pointer;
-  accent-color: var(--color-brand-primary);
-}
-
-/* ---- ALERTS & CALLOUTS ---- */
-
-.ps-alert {
-  padding: var(--spacing-lg);
-  border-radius: var(--radius-md);
-  border-left: 4px solid;
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-alert-info {
-  background-color: #DBEAFE;
-  border-color: var(--color-brand-primary);
-  color: #0652CD;
-}
-
-.ps-alert-success {
-  background-color: #D1FAE5;
-  border-color: var(--color-status-success);
-  color: #065F46;
-}
-
-.ps-alert-warning {
-  background-color: #FEF3C7;
-  border-color: var(--color-status-warning);
-  color: #78350F;
-}
-
-.ps-alert-error {
-  background-color: #FEE2E2;
-  border-color: var(--color-status-error);
-  color: #7F1D1D;
-}
-
-/* ---- SEARCH FORM ---- */
-
-.ps-search-form {
-  position: relative;
-  width: 100%;
-}
-
-.ps-search-input {
-  width: 100%;
-  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  font-size: var(--text-body-md);
-}
-
-.ps-search-input:focus {
-  outline: none;
-  border-color: var(--color-brand-primary);
-  box-shadow: var(--focus-shadow);
-}
-
-.ps-search-icon {
-  position: absolute;
-  right: var(--spacing-md);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--color-text-secondary);
-  pointer-events: none;
-}
-
-/* ---- PAGINATION ---- */
-
-.ps-pagination {
-  display: flex;
-  gap: var(--spacing-sm);
-  align-items: center;
-  justify-content: center;
-  margin: var(--spacing-2xl) 0;
-  flex-wrap: wrap;
-}
-
-.ps-pagination a,
-.ps-pagination span {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 40px;
-  height: 40px;
-  padding: 0 var(--spacing-sm);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  color: var(--color-text-primary);
-  transition: all var(--transition-normal);
-}
-
-.ps-pagination a:hover {
-  border-color: var(--color-brand-primary);
-  background-color: var(--color-brand-primary);
-  color: white;
-}
-
-.ps-pagination .current {
-  background-color: var(--color-brand-primary);
-  border-color: var(--color-brand-primary);
-  color: white;
-}
-
-/* ============================================================================
-   7. REGIONS (Header, Footer, Main)
-   ============================================================================ */
-
-/* ---- HEADER ---- */
-
-.site-header {
-  background-color: var(--color-bg-primary);
-  border-bottom: 1px solid var(--color-border-subtle);
-  padding: var(--spacing-lg) var(--spacing-xl);
-  position: sticky;
-  top: 0;
-  z-index: var(--z-sticky);
-  box-shadow: var(--shadow-sm);
-}
-
-/* Account for WP admin bar when logged in */
-.admin-bar .site-header {
-  top: 32px;
-}
-
-@media screen and (max-width: 782px) {
-  .admin-bar .site-header {
-    top: 46px;
-  }
-}
-
-.site-header-wrapper {
-  max-width: var(--container-2xl);
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-lg);
-}
-
-/* Logo */
-.site-logo {
-  flex: 0 0 auto;
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--color-brand-primary);
-  text-decoration: none;
-  line-height: 1;
-  transition: color var(--transition-normal);
-}
-
-.site-logo:hover {
-  color: var(--color-link-hover);
-}
-
-.site-logo img {
-  height: 32px;
-  width: auto;
-}
-
-/* Primary Navigation */
-.primary-navigation {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  margin-left: var(--spacing-lg);
-  margin-right: auto;
-}
-
-.primary-navigation ul {
-  display: flex;
-  gap: var(--spacing-xl);
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.primary-navigation li {
-  display: flex;
-  align-items: center;
-}
-
-.primary-navigation a {
-  font-size: var(--text-body-md);
-  font-weight: 500;
-  color: var(--color-text-primary);
-  text-decoration: none;
-  position: relative;
-  transition: color var(--transition-normal);
-}
-
-.primary-navigation a:hover {
-  color: var(--color-brand-primary);
-}
-
-.primary-navigation a::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--color-brand-primary);
-  transform: scaleX(0);
-  transform-origin: right;
-  transition: transform var(--transition-normal);
-}
-
-.primary-navigation a:hover::after,
-.primary-navigation a.active::after {
-  transform: scaleX(1);
-  transform-origin: left;
-}
-
-/* Header Icons */
-.header-icons {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-
-.header-icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  background: none;
-  color: var(--color-text-primary);
-  cursor: pointer;
-  transition: color var(--transition-normal);
-  padding: 0;
-}
-
-.header-icon-btn:hover {
-  color: var(--color-brand-primary);
-}
-
-.header-icon-btn:focus {
-  outline: none;
-  box-shadow: var(--focus-shadow);
-  border-radius: var(--radius-md);
-}
-
-/* Header CTA button — hidden on mobile */
-.ps-header-cta {
-  display: none;
-  border-radius: var(--radius-lg);
-}
-
-@media (min-width: 768px) {
-  .ps-header-cta {
-    display: inline-flex;
-  }
-}
-
-/* Hamburger Menu */
-.menu-toggle {
-  display: none;
-  width: 40px;
-  height: 40px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  padding: 0;
-  color: var(--color-text-primary);
-}
-
-/* Mobile Navigation */
-.nav-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.3);
-  opacity: 0;
-  pointer-events: none;
-  z-index: var(--z-modal-backdrop);
-  transition: opacity var(--transition-slow);
-}
-
-.nav-overlay.active {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* ---- FOOTER ---- */
-
-.site-footer {
-  background-color: var(--color-bg-secondary);
-  border-top: 1px solid var(--color-border-subtle);
-  padding: var(--spacing-3xl) var(--spacing-lg);
-  margin-top: auto;
-}
-
-.footer-wrapper {
-  max-width: var(--container-2xl);
-  margin: 0 auto;
-}
-
-.footer-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: var(--spacing-2xl);
-  margin-bottom: var(--spacing-3xl);
-}
-
-.footer-section h3 {
-  font-size: var(--text-h5);
-  margin-bottom: var(--spacing-lg);
-}
-
-.footer-section ul {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-
-.footer-section a {
-  color: var(--color-brand-primary);
-  text-decoration: underline;
-  transition: color var(--transition-normal);
-}
-
-.footer-section a:hover {
-  color: var(--color-link-hover);
-}
-
-.footer-newsletter {
-  background-color: var(--color-bg-tertiary);
-  padding: var(--spacing-2xl);
-  border-radius: var(--radius-lg);
-  margin-bottom: var(--spacing-3xl);
-}
-
-.footer-newsletter h3 {
-  margin-top: 0;
-}
-
-.newsletter-form {
-  display: flex;
-  gap: var(--spacing-sm);
-  margin-top: var(--spacing-lg);
-}
-
-.newsletter-form input {
-  flex: 1;
-  min-width: 200px;
-}
-
-.newsletter-form button {
-  flex: 0 0 auto;
-}
-
-.footer-bottom {
-  border-top: 1px solid var(--color-border-default);
-  padding-top: var(--spacing-2xl);
-  text-align: center;
-  color: var(--color-text-secondary);
-  font-size: var(--text-body-sm);
-}
-
-/* ============================================================================
-   8. PAGES
-   ============================================================================ */
-
-/* ---- HOME PAGE / HERO ---- */
-
-.hero-section {
-  background-color: var(--color-bg-primary);
-  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-2xl);
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-/* Decorative geometric shapes (Clawdiverse-inspired) */
-.hero-section::before,
-.hero-section::after {
-  content: '';
-  position: absolute;
-  border-radius: 50%;
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Soft pink circle — top left */
-.hero-section::before {
-  width: 200px;
-  height: 200px;
-  background: rgba(244, 114, 182, 0.10);
-  top: 8%;
-  left: -4%;
-}
-
-/* Mint/teal shape — right side */
-.hero-section::after {
-  width: 260px;
-  height: 260px;
-  background: rgba(52, 211, 153, 0.08);
-  top: 20%;
-  right: -6%;
-}
-
-.hero-content {
-  max-width: var(--container-lg);
-  margin: 0 auto;
-  position: relative;
-  z-index: 1;
-}
-
-.hero-title {
-  font-size: 48px;
-  font-weight: 800;
-  margin-bottom: var(--spacing-md);
-  color: var(--color-text-primary);
-  letter-spacing: -0.03em;
-  line-height: 1.1;
-}
-
-/* Accent word in hero title */
-.hero-title .ps-hero-accent {
-  color: var(--color-brand-primary);
-  position: relative;
-  display: inline-block;
-}
-
-/* Wavy underline on accent word */
-.hero-title .ps-hero-accent::after {
-  content: '';
-  position: absolute;
-  bottom: -4px;
-  left: 0;
-  right: 0;
-  height: 6px;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 4 Q12.5 0 25 4 T50 4 T75 4 T100 4' fill='none' stroke='%230066CC' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
-  background-size: 50px 6px;
-}
-
-.hero-subtitle {
-  font-size: var(--text-body-lg);
-  color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-lg);
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-  line-height: 1.7;
-}
-
-.hero-search {
-  margin-bottom: var(--spacing-lg);
-}
-
-/* Legacy theme search form (fallback when PSA plugin is not active) */
-.hero-search .ps-search-form {
-  max-width: 560px;
-  margin: 0 auto;
-}
-
-.hero-search .ps-search-input {
-  width: 100%;
-  padding: var(--spacing-md) var(--spacing-lg);
-  padding-right: 48px;
-  background-color: #FFFFFF;
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-sm);
-}
-
-/* ---- PEPTIDE SEARCH AI PLUGIN INTEGRATION ---- */
-
-/* Hero search — constrain the PSA form to match hero layout */
-.hero-search .psa-search-wrap {
-  max-width: 560px;
-  margin: 0 auto;
-}
-
-.hero-search .psa-search-input {
-  background-color: #FFFFFF;
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  font-size: var(--text-body-lg);
-  padding: var(--spacing-md) var(--spacing-lg);
-  box-shadow: var(--shadow-sm);
-}
-
-.hero-search .psa-search-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.hero-search .psa-search-input:focus {
-  outline: none;
-  border-color: var(--color-brand-primary);
-  box-shadow: var(--focus-shadow);
-}
-
-.hero-search .psa-search-btn {
-  background-color: var(--color-brand-primary);
-  color: white;
-  border: none;
-  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
-  cursor: pointer;
-  transition: background-color var(--transition-normal);
-}
-
-.hero-search .psa-search-btn:hover {
-  background-color: var(--color-brand-hover);
-}
-
-.hero-search .psa-search-results {
-  text-align: left;
-  max-height: 400px;
-  overflow-y: auto;
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-lg);
-  background-color: var(--color-bg-primary);
-  border: 1px solid var(--color-border-default);
-}
-
-/* Search overlay — full-screen overlay triggered from header search icon */
-.search-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  z-index: var(--z-modal, 1000);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 120px;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--transition-normal), visibility var(--transition-normal);
-}
-
-.search-overlay.active {
-  opacity: 1;
-  visibility: visible;
-}
-
-.search-overlay-inner {
-  background-color: var(--color-bg-primary);
-  border-radius: var(--radius-xl);
-  padding: var(--spacing-xl);
-  width: 90%;
-  max-width: 600px;
-  position: relative;
-  box-shadow: var(--shadow-xl);
-  transform: translateY(-20px);
-  transition: transform var(--transition-normal);
-}
-
-.search-overlay.active .search-overlay-inner {
-  transform: translateY(0);
-}
-
-.search-overlay-close {
-  position: absolute;
-  top: var(--spacing-md);
-  right: var(--spacing-md);
-  background: none;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  padding: var(--spacing-xs);
-  border-radius: var(--radius-md);
-  transition: color var(--transition-normal), background-color var(--transition-normal);
-  z-index: 1;
-}
-
-.search-overlay-close:hover {
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-secondary);
-}
-
-.search-overlay-content {
-  padding-top: var(--spacing-sm);
-}
-
-/* PSA plugin styling inside the overlay */
-.search-overlay .psa-search-input {
-  background-color: var(--color-bg-secondary);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  font-size: var(--text-body-md);
-  padding: var(--spacing-md) var(--spacing-lg);
-}
-
-.search-overlay .psa-search-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.search-overlay .psa-search-input:focus {
-  outline: none;
-  border-color: var(--color-brand-primary);
-  box-shadow: var(--focus-shadow);
-}
-
-.search-overlay .psa-search-btn {
-  background-color: var(--color-brand-primary);
-  color: white;
-  border: none;
-  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
-  cursor: pointer;
-  transition: background-color var(--transition-normal);
-}
-
-.search-overlay .psa-search-btn:hover {
-  background-color: var(--color-brand-hover);
-}
-
-.search-overlay .psa-search-results {
-  max-height: 350px;
-  overflow-y: auto;
-  border-radius: var(--radius-lg);
-  margin-top: var(--spacing-md);
-}
-
-.search-overlay .psa-checking,
-.search-overlay .psa-pending,
-.search-overlay .psa-invalid,
-.search-overlay .psa-error {
-  margin-top: var(--spacing-md);
-  border-radius: var(--radius-lg);
-}
-
-/* ---- PEPTIDE NEWS PLUGIN OVERRIDES ---- */
-/* Remove line-clamp so full article summaries are visible.
-   Uses body prefix for specificity to beat the plugin's own stylesheet
-   which loads after the theme. */
-body .pn-article-excerpt,
-body p.pn-article-excerpt {
-  -webkit-line-clamp: unset;
-  -webkit-box-orient: unset;
-  display: block;
-  overflow: visible;
-  font-size: var(--text-body-md);
-  line-height: 1.6;
-}
-
-/* Tighten article card title for density */
-body .pn-article-title {
-  font-size: var(--text-h4);
-  line-height: 1.3;
-}
-
-.hero-ctas {
-  display: flex;
-  gap: var(--spacing-md);
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.hero-ctas .ps-btn {
-  padding: var(--btn-padding-y) var(--btn-padding-x);
-}
-
-/* News Feed Area */
-.news-feed-section {
-  padding: var(--spacing-2xl) var(--spacing-lg);
-  background-color: var(--color-bg-primary);
-}
-
-.news-feed-header {
-  max-width: var(--container-lg);
-  margin: 0 auto var(--spacing-2xl);
-  text-align: center;
-}
-
-.news-feed-title {
-  font-size: var(--text-h2);
-  margin-bottom: var(--spacing-md);
-}
-
-.news-feed-description {
-  color: var(--color-text-secondary);
-  font-size: var(--text-body-md);
-}
-
-/* ---- ARCHIVE PAGE ---- */
-
-.archive-header {
-  padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
-  background-color: var(--color-bg-primary);
-  position: relative;
-  overflow: hidden;
-}
-
-/* Decorative shape on archive header */
-.archive-header::after {
-  content: '';
-  position: absolute;
-  width: 180px;
-  height: 180px;
-  background: rgba(52, 211, 153, 0.08);
-  border-radius: 50%;
-  top: -40px;
-  right: -40px;
-  pointer-events: none;
-}
-
-.archive-title {
-  max-width: var(--container-lg);
-  margin: 0 auto;
-  font-size: var(--text-h2);
-  color: var(--color-text-primary);
-}
-
-.archive-content {
-  padding: var(--spacing-2xl) var(--spacing-lg);
-}
-
-.archive-filters {
-  max-width: var(--container-lg);
-  margin: 0 auto var(--spacing-2xl);
-  display: flex;
-  gap: var(--spacing-md);
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.archive-search {
-  flex: 1;
-  min-width: 200px;
-}
-
-.archive-grid {
-  max-width: var(--container-lg);
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-2xl);
-}
-
-.peptides-grid {
-  max-width: var(--container-2xl);
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-lg);
-  padding: var(--spacing-xl) var(--spacing-lg);
-}
-
-/* Peptide Card (Clawdiverse-inspired: white card, tinted left border, soft shadow) */
-.peptide-card {
-  background-color: var(--color-bg-primary);
-  border: 1px solid var(--color-border-default);
-  border-left: 3px solid var(--color-accent-mint);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-xl);
-  display: flex;
-  flex-direction: column;
-  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-  position: relative;
-}
-
-.peptide-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  border-left-width: 4px;
-}
-
-/* Category-coded left borders via nth-child for visual variety */
-.peptide-card:nth-child(4n+1) { border-left-color: var(--color-accent-mint); }
-.peptide-card:nth-child(4n+2) { border-left-color: var(--color-accent-sky); }
-.peptide-card:nth-child(4n+3) { border-left-color: var(--color-accent-lavender); }
-.peptide-card:nth-child(4n+4) { border-left-color: var(--color-accent-peach); }
-
-.peptide-card__header {
-  margin-bottom: var(--spacing-md);
-}
-
-.peptide-card__title {
-  font-size: var(--text-h5);
-  font-weight: 600;
-  line-height: 1.3;
-  margin: 0 0 var(--spacing-sm) 0;
-}
-
-.peptide-card__title a {
-  color: var(--color-text-primary);
-  text-decoration: none;
-  transition: color var(--transition-fast);
-}
-
-.peptide-card__title a:hover {
-  color: var(--color-brand-primary);
-}
-
-.peptide-card__meta {
-  display: flex;
-  gap: var(--spacing-xs);
-  flex-wrap: wrap;
-}
-
-/* Category tag pills (Clawdiverse-style colored pills) */
-.peptide-card__badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.3px;
-  padding: 3px 10px;
-  border-radius: 100px;
-  background-color: var(--color-accent-mint);
-  color: #065F46;
-}
-
-/* Cycle badge colors to match card border */
-.peptide-card:nth-child(4n+2) .peptide-card__badge {
-  background-color: var(--color-accent-sky);
-  color: #1E3A5F;
-}
-
-.peptide-card:nth-child(4n+3) .peptide-card__badge {
-  background-color: var(--color-accent-lavender);
-  color: #4C1D95;
-}
-
-.peptide-card:nth-child(4n+4) .peptide-card__badge {
-  background-color: var(--color-accent-peach);
-  color: #7C2D12;
-}
-
-.peptide-card__excerpt {
-  font-size: var(--text-body-md);
-  line-height: 1.65;
-  color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-lg);
-  flex: 1;
-  overflow: hidden;
-}
-
-.peptide-card__footer {
-  margin-top: auto;
-  padding-top: var(--spacing-md);
-  border-top: 1px solid var(--color-border-subtle);
-}
-
-.peptide-card__link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  font-size: var(--text-body-sm);
-  font-weight: 600;
-  color: var(--color-brand-primary);
-  text-decoration: none;
-  transition: gap var(--transition-fast), color var(--transition-fast);
-}
-
-.peptide-card__link:hover {
-  color: var(--color-link-hover);
-  gap: var(--spacing-sm);
-}
-
-.peptide-card__link svg {
-  transition: transform var(--transition-fast);
-}
-
-.peptide-card__link:hover svg {
-  transform: translateX(2px);
-}
-
-.archive-empty {
-  text-align: center;
-  padding: var(--spacing-4xl) var(--spacing-lg);
-}
-
-.archive-empty h2 {
-  margin-top: 0;
-}
-
-.archive-empty p {
-  color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-2xl);
-}
-
-/* ---- SINGLE PAGE / PEPTIDE ---- */
-
-.page-header {
-  padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
-  background-color: var(--color-bg-primary);
-  position: relative;
-  overflow: hidden;
-}
-
-/* Decorative accent on page header */
-.page-header::after {
-  content: '';
-  position: absolute;
-  width: 160px;
-  height: 160px;
-  background: rgba(244, 114, 182, 0.08);
-  border-radius: 50%;
-  top: -30px;
-  right: -30px;
-  pointer-events: none;
-}
-
-.page-title {
-  max-width: var(--container-lg);
-  margin: 0 auto;
-  font-size: var(--text-h1);
-  font-weight: 800;
-  letter-spacing: -0.02em;
-  position: relative;
-  z-index: 1;
-}
-
-.page-content {
-  max-width: var(--container-lg);
-  margin: 0 auto;
-  padding: var(--spacing-3xl) var(--spacing-lg);
-}
-
-.page-content h2 {
-  font-size: var(--text-h3);
-  margin-top: var(--spacing-2xl);
-  margin-bottom: var(--spacing-md);
-}
-
-.page-content h3 {
-  font-size: var(--text-h4);
-  margin-top: var(--spacing-xl);
-  margin-bottom: var(--spacing-md);
-}
-
-.page-content ul,
-.page-content ol {
-  margin-left: var(--spacing-lg);
-  margin-bottom: var(--spacing-md);
-}
-
-.page-content li {
-  margin-bottom: var(--spacing-sm);
-}
-
-/* Collapse empty Elementor/page-builder containers that add phantom space */
-.page-content .elementor-section:empty,
-.page-content .elementor-widget-wrap:empty,
-.page-content .elementor-element:empty,
-.page-content div:empty:not([data-peptide-news-feed]) {
-  display: none;
-}
-
-/* ---- BACK LINK (breadcrumb-style) ---- */
-
-.ps-back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  font-size: var(--text-body-sm);
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  margin-bottom: var(--spacing-lg);
-  transition: color var(--transition-fast);
-}
-
-.ps-back-link:hover {
-  color: var(--color-brand-primary);
-}
-
-/* ---- FEATURED BADGE ---- */
-
-.ps-featured-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 12px;
-  border-radius: 100px;
-  font-size: var(--text-label);
-  font-weight: 700;
-  background-color: var(--color-featured-bg);
-  color: var(--color-featured-text);
-  margin-bottom: var(--spacing-md);
-}
-
-/* ---- PEPTIDE META CARDS (single page) ---- */
-
-.peptide-meta-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: var(--spacing-md);
-  margin-top: var(--spacing-2xl);
-}
-
-.peptide-meta-card {
-  background-color: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-lg);
-}
-
-.peptide-meta-card dt {
-  font-size: var(--text-label);
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: var(--spacing-xs);
-}
-
-.peptide-meta-card dd {
-  font-size: var(--text-body-md);
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.peptide-meta-card dd code {
-  font-size: var(--text-body-sm);
-}
-
-/* ---- PEPTIDE CONTENT BOX (description block on single page) ---- */
-
-.peptide-content-box {
-  background-color: var(--color-bg-secondary);
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-xl);
-  margin-bottom: var(--spacing-2xl);
-}
-
-/* ---- SECTION HEADING WITH ICON (Clawdiverse-style) ---- */
-
-.ps-section-heading {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  font-size: var(--text-h3);
-  font-weight: 700;
-  margin-bottom: var(--spacing-lg);
-  color: var(--color-text-primary);
-}
-
-.ps-section-heading .ps-section-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  font-size: 16px;
-}
-
-/* ---- DECORATIVE BODY SHAPES ---- */
-/* Geometric accents on the main content area for visual warmth */
-
-body > .site-main {
-  position: relative;
-}
-
-/* Large peach blob — left side of body */
-body > .site-main::before {
-  content: '';
-  position: absolute;
-  width: 300px;
-  height: 300px;
-  background: rgba(254, 226, 213, 0.15);
-  border-radius: 50%;
-  top: 40%;
-  left: -8%;
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Lavender ring — right side of body */
-body > .site-main::after {
-  content: '';
-  position: absolute;
-  width: 200px;
-  height: 200px;
-  border: 30px solid rgba(237, 233, 254, 0.12);
-  border-radius: 50%;
-  top: 65%;
-  right: -3%;
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* ---- 404 PAGE ---- */
-
-.error-404 {
-  text-align: center;
-  padding: var(--spacing-4xl) var(--spacing-lg);
-}
-
-.error-404 h1 {
-  font-size: var(--text-h1);
-  margin-bottom: var(--spacing-lg);
-}
-
-.error-404 p {
-  color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-2xl);
-  font-size: var(--text-body-md);
-}
-
-/* ============================================================================
-   9. ANIMATIONS & TRANSITIONS
-   ============================================================================ */
-
-/* Fade in animation */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.fade-in {
-  animation: fadeIn var(--transition-slow) ease-out;
-}
-
-/* Slide in from left */
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.slide-in-left {
-  animation: slideInLeft var(--transition-slow) ease-out;
-}
-
-/* Skeleton loading animation */
-@keyframes shimmer {
-  0% {
-    background-position: -1000px 0;
-  }
-  100% {
-    background-position: 1000px 0;
-  }
-}
-
-.ps-skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--color-bg-tertiary) 25%,
-    var(--color-border-default) 50%,
-    var(--color-bg-tertiary) 75%
-  );
-  background-size: 1000px 100%;
-  animation: shimmer 1.5s infinite;
-  border-radius: var(--radius-md);
-}
-
-/* ============================================================================
-   10. ACCESSIBILITY
-   ============================================================================ */
-
-/* Focus visible style (keyboard focus) */
-*:focus-visible {
-  outline: var(--focus-width) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-
-/* Skip to main content link */
-.skip-to-main {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--color-brand-primary);
-  color: white;
-  padding: var(--spacing-md);
-  text-decoration: none;
-  z-index: var(--z-modal);
-}
-
-.skip-to-main:focus {
-  top: 0;
-}
-
-/* Visually hidden but accessible to screen readers */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-/* Reduced motion preferences */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
-
-/* ============================================================================
-   11. DARK MODE
-   ============================================================================
-
-   Precedence (highest to lowest):
-   1. html[data-theme="light"] or html[data-theme="dark"] (explicit user choice)
-   2. @media (prefers-color-scheme: dark) (system preference)
-   3. Default light mode (above)
-
-   Plugin dark mode coordination:
-   - Theme broadcasts dark mode changes via data-theme attribute on <html>
-   - Plugin must watch this attribute and update colors accordingly
-   - Plugin can also use CSS custom properties which theme controls
-
-   ============================================================================ */
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    /* Brand Colors */
-    --color-brand-primary: #3B82F6;
-    --color-status-success: #10B981;
-    --color-status-warning: #F59E0B;
-    --color-status-error: #EF4444;
-
-    /* Accent Colors (muted for dark mode) */
-    --color-accent-warm: #D97706;
-    --color-accent-mint: #064E3B;
-    --color-accent-lavender: #312E81;
-    --color-accent-peach: #7C2D12;
-    --color-accent-sky: #1E3A5F;
-    --color-featured-bg: #78350F;
-    --color-featured-text: #FEF3C7;
-
-    /* Text Colors */
-    --color-text-primary: #F9FAFB;
-    --color-text-secondary: #D1D5DB;
-    --color-text-tertiary: #9CA3AF;
-
-    /* Border Colors */
-    --color-border-default: #374151;
-    --color-border-subtle: #1F2937;
-
-    /* Background Colors */
-    --color-bg-primary: #111827;
-    --color-bg-secondary: #1F2937;
-    --color-bg-tertiary: #374151;
-
-    /* Component-Specific Colors */
-    --color-input-focus: #3B82F6;
-    --color-link-hover: #60A5FA;
-    --color-badge-bg: #0F172A;
-    --color-badge-text: #60A5FA;
-    --color-code-bg: #1F2937;
-    --color-code-text: #F9FAFB;
-
-    /* Focus shadow adjusted for dark mode */
-    --focus-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
-  }
-}
-
-/* Allow manual dark mode toggle (explicit override) */
-html[data-theme="dark"] {
-  --color-brand-primary: #3B82F6;
-  --color-status-success: #10B981;
-  --color-status-warning: #F59E0B;
-  --color-status-error: #EF4444;
-  --color-accent-warm: #D97706;
-  --color-accent-mint: #064E3B;
-  --color-accent-lavender: #312E81;
-  --color-accent-peach: #7C2D12;
-  --color-accent-sky: #1E3A5F;
-  --color-featured-bg: #78350F;
-  --color-featured-text: #FEF3C7;
-  --color-text-primary: #F9FAFB;
-  --color-text-secondary: #D1D5DB;
-  --color-text-tertiary: #9CA3AF;
-  --color-border-default: #374151;
-  --color-border-subtle: #1F2937;
-  --color-bg-primary: #111827;
-  --color-bg-secondary: #1F2937;
-  --color-bg-tertiary: #374151;
-  --color-input-focus: #3B82F6;
-  --color-link-hover: #60A5FA;
-  --color-badge-bg: #0F172A;
-  --color-badge-text: #60A5FA;
-  --color-code-bg: #1F2937;
-  --color-code-text: #F9FAFB;
-  --focus-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
-}
-
-html[data-theme="light"] {
-  --color-brand-primary: #0066CC;
-  --color-status-success: #059669;
-  --color-status-warning: #F59E0B;
-  --color-status-error: #DC2626;
-  --color-accent-warm: #F59E0B;
-  --color-accent-mint: #D1FAE5;
-  --color-accent-lavender: #EDE9FE;
-  --color-accent-peach: #FEE2D5;
-  --color-accent-sky: #DBEAFE;
-  --color-featured-bg: #FEF3C7;
-  --color-featured-text: #92400E;
-  --color-text-primary: #111827;
-  --color-text-secondary: #6B7280;
-  --color-text-tertiary: #9CA3AF;
-  --color-border-default: #E5E7EB;
-  --color-border-subtle: #F3F4F6;
-  --color-bg-primary: #FAFAF7;
-  --color-bg-secondary: #F5F3EE;
-  --color-bg-tertiary: #EDEAE3;
-  --color-input-focus: #0066CC;
-  --color-link-hover: #0052A3;
-  --color-badge-bg: #DBEAFE;
-  --color-badge-text: #0066CC;
-  --color-code-bg: #F3F4F6;
-  --color-code-text: #111827;
-  --focus-shadow: 0 0 0 4px rgba(0, 102, 204, 0.15);
-}
-
-/* Dark mode alert colors */
-@media (prefers-color-scheme: dark) {
-  .ps-alert-info {
-    background-color: #0C2340;
-    border-color: #3B82F6;
-    color: #BFDBFE;
-  }
-
-  .ps-alert-success {
-    background-color: #064E3B;
-    border-color: #10B981;
-    color: #DCFCE7;
-  }
-
-  .ps-alert-warning {
-    background-color: #78350F;
-    border-color: #F59E0B;
-    color: #FEF3C7;
-  }
-
-  .ps-alert-error {
-    background-color: #7F1D1D;
-    border-color: #EF4444;
-    color: #FEE2E2;
-  }
-
-  .footer-newsletter {
-    background-color: var(--color-bg-secondary);
-  }
-}
-
-/* ============================================================================
-   12. RESPONSIVE DESIGN (Mobile-first)
-   ============================================================================ */
-
-/* Hide decorative shapes on small screens */
-@media (max-width: 767px) {
-  .hero-section::before,
-  .hero-section::after,
-  .archive-header::after,
-  .page-header::after,
-  body > .site-main::before,
-  body > .site-main::after {
-    display: none;
-  }
-}
-
-/* Extra Small (320px - 479px) */
-@media (max-width: 479px) {
-  .hero-section {
-    padding: var(--spacing-2xl) var(--spacing-md);
-  }
-
-  .hero-title {
-    font-size: 32px;
-  }
-
-  .hero-ctas {
-    gap: var(--spacing-sm);
-  }
-
-  .hero-ctas .ps-btn {
-    padding: var(--spacing-sm) var(--spacing-lg);
-    font-size: var(--text-body-sm);
-  }
-
-  .page-content {
-    padding: var(--spacing-lg) var(--spacing-md);
-  }
-
-  .peptides-grid {
-    padding: var(--spacing-2xl) var(--spacing-md);
-  }
-
-  .news-feed-section {
-    padding: var(--spacing-2xl) var(--spacing-md);
-  }
-
-  h1 {
-    font-size: 32px;
-  }
-
-  h2 {
-    font-size: 24px;
-  }
-
-  .site-header-wrapper {
-    gap: var(--spacing-sm);
-  }
-
-  .primary-navigation {
-    display: none;
-  }
-
-  .menu-toggle {
-    display: flex;
-  }
-
-  .header-icons {
-    gap: var(--spacing-sm);
-  }
-
-  .newsletter-form {
-    flex-direction: column;
-  }
-
-  .newsletter-form button {
-    width: 100%;
-  }
-
-  .footer-grid {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-lg);
-  }
-}
-
-/* Small (480px - 767px) */
-@media (min-width: 480px) {
-  .site-header {
-    padding: var(--spacing-lg) var(--spacing-lg);
-  }
-}
-
-/* Medium (768px - 1023px) */
-@media (min-width: 768px) {
-  .menu-toggle {
-    display: none;
-  }
-
-  .primary-navigation {
-    display: flex !important;
-    position: static;
-    width: auto;
-    height: auto;
-    flex-direction: row;
-    background: none;
-    padding: 0;
-    transition: none;
-  }
-
-  .nav-overlay {
-    display: none;
-  }
-
-  .peptides-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .archive-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .hero-title {
-    font-size: 44px;
-  }
-
-  .newsletter-form {
-    flex-direction: row;
-  }
-
-  .newsletter-form button {
-    width: auto;
-  }
-}
-
-/* Large (1024px - 1439px) */
-@media (min-width: 1024px) {
-  .peptides-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .archive-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .site-header {
-    padding: var(--spacing-lg) var(--spacing-xl);
-  }
-
-  .footer-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-/* Extra Large (1440px+) */
-@media (min-width: 1440px) {
-  .peptides-grid {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  .site-header {
-    padding: var(--spacing-lg) var(--spacing-2xl);
-  }
-}
-
-/* ============================================================================
-   13. UTILITY CLASSES
-   ============================================================================ */
-
-/* 404 Page Utilities */
-.ps-404-search-form {
-  margin: var(--spacing-2xl) 0;
-}
-
-.ps-404-cta-group {
-  display: flex;
-  gap: var(--spacing-md);
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-/* ============================================================================
-   14. TOOL PAGES — Generic wrapper for plugin shortcode templates
-   ============================================================================ */
-
-.ps-tool-page {
-  padding: var(--spacing-3xl) var(--spacing-lg);
-  min-height: 60vh;
-}
-
-.ps-tool-fallback {
-  text-align: center;
-  padding: var(--spacing-4xl) 0;
-}
-
-.ps-tool-fallback h1 {
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-tool-fallback p {
-  color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-2xl);
-}
-
-/* ============================================================================
-   15. RESEARCH MODULE CARDS — Front page grid
-   ============================================================================ */
-
-.ps-modules-section {
-  padding: var(--spacing-3xl) var(--spacing-lg);
-  background-color: var(--color-bg-secondary);
-}
-
-.ps-modules-header {
-  text-align: center;
-  margin-bottom: var(--spacing-2xl);
-}
-
-.ps-modules-title {
-  font-size: var(--text-h2);
-  margin-bottom: var(--spacing-sm);
-  margin-top: 0;
-}
-
-.ps-modules-subtitle {
-  color: var(--color-text-secondary);
-  font-size: var(--text-body-md);
-}
-
-.ps-modules-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: var(--spacing-lg);
-  max-width: var(--container-2xl);
-  margin: 0 auto;
-}
-
-.ps-module-card {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-xl);
-  background-color: var(--color-bg-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  text-decoration: none;
-  color: var(--color-text-primary);
-  transition: all var(--transition-normal);
-}
-
-.ps-module-card:hover {
-  border-color: var(--color-brand-primary);
-  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.1);
-  transform: translateY(-2px);
-}
-
-.ps-module-card--inactive {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.ps-module-card__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background-color: rgba(0, 102, 204, 0.1);
-  color: var(--color-brand-primary);
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-module-card__title {
-  font-size: var(--text-h4);
-  font-weight: 600;
-  margin-bottom: var(--spacing-sm);
-  margin-top: 0;
-}
-
-.ps-module-card__description {
-  font-size: var(--text-body-md);
-  color: var(--color-text-secondary);
-  line-height: 1.6;
-  flex: 1;
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-module-card__link {
-  font-size: var(--text-body-sm);
-  font-weight: 600;
-  color: var(--color-brand-primary);
-}
-
-/* ============================================================================
-   16. DOCUMENTATION PAGE — Two-column layout with ToC sidebar
-   ============================================================================ */
-
-.ps-docs-layout {
-  display: grid;
-  grid-template-columns: 240px 1fr;
-  gap: var(--spacing-2xl);
-  max-width: var(--container-2xl);
-  margin: 0 auto;
-  align-items: start;
-}
-
-.ps-docs-sidebar {
-  position: sticky;
-  top: 100px;
-  max-height: calc(100vh - 120px);
-  overflow-y: auto;
-  padding: var(--spacing-lg) 0;
-}
-
-.ps-docs-sidebar-inner {
-  padding-right: var(--spacing-lg);
-  border-right: 1px solid var(--color-border-subtle);
-}
-
-.ps-docs-toc-title {
-  font-size: var(--text-h6);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-md);
-  margin-top: 0;
-  cursor: default;
-}
-
-.ps-docs-toc ul {
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-}
-
-.ps-docs-toc-link {
-  display: block;
-  padding: var(--spacing-xs) var(--spacing-sm);
-  font-size: var(--text-body-sm);
-  color: var(--color-text-secondary);
-  text-decoration: none;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-fast);
-  border-left: 2px solid transparent;
-}
-
-.ps-docs-toc-link:hover {
-  color: var(--color-brand-primary);
-  background-color: var(--color-bg-secondary);
-}
-
-.ps-docs-toc-link--active {
-  color: var(--color-brand-primary);
-  border-left-color: var(--color-brand-primary);
-  background-color: var(--color-bg-secondary);
-  font-weight: 500;
-}
-
-.ps-docs-content {
-  min-width: 0;
-}
-
-.ps-docs-header {
-  margin-bottom: var(--spacing-2xl);
-}
-
-.ps-docs-header h1 {
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-docs-intro {
-  font-size: var(--text-body-lg);
-  color: var(--color-text-secondary);
-  line-height: 1.7;
-}
-
-.ps-docs-body h2 {
-  margin-top: var(--spacing-3xl);
-  padding-top: var(--spacing-lg);
-  border-top: 1px solid var(--color-border-subtle);
-}
-
-.ps-docs-body h2:first-child {
-  margin-top: 0;
-  padding-top: 0;
-  border-top: none;
-}
-
-/* Documentation step styling for SOPs */
-.ps-docs-step {
-  counter-increment: step-counter;
-  position: relative;
-  padding-left: var(--spacing-2xl);
-  margin-bottom: var(--spacing-xl);
-}
-
-.ps-docs-step::before {
-  content: counter(step-counter);
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 28px;
-  height: 28px;
-  background-color: var(--color-brand-primary);
-  color: white;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--text-body-sm);
-  font-weight: 700;
-}
-
-/* Warning callout for docs */
-.ps-docs-warning {
-  padding: var(--spacing-lg);
-  background-color: #FEF3C7;
-  border-left: 4px solid var(--color-status-warning);
-  border-radius: var(--radius-md);
-  margin: var(--spacing-lg) 0;
-  color: #78350F;
-}
-
-/* Documentation tables */
-.ps-docs-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: var(--spacing-lg) 0;
-}
-
-.ps-docs-table th,
-.ps-docs-table td {
-  padding: var(--spacing-sm) var(--spacing-md);
-  border: 1px solid var(--color-border-default);
-  text-align: left;
-  font-size: var(--text-body-md);
-}
-
-.ps-docs-table th {
-  background-color: var(--color-bg-secondary);
-  font-weight: 600;
-}
-
-/* Mobile: collapse sidebar to dropdown */
-@media (max-width: 1023px) {
-  .ps-docs-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .ps-docs-sidebar {
-    position: static;
-    max-height: none;
-    border-bottom: 1px solid var(--color-border-subtle);
-    padding-bottom: var(--spacing-md);
-    margin-bottom: var(--spacing-lg);
-  }
-
-  .ps-docs-sidebar-inner {
-    border-right: none;
-    padding-right: 0;
-  }
-
-  .ps-docs-toc-title {
-    cursor: pointer;
-  }
-
-  .ps-docs-toc-title::after {
-    content: ' ▾';
-  }
-
-  .ps-docs-toc {
-    display: none;
-  }
-
-  .ps-docs-sidebar--open .ps-docs-toc {
-    display: block;
-  }
-}
-
-/* ============================================================================
-   17. AUTH PAGE — Sign-in / Register forms
-   ============================================================================ */
-
-.ps-auth-page {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 70vh;
-}
-
-.ps-auth-container {
-  max-width: 440px;
-}
-
-.ps-auth-card {
-  background-color: var(--color-bg-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-2xl);
-  box-shadow: var(--shadow-md);
-}
-
-.ps-auth-card h1 {
-  font-size: var(--text-h3);
-  margin-bottom: var(--spacing-lg);
-}
-
-.ps-auth-info {
-  margin-bottom: var(--spacing-lg);
-}
-
-.ps-auth-info p {
-  margin-bottom: 0;
-  font-size: var(--text-body-sm);
-}
-
-.ps-auth-form .ps-form-group {
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-auth-link {
-  text-align: center;
-  margin-top: var(--spacing-md);
-  font-size: var(--text-body-sm);
-}
-
-.ps-auth-toggle {
-  text-align: center;
-  margin-top: var(--spacing-lg);
-  padding-top: var(--spacing-lg);
-  border-top: 1px solid var(--color-border-subtle);
-  font-size: var(--text-body-sm);
-  color: var(--color-text-secondary);
-}
-
-.ps-auth-toggle a {
-  color: var(--color-brand-primary);
-  font-weight: 500;
-}
-
-.ps-auth-form-wrap--hidden {
-  display: none;
-}
-
-.ps-auth-messages {
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-form-hint {
-  display: block;
-  font-size: var(--text-caption);
-  color: var(--color-text-tertiary);
-  margin-top: 4px;
-}
-
-/* Password strength */
-.ps-password-strength {
-  margin-top: 4px;
-  font-size: var(--text-caption);
-  font-weight: 500;
-}
-
-.ps-strength-weak { color: var(--color-status-error); }
-.ps-strength-fair { color: var(--color-status-warning); }
-.ps-strength-strong { color: var(--color-status-success); }
-
-/* ============================================================================
-   18. NEWSLETTER SECTION — Standalone signup CTA
-   ============================================================================ */
-
-.ps-newsletter-section {
-  background-color: var(--color-bg-tertiary);
-  padding: var(--spacing-3xl) var(--spacing-lg);
-}
-
-.ps-newsletter-inner {
-  max-width: var(--container-md);
-  margin: 0 auto;
-  text-align: center;
-}
-
-.ps-newsletter-title {
-  font-size: var(--text-h2);
-  margin-bottom: var(--spacing-sm);
-  margin-top: 0;
-}
-
-.ps-newsletter-subtitle {
-  color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-lg);
-}
-
-.ps-newsletter-form-row {
-  display: flex;
-  gap: var(--spacing-sm);
-  max-width: 480px;
-  margin: 0 auto;
-}
-
-.ps-newsletter-input {
-  flex: 1;
-  min-width: 0;
-}
-
-.ps-newsletter-status {
-  margin-top: var(--spacing-md);
-  text-align: left;
-  max-width: 480px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.ps-newsletter-learn-more {
-  margin-top: var(--spacing-md);
-  font-size: var(--text-body-sm);
-}
-
-.ps-newsletter-learn-more a {
-  color: var(--color-brand-primary);
-}
-
-@media (max-width: 479px) {
-  .ps-newsletter-form-row {
-    flex-direction: column;
-  }
-}
-
-/* ============================================================================
-   19. USER MENU — Logged-in dropdown in header
-   ============================================================================ */
-
-.ps-user-menu {
-  position: relative;
-}
-
-.ps-user-menu__toggle {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  background: none;
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-size: var(--text-body-sm);
-  font-weight: 500;
-  color: var(--color-text-primary);
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.ps-user-menu__toggle:hover {
-  border-color: var(--color-brand-primary);
-}
-
-.ps-user-menu__name {
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ps-user-menu__dropdown {
-  display: none;
-  position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: var(--spacing-xs);
-  background-color: var(--color-bg-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  min-width: 180px;
-  z-index: var(--z-dropdown);
-  padding: var(--spacing-xs) 0;
-}
-
-.ps-user-menu:hover .ps-user-menu__dropdown,
-.ps-user-menu__toggle:focus + .ps-user-menu__dropdown {
-  display: block;
-}
-
-.ps-user-menu__dropdown a {
-  display: block;
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-size: var(--text-body-sm);
-  color: var(--color-text-primary);
-  text-decoration: none;
-  transition: background-color var(--transition-fast);
-}
-
-.ps-user-menu__dropdown a:hover {
-  background-color: var(--color-bg-secondary);
-  color: var(--color-brand-primary);
-}
-
-/* ============================================================================
-   20. SETTINGS PANEL — Slide-out support panel
-   ============================================================================ */
-
-.ps-settings-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: var(--z-modal-backdrop);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--transition-slow), visibility var(--transition-slow);
-}
-
-.ps-settings-overlay--active {
-  opacity: 1;
-  visibility: visible;
-}
-
-.ps-settings-panel {
-  position: fixed;
-  top: 0;
-  right: -400px;
-  width: 380px;
-  max-width: 90vw;
-  height: 100vh;
-  background-color: var(--color-bg-primary);
-  border-left: 1px solid var(--color-border-default);
-  box-shadow: var(--shadow-xl);
-  z-index: var(--z-modal);
-  overflow-y: auto;
-  transition: right var(--transition-slow);
-  display: flex;
-  flex-direction: column;
-}
-
-.ps-settings-panel--open {
-  right: 0;
-}
-
-.ps-settings-panel__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-lg) var(--spacing-xl);
-  border-bottom: 1px solid var(--color-border-subtle);
-}
-
-.ps-settings-panel__header h2 {
-  font-size: var(--text-h4);
-  margin: 0;
-}
-
-.ps-settings-panel__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: none;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-fast);
-}
-
-.ps-settings-panel__close:hover {
-  color: var(--color-text-primary);
-  background-color: var(--color-bg-secondary);
-}
-
-.ps-settings-panel__body {
-  padding: var(--spacing-xl);
-  flex: 1;
-}
-
-.ps-settings-section {
-  margin-bottom: var(--spacing-2xl);
-}
-
-.ps-settings-section h3 {
-  font-size: var(--text-h5);
-  margin-bottom: var(--spacing-md);
-  margin-top: 0;
-}
-
-.ps-settings-disclaimer {
-  font-size: var(--text-body-sm);
-  color: var(--color-text-secondary);
-}
-
-.ps-settings-disclaimer p {
-  font-size: var(--text-body-sm);
-  line-height: 1.6;
-}
-
-.ps-contact-form .ps-form-group {
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-contact-status {
-  margin-top: var(--spacing-md);
-}
-
-/* ============================================================================
-   21. LANGUAGE PLACEHOLDER — Header icon
-   ============================================================================ */
-
-.ps-lang-placeholder {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  color: var(--color-text-secondary);
-  font-size: var(--text-body-sm);
-  font-weight: 500;
-  cursor: default;
-}
-
-.ps-lang-code {
-  font-size: var(--text-label);
-}
-
-@media (max-width: 767px) {
-  .ps-lang-placeholder {
-    display: none;
-  }
-}
-
-/* ============================================================================
-   22. FOOTER UPDATES — Disclaimer and language links
-   ============================================================================ */
-
-.footer-disclaimer {
-  font-size: var(--text-caption);
-  color: var(--color-text-tertiary);
-  max-width: var(--container-md);
-  margin: var(--spacing-md) auto;
-  line-height: 1.5;
-}
-
-.footer-languages {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-md);
-  margin-top: var(--spacing-md);
-  font-size: var(--text-body-sm);
-  flex-wrap: wrap;
-}
-
-.footer-languages-label {
-  font-weight: 500;
-  color: var(--color-text-secondary);
-}
-
-.footer-languages a {
-  color: var(--color-brand-primary);
-}
-
-/* ============================================================================
-   23. PROFILE PAGE — Basic profile fallback
-   ============================================================================ */
-
-.ps-profile-basic {
-  text-align: center;
-  padding: var(--spacing-2xl) 0;
-}
-
-.ps-profile-basic h1 {
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-profile-links {
-  display: flex;
-  gap: var(--spacing-md);
-  justify-content: center;
-  flex-wrap: wrap;
-  margin-top: var(--spacing-xl);
-}
-
-/* Science Feed header */
-.ps-science-feed-header {
-  text-align: center;
-  margin-bottom: var(--spacing-2xl);
-}
-
-.ps-science-feed-header h1 {
-  margin-bottom: var(--spacing-md);
-}
-
-.ps-science-feed-header p {
-  color: var(--color-text-secondary);
-}
-
-/* ============================================================================
-   24. DARK MODE — Additions for new components
-   ============================================================================ */
-
-html[data-theme="dark"] .ps-module-card__icon {
-  background-color: rgba(59, 130, 246, 0.15);
-}
-
-html[data-theme="dark"] .ps-module-card:hover {
-  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
-}
-
-html[data-theme="dark"] .ps-docs-warning {
-  background-color: #78350F;
-  border-color: #F59E0B;
-  color: #FEF3C7;
-}
-
-html[data-theme="dark"] .ps-auth-card {
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-}
-
-html[data-theme="dark"] .ps-newsletter-section {
-  background-color: var(--color-bg-secondary);
-}
-
-html[data-theme="dark"] .ps-settings-overlay {
-  background: rgba(0, 0, 0, 0.6);
-}
-
-html[data-theme="dark"] .ps-modules-section {
-  background-color: var(--color-bg-secondary);
-}
-
-/* Dropdown submenu support for primary navigation */
-.primary-navigation li.menu-item-has-children {
-  position: relative;
-}
-
-.primary-navigation .sub-menu {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background-color: var(--color-bg-primary);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  min-width: 200px;
-  z-index: var(--z-dropdown);
-  padding: var(--spacing-xs) 0;
-  margin-top: var(--spacing-sm);
-}
-
-.primary-navigation li.menu-item-has-children:hover > .sub-menu {
-  display: flex;
-  flex-direction: column;
-}
-
-.primary-navigation .sub-menu li {
-  display: block;
-}
-
-.primary-navigation .sub-menu a {
-  display: block;
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-size: var(--text-body-sm);
-  white-space: nowrap;
-}
-
-.primary-navigation .sub-menu a:hover {
-  background-color: var(--color-bg-secondary);
-}
-
-.primary-navigation .sub-menu a::after {
-  display: none;
-}
-
-/* ============================================================================
-   25. RESPONSIVE — Additions for new components
-   ============================================================================ */
-
-@media (max-width: 767px) {
-  .ps-user-menu__toggle {
-    padding: var(--spacing-xs) var(--spacing-sm);
-    font-size: var(--text-caption);
-  }
-
-  .ps-user-menu__name {
-    display: none;
-  }
-
-  .ps-modules-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (min-width: 768px) {
-  .ps-modules-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .ps-modules-grid {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-
-/* ============================================================================
-   END OF STYLESHEET
-   ============================================================================ */
-
-/* =====================================================================
-   Section 26 — v1.5.1 security/UX additions
-   ===================================================================== */
-
-/* Visually hidden honeypot wrapper — off-screen, keyboard-skipped, bot-visible. */
-.ps-hp-wrap {
-	position: absolute;
-	left: -9999px;
-	top: auto;
-	width: 1px;
-	height: 1px;
-	overflow: hidden;
-	pointer-events: none;
-}
-
-/* Email verification banner on /profile */
-.ps-verify-required {
-	padding: var(--spacing-md);
-	margin-bottom: var(--spacing-lg);
-	border-left: 4px solid #F59E0B;
-	background-color: #FEF3C7;
-	color: #78350F;
-	border-radius: 6px;
-}
-
-html[data-theme="dark"] .ps-verify-required {
-	background-color: #451A03;
-	color: #FEF3C7;
-	border-left-color: #F59E0B;
-}
-
-.ps-verify-required h3 {
-	margin: 0 0 var(--spacing-xs) 0;
-	font-size: 1.05rem;
-}
-
-.ps-verify-resend {
-	margin-top: var(--spacing-sm);
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-sm);
-}
-
-.ps-verify-resend-status {
-	font-size: 0.9rem;
-	color: inherit;
-}
-
-/* Newsletter consent + privacy link */
-.ps-newsletter-consent {
-	display: flex;
-	align-items: flex-start;
-	gap: var(--spacing-xs);
-	margin-top: var(--spacing-sm);
-	font-size: 0.9rem;
-	line-height: 1.5;
-}
-
-.ps-newsletter-consent input[type="checkbox"] {
-	margin-top: 0.25em;
-	flex-shrink: 0;
-}
-
-.ps-newsletter-privacy {
-	margin-top: var(--spacing-xs);
-	font-size: 0.85rem;
-	opacity: 0.85;
-}
-
-/* Footer translations note */
-.footer-languages-note {
-	margin-top: var(--spacing-sm);
-	font-size: 0.85rem;
-	opacity: 0.7;
-}
+/*
+Theme Name: Peptide Starter
+Theme URI: https://github.com/peptiderepo/peptide-starter
+Description: Premium, accessible WordPress theme for scientific peptide reference database
+Author: Peptide Repo
+Author URI: https://peptiderepo.com
+Version: 2.2.0
+License: GPL v2 or later
+License URI: https://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: peptide-starter
+Domain Path: /languages
+Requires at least: 6.0
+Requires PHP: 7.4
+*/
+
+/* ============================================================================
+   CSS ARCHITECTURE
+   ============================================================================
+
+   This stylesheet organizes theme styles in the following order:
+   1. CSS Reset
+   2. CSS Custom Properties (design tokens)
+   3. Typography & Font Loading
+   4. Global Styles & Layout
+   5. Components (buttons, cards, forms, badges)
+   6. Regions (header, footer, main)
+   7. Pages (home, archive, single)
+   8. Animations & Transitions
+   9. Accessibility (focus, reduced motion)
+   10. Dark Mode (color overrides)
+   11. Responsive (mobile-first breakpoints)
+
+   Philosophy:
+   - Use CSS custom properties for all design tokens
+   - Avoid !important on global elements (breaks plugins)
+   - Scope styles with specificity, not cascade tricks
+   - Respect plugin namespaces (.pn-*, .ps-*)
+   - Mobile-first responsive approach
+
+   ============================================================================ */
+
+/* ============================================================================
+   1. CSS RESET
+   ============================================================================ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  line-height: 1.5;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+}
+
+p {
+  margin: 0;
+}
+
+ul, ol {
+  list-style: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button, input, textarea, select {
+  font: inherit;
+  color: inherit;
+}
+
+img, svg {
+  max-width: 100%;
+  display: block;
+}
+
+/* ============================================================================
+   2. CSS CUSTOM PROPERTIES (Design Tokens)
+   ============================================================================ */
+
+:root {
+  /* ---- FONT FAMILIES ---- */
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
+  --font-mono: "Monaco", "Menlo", "Ubuntu Mono", "Courier New", monospace;
+
+  /* ---- TYPOGRAPHY SCALE (tightened for better content density) ---- */
+  /* H1 */
+  --text-h1: 36px;
+  --text-h1-weight: 700;
+  --text-h1-lh: 1.2;
+  --text-h1-ls: -0.02em;
+
+  /* H2 */
+  --text-h2: 30px;
+  --text-h2-weight: 700;
+  --text-h2-lh: 1.25;
+  --text-h2-ls: -0.015em;
+
+  /* H3 */
+  --text-h3: 24px;
+  --text-h3-weight: 600;
+  --text-h3-lh: 1.3;
+  --text-h3-ls: -0.01em;
+
+  /* H4 */
+  --text-h4: 20px;
+  --text-h4-weight: 600;
+  --text-h4-lh: 1.35;
+  --text-h4-ls: 0;
+
+  /* H5 */
+  --text-h5: 17px;
+  --text-h5-weight: 700;
+  --text-h5-lh: 1.4;
+  --text-h5-ls: 0;
+
+  /* H6 */
+  --text-h6: 15px;
+  --text-h6-weight: 500;
+  --text-h6-lh: 1.4;
+  --text-h6-ls: 0;
+
+  /* Body (slightly smaller for density — still readable) */
+  --text-body-lg: 15px;
+  --text-body-md: 13px;
+  --text-body-sm: 12px;
+
+  /* Labels & Captions */
+  --text-label: 11px;
+  --text-label-weight: 500;
+  --text-caption: 11px;
+  --text-overline: 10px;
+  --text-overline-weight: 600;
+
+  /* Code */
+  --text-code-inline: 14px;
+  --text-code-block: 13px;
+  --text-code-lh: 1.6;
+
+  /* ---- SPACING SCALE (8px base grid) ---- */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 64px;
+  --spacing-4xl: 80px;
+  --spacing-5xl: 96px;
+
+  /* ---- BUTTON PADDING (unified per Design Director) ---- */
+  --btn-padding-y: var(--spacing-md);
+  --btn-padding-x: var(--spacing-xl);
+
+  /* ---- LIGHT MODE COLOR PALETTE ---- */
+  /* Brand Colors */
+  --color-brand-primary: #0066CC;
+  --color-status-success: #059669;
+  --color-status-warning: #F59E0B;
+  --color-status-error: #DC2626;
+
+  /* Accent Colors (Clawdiverse-inspired warm tints for cards/categories) */
+  --color-accent-warm: #F59E0B;
+  --color-accent-mint: #D1FAE5;
+  --color-accent-lavender: #EDE9FE;
+  --color-accent-peach: #FEE2D5;
+  --color-accent-sky: #DBEAFE;
+
+  /* Featured badge */
+  --color-featured-bg: #FEF3C7;
+  --color-featured-text: #92400E;
+
+  /* Text Colors */
+  --color-text-primary: #111827;
+  --color-text-secondary: #6B7280;
+  --color-text-tertiary: #9CA3AF;
+
+  /* Border Colors */
+  --color-border-default: #E5E7EB;
+  --color-border-subtle: #F3F4F6;
+
+  /* Background Colors (warm off-white base, à la Clawdiverse) */
+  --color-bg-primary: #FAFAF7;
+  --color-bg-secondary: #F5F3EE;
+  --color-bg-tertiary: #EDEAE3;
+
+  /* Component-Specific Colors */
+  --color-input-focus: #0066CC;
+  --color-link-hover: #0052A3;
+  --color-badge-bg: #DBEAFE;
+  --color-badge-text: #0066CC;
+  --color-code-bg: #F3F4F6;
+  --color-code-text: #111827;
+
+  /* ---- SHADOWS & ELEVATION ---- */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+
+  /* ---- BORDERS & RADIUS ---- */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  /* ---- TRANSITIONS ---- */
+  --transition-fast: 150ms ease-out;
+  --transition-normal: 200ms ease-out;
+  --transition-slow: 300ms ease-in-out;
+
+  /* ---- FOCUS RING (per Design Director fix: 15% opacity) ---- */
+  --focus-color: #0066CC;
+  --focus-width: 2px;
+  --focus-offset: 2px;
+  --focus-shadow: 0 0 0 4px rgba(0, 102, 204, 0.15);
+
+  /* ---- CONTAINER WIDTHS ---- */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 900px;
+  --container-xl: 1024px;
+  --container-2xl: 1280px;
+
+  /* ---- Z-INDEX SCALE ---- */
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-fixed: 30;
+  --z-modal-backdrop: 40;
+  --z-modal: 50;
+}
+
+/* ============================================================================
+   3. TYPOGRAPHY & FONT LOADING
+   ============================================================================ */
+
+/* Load Inter from Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+/* Base typography */
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-body-md);
+  line-height: 1.6;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-primary);
+}
+
+/* Headings */
+h1 {
+  font-size: var(--text-h1);
+  font-weight: var(--text-h1-weight);
+  line-height: var(--text-h1-lh);
+  letter-spacing: var(--text-h1-ls);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+h2 {
+  font-size: var(--text-h2);
+  font-weight: var(--text-h2-weight);
+  line-height: var(--text-h2-lh);
+  letter-spacing: var(--text-h2-ls);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-md);
+  margin-top: var(--spacing-lg);
+}
+
+h3 {
+  font-size: var(--text-h3);
+  font-weight: var(--text-h3-weight);
+  line-height: var(--text-h3-lh);
+  letter-spacing: var(--text-h3-ls);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
+  margin-top: var(--spacing-lg);
+}
+
+h4 {
+  font-size: var(--text-h4);
+  font-weight: var(--text-h4-weight);
+  line-height: var(--text-h4-lh);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
+  margin-top: var(--spacing-md);
+}
+
+h5 {
+  font-size: var(--text-h5);
+  font-weight: var(--text-h5-weight);
+  line-height: var(--text-h5-lh);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+h6 {
+  font-size: var(--text-h6);
+  font-weight: var(--text-h6-weight);
+  line-height: var(--text-h6-lh);
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Paragraph */
+p {
+  font-size: var(--text-body-md);
+  line-height: 1.6;
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+/* Small text */
+small, .text-small {
+  font-size: var(--text-body-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Code */
+code {
+  font-family: var(--font-mono);
+  font-size: var(--text-code-inline);
+  background-color: var(--color-code-bg);
+  color: var(--color-code-text);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+}
+
+pre {
+  font-family: var(--font-mono);
+  font-size: var(--text-code-block);
+  line-height: var(--text-code-lh);
+  background-color: var(--color-code-bg);
+  color: var(--color-code-text);
+  padding: var(--spacing-md);
+  border-radius: var(--radius-md);
+  overflow-x: auto;
+  margin-bottom: var(--spacing-md);
+}
+
+pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+/* ============================================================================
+   4. GLOBAL STYLES & LAYOUT
+   ============================================================================ */
+
+html {
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* Skip Link (accessibility) */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  z-index: var(--z-modal);
+  padding: var(--spacing-md);
+  background: var(--color-brand-primary);
+  color: white;
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+}
+
+.skip-link:focus {
+  left: var(--spacing-md);
+  top: var(--spacing-md);
+}
+
+/* Main content area */
+#main {
+  flex: 1;
+  width: 100%;
+}
+
+/* Container for page content */
+.ps-container {
+  max-width: var(--container-lg);
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  width: 100%;
+}
+
+.ps-container-wide {
+  max-width: var(--container-2xl);
+  margin: 0 auto;
+  padding: 0 var(--spacing-lg);
+  width: 100%;
+}
+
+/* ============================================================================
+   5. LINK STYLING (Scope: body content vs navigation)
+   ============================================================================ */
+
+/* Body content links: underlined */
+.site-content a,
+.post-content a,
+article a,
+.page-content a {
+  color: var(--color-brand-primary);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition: color var(--transition-normal);
+}
+
+.site-content a:hover,
+.post-content a:hover,
+article a:hover,
+.page-content a:hover {
+  color: var(--color-link-hover);
+}
+
+.site-content a:focus,
+.post-content a:focus,
+article a:focus,
+.page-content a:focus {
+  outline: var(--focus-width) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+
+/* Footer links: underlined */
+.site-footer a {
+  color: var(--color-brand-primary);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition: color var(--transition-normal);
+}
+
+.site-footer a:hover {
+  color: var(--color-link-hover);
+}
+
+/* Navigation links: NO underline (context is clear) */
+nav a {
+  text-decoration: none;
+}
+
+/* ============================================================================
+   6. COMPONENTS
+   ============================================================================ */
+
+/* ---- BUTTONS ---- */
+
+.ps-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: var(--btn-padding-y) var(--btn-padding-x);
+  border: none;
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans);
+  font-size: var(--text-body-md);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.ps-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ps-btn:focus {
+  outline: none;
+  box-shadow: var(--focus-shadow);
+}
+
+/* Primary Button */
+.ps-btn-primary {
+  background-color: var(--color-brand-primary);
+  color: white;
+}
+
+.ps-btn-primary:hover {
+  background-color: var(--color-link-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.2);
+}
+
+.ps-btn-primary:active {
+  transform: translateY(0);
+}
+
+/* Secondary Button (ghost/outline style) */
+.ps-btn-secondary {
+  background-color: transparent;
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+}
+
+.ps-btn-secondary:hover {
+  background-color: var(--color-bg-secondary);
+  border-color: var(--color-brand-primary);
+  color: var(--color-brand-primary);
+}
+
+/* Tertiary Button */
+.ps-btn-tertiary {
+  background-color: transparent;
+  color: var(--color-brand-primary);
+  border: 1px solid var(--color-brand-primary);
+}
+
+.ps-btn-tertiary:hover {
+  background-color: var(--color-brand-primary);
+  color: white;
+}
+
+/* Button Sizes */
+.ps-btn-sm {
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-body-sm);
+}
+
+.ps-btn-lg {
+  padding: var(--spacing-lg) var(--spacing-2xl);
+  font-size: var(--text-body-lg);
+}
+
+.ps-btn-full {
+  width: 100%;
+}
+
+/* ---- CARDS ---- */
+
+.ps-card {
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+  transition: all var(--transition-normal);
+}
+
+.ps-card:hover {
+  border-color: var(--color-brand-primary);
+  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
+}
+
+.ps-card-header {
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-card-title {
+  font-size: var(--text-h5);
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: var(--spacing-sm);
+}
+
+.ps-card-meta {
+  font-size: var(--text-caption);
+  color: var(--color-text-secondary);
+}
+
+.ps-card-content {
+  font-size: var(--text-body-md);
+  line-height: 1.6;
+  color: var(--color-text-primary);
+}
+
+/* ---- FEATURED IMAGES ---- */
+
+.ps-featured-image {
+  width: 100%;
+  text-align: center;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.ps-featured-image img {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  border-radius: var(--radius-lg);
+}
+
+/* ---- BADGES & TAGS ---- */
+
+.ps-badge {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-label);
+  font-weight: var(--text-label-weight);
+  background-color: var(--color-badge-bg);
+  color: var(--color-badge-text);
+  white-space: nowrap;
+}
+
+.ps-badge-success {
+  background-color: #D1FAE5;
+  color: var(--color-status-success);
+}
+
+.ps-badge-warning {
+  background-color: #FEF3C7;
+  color: var(--color-status-warning);
+}
+
+.ps-badge-error {
+  background-color: #FEE2E2;
+  color: var(--color-status-error);
+}
+
+.ps-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: 4px 8px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-label);
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.ps-tag:hover {
+  background-color: var(--color-border-default);
+}
+
+.ps-tag-close {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+/* ---- FORMS ---- */
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="search"],
+input[type="number"],
+input[type="url"],
+textarea,
+select {
+  width: 100%;
+  padding: var(--spacing-md);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  font-family: var(--font-sans);
+  font-size: var(--text-body-md);
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+  transition: all var(--transition-normal);
+}
+
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="number"]:focus,
+input[type="url"]:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--color-brand-primary);
+  box-shadow: var(--focus-shadow);
+  background-color: var(--color-bg-secondary);
+}
+
+/* Form labels */
+label {
+  display: block;
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--text-label);
+  font-weight: var(--text-label-weight);
+  color: var(--color-text-primary);
+}
+
+/* Form groups */
+.ps-form-group {
+  margin-bottom: var(--spacing-lg);
+}
+
+/* Form error state (per Design Director) */
+input.ps-error,
+textarea.ps-error,
+select.ps-error {
+  border-color: var(--color-status-error);
+  background-color: rgba(220, 38, 38, 0.02);
+}
+
+.ps-form-error {
+  color: var(--color-status-error);
+  font-size: var(--text-caption);
+  margin-top: 4px;
+  font-weight: var(--text-label-weight);
+}
+
+/* Checkboxes & Radios */
+input[type="checkbox"],
+input[type="radio"] {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  margin-right: var(--spacing-sm);
+  cursor: pointer;
+  accent-color: var(--color-brand-primary);
+}
+
+/* ---- ALERTS & CALLOUTS ---- */
+
+.ps-alert {
+  padding: var(--spacing-lg);
+  border-radius: var(--radius-md);
+  border-left: 4px solid;
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-alert-info {
+  background-color: #DBEAFE;
+  border-color: var(--color-brand-primary);
+  color: #0652CD;
+}
+
+.ps-alert-success {
+  background-color: #D1FAE5;
+  border-color: var(--color-status-success);
+  color: #065F46;
+}
+
+.ps-alert-warning {
+  background-color: #FEF3C7;
+  border-color: var(--color-status-warning);
+  color: #78350F;
+}
+
+.ps-alert-error {
+  background-color: #FEE2E2;
+  border-color: var(--color-status-error);
+  color: #7F1D1D;
+}
+
+/* ---- SEARCH FORM ---- */
+
+.ps-search-form {
+  position: relative;
+  width: 100%;
+}
+
+.ps-search-input {
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-body-md);
+}
+
+.ps-search-input:focus {
+  outline: none;
+  border-color: var(--color-brand-primary);
+  box-shadow: var(--focus-shadow);
+}
+
+.ps-search-icon {
+  position: absolute;
+  right: var(--spacing-md);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-text-secondary);
+  pointer-events: none;
+}
+
+/* ---- PAGINATION ---- */
+
+.ps-pagination {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+  justify-content: center;
+  margin: var(--spacing-2xl) 0;
+  flex-wrap: wrap;
+}
+
+.ps-pagination a,
+.ps-pagination span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+  padding: 0 var(--spacing-sm);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  color: var(--color-text-primary);
+  transition: all var(--transition-normal);
+}
+
+.ps-pagination a:hover {
+  border-color: var(--color-brand-primary);
+  background-color: var(--color-brand-primary);
+  color: white;
+}
+
+.ps-pagination .current {
+  background-color: var(--color-brand-primary);
+  border-color: var(--color-brand-primary);
+  color: white;
+}
+
+/* ============================================================================
+   7. REGIONS (Header, Footer, Main)
+   ============================================================================ */
+
+/* ---- HEADER ---- */
+
+.site-header {
+  background-color: var(--color-bg-primary);
+  border-bottom: 1px solid var(--color-border-subtle);
+  padding: var(--spacing-lg) var(--spacing-xl);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Account for WP admin bar when logged in */
+.admin-bar .site-header {
+  top: 32px;
+}
+
+@media screen and (max-width: 782px) {
+  .admin-bar .site-header {
+    top: 46px;
+  }
+}
+
+.site-header-wrapper {
+  max-width: var(--container-2xl);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-lg);
+}
+
+/* Logo */
+.site-logo {
+  flex: 0 0 auto;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-brand-primary);
+  text-decoration: none;
+  line-height: 1;
+  transition: color var(--transition-normal);
+}
+
+.site-logo:hover {
+  color: var(--color-link-hover);
+}
+
+.site-logo img {
+  height: 32px;
+  width: auto;
+}
+
+/* Primary Navigation */
+.primary-navigation {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  margin-left: var(--spacing-lg);
+  margin-right: auto;
+}
+
+.primary-navigation ul {
+  display: flex;
+  gap: var(--spacing-xl);
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.primary-navigation li {
+  display: flex;
+  align-items: center;
+}
+
+.primary-navigation a {
+  font-size: var(--text-body-md);
+  font-weight: 500;
+  color: var(--color-text-primary);
+  text-decoration: none;
+  position: relative;
+  transition: color var(--transition-normal);
+}
+
+.primary-navigation a:hover {
+  color: var(--color-brand-primary);
+}
+
+.primary-navigation a::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--color-brand-primary);
+  transform: scaleX(0);
+  transform-origin: right;
+  transition: transform var(--transition-normal);
+}
+
+.primary-navigation a:hover::after,
+.primary-navigation a.active::after {
+  transform: scaleX(1);
+  transform-origin: left;
+}
+
+/* Header Icons */
+.header-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.header-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: none;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: color var(--transition-normal);
+  padding: 0;
+}
+
+.header-icon-btn:hover {
+  color: var(--color-brand-primary);
+}
+
+.header-icon-btn:focus {
+  outline: none;
+  box-shadow: var(--focus-shadow);
+  border-radius: var(--radius-md);
+}
+
+/* Header CTA button — hidden on mobile */
+.ps-header-cta {
+  display: none;
+  border-radius: var(--radius-lg);
+}
+
+@media (min-width: 768px) {
+  .ps-header-cta {
+    display: inline-flex;
+  }
+}
+
+/* Hamburger Menu */
+.menu-toggle {
+  display: none;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--color-text-primary);
+}
+
+/* Mobile Navigation */
+.nav-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  pointer-events: none;
+  z-index: var(--z-modal-backdrop);
+  transition: opacity var(--transition-slow);
+}
+
+.nav-overlay.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ---- FOOTER ---- */
+
+.site-footer {
+  background-color: var(--color-bg-secondary);
+  border-top: 1px solid var(--color-border-subtle);
+  padding: var(--spacing-3xl) var(--spacing-lg);
+  margin-top: auto;
+}
+
+.footer-wrapper {
+  max-width: var(--container-2xl);
+  margin: 0 auto;
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: var(--spacing-2xl);
+  margin-bottom: var(--spacing-3xl);
+}
+
+.footer-section h3 {
+  font-size: var(--text-h5);
+  margin-bottom: var(--spacing-lg);
+}
+
+.footer-section ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.footer-section a {
+  color: var(--color-brand-primary);
+  text-decoration: underline;
+  transition: color var(--transition-normal);
+}
+
+.footer-section a:hover {
+  color: var(--color-link-hover);
+}
+
+.footer-newsletter {
+  background-color: var(--color-bg-tertiary);
+  padding: var(--spacing-2xl);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--spacing-3xl);
+}
+
+.footer-newsletter h3 {
+  margin-top: 0;
+}
+
+.newsletter-form {
+  display: flex;
+  gap: var(--spacing-sm);
+  margin-top: var(--spacing-lg);
+}
+
+.newsletter-form input {
+  flex: 1;
+  min-width: 200px;
+}
+
+.newsletter-form button {
+  flex: 0 0 auto;
+}
+
+.footer-bottom {
+  border-top: 1px solid var(--color-border-default);
+  padding-top: var(--spacing-2xl);
+  text-align: center;
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-sm);
+}
+
+/* ============================================================================
+   8. PAGES
+   ============================================================================ */
+
+/* ---- HOME PAGE / HERO ---- */
+
+.hero-section {
+  background-color: var(--color-bg-primary);
+  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-2xl);
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Decorative geometric shapes (Clawdiverse-inspired) */
+.hero-section::before,
+.hero-section::after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Soft pink circle — top left */
+.hero-section::before {
+  width: 200px;
+  height: 200px;
+  background: rgba(244, 114, 182, 0.10);
+  top: 8%;
+  left: -4%;
+}
+
+/* Mint/teal shape — right side */
+.hero-section::after {
+  width: 260px;
+  height: 260px;
+  background: rgba(52, 211, 153, 0.08);
+  top: 20%;
+  right: -6%;
+}
+
+.hero-content {
+  max-width: var(--container-lg);
+  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.hero-title {
+  font-size: 48px;
+  font-weight: 800;
+  margin-bottom: var(--spacing-md);
+  color: var(--color-text-primary);
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+}
+
+/* Accent word in hero title */
+.hero-title .ps-hero-accent {
+  color: var(--color-brand-primary);
+  position: relative;
+  display: inline-block;
+}
+
+/* Wavy underline on accent word */
+.hero-title .ps-hero-accent::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 4 Q12.5 0 25 4 T50 4 T75 4 T100 4' fill='none' stroke='%230066CC' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
+  background-size: 50px 6px;
+}
+
+.hero-subtitle {
+  font-size: var(--text-body-lg);
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-lg);
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.7;
+}
+
+.hero-search {
+  margin-bottom: var(--spacing-lg);
+}
+
+/* Legacy theme search form (fallback when PSA plugin is not active) */
+.hero-search .ps-search-form {
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.hero-search .ps-search-input {
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  padding-right: 48px;
+  background-color: #FFFFFF;
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+/* ---- PEPTIDE SEARCH AI PLUGIN INTEGRATION ---- */
+
+/* Hero search — constrain the PSA form to match hero layout */
+.hero-search .psa-search-wrap {
+  max-width: 560px;
+  margin: 0 auto;
+}
+
+.hero-search .psa-search-input {
+  background-color: #FFFFFF;
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-body-lg);
+  padding: var(--spacing-md) var(--spacing-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.hero-search .psa-search-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.hero-search .psa-search-input:focus {
+  outline: none;
+  border-color: var(--color-brand-primary);
+  box-shadow: var(--focus-shadow);
+}
+
+.hero-search .psa-search-btn {
+  background-color: var(--color-brand-primary);
+  color: white;
+  border: none;
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  cursor: pointer;
+  transition: background-color var(--transition-normal);
+}
+
+.hero-search .psa-search-btn:hover {
+  background-color: var(--color-brand-hover);
+}
+
+.hero-search .psa-search-results {
+  text-align: left;
+  max-height: 400px;
+  overflow-y: auto;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+}
+
+/* Search overlay — full-screen overlay triggered from header search icon */
+.search-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: var(--z-modal, 1000);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 120px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-normal), visibility var(--transition-normal);
+}
+
+.search-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.search-overlay-inner {
+  background-color: var(--color-bg-primary);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-xl);
+  width: 90%;
+  max-width: 600px;
+  position: relative;
+  box-shadow: var(--shadow-xl);
+  transform: translateY(-20px);
+  transition: transform var(--transition-normal);
+}
+
+.search-overlay.active .search-overlay-inner {
+  transform: translateY(0);
+}
+
+.search-overlay-close {
+  position: absolute;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: var(--spacing-xs);
+  border-radius: var(--radius-md);
+  transition: color var(--transition-normal), background-color var(--transition-normal);
+  z-index: 1;
+}
+
+.search-overlay-close:hover {
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-secondary);
+}
+
+.search-overlay-content {
+  padding-top: var(--spacing-sm);
+}
+
+/* PSA plugin styling inside the overlay */
+.search-overlay .psa-search-input {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-body-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+}
+
+.search-overlay .psa-search-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.search-overlay .psa-search-input:focus {
+  outline: none;
+  border-color: var(--color-brand-primary);
+  box-shadow: var(--focus-shadow);
+}
+
+.search-overlay .psa-search-btn {
+  background-color: var(--color-brand-primary);
+  color: white;
+  border: none;
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  cursor: pointer;
+  transition: background-color var(--transition-normal);
+}
+
+.search-overlay .psa-search-btn:hover {
+  background-color: var(--color-brand-hover);
+}
+
+.search-overlay .psa-search-results {
+  max-height: 350px;
+  overflow-y: auto;
+  border-radius: var(--radius-lg);
+  margin-top: var(--spacing-md);
+}
+
+.search-overlay .psa-checking,
+.search-overlay .psa-pending,
+.search-overlay .psa-invalid,
+.search-overlay .psa-error {
+  margin-top: var(--spacing-md);
+  border-radius: var(--radius-lg);
+}
+
+/* ---- PEPTIDE NEWS PLUGIN OVERRIDES ---- */
+/* Remove line-clamp so full article summaries are visible.
+   Uses body prefix for specificity to beat the plugin's own stylesheet
+   which loads after the theme. */
+body .pn-article-excerpt,
+body p.pn-article-excerpt {
+  -webkit-line-clamp: unset;
+  -webkit-box-orient: unset;
+  display: block;
+  overflow: visible;
+  font-size: var(--text-body-md);
+  line-height: 1.6;
+}
+
+/* Tighten article card title for density */
+body .pn-article-title {
+  font-size: var(--text-h4);
+  line-height: 1.3;
+}
+
+.hero-ctas {
+  display: flex;
+  gap: var(--spacing-md);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.hero-ctas .ps-btn {
+  padding: var(--btn-padding-y) var(--btn-padding-x);
+}
+
+/* News Feed Area */
+.news-feed-section {
+  padding: var(--spacing-2xl) var(--spacing-lg);
+  background-color: var(--color-bg-primary);
+}
+
+.news-feed-header {
+  max-width: var(--container-lg);
+  margin: 0 auto var(--spacing-2xl);
+  text-align: center;
+}
+
+.news-feed-title {
+  font-size: var(--text-h2);
+  margin-bottom: var(--spacing-md);
+}
+
+.news-feed-description {
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-md);
+}
+
+/* ---- ARCHIVE PAGE ---- */
+
+.archive-header {
+  padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
+  background-color: var(--color-bg-primary);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Decorative shape on archive header */
+.archive-header::after {
+  content: '';
+  position: absolute;
+  width: 180px;
+  height: 180px;
+  background: rgba(52, 211, 153, 0.08);
+  border-radius: 50%;
+  top: -40px;
+  right: -40px;
+  pointer-events: none;
+}
+
+.archive-title {
+  max-width: var(--container-lg);
+  margin: 0 auto;
+  font-size: var(--text-h2);
+  color: var(--color-text-primary);
+}
+
+.archive-content {
+  padding: var(--spacing-2xl) var(--spacing-lg);
+}
+
+.archive-filters {
+  max-width: var(--container-lg);
+  margin: 0 auto var(--spacing-2xl);
+  display: flex;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.archive-search {
+  flex: 1;
+  min-width: 200px;
+}
+
+.archive-grid {
+  max-width: var(--container-lg);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-2xl);
+}
+
+.peptides-grid {
+  max-width: var(--container-2xl);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-lg);
+  padding: var(--spacing-xl) var(--spacing-lg);
+}
+
+/* Peptide Card (Clawdiverse-inspired: white card, tinted left border, soft shadow) */
+.peptide-card {
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+  border-left: 3px solid var(--color-accent-mint);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  position: relative;
+}
+
+.peptide-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  border-left-width: 4px;
+}
+
+/* Category-coded left borders via nth-child for visual variety */
+.peptide-card:nth-child(4n+1) { border-left-color: var(--color-accent-mint); }
+.peptide-card:nth-child(4n+2) { border-left-color: var(--color-accent-sky); }
+.peptide-card:nth-child(4n+3) { border-left-color: var(--color-accent-lavender); }
+.peptide-card:nth-child(4n+4) { border-left-color: var(--color-accent-peach); }
+
+.peptide-card__header {
+  margin-bottom: var(--spacing-md);
+}
+
+.peptide-card__title {
+  font-size: var(--text-h5);
+  font-weight: 600;
+  line-height: 1.3;
+  margin: 0 0 var(--spacing-sm) 0;
+}
+
+.peptide-card__title a {
+  color: var(--color-text-primary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+.peptide-card__title a:hover {
+  color: var(--color-brand-primary);
+}
+
+.peptide-card__meta {
+  display: flex;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+}
+
+/* Category tag pills (Clawdiverse-style colored pills) */
+.peptide-card__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  padding: 3px 10px;
+  border-radius: 100px;
+  background-color: var(--color-accent-mint);
+  color: #065F46;
+}
+
+/* Cycle badge colors to match card border */
+.peptide-card:nth-child(4n+2) .peptide-card__badge {
+  background-color: var(--color-accent-sky);
+  color: #1E3A5F;
+}
+
+.peptide-card:nth-child(4n+3) .peptide-card__badge {
+  background-color: var(--color-accent-lavender);
+  color: #4C1D95;
+}
+
+.peptide-card:nth-child(4n+4) .peptide-card__badge {
+  background-color: var(--color-accent-peach);
+  color: #7C2D12;
+}
+
+.peptide-card__excerpt {
+  font-size: var(--text-body-md);
+  line-height: 1.65;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-lg);
+  flex: 1;
+  overflow: hidden;
+}
+
+.peptide-card__footer {
+  margin-top: auto;
+  padding-top: var(--spacing-md);
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+.peptide-card__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--text-body-sm);
+  font-weight: 600;
+  color: var(--color-brand-primary);
+  text-decoration: none;
+  transition: gap var(--transition-fast), color var(--transition-fast);
+}
+
+.peptide-card__link:hover {
+  color: var(--color-link-hover);
+  gap: var(--spacing-sm);
+}
+
+.peptide-card__link svg {
+  transition: transform var(--transition-fast);
+}
+
+.peptide-card__link:hover svg {
+  transform: translateX(2px);
+}
+
+.archive-empty {
+  text-align: center;
+  padding: var(--spacing-4xl) var(--spacing-lg);
+}
+
+.archive-empty h2 {
+  margin-top: 0;
+}
+
+.archive-empty p {
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-2xl);
+}
+
+/* ---- SINGLE PAGE / PEPTIDE ---- */
+
+.page-header {
+  padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
+  background-color: var(--color-bg-primary);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Decorative accent on page header */
+.page-header::after {
+  content: '';
+  position: absolute;
+  width: 160px;
+  height: 160px;
+  background: rgba(244, 114, 182, 0.08);
+  border-radius: 50%;
+  top: -30px;
+  right: -30px;
+  pointer-events: none;
+}
+
+.page-title {
+  max-width: var(--container-lg);
+  margin: 0 auto;
+  font-size: var(--text-h1);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  position: relative;
+  z-index: 1;
+}
+
+.page-content {
+  max-width: var(--container-lg);
+  margin: 0 auto;
+  padding: var(--spacing-3xl) var(--spacing-lg);
+}
+
+.page-content h2 {
+  font-size: var(--text-h3);
+  margin-top: var(--spacing-2xl);
+  margin-bottom: var(--spacing-md);
+}
+
+.page-content h3 {
+  font-size: var(--text-h4);
+  margin-top: var(--spacing-xl);
+  margin-bottom: var(--spacing-md);
+}
+
+.page-content ul,
+.page-content ol {
+  margin-left: var(--spacing-lg);
+  margin-bottom: var(--spacing-md);
+}
+
+.page-content li {
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Collapse empty Elementor/page-builder containers that add phantom space */
+.page-content .elementor-section:empty,
+.page-content .elementor-widget-wrap:empty,
+.page-content .elementor-element:empty,
+.page-content div:empty:not([data-peptide-news-feed]) {
+  display: none;
+}
+
+/* ---- BACK LINK (breadcrumb-style) ---- */
+
+.ps-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--text-body-sm);
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  margin-bottom: var(--spacing-lg);
+  transition: color var(--transition-fast);
+}
+
+.ps-back-link:hover {
+  color: var(--color-brand-primary);
+}
+
+/* ---- FEATURED BADGE ---- */
+
+.ps-featured-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border-radius: 100px;
+  font-size: var(--text-label);
+  font-weight: 700;
+  background-color: var(--color-featured-bg);
+  color: var(--color-featured-text);
+  margin-bottom: var(--spacing-md);
+}
+
+/* ---- PEPTIDE META CARDS (single page) ---- */
+
+.peptide-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-2xl);
+}
+
+.peptide-meta-card {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-lg);
+}
+
+.peptide-meta-card dt {
+  font-size: var(--text-label);
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: var(--spacing-xs);
+}
+
+.peptide-meta-card dd {
+  font-size: var(--text-body-md);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.peptide-meta-card dd code {
+  font-size: var(--text-body-sm);
+}
+
+/* ---- PEPTIDE CONTENT BOX (description block on single page) ---- */
+
+.peptide-content-box {
+  background-color: var(--color-bg-secondary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-xl);
+  margin-bottom: var(--spacing-2xl);
+}
+
+/* ---- SECTION HEADING WITH ICON (Clawdiverse-style) ---- */
+
+.ps-section-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--text-h3);
+  font-weight: 700;
+  margin-bottom: var(--spacing-lg);
+  color: var(--color-text-primary);
+}
+
+.ps-section-heading .ps-section-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  font-size: 16px;
+}
+
+/* ---- DECORATIVE BODY SHAPES ---- */
+/* Geometric accents on the main content area for visual warmth */
+
+body > .site-main {
+  position: relative;
+}
+
+/* Large peach blob — left side of body */
+body > .site-main::before {
+  content: '';
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  background: rgba(254, 226, 213, 0.15);
+  border-radius: 50%;
+  top: 40%;
+  left: -8%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Lavender ring — right side of body */
+body > .site-main::after {
+  content: '';
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  border: 30px solid rgba(237, 233, 254, 0.12);
+  border-radius: 50%;
+  top: 65%;
+  right: -3%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* ---- 404 PAGE ---- */
+
+.error-404 {
+  text-align: center;
+  padding: var(--spacing-4xl) var(--spacing-lg);
+}
+
+.error-404 h1 {
+  font-size: var(--text-h1);
+  margin-bottom: var(--spacing-lg);
+}
+
+.error-404 p {
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-2xl);
+  font-size: var(--text-body-md);
+}
+
+/* ============================================================================
+   9. ANIMATIONS & TRANSITIONS
+   ============================================================================ */
+
+/* Fade in animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn var(--transition-slow) ease-out;
+}
+
+/* Slide in from left */
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-left {
+  animation: slideInLeft var(--transition-slow) ease-out;
+}
+
+/* Skeleton loading animation */
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.ps-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-bg-tertiary) 25%,
+    var(--color-border-default) 50%,
+    var(--color-bg-tertiary) 75%
+  );
+  background-size: 1000px 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: var(--radius-md);
+}
+
+/* ============================================================================
+   10. ACCESSIBILITY
+   ============================================================================ */
+
+/* Focus visible style (keyboard focus) */
+*:focus-visible {
+  outline: var(--focus-width) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
+}
+
+/* Skip to main content link */
+.skip-to-main {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--color-brand-primary);
+  color: white;
+  padding: var(--spacing-md);
+  text-decoration: none;
+  z-index: var(--z-modal);
+}
+
+.skip-to-main:focus {
+  top: 0;
+}
+
+/* Visually hidden but accessible to screen readers */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ============================================================================
+   11. DARK MODE
+   ============================================================================
+
+   Precedence (highest to lowest):
+   1. html[data-theme="light"] or html[data-theme="dark"] (explicit user choice)
+   2. @media (prefers-color-scheme: dark) (system preference)
+   3. Default light mode (above)
+
+   Plugin dark mode coordination:
+   - Theme broadcasts dark mode changes via data-theme attribute on <html>
+   - Plugin must watch this attribute and update colors accordingly
+   - Plugin can also use CSS custom properties which theme controls
+
+   ============================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Brand Colors */
+    --color-brand-primary: #3B82F6;
+    --color-status-success: #10B981;
+    --color-status-warning: #F59E0B;
+    --color-status-error: #EF4444;
+
+    /* Accent Colors (muted for dark mode) */
+    --color-accent-warm: #D97706;
+    --color-accent-mint: #064E3B;
+    --color-accent-lavender: #312E81;
+    --color-accent-peach: #7C2D12;
+    --color-accent-sky: #1E3A5F;
+    --color-featured-bg: #78350F;
+    --color-featured-text: #FEF3C7;
+
+    /* Text Colors */
+    --color-text-primary: #F9FAFB;
+    --color-text-secondary: #D1D5DB;
+    --color-text-tertiary: #9CA3AF;
+
+    /* Border Colors */
+    --color-border-default: #374151;
+    --color-border-subtle: #1F2937;
+
+    /* Background Colors */
+    --color-bg-primary: #111827;
+    --color-bg-secondary: #1F2937;
+    --color-bg-tertiary: #374151;
+
+    /* Component-Specific Colors */
+    --color-input-focus: #3B82F6;
+    --color-link-hover: #60A5FA;
+    --color-badge-bg: #0F172A;
+    --color-badge-text: #60A5FA;
+    --color-code-bg: #1F2937;
+    --color-code-text: #F9FAFB;
+
+    /* Focus shadow adjusted for dark mode */
+    --focus-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+  }
+}
+
+/* Allow manual dark mode toggle (explicit override) */
+html[data-theme="dark"] {
+  --color-brand-primary: #3B82F6;
+  --color-status-success: #10B981;
+  --color-status-warning: #F59E0B;
+  --color-status-error: #EF4444;
+  --color-accent-warm: #D97706;
+  --color-accent-mint: #064E3B;
+  --color-accent-lavender: #312E81;
+  --color-accent-peach: #7C2D12;
+  --color-accent-sky: #1E3A5F;
+  --color-featured-bg: #78350F;
+  --color-featured-text: #FEF3C7;
+  --color-text-primary: #F9FAFB;
+  --color-text-secondary: #D1D5DB;
+  --color-text-tertiary: #9CA3AF;
+  --color-border-default: #374151;
+  --color-border-subtle: #1F2937;
+  --color-bg-primary: #111827;
+  --color-bg-secondary: #1F2937;
+  --color-bg-tertiary: #374151;
+  --color-input-focus: #3B82F6;
+  --color-link-hover: #60A5FA;
+  --color-badge-bg: #0F172A;
+  --color-badge-text: #60A5FA;
+  --color-code-bg: #1F2937;
+  --color-code-text: #F9FAFB;
+  --focus-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+}
+
+html[data-theme="light"] {
+  --color-brand-primary: #0066CC;
+  --color-status-success: #059669;
+  --color-status-warning: #F59E0B;
+  --color-status-error: #DC2626;
+  --color-accent-warm: #F59E0B;
+  --color-accent-mint: #D1FAE5;
+  --color-accent-lavender: #EDE9FE;
+  --color-accent-peach: #FEE2D5;
+  --color-accent-sky: #DBEAFE;
+  --color-featured-bg: #FEF3C7;
+  --color-featured-text: #92400E;
+  --color-text-primary: #111827;
+  --color-text-secondary: #6B7280;
+  --color-text-tertiary: #9CA3AF;
+  --color-border-default: #E5E7EB;
+  --color-border-subtle: #F3F4F6;
+  --color-bg-primary: #FAFAF7;
+  --color-bg-secondary: #F5F3EE;
+  --color-bg-tertiary: #EDEAE3;
+  --color-input-focus: #0066CC;
+  --color-link-hover: #0052A3;
+  --color-badge-bg: #DBEAFE;
+  --color-badge-text: #0066CC;
+  --color-code-bg: #F3F4F6;
+  --color-code-text: #111827;
+  --focus-shadow: 0 0 0 4px rgba(0, 102, 204, 0.15);
+}
+
+/* Dark mode alert colors */
+@media (prefers-color-scheme: dark) {
+  .ps-alert-info {
+    background-color: #0C2340;
+    border-color: #3B82F6;
+    color: #BFDBFE;
+  }
+
+  .ps-alert-success {
+    background-color: #064E3B;
+    border-color: #10B981;
+    color: #DCFCE7;
+  }
+
+  .ps-alert-warning {
+    background-color: #78350F;
+    border-color: #F59E0B;
+    color: #FEF3C7;
+  }
+
+  .ps-alert-error {
+    background-color: #7F1D1D;
+    border-color: #EF4444;
+    color: #FEE2E2;
+  }
+
+  .footer-newsletter {
+    background-color: var(--color-bg-secondary);
+  }
+}
+
+/* ============================================================================
+   12. RESPONSIVE DESIGN (Mobile-first)
+   ============================================================================ */
+
+/* Hide decorative shapes on small screens */
+@media (max-width: 767px) {
+  .hero-section::before,
+  .hero-section::after,
+  .archive-header::after,
+  .page-header::after,
+  body > .site-main::before,
+  body > .site-main::after {
+    display: none;
+  }
+}
+
+/* Extra Small (320px - 479px) */
+@media (max-width: 479px) {
+  .hero-section {
+    padding: var(--spacing-2xl) var(--spacing-md);
+  }
+
+  .hero-title {
+    font-size: 32px;
+  }
+
+  .hero-ctas {
+    gap: var(--spacing-sm);
+  }
+
+  .hero-ctas .ps-btn {
+    padding: var(--spacing-sm) var(--spacing-lg);
+    font-size: var(--text-body-sm);
+  }
+
+  .page-content {
+    padding: var(--spacing-lg) var(--spacing-md);
+  }
+
+  .peptides-grid {
+    padding: var(--spacing-2xl) var(--spacing-md);
+  }
+
+  .news-feed-section {
+    padding: var(--spacing-2xl) var(--spacing-md);
+  }
+
+  h1 {
+    font-size: 32px;
+  }
+
+  h2 {
+    font-size: 24px;
+  }
+
+  .site-header-wrapper {
+    gap: var(--spacing-sm);
+  }
+
+  .primary-navigation {
+    display: none;
+  }
+
+  .menu-toggle {
+    display: flex;
+  }
+
+  .header-icons {
+    gap: var(--spacing-sm);
+  }
+
+  .newsletter-form {
+    flex-direction: column;
+  }
+
+  .newsletter-form button {
+    width: 100%;
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-lg);
+  }
+}
+
+/* Small (480px - 767px) */
+@media (min-width: 480px) {
+  .site-header {
+    padding: var(--spacing-lg) var(--spacing-lg);
+  }
+}
+
+/* Medium (768px - 1023px) */
+@media (min-width: 768px) {
+  .menu-toggle {
+    display: none;
+  }
+
+  .primary-navigation {
+    display: flex !important;
+    position: static;
+    width: auto;
+    height: auto;
+    flex-direction: row;
+    background: none;
+    padding: 0;
+    transition: none;
+  }
+
+  .nav-overlay {
+    display: none;
+  }
+
+  .peptides-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .archive-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .hero-title {
+    font-size: 44px;
+  }
+
+  .newsletter-form {
+    flex-direction: row;
+  }
+
+  .newsletter-form button {
+    width: auto;
+  }
+}
+
+/* Large (1024px - 1439px) */
+@media (min-width: 1024px) {
+  .peptides-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .archive-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .site-header {
+    padding: var(--spacing-lg) var(--spacing-xl);
+  }
+
+  .footer-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+/* Extra Large (1440px+) */
+@media (min-width: 1440px) {
+  .peptides-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .site-header {
+    padding: var(--spacing-lg) var(--spacing-2xl);
+  }
+}
+
+/* ============================================================================
+   13. UTILITY CLASSES
+   ============================================================================ */
+
+/* 404 Page Utilities */
+.ps-404-search-form {
+  margin: var(--spacing-2xl) 0;
+}
+
+.ps-404-cta-group {
+  display: flex;
+  gap: var(--spacing-md);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* ============================================================================
+   14. TOOL PAGES — Generic wrapper for plugin shortcode templates
+   ============================================================================ */
+
+.ps-tool-page {
+  padding: var(--spacing-3xl) var(--spacing-lg);
+  min-height: 60vh;
+}
+
+.ps-tool-fallback {
+  text-align: center;
+  padding: var(--spacing-4xl) 0;
+}
+
+.ps-tool-fallback h1 {
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-tool-fallback p {
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-2xl);
+}
+
+/* ============================================================================
+   15. RESEARCH MODULE CARDS — Front page grid
+   ============================================================================ */
+
+.ps-modules-section {
+  padding: var(--spacing-3xl) var(--spacing-lg);
+  background-color: var(--color-bg-secondary);
+}
+
+.ps-modules-header {
+  text-align: center;
+  margin-bottom: var(--spacing-2xl);
+}
+
+.ps-modules-title {
+  font-size: var(--text-h2);
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+}
+
+.ps-modules-subtitle {
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-md);
+}
+
+.ps-modules-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--spacing-lg);
+  max-width: var(--container-2xl);
+  margin: 0 auto;
+}
+
+.ps-module-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-xl);
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  color: var(--color-text-primary);
+  transition: all var(--transition-normal);
+}
+
+.ps-module-card:hover {
+  border-color: var(--color-brand-primary);
+  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.1);
+  transform: translateY(-2px);
+}
+
+.ps-module-card--inactive {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ps-module-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: rgba(0, 102, 204, 0.1);
+  color: var(--color-brand-primary);
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-module-card__title {
+  font-size: var(--text-h4);
+  font-weight: 600;
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+}
+
+.ps-module-card__description {
+  font-size: var(--text-body-md);
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+  flex: 1;
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-module-card__link {
+  font-size: var(--text-body-sm);
+  font-weight: 600;
+  color: var(--color-brand-primary);
+}
+
+/* ============================================================================
+   16. DOCUMENTATION PAGE — Two-column layout with ToC sidebar
+   ============================================================================ */
+
+.ps-docs-layout {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: var(--spacing-2xl);
+  max-width: var(--container-2xl);
+  margin: 0 auto;
+  align-items: start;
+}
+
+.ps-docs-sidebar {
+  position: sticky;
+  top: 100px;
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
+  padding: var(--spacing-lg) 0;
+}
+
+.ps-docs-sidebar-inner {
+  padding-right: var(--spacing-lg);
+  border-right: 1px solid var(--color-border-subtle);
+}
+
+.ps-docs-toc-title {
+  font-size: var(--text-h6);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-md);
+  margin-top: 0;
+  cursor: default;
+}
+
+.ps-docs-toc ul {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.ps-docs-toc-link {
+  display: block;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--text-body-sm);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+  border-left: 2px solid transparent;
+}
+
+.ps-docs-toc-link:hover {
+  color: var(--color-brand-primary);
+  background-color: var(--color-bg-secondary);
+}
+
+.ps-docs-toc-link--active {
+  color: var(--color-brand-primary);
+  border-left-color: var(--color-brand-primary);
+  background-color: var(--color-bg-secondary);
+  font-weight: 500;
+}
+
+.ps-docs-content {
+  min-width: 0;
+}
+
+.ps-docs-header {
+  margin-bottom: var(--spacing-2xl);
+}
+
+.ps-docs-header h1 {
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-docs-intro {
+  font-size: var(--text-body-lg);
+  color: var(--color-text-secondary);
+  line-height: 1.7;
+}
+
+.ps-docs-body h2 {
+  margin-top: var(--spacing-3xl);
+  padding-top: var(--spacing-lg);
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+.ps-docs-body h2:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+
+/* Documentation step styling for SOPs */
+.ps-docs-step {
+  counter-increment: step-counter;
+  position: relative;
+  padding-left: var(--spacing-2xl);
+  margin-bottom: var(--spacing-xl);
+}
+
+.ps-docs-step::before {
+  content: counter(step-counter);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 28px;
+  height: 28px;
+  background-color: var(--color-brand-primary);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-body-sm);
+  font-weight: 700;
+}
+
+/* Warning callout for docs */
+.ps-docs-warning {
+  padding: var(--spacing-lg);
+  background-color: #FEF3C7;
+  border-left: 4px solid var(--color-status-warning);
+  border-radius: var(--radius-md);
+  margin: var(--spacing-lg) 0;
+  color: #78350F;
+}
+
+/* Documentation tables */
+.ps-docs-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--spacing-lg) 0;
+}
+
+.ps-docs-table th,
+.ps-docs-table td {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-border-default);
+  text-align: left;
+  font-size: var(--text-body-md);
+}
+
+.ps-docs-table th {
+  background-color: var(--color-bg-secondary);
+  font-weight: 600;
+}
+
+/* Mobile: collapse sidebar to dropdown */
+@media (max-width: 1023px) {
+  .ps-docs-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .ps-docs-sidebar {
+    position: static;
+    max-height: none;
+    border-bottom: 1px solid var(--color-border-subtle);
+    padding-bottom: var(--spacing-md);
+    margin-bottom: var(--spacing-lg);
+  }
+
+  .ps-docs-sidebar-inner {
+    border-right: none;
+    padding-right: 0;
+  }
+
+  .ps-docs-toc-title {
+    cursor: pointer;
+  }
+
+  .ps-docs-toc-title::after {
+    content: ' ▾';
+  }
+
+  .ps-docs-toc {
+    display: none;
+  }
+
+  .ps-docs-sidebar--open .ps-docs-toc {
+    display: block;
+  }
+}
+
+/* ============================================================================
+   17. AUTH PAGE — Sign-in / Register forms
+   ============================================================================ */
+
+.ps-auth-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 70vh;
+}
+
+.ps-auth-container {
+  max-width: 440px;
+}
+
+.ps-auth-card {
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-2xl);
+  box-shadow: var(--shadow-md);
+}
+
+.ps-auth-card h1 {
+  font-size: var(--text-h3);
+  margin-bottom: var(--spacing-lg);
+}
+
+.ps-auth-info {
+  margin-bottom: var(--spacing-lg);
+}
+
+.ps-auth-info p {
+  margin-bottom: 0;
+  font-size: var(--text-body-sm);
+}
+
+.ps-auth-form .ps-form-group {
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-auth-link {
+  text-align: center;
+  margin-top: var(--spacing-md);
+  font-size: var(--text-body-sm);
+}
+
+.ps-auth-toggle {
+  text-align: center;
+  margin-top: var(--spacing-lg);
+  padding-top: var(--spacing-lg);
+  border-top: 1px solid var(--color-border-subtle);
+  font-size: var(--text-body-sm);
+  color: var(--color-text-secondary);
+}
+
+.ps-auth-toggle a {
+  color: var(--color-brand-primary);
+  font-weight: 500;
+}
+
+.ps-auth-form-wrap--hidden {
+  display: none;
+}
+
+.ps-auth-messages {
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-form-hint {
+  display: block;
+  font-size: var(--text-caption);
+  color: var(--color-text-tertiary);
+  margin-top: 4px;
+}
+
+/* Password strength */
+.ps-password-strength {
+  margin-top: 4px;
+  font-size: var(--text-caption);
+  font-weight: 500;
+}
+
+.ps-strength-weak { color: var(--color-status-error); }
+.ps-strength-fair { color: var(--color-status-warning); }
+.ps-strength-strong { color: var(--color-status-success); }
+
+/* ============================================================================
+   18. NEWSLETTER SECTION — Standalone signup CTA
+   ============================================================================ */
+
+.ps-newsletter-section {
+  background-color: var(--color-bg-tertiary);
+  padding: var(--spacing-3xl) var(--spacing-lg);
+}
+
+.ps-newsletter-inner {
+  max-width: var(--container-md);
+  margin: 0 auto;
+  text-align: center;
+}
+
+.ps-newsletter-title {
+  font-size: var(--text-h2);
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+}
+
+.ps-newsletter-subtitle {
+  color: var(--color-text-secondary);
+  margin-bottom: var(--spacing-lg);
+}
+
+.ps-newsletter-form-row {
+  display: flex;
+  gap: var(--spacing-sm);
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.ps-newsletter-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.ps-newsletter-status {
+  margin-top: var(--spacing-md);
+  text-align: left;
+  max-width: 480px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ps-newsletter-learn-more {
+  margin-top: var(--spacing-md);
+  font-size: var(--text-body-sm);
+}
+
+.ps-newsletter-learn-more a {
+  color: var(--color-brand-primary);
+}
+
+@media (max-width: 479px) {
+  .ps-newsletter-form-row {
+    flex-direction: column;
+  }
+}
+
+/* ============================================================================
+   19. USER MENU — Logged-in dropdown in header
+   ============================================================================ */
+
+.ps-user-menu {
+  position: relative;
+}
+
+.ps-user-menu__toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  background: none;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-body-sm);
+  font-weight: 500;
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.ps-user-menu__toggle:hover {
+  border-color: var(--color-brand-primary);
+}
+
+.ps-user-menu__name {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ps-user-menu__dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: var(--spacing-xs);
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  min-width: 180px;
+  z-index: var(--z-dropdown);
+  padding: var(--spacing-xs) 0;
+}
+
+.ps-user-menu:hover .ps-user-menu__dropdown,
+.ps-user-menu__toggle:focus + .ps-user-menu__dropdown {
+  display: block;
+}
+
+.ps-user-menu__dropdown a {
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-body-sm);
+  color: var(--color-text-primary);
+  text-decoration: none;
+  transition: background-color var(--transition-fast);
+}
+
+.ps-user-menu__dropdown a:hover {
+  background-color: var(--color-bg-secondary);
+  color: var(--color-brand-primary);
+}
+
+/* ============================================================================
+   20. SETTINGS PANEL — Slide-out support panel
+   ============================================================================ */
+
+.ps-settings-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: var(--z-modal-backdrop);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-slow), visibility var(--transition-slow);
+}
+
+.ps-settings-overlay--active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.ps-settings-panel {
+  position: fixed;
+  top: 0;
+  right: -400px;
+  width: 380px;
+  max-width: 90vw;
+  height: 100vh;
+  background-color: var(--color-bg-primary);
+  border-left: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-xl);
+  z-index: var(--z-modal);
+  overflow-y: auto;
+  transition: right var(--transition-slow);
+  display: flex;
+  flex-direction: column;
+}
+
+.ps-settings-panel--open {
+  right: 0;
+}
+
+.ps-settings-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-lg) var(--spacing-xl);
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.ps-settings-panel__header h2 {
+  font-size: var(--text-h4);
+  margin: 0;
+}
+
+.ps-settings-panel__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.ps-settings-panel__close:hover {
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-secondary);
+}
+
+.ps-settings-panel__body {
+  padding: var(--spacing-xl);
+  flex: 1;
+}
+
+.ps-settings-section {
+  margin-bottom: var(--spacing-2xl);
+}
+
+.ps-settings-section h3 {
+  font-size: var(--text-h5);
+  margin-bottom: var(--spacing-md);
+  margin-top: 0;
+}
+
+.ps-settings-disclaimer {
+  font-size: var(--text-body-sm);
+  color: var(--color-text-secondary);
+}
+
+.ps-settings-disclaimer p {
+  font-size: var(--text-body-sm);
+  line-height: 1.6;
+}
+
+.ps-contact-form .ps-form-group {
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-contact-status {
+  margin-top: var(--spacing-md);
+}
+
+/* ============================================================================
+   21. LANGUAGE PLACEHOLDER — Header icon
+   ============================================================================ */
+
+.ps-lang-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--color-text-secondary);
+  font-size: var(--text-body-sm);
+  font-weight: 500;
+  cursor: default;
+}
+
+.ps-lang-code {
+  font-size: var(--text-label);
+}
+
+@media (max-width: 767px) {
+  .ps-lang-placeholder {
+    display: none;
+  }
+}
+
+/* ============================================================================
+   22. FOOTER UPDATES — Disclaimer and language links
+   ============================================================================ */
+
+.footer-disclaimer {
+  font-size: var(--text-caption);
+  color: var(--color-text-tertiary);
+  max-width: var(--container-md);
+  margin: var(--spacing-md) auto;
+  line-height: 1.5;
+}
+
+.footer-languages {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-md);
+  font-size: var(--text-body-sm);
+  flex-wrap: wrap;
+}
+
+.footer-languages-label {
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.footer-languages a {
+  color: var(--color-brand-primary);
+}
+
+/* ============================================================================
+   23. PROFILE PAGE — Basic profile fallback
+   ============================================================================ */
+
+.ps-profile-basic {
+  text-align: center;
+  padding: var(--spacing-2xl) 0;
+}
+
+.ps-profile-basic h1 {
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-profile-links {
+  display: flex;
+  gap: var(--spacing-md);
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: var(--spacing-xl);
+}
+
+/* Science Feed header */
+.ps-science-feed-header {
+  text-align: center;
+  margin-bottom: var(--spacing-2xl);
+}
+
+.ps-science-feed-header h1 {
+  margin-bottom: var(--spacing-md);
+}
+
+.ps-science-feed-header p {
+  color: var(--color-text-secondary);
+}
+
+/* ============================================================================
+   24. DARK MODE — Additions for new components
+   ============================================================================ */
+
+html[data-theme="dark"] .ps-module-card__icon {
+  background-color: rgba(59, 130, 246, 0.15);
+}
+
+html[data-theme="dark"] .ps-module-card:hover {
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
+}
+
+html[data-theme="dark"] .ps-docs-warning {
+  background-color: #78350F;
+  border-color: #F59E0B;
+  color: #FEF3C7;
+}
+
+html[data-theme="dark"] .ps-auth-card {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="dark"] .ps-newsletter-section {
+  background-color: var(--color-bg-secondary);
+}
+
+html[data-theme="dark"] .ps-settings-overlay {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+html[data-theme="dark"] .ps-modules-section {
+  background-color: var(--color-bg-secondary);
+}
+
+/* Dropdown submenu support for primary navigation */
+.primary-navigation li.menu-item-has-children {
+  position: relative;
+}
+
+.primary-navigation .sub-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: var(--color-bg-primary);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  min-width: 200px;
+  z-index: var(--z-dropdown);
+  padding: var(--spacing-xs) 0;
+  margin-top: var(--spacing-sm);
+}
+
+.primary-navigation li.menu-item-has-children:hover > .sub-menu {
+  display: flex;
+  flex-direction: column;
+}
+
+.primary-navigation .sub-menu li {
+  display: block;
+}
+
+.primary-navigation .sub-menu a {
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-body-sm);
+  white-space: nowrap;
+}
+
+.primary-navigation .sub-menu a:hover {
+  background-color: var(--color-bg-secondary);
+}
+
+.primary-navigation .sub-menu a::after {
+  display: none;
+}
+
+/* ============================================================================
+   25. RESPONSIVE — Additions for new components
+   ============================================================================ */
+
+@media (max-width: 767px) {
+  .ps-user-menu__toggle {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--text-caption);
+  }
+
+  .ps-user-menu__name {
+    display: none;
+  }
+
+  .ps-modules-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 768px) {
+  .ps-modules-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .ps-modules-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* ============================================================================
+   END OF STYLESHEET
+   ============================================================================ */
+
+/* =====================================================================
+   Section 26 — v1.5.1 security/UX additions
+   ===================================================================== */
+
+/* Visually hidden honeypot wrapper — off-screen, keyboard-skipped, bot-visible. */
+.ps-hp-wrap {
+	position: absolute;
+	left: -9999px;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	pointer-events: none;
+}
+
+/* Email verification banner on /profile */
+.ps-verify-required {
+	padding: var(--spacing-md);
+	margin-bottom: var(--spacing-lg);
+	border-left: 4px solid #F59E0B;
+	background-color: #FEF3C7;
+	color: #78350F;
+	border-radius: 6px;
+}
+
+html[data-theme="dark"] .ps-verify-required {
+	background-color: #451A03;
+	color: #FEF3C7;
+	border-left-color: #F59E0B;
+}
+
+.ps-verify-required h3 {
+	margin: 0 0 var(--spacing-xs) 0;
+	font-size: 1.05rem;
+}
+
+.ps-verify-resend {
+	margin-top: var(--spacing-sm);
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-sm);
+}
+
+.ps-verify-resend-status {
+	font-size: 0.9rem;
+	color: inherit;
+}
+
+/* Newsletter consent + privacy link */
+.ps-newsletter-consent {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--spacing-xs);
+	margin-top: var(--spacing-sm);
+	font-size: 0.9rem;
+	line-height: 1.5;
+}
+
+.ps-newsletter-consent input[type="checkbox"] {
+	margin-top: 0.25em;
+	flex-shrink: 0;
+}
+
+.ps-newsletter-privacy {
+	margin-top: var(--spacing-xs);
+	font-size: 0.85rem;
+	opacity: 0.85;
+}
+
+/* Footer translations note */
+.footer-languages-note {
+	margin-top: var(--spacing-sm);
+	font-size: 0.85rem;
+	opacity: 0.7;
+}
 
 /* ============================================================================
    HOMEPAGE — VERDICT EXPLAINER SECTION
@@ -3179,7 +3179,7 @@ html[data-theme="dark"] .ps-verify-required {
    ============================================================================ */
 
 .hero-verdict-explainer {
-  padding: var(--spacing-3xl) var(--spacing-lg);
+  padding: var(--spacing-3xl) 0; /* horizontal padding handled by ps-container inside */
   background-color: var(--color-bg-secondary);
 }
 
@@ -3198,7 +3198,7 @@ html[data-theme="dark"] .ps-verify-required {
   max-width: var(--container-lg);
   margin: 0 auto;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr; /* single column on narrow phones; 2-col added at 520px below */
   gap: var(--spacing-md);
 }
 
@@ -3210,6 +3210,12 @@ html[data-theme="dark"] .ps-verify-required {
   background-color: var(--color-bg-primary);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
+  min-width: 0; /* prevent grid item from blowing out column */
+}
+
+/* Cap pill width to column so Insufficient Evidence pill never overflows */
+.hero-verdict-explainer__item .pr-verdict {
+  max-width: 100%;
 }
 
 .hero-verdict-explainer__desc {
@@ -3383,6 +3389,12 @@ html[data-theme="dark"] .ps-verify-required {
 
 /* ---- RESPONSIVE — Featured Verdict Cards ---- */
 
+@media (min-width: 520px) {
+  .hero-verdict-explainer__grid {
+    grid-template-columns: repeat(2, 1fr); /* 520px+ gives columns wide enough for all pills */
+  }
+}
+
 @media (min-width: 640px) {
   .hero-verdict-explainer__grid {
     grid-template-columns: repeat(3, 1fr);