/* ============================================
   FILE: 0-reset.css
   
   WHAT THIS FILE DOES:
   Modern CSS reset that normalizes browser defaults
   and provides a clean foundation for all styles.
   Based on Josh Comeau's "A Modern CSS Reset" with
   Hydejack-specific additions.
   
   WHEN TO EDIT:
   - Rarely needs editing
   - Only if adding new global defaults
   
   WHEN NOT TO EDIT:
   - To change colors (use 1-variables.css)
   - To change fonts (use 1-variables.css)
   - For component styles (use 3-components.css)
   
   ============================================ */

/* ============================================
   LOCAL FONT DEFINITIONS
   ============================================ */

/* --- Kode Mono (Headings & Special Highlights) --- */
@font-face {
  font-family: 'Kode Mono';
  src: url('/assets/fonts/Kode_Mono/KodeMono-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Plus Jakarta Sans (Body Text) --- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Remove list styles in navigation contexts */
nav ul,
nav ol,
.nav-bar ul,
.left-panel__nav ul,
.left-panel__social ul,
.mobile-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li,
.nav-bar li,
.left-panel__nav li,
.left-panel__social li {
  list-style: none;
}

/* Set core body defaults */
/* scroll-behavior: smooth removed — handled by SmoothScroll JS module
   which gives finer control (instant for popstate, smooth for clicks). */
html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Create a root stacking context */
#root,
#__next {
  isolation: isolate;
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Accessible focus styles (can be overridden per component) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skip to content link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: 8px;
  text-decoration: none;
  z-index: var(--z-lightbox);
  border-radius: 0 0 4px 0;
  font-weight: bold;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* Respect prefers-reduced-motion
   ────────────────────────────────────────────────────────────────
   Consolidated from: 0-reset, 3-components, 4-content, 6-delight,
   7-typography, 8-page-sections, annotations, immersive-sidebar,
   lightbox.  Every selector that previously had per-file overrides
   is included here so nothing is lost.
   Uses transition-duration: 0.01ms (not `none`) so that
   `transitionend` events still fire for JS listeners.
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  /* ── 1. UNIVERSAL RESET ──────────────────────────────────────── */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  html:focus-within {
    scroll-behavior: auto;
  }

  /* ── 2. COMPONENT-LEVEL OVERRIDES ────────────────────────────── */

  /* Tags (3-components) */
  .tag {
    transition-duration: 0.01ms !important;
  }

  .tag:hover {
    box-shadow: none;
  }

  /* Content images (4-content) */
  .page-content img,
  .post-content img {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  /* Media frame corner brackets (4-content) */
  .media-frame::before,
  .media-frame::after {
    transition-duration: 0.01ms !important;
  }

  .media-frame:hover::before,
  .media-frame:hover::after {
    width: 8px;
    height: 8px;
  }

  /* ── 3. STAGGER / REVEAL ITEMS (6-delight) ───────────────────── */
  [data-stagger-item],
  .grid-item,
  .post-preview,
  .project-preview,
  .posts-list__item {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  /* ── 4. INTERACTIVE ELEMENTS (6-delight) ─────────────────────── */
  a,
  .nav-bar a,
  .btn,
  .button,
  button[type="submit"],
  .card,
  .card--media,
  .reading-progress,
  .back-to-top,
  .anchor-link,
  .pswp__button,
  .dropdown-menu a,
  .mobile-nav a,
  .code-copy-btn {
    transition-duration: 0.01ms !important;
    transform: none !important;
    animation: none !important;
  }

  /* Hover transforms on cards, buttons, and images */
  :is(a, .btn, .button, button, .card, .card--media, .grid-item, .back-to-top):hover,
  :is(a, .btn, .button, button, .card, .card--media, .grid-item, .back-to-top):focus-within,
  :is(.card, .card--media):hover :is(img),
  :is(.card, .card--media):focus-within :is(img) {
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
  }

  /* Glow box-shadows on hover */
  :is(.card--hoverable, .grid-item):hover {
    box-shadow: none !important;
  }

  /* Remove gradient underline animation, keep underline (7-typography) */
  a:not(.btn):not(.nav-link):not(.no-hover) {
    background-image: none !important;
    text-decoration: underline;
  }

  /* Block-right links (7-typography) */
  .block-right a:not(.btn):not(.nav-link):not(.no-hover) {
    transition-duration: 0.01ms !important;
    background-image: none !important;
    text-decoration: underline;
  }

  /* Ripple effects (6-delight) */
  .btn::after,
  .button::after,
  button[type="submit"]::after {
    display: none !important;
  }

  /* ── 5. GRID ITEMS (8-page-sections) ─────────────────────────── */
  .grid-item:hover,
  .grid-item:focus-within {
    transform: none;
  }

  /* ── 6. ANNOTATIONS (annotations.css) ────────────────────────── */

  /* Loading spinner fallback to text */
  [data-loading="true"] .anno-cards::before {
    animation: none;
    content: 'Loading\2026';
    width: auto;
    height: auto;
    border: none;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* Annotation transitions */
  .anno-sidebar,
  .anno-toggle,
  .anno-card,
  .r6o-annotation,
  .a9s-annotation {
    transition-duration: 0.01ms !important;
  }

  .anno-pulse {
    animation: none !important;
  }

  /* ── 7. IMMERSIVE SIDEBAR (immersive-sidebar.css) ────────────── */
  .left-panel,
  .left-panel *,
  #main-content {
    transition-duration: 0.01ms !important;
  }

  .scroll-indicator__chevron::before,
  .scroll-indicator__chevron::after {
    animation: none !important;
  }

  /* ── 8. LIGHTBOX (lightbox.css) ──────────────────────────────── */
  .osd-lightbox-close,
  .osd-lightbox-prev,
  .osd-lightbox-next {
    transition-duration: 0.01ms !important;
  }

  .lightbox-trigger img {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
}
/* ============================================
   1-VARIABLES.CSS

   Design Token Architecture
   1. COLOR PALETTE - Theme-adaptive 5-scale system
   2. SEMANTIC ALIASES - Mapped to palette tokens
   3. SPACING PRIMITIVES - Numeric scale
   4. LAYOUT TOKENS
   5. SHADOW TOKENS
   6. TYPOGRAPHY
   7. Z-INDEX REGISTRY
   8. MOTION TOKENS
   9. BREAKPOINTS
   ============================================ */

:root {
  /* ---------------------------------------------------------
     1. COLOR PALETTE (Light Theme)
     Scales: text, background, primary, secondary, accent
     50 = lightest, 950 = darkest
     In dark mode these invert: 50 = darkest, 950 = lightest
     --------------------------------------------------------- */

  --text-50: hsl(245, 44%, 95%);
  --text-200: hsl(250, 45%, 80%);
  --text-500: hsl(250, 45%, 50%);
  --text-700: hsl(250, 45%, 30%);
  --text-900: hsl(250, 45%, 10%);
  --text-950: hsl(251, 44%, 5%);

  --background-50: hsl(240, 12%, 95%);
  --background-100: hsl(252, 10%, 90%);
  --background-200: hsl(250, 12%, 80%);
  --background-300: hsl(251, 11%, 70%);
  --background-950: hsl(260, 12%, 5%);

  --primary-100: hsl(248, 61%, 90%);
  --primary-200: hsl(249, 63%, 80%);
  --primary-300: hsl(249, 62%, 70%);
  --primary-500: hsl(249, 62%, 50%);
  --primary-600: hsl(249, 62%, 40%);
  --primary-700: hsl(249, 62%, 30%);

  --secondary-100: hsl(295, 100%, 90%);
  --secondary-300: hsl(295, 100%, 70%);
  --secondary-500: hsl(295, 100%, 50%);
  --secondary-700: hsl(295, 100%, 30%);

  --accent-200: hsl(185, 100%, 80%);
  --accent-300: hsl(185, 100%, 70%);
  --accent-500: hsl(185, 100%, 50%);
  --accent-600: hsl(185, 100%, 40%);

  /* ---------------------------------------------------------
     2. SEMANTIC COLOR ALIASES
     These map palette tokens to semantic roles.
     No dark-mode re-mapping needed: the palette
     scales invert automatically.
     --------------------------------------------------------- */

  /* Backgrounds */
  --color-bg: var(--background-50);
  --color-bg-secondary: var(--background-100);
  --color-bg-tertiary: var(--background-200);

  /* Text hierarchy */
  --color-text: var(--text-950);
  --color-text-secondary: var(--text-700);
  --color-text-muted: var(--text-500);
  --color-text-inverse: var(--text-50);

  /* Borders */
  --color-border: var(--background-300);
  --color-border-light: var(--background-200);
  --color-border-subtle: var(--background-100);

  /* Brand colors */
  --color-primary: var(--primary-500);
  --color-secondary: var(--secondary-500);

  /* Links */
  --color-link: var(--primary-600);
  --color-link-hover: var(--primary-700);
  --color-link-gradient-start: var(--accent-600);
  --color-link-gradient-end: var(--primary-600);
  --color-link-glow: var(--accent-300);

  /* Accent utilities */
  --accent-color-faded: var(--primary-100);
  --accent-color-hover: var(--primary-700);
  --accent-glow: var(--primary-200);
  --color-primary-highlight: var(--primary-100);
  --color-primary-dark: var(--primary-700);

  /* Functional colors (theme-independent) */
  --color-success: hsl(145, 63%, 42%);
  --color-success-bg: hsla(145, 63%, 42%, 0.1);
  --color-warning: hsl(38, 92%, 50%);
  --color-warning-bg: hsla(38, 92%, 50%, 0.1);
  --color-error: hsl(0, 84%, 60%);
  --color-error-bg: hsla(0, 84%, 60%, 0.1);
  --color-info: hsl(210, 100%, 56%);
  --color-info-bg: hsla(210, 100%, 56%, 0.1);

  /* Thread nesting depth colors (Bluesky discussion) */
  --bsky-depth-0: var(--primary-500);
  --bsky-depth-1: var(--secondary-500);
  --bsky-depth-2: var(--accent-500);
  --bsky-depth-3: var(--primary-300);
  --bsky-depth-4: var(--secondary-300);
  --bsky-depth-5: var(--accent-300);

  /* Code blocks */
  --code-bg-dark: var(--background-950);
  --code-text-light: var(--text-200);

  /* Shadow utilities (RGB triplets for rgba() compositing) */
  --shadow-color: 0 0 0;
  --shadow-color-light: 255 255 255;

  /* Alpha scale */
  --alpha-5: 0.05;
  --alpha-10: 0.1;
  --alpha-15: 0.15;
  --alpha-20: 0.2;
  --alpha-30: 0.3;
  --alpha-50: 0.5;
  --alpha-60: 0.6;
  --alpha-70: 0.7;
  --alpha-80: 0.8;
  --alpha-90: 0.9;

  /* ---------------------------------------------------------
     3. SPACING PRIMITIVES
     Numeric scale based on 0.25rem (4px) base unit
     --------------------------------------------------------- */
  --base-unit: 0.25rem;

  --space-1: calc(1 * var(--base-unit));   /* 4px */
  --space-2: calc(2 * var(--base-unit));   /* 8px */
  --space-3: calc(3 * var(--base-unit));   /* 12px */
  --space-4: calc(4 * var(--base-unit));   /* 16px */
  --space-5: calc(5 * var(--base-unit));   /* 20px */
  --space-6: calc(6 * var(--base-unit));   /* 24px */
  --space-8: calc(8 * var(--base-unit));   /* 32px */
  --space-16: calc(16 * var(--base-unit)); /* 64px */
  --space-32: calc(32 * var(--base-unit)); /* 128px */

  /* T-shirt sizes */
  --space-xs: var(--space-1);   /* 4px */
  --space-sm: var(--space-2);   /* 8px */
  --space-md: var(--space-4);   /* 16px */
  --space-lg: var(--space-8);   /* 32px */
  --space-xl: var(--space-16);  /* 64px */
  --space-xxl: var(--space-32); /* 128px */

  /* ---------------------------------------------------------
     4. LAYOUT TOKENS
     --------------------------------------------------------- */
  --sidebar-width: 20rem;
  --content-max-width: 65ch;
  --content-wide-max-width: 960px;
  --container-max-width: 1200px;

  /* Interactive Targets */
  --touch-target-size: 2.75rem; /* 44px - WCAG minimum touch target */

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Border Widths */
  --border-width-thin: 1px;
  --border-width-accent: 4px;
  --border-width-rule: 3px;

  /* Opacity Scale */
  --opacity-hover: 0.85;
  --opacity-disabled: 0.7;
  --opacity-secondary: 0.5;

  /* Legacy aliases */
  --border-radius: var(--radius-md);
  --border-radius-lg: var(--radius-lg);
  --border-radius-sm: var(--radius-sm);
  --border-subtle: 1px solid var(--color-border-light);

  /* ---------------------------------------------------------
     5. SHADOW TOKENS
     --------------------------------------------------------- */
  --shadow-sm: 0 2px 4px rgba(var(--shadow-color), var(--alpha-10));
  --shadow-md: 0 4px 6px -1px rgba(var(--shadow-color), var(--alpha-10)),
               0 2px 4px -1px rgba(var(--shadow-color), var(--alpha-5));
  --shadow-lg: 0 10px 15px -3px rgba(var(--shadow-color), var(--alpha-10)),
               0 4px 6px -2px rgba(var(--shadow-color), var(--alpha-5));
  --shadow-xl: 0 20px 25px -5px rgba(var(--shadow-color), var(--alpha-10)),
               0 10px 10px -5px rgba(var(--shadow-color), var(--alpha-5));
  --shadow-glow: 0 0 15px var(--color-link-glow);
  --shadow-inset-light: inset 0 1px 0 rgba(var(--shadow-color-light), var(--alpha-5));

  /* Component shadows */
  --shadow-card: 0 4px 12px rgba(var(--shadow-color), var(--alpha-5));
  --shadow-card-hover: 0 8px 24px rgba(var(--shadow-color), var(--alpha-15));
  --shadow-dropdown: 0 10px 15px rgba(var(--shadow-color), var(--alpha-10));

  /* ---------------------------------------------------------
     6. TYPOGRAPHY
     --------------------------------------------------------- */
  --font-body: 'Plus Jakarta Sans', 'Inter', 'Roboto', sans-serif;
  --font-body-serif: 'Georgia', 'Times New Roman', serif;
  --font-heading: 'Kode Mono', 'Bebas Neue', 'Playfair Display', serif;
  --font-mono: 'Kode Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

  /* Font Weights */
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Text Scale */
  --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --text-sm: clamp(0.875rem, 1.75vw, 1rem);
  --text-md: 1.125rem;
  --text-base: clamp(1.125rem, 2vw, 1.25rem);
  --text-lg: clamp(1.25rem, 2.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 3vw, 2rem);
  --text-2xl: clamp(1.75rem, 3.5vw, 2.5rem);
  --text-xxl: clamp(2rem, 4vw, 3rem);
  --text-3xl: clamp(2.5rem, 5vw, 3.5rem);
  --text-4xl: clamp(3rem, 6vw, 4rem);
  --text-5xl: clamp(3.5rem, 7vw, 5rem);

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-wide: 0.05em;

  /* ---------------------------------------------------------
     7. Z-INDEX REGISTRY
     --------------------------------------------------------- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 400;
  --z-modal: 500;
  --z-lightbox: 1000;
  --z-max: 9999;

  /* ---------------------------------------------------------
     8. MOTION TOKENS
     --------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Legacy compatibility */
  --transition-medium: var(--duration-normal);
  --transition-slow: var(--duration-slow);
  --hover-lift: -4px;
  --hover-scale: 1.02;
}

/* ---------------------------------------------------------
   DARK MODE - Inverted palette scales
   Semantic aliases auto-adapt: no re-mapping needed.
   --------------------------------------------------------- */
[data-theme="dark"],
.dark-mode {
  --text-50: hsl(250, 46%, 5%);
  --text-200: hsl(249, 45%, 20%);
  --text-500: hsl(249, 46%, 58%);
  --text-700: hsl(249, 46%, 70%);
  --text-900: hsl(248, 45%, 90%);
  --text-950: hsl(250, 46%, 95%);

  --background-50: hsl(260, 12%, 5%);
  --background-100: hsl(252, 10%, 10%);
  --background-200: hsl(250, 12%, 20%);
  --background-300: hsl(251, 11%, 30%);
  --background-950: hsl(240, 12%, 95%);

  --primary-100: hsl(248, 61%, 10%);
  --primary-200: hsl(249, 63%, 20%);
  --primary-300: hsl(249, 62%, 30%);
  --primary-500: hsl(249, 62%, 50%);
  --primary-600: hsl(249, 62%, 60%);
  --primary-700: hsl(249, 62%, 70%);

  --secondary-100: hsl(295, 100%, 10%);
  --secondary-300: hsl(295, 100%, 30%);
  --secondary-500: hsl(295, 100%, 50%);
  --secondary-700: hsl(295, 100%, 70%);

  --accent-200: hsl(185, 100%, 20%);
  --accent-300: hsl(185, 100%, 30%);
  --accent-500: hsl(185, 100%, 50%);
  --accent-600: hsl(185, 100%, 60%);
}

/* ---------------------------------------------------------
   REDUCED MOTION PREFERENCES
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --transition-medium: 0s;
    --transition-slow: 0s;
    --hover-lift: 0;
    --hover-scale: 1;
  }
}

/* ---------------------------------------------------------
   9. BREAKPOINTS
   --------------------------------------------------------- */
:root {
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-desktop: 60rem; /* 960px- sidebar split point */
  --breakpoint-lg: 1024px;
}
/* ============================================
   7-TYPOGRAPHY.CSS
   
   Global Typography Rules
   - Fluid type scale
   - Heading hierarchy
   - Content typography
   - Prose styling
   - Editorial elements (dividers, quotes)
   ============================================ */

/* --- Base Typography --- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
}

/* --- Heading Hierarchy --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Content headings- use heading font (Kode Mono) everywhere for terminal aesthetic */
.post-content h1,
.post-content h2,
.page-content h1,
.page-content h2 {
  font-weight: 800;
  line-height: 1.2;
}

.post-content h3,
.post-content h4,
.page-content h3,
.page-content h4 {
  line-height: 1.25;
}

h1 {
  font-size: var(--text-xxl);
  margin-top: 0;
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4 {
  font-size: var(--text-base);
}

h5 {
  font-size: var(--text-sm);
}

h6 {
  font-size: var(--text-xs);
  font-weight: 700;
}

/* Post Title - Fluid sizing with bottom border */
.post-title {
  font-family: var(--font-body);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* Project title: canonical definition in projects.css */

/* --- Paragraphs --- */
p {
  margin-bottom: 1em;
  max-width: var(--content-max-width);
}

/* Lead paragraph */
.lead,
.page-content > p:first-of-type,
.post-content > p:first-of-type {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text);
}

/* --- Links --- */
/* Standard gradient underline hover (300ms) - matches 4-content.css */
.block-right a:not(.btn):not(.nav-link):not(.no-hover):not(.grid-link):not(.related-post-link):not(.posts-list__link):not(.thread-post__link):not(.thread-preview-card):not(.thread-card) {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: rgba(var(--shadow-color), var(--alpha-20));
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  background-image: linear-gradient(
    to right,
    var(--color-link-gradient-start) 0%,
    var(--color-link-gradient-end) 100%
  );
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration-normal, 300ms) ease,
              color var(--duration-fast),
              text-decoration-color var(--duration-fast);
}

.block-right a:not(.btn):not(.nav-link):not(.no-hover):not(.grid-link):not(.related-post-link):not(.posts-list__link):not(.thread-post__link):not(.thread-preview-card):not(.thread-card):hover,
.block-right a:not(.btn):not(.nav-link):not(.no-hover):not(.grid-link):not(.related-post-link):not(.posts-list__link):not(.thread-post__link):not(.thread-preview-card):not(.thread-card):focus,
.block-right a:not(.btn):not(.nav-link):not(.no-hover):not(.grid-link):not(.related-post-link):not(.posts-list__link):not(.thread-post__link):not(.thread-preview-card):not(.thread-card):active {
  color: var(--color-primary-dark);
  background-size: 100% 2px;
  text-decoration-color: transparent;
}

/* Basic links without gradient effect */
a.btn,
a.nav-link,
a.no-hover {
  text-decoration: none;
  transition: color var(--duration-fast),
              background-color var(--duration-fast),
              border-color var(--duration-fast);
}

/* Reduced motion- consolidated in 0-reset.css */

/* External link indicator- .no-external-icon to suppress on any element */
.block-right a[target="_blank"]:not(.btn):not(.no-hover):not(.no-external-icon):not(.grid-link):not(.related-post-link):not(.posts-list__link):not(.thread-post__link)::after {
  content: '\2009\2197';
  font-size: 0.75em;
  opacity: var(--opacity-secondary);
  vertical-align: super;
}

/* External link indicator print override in 9-print.css */

/* --- Lists --- */
ul, ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

li {
  margin-bottom: 0.25em;
}

/* --- Blockquotes --- */
blockquote {
  margin: 1.5em 0;
  padding: 1em 1.5em;
  border-left: var(--border-width-accent) solid var(--color-primary);
  background: var(--color-bg-secondary);
  font-style: italic;
  font-size: 1.05em;
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  margin-top: 1em;
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

blockquote cite::before {
  content: '— ';
}

/* --- Featured Quote (Editorial) --- */
.quote-featured {
  font-size: var(--text-xl);
  font-family: var(--font-heading);
  line-height: 1.3;
  text-align: center;
  margin: var(--space-xxl) 0;
  color: var(--color-text);
  position: relative;
}

.quote-featured::before {
  content: "";
  font-size: 4rem;
  color: var(--color-primary);
  opacity: 0.2;
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
}

.quote-featured cite {
  display: block;
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  font-style: normal;
  font-weight: 500;
}

/* --- Code --- */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-secondary);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

pre {
  background: var(--code-bg-dark);
  color: var(--code-text-light);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: 1.6;
  margin: var(--space-lg) 0;
}

pre code {
  background: transparent;
  padding: 0;
  font-size: var(--text-sm);
}

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: var(--text-sm);
}

th, td {
  padding: 0.75em 1em;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  border-bottom: 2px solid var(--color-text);
}

tbody tr:nth-child(even) {
  background: var(--color-bg-secondary);
}

/* --- Horizontal Rules --- */
hr {
  margin: 2em 0;
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-border),
    transparent
  );
}

/* --- Ornamental Dividers --- */
hr.divider {
  border: 0;
  height: 1px;
  background: var(--color-border);
  margin: var(--space-xl) 0;
  position: relative;
  overflow: visible;
}

/* Dingbat Style */
hr.divider--ornament::after {
  content: "❖";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg);
  padding: 0 var(--space-md);
  color: var(--color-primary);
  font-size: 1.5rem;
}

/* Dots Style */
hr.divider--dots::after {
  content: "•••";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg);
  padding: 0 var(--space-md);
  color: var(--color-text-muted);
  font-size: 1rem;
  letter-spacing: 0.5em;
}

/* --- Selection --- */
::selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* --- Focus Styles --- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Print styles consolidated in 9-print.css */
/* ============================================
   2-LAYOUT.CSS
   
   Unified Grid and Container Systems
   - Main containers
   - Responsive grid patterns
   - Alignment utilities
   - Legacy layout compatibility
   ============================================ */

/* --- Main Container --- */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.container--narrow {
  max-width: var(--content-max-width);
}

/* --- Consolidated Grid System --- */
.grid {
  display: grid;
  gap: var(--space-md);
  width: 100%;
}

/* Responsive Columns */
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

/* Breakpoint: --bp-tablet (768px) */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Breakpoint: --bp-desktop (1024px) */
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Auto-Layout Patterns */
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* --- Alignment Utilities --- */
.grid-center { 
  place-items: center; 
}

.grid-gap-sm { gap: var(--space-sm); }
.grid-gap-md { gap: var(--space-md); }
.grid-gap-lg { gap: var(--space-lg); }
.grid-gap-xl { gap: var(--space-xl); }

/* --- Flexbox Utilities --- */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

/* --- Fixed Sidebar + Fluid Content Layout --- */
.layout-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.block-left {
  display: none;
}

.block-right {
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Mobile-first: Show top nav, hide fixed sidebar */
.nav-bar {
  display: flex;
}

/* --- Mobile Drawer (slide-in menu) --- */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  visibility: hidden;
  pointer-events: none;
}

.mobile-drawer--open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--shadow-color), var(--alpha-50));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.mobile-drawer--open .mobile-drawer__backdrop {
  opacity: 1;
}

.mobile-drawer__content {
  position: absolute;
  top: 0;
  left: 0;
  width: min(80vw, var(--sidebar-width));
  height: 100%;
  background: var(--color-bg);
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-drawer__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-size);
  height: var(--touch-target-size);
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.mobile-drawer__close:hover,
.mobile-drawer__close:focus-visible {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
}

.mobile-drawer__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.mobile-drawer--open .mobile-drawer__content {
  transform: translateX(0);
}

/* --- Desktop Layout (Fixed Sidebar + Fluid Content) ---
   Critical CSS for preventing FOUC (Flash of Unstyled Content)
*/
/* --- Main Content and Footer Spacing --- */
.content {
  flex: 1;
  padding: var(--space-xxl) var(--space-xl);
  max-width: var(--content-wide-max-width);
  margin: 0 auto;
  transition: padding-right var(--duration-normal) var(--ease-out);
}

.site-footer {
  padding: var(--space-xl);
  margin-top: var(--space-xxl);
  border-top: 2px solid var(--color-border);
}

@media (max-width: 59.99rem) {
  .content {
    padding: var(--space-lg) var(--space-md);
  }

  .site-footer {
    padding: var(--space-lg) var(--space-md);
  }
}

@media screen and (min-width: 60rem) {
  .layout-wrapper {
    flex-direction: row;
  }

  .block-left {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    z-index: var(--z-sticky);
    overflow-y: auto;
  }

  .block-right {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
  }

  /* Hide mobile navigation on desktop - sidebar handles navigation */
  .mobile-nav,
  .nav-bar {
    display: none;
  }

  /* Mobile drawer not needed on desktop */
  .mobile-drawer {
    display: none;
  }
}

/* --- Content Columns (Two-column text layout) --- */
.content-columns {
  display: flex;
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}

.text-column {
  flex: 1;
}

.visual-column {
  flex: 1.5;
}

/* Breakpoint: --bp-tablet (768px) */
@media (max-width: 768px) {
  .content-columns {
    flex-direction: column;
  }
}

/* --- Frame Utility (Border box) --- */
.frame-p {
  border: 1px solid var(--color-border);
  padding: var(--space-md);
}

/* ============================================
   COLUMN SYSTEM (Hydejack-inspired)
   (Consolidated from theme-enhancements.css)
   ============================================ */

.columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.column-1 { flex: 1 1 100%; }
.column-1-2 { flex: 1 1 calc(50% - var(--space-sm)); }
.column-1-3 { flex: 1 1 calc(33.333% - var(--space-md)); }
.column-2-3 { flex: 2 1 calc(66.666% - var(--space-sm)); }
.column-3-5 { flex: 3 1 60%; }
.column-2-5 { flex: 2 1 40%; }

/* Breakpoint: --bp-tablet (768px) */
@media (max-width: 768px) {
  .column-1-2,
  .column-1-3,
  .column-2-3,
  .column-3-5,
  .column-2-5 {
    flex: 1 1 100%;
  }
}

/* Print styles consolidated in 9-print.css */
/* ============================================
   3-COMPONENTS.CSS
   
   Consolidated Atomic Components
   - Cards (merged variants)
   - Timeline (unified)
   - Buttons
   - Forms
   - Navigation elements
   - Empty states
   - Pagination
   - Semantic Callouts
   ============================================ */

/* ============================================
   1. UNIVERSAL CARDS
   Consolidates .card, .card-note, .card-info
   ============================================ */

/* Base card with unified hover system */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
  /* Transition only transform + border — box-shadow moved to ::after for GPU compositing */
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

/* Pre-rendered hover shadow on ::after — only opacity transitions (GPU-composited) */
.card--hoverable::after,
.grid-item::after,
.taxonomy-card::after,
.related-post-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px var(--color-primary),
    0 20px 40px -8px rgba(var(--shadow-color), var(--alpha-15)),
    0 8px 16px -4px rgba(var(--shadow-color), var(--alpha-10));
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

/* Interactive Card Variant - Unified hover state
   Shared by: .card--hoverable, .grid-item, .taxonomy-card, .related-post-card */
.card--hoverable {
  /* Establish positioning context for glow effects */
  position: relative;
  overflow: hidden;
}

.card--hoverable:hover,
.card--hoverable:focus-visible,
.grid-item:hover,
.grid-item:focus-within,
.taxonomy-card:hover,
.taxonomy-card:focus-within,
.related-post-card:hover,
.related-post-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--color-primary);
}

.card--hoverable:hover::after,
.card--hoverable:focus-visible::after,
.grid-item:hover::after,
.grid-item:focus-within::after,
.taxonomy-card:hover::after,
.taxonomy-card:focus-within::after,
.related-post-card:hover::after,
.related-post-card:focus-within::after {
  opacity: 1;
}

.card--hoverable:focus-visible,
.grid-item:focus-within,
.taxonomy-card:focus-within,
.related-post-card:focus-within {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* Card with image - synchronized container + image hover */
.card--media {
  /* Ensure consistent border-radius containment */
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Single transition timing for entire card */
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.card--media .card__image {
  overflow: hidden;
  border-radius: 0;
  margin: calc(-1 * var(--space-md));
  margin-bottom: var(--space-md);
}

.card--media .card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Image inherits card's transition timing */
  transition: transform var(--duration-normal) var(--ease-out);
}

/* Synchronized hover: container and image animate together */
.card--media:hover,
.card--media:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card--media:hover .card__image img,
.card--media:focus-within .card__image img {
  transform: scale(1.05);
}

/* Larger scale variant */
.card--media-lg:hover .card__image img,
.card--media-lg:focus-within .card__image img {
  transform: scale(1.08);
}

/* Card link hover - teal to black gradient */
.card a:not(.btn):not(.no-hover):hover,
.card a:not(.btn):not(.no-hover):focus {
  background-image: linear-gradient(
    to right,
    var(--color-link-gradient-start) 0%,
    var(--color-link-gradient-end) 100%
  );
  background-size: 100% 2px;
}

/* Content Card (used by shortcode) */
.content-card {
  background: var(--color-bg-secondary);
  border-left: var(--border-width-accent) solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}

.content-card.card-info {
  background: var(--color-bg-secondary);
  border-left: var(--border-width-accent) solid var(--color-info);
  padding: var(--space-md) var(--space-lg);
}

.content-card.card-warning {
  background: var(--color-bg-secondary);
  border-left: var(--border-width-accent) solid var(--color-warning);
  padding: var(--space-md) var(--space-lg);
}

.content-card.card-tip,
.content-card.card-success {
  background: var(--color-bg-secondary);
  border-left: var(--border-width-accent) solid var(--color-success);
  padding: var(--space-md) var(--space-lg);
}

.content-card.card-danger {
  background: var(--color-bg-secondary);
  border-left: var(--border-width-accent) solid var(--color-error);
  padding: var(--space-md) var(--space-lg);
}

/* Card note variant */
.content-card.card-note {
  background: var(--color-bg-secondary);
  border-left: var(--border-width-accent) solid var(--color-info);
  padding: var(--space-md) var(--space-lg);
}

/* Card Header for complex cards */
.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-semibold);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.card__content > *:first-child {
  margin-top: 0;
}

.card__content > *:last-child {
  margin-bottom: 0;
}

/* ============================================
   2. BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  min-height: var(--touch-target-size);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              background-color var(--duration-fast);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  /* Bouncy transition- all properties synced to bounce duration */
  transition:
    transform var(--transition-bounce, 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)),
    box-shadow var(--transition-bounce, 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)),
    background-color var(--duration-fast) var(--ease-out);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: scale(1.05) translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.btn-primary:active {
  transform: scale(0.95);
}

.btn:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.btn-primary:focus-visible {
  outline-color: var(--color-text);
  box-shadow: var(--shadow-card-hover), 0 0 0 4px var(--color-primary);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-primary-highlight);
}

.btn-secondary:hover svg {
  transform: translate(2px, -2px);
}

.btn-secondary svg {
  transition: transform var(--duration-fast);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: var(--color-bg-secondary);
  color: var(--color-primary);
}

.btn-sm {
  padding: calc(var(--space-xs) * 1.5) var(--space-sm);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-base);
}

/* ============================================
   4. TIMELINE
   Consolidates .resume__entry and .timeline-entry
   ============================================ */

.timeline {
  position: relative;
  margin: var(--space-xl) 0;
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-lg);
}

.timeline__entry {
  position: relative;
  margin-bottom: var(--space-xl);
}

/* The dot */
.timeline__entry::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-lg) - 5px);
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-bg);
}

.timeline__entry:last-child {
  margin-bottom: 0;
}

.timeline__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.timeline__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.timeline__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary);
  transition: color var(--duration-fast);
}

.timeline__title a:hover,
.timeline__title a:focus-visible {
  color: var(--color-primary);
}

.timeline__title a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.timeline__org {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
}

.timeline__summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.timeline__highlights {
  list-style: disc;
  padding-left: var(--space-md);
  margin: 0;
}

.timeline__highlights li {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.timeline__highlights li::marker {
  color: var(--color-primary);
}

/* Process Timeline (Horizontal) */
.timeline--process {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-md);
  border-left: none;
  padding-left: 0;
}

.timeline--process .timeline__entry {
  flex: 1;
  min-width: 150px;
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
}

.timeline--process .timeline__entry::before {
  display: none;
}

.timeline--process .timeline__entry:hover {
  border-color: var(--color-primary);
}

/* Timeline shortcode support (BEM naming) */
.timeline__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.timeline__content {
  flex: 1;
}

.timeline__label {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.timeline__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Process timeline with BEM classes */
.timeline--process .timeline__entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  text-align: left;
}

.timeline--process .timeline__marker {
  flex-shrink: 0;
}

/* ============================================
   5. TAGS (Technical/Terminal Style)
   Unified component with subtle glow in dark mode
   ============================================ */

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
}

/* File-directory style prefix */
.tag::before {
  content: '#';
  margin-right: 0.25em;
  color: var(--color-link, var(--color-primary));
  opacity: 1;
  font-weight: var(--font-semibold);
}

.tag:hover,
.tag:focus-visible {
  background-color: var(--color-primary-highlight);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.tag:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Subtle glow in dark mode */
[data-theme="dark"] .tag:hover,
[data-theme="dark"] .tag:focus-visible,
.dark-mode .tag:hover,
.dark-mode .tag:focus-visible {
  background-color: var(--color-bg-tertiary);
  box-shadow: 0 0 4px var(--accent-300);
}

.tag-sm {
  padding: 2px var(--space-xs);
  min-height: 24px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Tag count (used in tag/category clouds) */
.tag-count {
  opacity: var(--opacity-disabled);
  margin-left: 0.25em;
  font-size: 0.9em;
}

/* Plain variant- suppresses # prefix for non-hashtag uses (keywords, filter buttons) */
.tag--plain::before {
  content: none;
}

/* Active state- used by filter buttons */
.tag.is-active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* Reduced motion- consolidated in 0-reset.css */

/* ============================================
   6. PAGINATION
   ============================================ */

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  list-style: none;
  padding: 0;
}

.pagination__link,
.pagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--space-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: background var(--duration-fast), color var(--duration-fast);
}

.pagination__link:hover,
.pagination__link:focus-visible,
.pagination a:hover,
.pagination a:focus-visible {
  background: var(--color-border);
}

.pagination__link:focus-visible,
.pagination a:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.pagination__link--current,
.pagination .current {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  pointer-events: none;
}

/* ============================================
   8. BREADCRUMBS
   ============================================ */

.breadcrumb {
  position: relative;
  z-index: 1;
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-sm);
  color: var(--color-border);
}

.breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-primary);
}

.breadcrumb a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: var(--font-semibold);
}

/* Dropdown section removed- not in use (no nested menu config) */

/* ============================================
   9. FORMS
   ============================================ */

.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

/* ============================================
   8. TAXONOMY COMPONENTS
   ============================================ */

/* --- Taxonomy Item (used in taxonomy lists) --- */
.taxonomy-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-heading);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.taxonomy-item:hover,
.taxonomy-item:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

.taxonomy-item:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.taxonomy-item__count {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  padding: 0.125em 0.5em;
  border-radius: var(--radius-sm);
}

.taxonomy-item:hover .taxonomy-item__count {
  background: rgba(var(--shadow-color-light), var(--alpha-20));
  color: inherit;
}

/* Tag cloud items now use unified .tag component (see section 5) */

/* Category cloud items now use unified .tag component (see section 5) */

/* --- Page Label (term pages) --- */
.page-label {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
}

.page-label a {
  color: var(--color-primary);
  text-decoration: none;
}

.page-count {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

/* ============================================
   9. GALLERY COMPONENTS
   ============================================ */

/* --- Gallery CSS Variable Support --- */
.gallery--grid {
  --gallery-cols: auto;
}

/* --- Flickr Album Embed --- */
.flickr-album {
  margin: 2rem 0;
}

.flickr-album__frame {
  position: relative;
  aspect-ratio: var(--flickr-aspect, 3/2);
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-muted, #f0f0f0);
}

.flickr-album__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.flickr-album__caption {
  margin-top: 0.75rem;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-muted, #666);
  text-align: center;
}

.flickr-album__caption a {
  color: var(--color-primary, currentColor);
}

/* --- Flickr Album Gallery Mode --- */
.flickr-album--gallery {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.flickr-album__hero {
  display: block;
  text-decoration: none;
  aspect-ratio: var(--flickr-aspect, 3/2);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--color-bg-tertiary);
}

.flickr-album__hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.flickr-album__thumbs {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-xs) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.flickr-album__thumbs::-webkit-scrollbar {
  height: 4px;
}

.flickr-album__thumbs::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.flickr-album__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  background: var(--color-bg-tertiary);
  scroll-snap-align: center;
  display: block;
  text-decoration: none;
  transition: opacity var(--duration-fast, 150ms) var(--ease-out, ease-out),
              border-color var(--duration-fast, 150ms) var(--ease-out, ease-out);
}

.flickr-album__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.flickr-album__thumb:hover,
.flickr-album__thumb:focus-visible {
  opacity: var(--opacity-hover);
}

.flickr-album__thumb:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.flickr-album__thumb.is-active {
  opacity: 1;
  border-color: var(--color-primary);
}

.flickr-album__lightbox-items {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .flickr-album__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }
}


.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

.form-hint {
  margin-top: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ============================================
   10. THEME TOGGLE BUTTON
   ============================================ */

.theme-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-sm);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: 
    background-color var(--duration-fast),
    border-color var(--duration-fast),
    transform var(--duration-fast);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle-icon {
  font-size: var(--text-md);
  line-height: 1;
}

/* Show/hide icons based on current theme */
.theme-toggle-icon--light {
  display: none;
}

.theme-toggle-icon--dark {
  display: inline;
}

/* When in dark mode, show sun icon to switch to light */
.dark-mode .theme-toggle-icon--light,
[data-theme="dark"] .theme-toggle-icon--light {
  display: inline;
}

.dark-mode .theme-toggle-icon--dark,
[data-theme="dark"] .theme-toggle-icon--dark {
  display: none;
}

/* ============================================
   NAVIGATION - TERMINAL BUTTON STYLE
   Inverted colors on hover for cyberpunk feel
   (Moved from 6-delight.css)
   ============================================ */

.nav-bar {
  position: relative;
}

.nav-bar a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  min-height: var(--touch-target-size);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* Terminal button hover - invert colors */
.nav-bar a:hover {
  color: var(--color-bg);
  background-color: var(--color-link, var(--color-primary));
  border-color: var(--color-link, var(--color-primary));
  box-shadow: 0 0 15px var(--color-link-glow);
  transform: translateY(-1px);
}

/* Active state - subtle fill so current section is visible at a glance */
.nav-bar a.active {
  color: var(--color-link, var(--color-primary));
  border-color: var(--color-link, var(--color-primary));
  background-color: var(--accent-color-faded);
  font-weight: var(--font-bold, 700);
}

.nav-bar a.active:hover {
  color: var(--color-bg);
  background-color: var(--color-link, var(--color-primary));
}

/* Nav bar: separator before first secondary item */
.nav-bar li.nav-secondary:first-of-type {
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border-light);
}

.nav-bar li.nav-secondary a {
  font-size: calc(var(--text-sm) * 0.9);
  opacity: var(--opacity-disabled);
}

.nav-bar li.nav-secondary a:hover {
  opacity: 1;
}

/* Mobile nav - same terminal style */
.mobile-nav a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color var(--duration-fast);
}

/* Navbar layout */
.nav-bar > ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Navbar theme toggle positioning */
.nav-bar__theme-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Left panel utilities + theme toggle handled in 8-page-sections.css */

/* ============================================
   12. TAXONOMY GRID
   (Consolidated from theme-enhancements.css)
   ============================================ */

.taxonomy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.taxonomy-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--color-bg-secondary);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

@supports (grid-template-rows: subgrid) {
  .taxonomy-card {
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
}

/* Hover + focus states consolidated above in unified card hover rule */

.taxonomy-card__name {
  font-weight: var(--font-semibold);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.taxonomy-card__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.taxonomy-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
  line-height: 1.5;
}

/* ============================================
   11. SEARCH MODAL
   (Consolidated from search.css)
   ============================================ */

.search-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  background: rgba(var(--shadow-color), var(--alpha-50));
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}

.search-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.search-dialog {
  width: min(90vw, 560px);
  max-height: 70vh;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: transform var(--duration-normal);
}

.search-modal[aria-hidden="false"] .search-dialog {
  transform: translateY(0) scale(1);
}

.search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
}

.search-input-wrap svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text);
  outline: none;
  line-height: var(--leading-normal);
}

.search-input::placeholder {
  color: var(--color-text-muted);
}

.search-kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  line-height: 1;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-results:empty {
  display: none;
}

.search-result {
  margin: 0;
}

.search-result a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  color: var(--color-text);
  border-left: 3px solid transparent;
  transition: background var(--duration-fast), border-color var(--duration-fast);
}

.search-result a:hover,
.search-result a[aria-selected="true"] {
  background: var(--color-bg-secondary);
  border-left-color: var(--color-primary);
}

.search-result__title {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  margin: 0;
  line-height: var(--leading-snug);
}

.search-result__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin: 2px 0 0;
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result__meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.search-result__tag {
  background: var(--accent-color-faded);
  color: var(--color-primary);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
}

.search-empty,
.search-loading {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.search-footer {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.search-footer kbd {
  font-family: var(--font-mono);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
  font-size: 0.65rem;
}

.search-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: inherit;
  background: none;
  border: none;
  font: inherit;
  padding: 0;
}

.search-trigger svg {
  width: 18px;
  height: 18px;
}

.nav-bar__search .search-trigger {
  min-height: var(--touch-target-size);
  padding: var(--space-xs);
}

@media (max-width: 59.99rem) {
  .search-modal {
    padding-top: 10vh;
  }

  .search-dialog {
    width: 95vw;
    max-height: 80vh;
  }

  .search-footer {
    display: none;
  }
}

/* ============================================
   WORK PAGE FILTERS
   Multi-dimensional filter UI for the /work/ page.
   Thematic tag groups (primary), discipline + type (collapsed).
   ============================================ */

.work-filters {
  margin-bottom: var(--space-8);
}

.work-filters__heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.work-filters__group {
  margin-bottom: var(--space-4);
}

.work-filters__group-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.work-filters__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Filter tag buttons- based on .tag pattern but interactive */
.filter-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  min-height: 32px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.filter-tag:hover {
  color: var(--color-text);
  border-color: var(--color-border);
  background-color: var(--color-bg-secondary);
}

.filter-tag[aria-pressed="true"] {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.filter-tag:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Collapsed filter sections */
.work-filters__section {
  margin-top: var(--space-3);
}

/* Base styles shared with portfolio in SHARED FILTER UI section below.
   Work-specific overrides: */
.work-filters__section summary {
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  padding: var(--space-2) 0;
}

.work-filters__section summary::before {
  content: '+ ';
  font-weight: 400;
}

.work-filters__section[open] summary::before {
  content: '- ';
}

.work-filters__section .work-filters__tags {
  padding-top: var(--space-2);
}

/* ============================================
   SHARED FILTER UI
   Common patterns for Work, Portfolio, and NatureFilter.
   Each page adds its own wrapper/layout classes.
   ============================================ */

/* Active filters bar */
.work-filters__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  margin-top: var(--space-3);
}

.work-filters__active[hidden] {
  display: none;
}

/* Active filter tags container */
.work-filters__active-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

/* Active filter chip */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.4;
}

.filter-chip:hover {
  opacity: 0.8;
}

/* Clear button */
.work-filters__clear {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
  transition: color var(--duration-fast);
}

.work-filters__clear:hover {
  color: var(--color-text);
}

/* Results count */
.work-filters__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* No results / empty state (shared) */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.empty-state p {
  margin: 0;
}

/* Collapsible filter section */
.work-filters__section summary {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
}

.work-filters__section summary::-webkit-details-marker {
  display: none;
}

/* ============================================
   CONTENT TYPE BADGES
   Visual labels for content_type on grid cards.
   ============================================ */

/* Badge styles are now data-driven via data/filters.yaml and .grid-badge in 8-page-sections.css */

/* Dark mode filter tag adjustments */
[data-theme="dark"] .filter-tag[aria-pressed="true"],
.dark-mode .filter-tag[aria-pressed="true"] {
  background-color: var(--primary-300);
  border-color: var(--primary-300);
  color: var(--text-950);
}

/* Mobile: ensure tags wrap properly */
@media (max-width: 59.99rem) {
  .work-filters__tags {
    gap: var(--space-1);
  }

  .filter-tag {
    font-size: 0.7rem;
    padding: var(--space-1) var(--space-2);
    min-height: 28px;
  }
}

/* Threads and Nav primary/secondary split moved to 8-page-sections.css */
/* ============================================
   FILE: 4-content.css
   
   WHAT THIS FILE DOES:
   Styles for posts, projects, pages, and other
   content-specific elements. Typography for
   long-form content lives here.
   
   WHEN TO EDIT:
   - Adjusting post/project layouts
   - Changing content typography
   - Adding content-specific styles
   - Modifying article formatting
   
   WHEN NOT TO EDIT:
   - To change colors (use 1-variables.css)
   - To change base fonts (use 1-variables.css)
   - For layout structure (use 2-layout.css)
   
   ============================================ */

/* ============================================
   1. BASE CONTENT STYLES
   ============================================ */

/* Page header and title */
.page-header {
  margin-bottom: var(--space-xxl);
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: var(--border-width-accent) solid var(--color-primary);
}

.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  margin: 0;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

.page-description {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-top: var(--space-md);
  margin-bottom: 0;
}

.page-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Section landing pages (writing, research, etc.) */
.page-header--section {
  padding-bottom: var(--space-xl);
  border-left-width: var(--border-width-accent);
}

.page-header--section .page-description {
  max-width: 65ch;
}

/* Page content containers - unified with :is() and base class */

.content-body,
.page-content,
.post-content {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  max-width: min(var(--content-max-width), 90vw); /* Uses 65ch token from 1-variables.css */
  margin: 0 auto;
}

/* Dark mode text — use semantic token (inverts via palette automatically) */
:is([data-theme="dark"], .dark-mode) :is(.content-body, .page-content, .post-content) {
  color: var(--color-text);
}

:is(.content-body, .page-content, .post-content) > * {
  margin-bottom: var(--space-lg); /* Increased spacing between elements */
}

:is(.content-body, .page-content, .post-content) > *:last-child {
  margin-bottom: 0;
}

:is(.content-body, .page-content, .post-content) p:last-child {
  margin-bottom: 0;
}

/* ============================================
   2. HEADINGS
   ============================================ */

:is(.content-body, .page-content, .post-content) :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.2;
  color: var(--color-text);
  margin-top: var(--space-xxl); /* Much more breathing room above headings */
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}

:is(.content-body, .page-content, .post-content) h1 {
  font-size: var(--text-4xl);
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

:is(.content-body, .page-content, .post-content) h2 {
  font-size: var(--text-2xl); /* Reduced from 3xl to differentiate from h1 */
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--space-sm);
  margin-top: calc(var(--space-xxl) * 1.5); /* Extra top spacing for major sections */
  margin-bottom: var(--space-lg);
}

/* First h2 after h1 doesn't need as much top margin */
:is(.content-body, .page-content, .post-content) h1 + h2 {
  margin-top: var(--space-xl);
}

:is(.content-body, .page-content, .post-content) h3 {
  font-size: var(--text-xl); /* Reduced from 2xl */
  margin-top: var(--space-xl);
}

:is(.content-body, .page-content, .post-content) h4 {
  font-size: var(--text-lg);
}

:is(.content-body, .page-content, .post-content) h5 {
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

:is(.content-body, .page-content, .post-content) h6 {
  font-size: var(--text-sm);
}

/* Heading anchor links */
.page-content h2[id],
.post-content h2[id],
.page-content h3[id],
.post-content h3[id],
.page-content h4[id],
.post-content h4[id] {
  position: relative;
}

.anchor-link {
  position: absolute;
  left: -1.5em;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.25;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.8em;
  transition: opacity var(--duration-fast), color var(--duration-fast);
}

.page-content h2:hover .anchor-link,
.post-content h2:hover .anchor-link,
.page-content h3:hover .anchor-link,
.post-content h3:hover .anchor-link,
.page-content h4:hover .anchor-link,
.post-content h4:hover .anchor-link,
.page-content h2:focus-within .anchor-link,
.post-content h2:focus-within .anchor-link,
.page-content h3:focus-within .anchor-link,
.post-content h3:focus-within .anchor-link,
.page-content h4:focus-within .anchor-link,
.post-content h4:focus-within .anchor-link,
.anchor-link:focus-visible {
  opacity: 1;
  color: var(--color-primary);
}

/* Hide anchor links on narrow screens to prevent overlap */
@media (max-width: 768px) {
  .anchor-link {
    display: none;
  }
}

/* ============================================
   3. PARAGRAPHS & TEXT
   ============================================ */

.page-content p,
.post-content p {
  margin-bottom: var(--space-md);
  max-width: var(--content-max-width);
}

/* Lead paragraph: base styles in 7-typography.css (.lead selector) */

/* Drop caps (optional class) */
.dropcap::first-letter {
  float: left;
  font-size: 4em;
  line-height: 0.8;
  padding-right: 0.1em;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

/* ============================================
   4. LINKS
   Link hover effects consolidated in 7-typography.css
   This file only adds content-specific link adjustments
   ============================================ */

/* Content-specific link exclusions are handled by the :not() selector
   in 7-typography.css. No additional rules needed here. */

/* ============================================
   5. LISTS
   Improved spacing for better readability
   ============================================ */

.page-content ul,
.post-content ul,
.page-content ol,
.post-content ol {
  margin-bottom: var(--space-lg);
  margin-top: var(--space-md);
  padding-left: var(--space-6);
  line-height: 1.8;
}

.page-content li,
.post-content li {
  margin-bottom: var(--space-sm); /* More spacing between list items */
}

.page-content ul ul,
.post-content ul ul,
.page-content ol ol,
.post-content ol ol {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Task lists */
.task-list-item {
  list-style-type: none;
  padding-left: 0;
}

.task-list-item input[type="checkbox"] {
  margin-right: var(--space-3);
}

/* Definition lists */
.page-content dl,
.post-content dl {
  margin-bottom: var(--space-md);
}

.page-content dt,
.post-content dt {
  font-weight: var(--font-semibold);
  margin-top: var(--space-4);
  color: var(--color-text);
}

.page-content dd,
.post-content dd {
  margin-left: 0;
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
}

/* Horizontal layout for wide screens */
@media (min-width: 48em) {
  .page-content dl.inline,
  .post-content dl.inline {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--space-4);
  }
  
  .page-content dl.inline dt,
  .post-content dl.inline dt {
    margin-top: 0;
    text-align: right;
  }
  
  .page-content dl.inline dd,
  .post-content dl.inline dd {
    margin-top: 0;
  }
}

/* ============================================
   6. BLOCKQUOTES (Terminal Alert Style)
   ============================================ */

.page-content blockquote,
.post-content blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  padding-left: calc(var(--space-lg) + 1rem);
  border-left: var(--border-width-rule) solid var(--color-link, var(--color-primary));
  background: linear-gradient(
    90deg,
    var(--primary-100) 0%,
    transparent 100%
  );
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.95em;
  line-height: 1.7;
  position: relative;
}

/* Terminal-style prefix indicator */
.page-content blockquote::before,
.post-content blockquote::before {
  content: '>';
  font-family: var(--font-mono);
  font-size: 1.2em;
  font-weight: 700;
  color: var(--color-link, var(--color-primary));
  opacity: 0.8;
  position: absolute;
  top: var(--space-md);
  left: var(--space-sm);
  line-height: 1;
}

.page-content blockquote p,
.post-content blockquote p {
  margin-bottom: var(--space-3);
}

.page-content blockquote p:last-child,
.post-content blockquote p:last-child {
  margin-bottom: 0;
}

.page-content blockquote cite,
.post-content blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-content blockquote cite::before,
.post-content blockquote cite::before {
  content: '// ';
  color: var(--color-link, var(--color-primary));
  opacity: var(--opacity-disabled);
}

/* Pull quote / Callout styles - Enhanced */
.pull-quote {
  text-align: center;
  font-size: var(--text-xl);
  font-style: italic;
  border-left: none;
  border-top: var(--border-width-rule) solid var(--color-primary);
  border-bottom: var(--border-width-rule) solid var(--color-primary);
}

/* Key insights callout */
.key-insight {
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary));
  border-left: 5px solid var(--color-primary);
  padding: var(--space-lg);
  margin: var(--space-xxl) 0;
  border-radius: var(--radius-lg);
  position: relative;
}

.key-insight::before {
  content: "💡";
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-size: var(--text-2xl);
}

.key-insight p {
  margin-left: var(--space-xxl);
}

/* ============================================
   7. CODE
   ============================================ */

/* Inline code: base styles in 7-typography.css */

/* Code blocks: override base pre (7-typography.css) with tighter padding + positioning */
.page-content pre,
.post-content pre {
  padding: var(--space-5);
  position: relative;
}

/* Code block language label */
pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: 0;
  right: var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-bg);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  text-transform: uppercase;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ============================================
   8. TABLES
   ============================================ */

.page-content table,
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.page-content caption,
.post-content caption {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
  text-align: left;
  font-size: var(--text-md);
}

.page-content thead,
.post-content thead {
  border-bottom: 2px solid var(--color-text);
}

.page-content th,
.post-content th {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  vertical-align: bottom;
}

.page-content td,
.post-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}

/* Striped rows */
.page-content tbody tr:nth-child(even),
.post-content tbody tr:nth-child(even) {
  background-color: var(--color-bg-secondary);
}

/* Hover highlight */
.page-content tbody tr:hover,
.post-content tbody tr:hover {
  background-color: var(--color-primary-highlight);
}

/* Numeric columns */
td.numeric,
th.numeric {
  text-align: right;
  font-family: var(--font-mono);
}

/* Table wrapper for overflow */
.table-wrapper {
  overflow-x: auto;
  margin: var(--space-lg) 0;
}

/* ============================================
   9. IMAGES & FIGURES
   Enhanced with borders, shadows, zoom capability
   ============================================ */

.page-content img,
.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(var(--shadow-color), var(--alpha-10));
  /* Standard: 200ms lift + shadow */
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

/* Only show zoom cursor on images that actually open a lightbox */
.lightbox-trigger img,
.spotlight img {
  cursor: zoom-in;
}

/* Hover effect only for linked/interactive images */
.page-content a img:hover,
.post-content a img:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--shadow-color), var(--alpha-15));
}

/* Reduced motion for images- consolidated in 0-reset.css */

figure {
  margin: var(--space-xl) 0;
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: 0;
}

figcaption {
  margin-top: var(--space-md); /* Increased from space-3 */
  font-size: var(--text-base); /* Increased from text-sm */
  color: var(--color-text-secondary); /* Better contrast */
  line-height: 1.6;
  padding: var(--space-sm) 0;
  text-align: center;
  font-style: italic;
}

figcaption strong {
  color: var(--color-text);
  font-weight: var(--font-semibold);
  font-style: normal;
}

/* Images/figures wider than text - break out of narrow column */
.post-content figure,
.post-content img:not(figure img) {
  max-width: min(900px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.post-content a img:hover:not(figure img) {
  transform: translateY(-2px);
}

/* Full-width figures */
figure.full-width {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  border-radius: 0;
  border-left: none;
  border-right: none;
}

figure.full-width img {
  border-radius: 0;
}

/* ============================================
   MEDIA FRAME (Cyberpunk Terminal Style)
   ============================================ */

.media-frame {
  position: relative;
  display: block;
  padding: var(--space-sm);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  box-shadow:
    0 4px 6px -1px rgba(var(--shadow-color), var(--alpha-10)),
    0 2px 4px -1px rgba(var(--shadow-color), var(--alpha-5)),
    inset 0 1px 0 rgba(var(--shadow-color-light), var(--alpha-5));
}

.media-frame::before,
.media-frame::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--color-link, var(--color-primary));
  border-style: solid;
  transition: all var(--duration-fast) var(--ease-out);
}

/* Top-left corner bracket */
.media-frame::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

/* Bottom-right corner bracket */
.media-frame::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.media-frame:hover::before,
.media-frame:hover::after {
  width: 12px;
  height: 12px;
  border-color: var(--color-link-hover, var(--color-primary));
}

.media-frame img,
.media-frame iframe,
.media-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Media frame caption */
.media-frame__caption {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-left: 2px solid var(--color-link, var(--color-primary));
}

/* Dark mode enhancements */
[data-theme="dark"] .media-frame,
.dark-mode .media-frame {
  border-color: var(--color-border-light);
  box-shadow:
    0 4px 6px -1px rgba(var(--shadow-color), var(--alpha-30)),
    0 2px 4px -1px rgba(var(--shadow-color), var(--alpha-20)),
    inset 0 1px 0 rgba(var(--shadow-color-light), var(--alpha-5));
}

[data-theme="dark"] .media-frame::before,
[data-theme="dark"] .media-frame::after,
.dark-mode .media-frame::before,
.dark-mode .media-frame::after {
  border-color: var(--color-primary);
}

[data-theme="dark"] .media-frame:hover::before,
[data-theme="dark"] .media-frame:hover::after,
.dark-mode .media-frame:hover::before,
.dark-mode .media-frame:hover::after {
  border-color: var(--color-link-hover, var(--color-primary));
  box-shadow: 0 0 6px var(--color-link-glow, transparent);
}

/* Reduced motion for media frame- consolidated in 0-reset.css */

/* ============================================
   10. HORIZONTAL RULES
   ============================================ */

.page-content hr,
.post-content hr {
  margin: var(--space-xl) 0;
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-border),
    transparent
  );
}

/* ============================================
   11. POST METADATA
   ============================================ */

.post-header {
  margin-bottom: var(--space-lg);
}

/* .post-title defined in 7-typography.css- single source of truth */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.post-meta-separator {
  color: var(--color-border);
}

/* Post tags in metadata */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
  line-height: 1.2;
}

.post-tags a {
  white-space: nowrap;
}

.post-tags::before {
  content: "Tagged";
  margin-right: var(--space-2);
  font-size: 0.8rem;
}

/* ============================================
   12. PROJECT LAYOUT
   ============================================ */

.project-header {
  margin-bottom: var(--space-lg);
}

/* Project title: canonical definition in projects.css */

.project-description {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-lg);
}

.project-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.project-meta-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
}

.project-meta-value {
  font-weight: var(--font-medium);
}

/* Project links */
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-lg);
}

/* ============================================
   13. FOOTNOTES
   ============================================ */

.footnotes {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm);
}

.footnotes::before {
  content: 'Notes';
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  display: block;
  margin-bottom: var(--space-4);
}

.footnotes ol {
  padding-left: var(--space-5);
}

.footnotes li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}

.footnotes li:target {
  background-color: var(--color-primary-highlight);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.footnote-backref {
  font-size: 0.875em;
  margin-left: var(--space-2);
  text-decoration: none;
}

/* ============================================
   14. ABBREVIATIONS
   ============================================ */

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

abbr[title]:hover::after,
abbr[title]:focus::after {
  content: ' (' attr(title) ')';
  font-size: 0.875em;
  color: var(--color-text-secondary);
  font-style: italic;
}

abbr[title]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ============================================
   15. MARK/HIGHLIGHT
   ============================================ */

mark {
  background: linear-gradient(
    120deg,
    var(--color-primary-highlight) 0%,
    var(--color-primary-highlight) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  padding: 0 0.2em;
  color: inherit;
}

/* Text selection- single rule in 7-typography.css */

/* ============================================
   16. IFRAME EMBEDS (Responsive)
   ============================================ */

.embed-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  margin: var(--space-lg) 0;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Print styles consolidated in 9-print.css */
/* ============================================
   8-PAGE-SECTIONS.CSS
   
   Page-Specific Layout Components
   - Homepage Hero
   - Filtered Grid (Projects/Posts)
   - Post Navigation
   - Related Posts
   - List Views
   - Left Panel (Sidebar)
   - Dense Gallery Grid
   ============================================ */

/* ============================================
   1. HOMEPAGE HERO
   ============================================ */

/* --- Mobile Navigation Bar --- */
.mobile-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky, 100);
}

.menu-toggle {
  background: none;
  border: none;
  color: var(--color-text);
  padding: var(--space-xs);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-nav__identity {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-text);
}

.mobile-nav__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.mobile-nav .site-name {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 60rem) {
  .mobile-nav {
    display: none;
  }
}

/* --- Homepage Hero --- */

.welcome-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at center, var(--color-bg-secondary) 0%, var(--color-bg) 100%);
  margin-bottom: var(--space-xl);
  padding: var(--space-xl) var(--space-md);
}

.hero-content {
  max-width: 800px;
  z-index: var(--z-base);
}

.hero-avatar {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-bottom: var(--space-md);
  border: 3px solid var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-bg), 0 0 0 6px var(--color-border);
}

.hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-sm);
  line-height: 1.1;
}

.hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: var(--space-md);
  line-height: 1.1;
}

.hero-description {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.5;
  max-width: 50ch;
  margin: 0 auto var(--space-lg);
}

.hero-keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

/* Hero keywords use .tag .tag--plain with contextual color override */
.hero-keywords .tag {
  color: var(--color-primary);
  background: var(--accent-color-faded, rgba(var(--shadow-color), var(--alpha-5)));
  border-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.hero-content p:not(.hero-description) {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 60ch;
  margin: 0 auto;
}

/* --- Sticky Section Nav (homepage wayfinding) --- */
.section-nav {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-lg);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.section-nav::-webkit-scrollbar {
  display: none;
}

.section-nav__link {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: color var(--duration-fast), background var(--duration-fast);
}

.section-nav__link:hover,
.section-nav__link.active {
  color: var(--color-primary);
  background: var(--accent-color-faded);
}

[data-theme="dark"] .section-nav__link:hover,
[data-theme="dark"] .section-nav__link.active,
.dark-mode .section-nav__link:hover,
.dark-mode .section-nav__link.active {
  background: var(--color-bg-tertiary);
  color: var(--accent-300);
}

/* --- Featured Sections --- */

.featured-section {
  margin-bottom: var(--space-xxl);
  scroll-margin-top: 3rem;
}

.featured-section h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--font-bold, 700);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
}

.featured-section h2 a {
  color: inherit;
  text-decoration: none;
}

.featured-section h2 a:hover {
  color: var(--color-primary);
}

/* ============================================
   2. FILTERED GRID LAYOUT
   (Projects/Posts listings)
   ============================================ */

.filtered-grid-layout,
.post-grid {
  margin: var(--space-xl) 0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

.grid-item {
  position: relative;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-rows: auto 1fr auto auto; /* fallback for browsers without subgrid */
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

.grid-item[hidden] {
  display: none;
}

@supports (grid-template-rows: subgrid) {
  .grid-item {
    grid-template-rows: subgrid;
    grid-row: span 4; /* image, title, desc, meta */
  }
}

/* Hover + focus states consolidated in 3-components.css */

/* Card link wraps entire grid-item content */
.grid-link {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  text-decoration: none;
  color: inherit;
  background-image: none;
}

@supports (grid-template-rows: subgrid) {
  .grid-link {
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}

/* Image wrapper — positions badge overlay */
.grid-image-wrap {
  position: relative;
}

.grid-image {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  isolation: isolate;
  min-height: 0;
}

.grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--duration-normal) var(--ease-out);
}

/* Badge pill — overlaid on bottom-left of image area */
.grid-badge {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: var(--font-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px var(--space-sm);
  border-radius: var(--radius-sm);
  line-height: 1.4;
  background: var(--badge-bg, rgba(20, 20, 20, 0.88));
  color: var(--badge-color, #fff);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 1;
}

/* Inline badge variant — for use outside image overlay (e.g. thread timeline) */
.grid-badge--inline {
  position: static;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  pointer-events: auto;
}

/* Synchronized hover: image scales with container movement */
.grid-item:hover .grid-image img,
.grid-item:focus-within .grid-image img,
.related-post-card:hover .related-post-image img,
.related-post-card:focus-within .related-post-image img {
  transform: scale(1.05);
}

.grid-content {
  padding: var(--space-md);
  display: grid;
  grid-template-rows: auto 1fr auto; /* fallback for browsers without subgrid */
}

@supports (grid-template-rows: subgrid) {
  .grid-content {
    grid-template-rows: subgrid;
    grid-row: span 3; /* title, desc, meta */
  }
}

/* Imageless card placeholder — matches .grid-image aspect-ratio */
.grid-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
}

.grid-image__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold, 600);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

.grid-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-semibold, 600);
  margin-bottom: var(--space-xs);
  color: var(--color-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.grid-description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta section — two-line: info row (badge + date + read time), then tags row */
.grid-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  align-self: end;
}

/* Info line: badge, date, reading time — horizontal */
.grid-meta__info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.grid-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-semibold, 600);
}

.grid-reading-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Tags line — separate row below info */
.grid-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}

.grid-tags-overflow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-style: italic;
  align-self: center;
}

/* .grid-tag replaced by .tag .tag-sm .tag--plain (design system) */

/* --- Density variants --- */

/* Compact: image + title + meta (no description, no tags) */
.grid-item[data-density="compact"] {
  grid-template-rows: auto 1fr auto;
}

.grid-item[data-density="compact"] .grid-link {
  grid-template-rows: auto 1fr auto;
}

.grid-item[data-density="compact"] .grid-content {
  grid-template-rows: auto auto;
}

@supports (grid-template-rows: subgrid) {
  .grid-item[data-density="compact"] {
    grid-row: span 3; /* image, title, meta */
  }
  .grid-item[data-density="compact"] .grid-link {
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  .grid-item[data-density="compact"] .grid-content {
    grid-template-rows: subgrid;
    grid-row: span 2; /* title, meta */
  }
}

/* Minimal: title + date only, no image, simple flex card */
.grid-item[data-density="minimal"] {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  box-shadow: none;
}

.grid-item[data-density="minimal"] .grid-link {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) var(--space-md);
}

.grid-item[data-density="minimal"] .grid-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0;
}

.grid-item[data-density="minimal"] .grid-title {
  font-size: var(--text-sm);
  margin-bottom: 0;
}

.grid-item[data-density="minimal"] .grid-meta {
  border-top: none;
  padding-top: 0;
}

.grid-item[data-density="minimal"]:hover,
.grid-item[data-density="minimal"]:focus-within {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background-color: var(--color-bg-secondary);
  box-shadow: var(--shadow-md);
}

/* --- Grid container modifiers --- */

/* Compact grid for related posts, smaller cards */
.grid-container--compact {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .grid-container--compact {
    grid-template-columns: 1fr;
  }
}

/* Override content-area styles when grid is nested inside .page-content/.post-content
   (e.g. via shortcode). Content CSS targets h3/img with higher specificity. */
:is(.page-content, .post-content, .content-body) .grid-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold, 600);
  margin-top: 0;
  margin-bottom: var(--space-xs);
  letter-spacing: normal;
  line-height: 1.3;
  border: none;
  padding: 0;
}

:is(.page-content, .post-content, .content-body) .grid-image img {
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}

:is(.page-content, .post-content, .content-body) .grid-description {
  font-size: var(--text-sm);
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

.grid-more {
  text-align: center;
  margin-top: var(--space-xl);
}

/* .more-link replaced by .btn .btn-secondary (design system) */

/* ============================================
   3. POST NAVIGATION (Prev/Next)
   ============================================ */

.post-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 600px) {
  .post-nav {
    grid-template-columns: 1fr 1fr;
  }
}

.post-nav-prev,
.post-nav-next {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}

.post-nav-prev:hover,
.post-nav-prev:focus-visible,
.post-nav-next:hover,
.post-nav-next:focus-visible {
  border-color: var(--color-primary);
  background-color: var(--color-bg-secondary);
}

.post-nav-prev:focus-visible,
.post-nav-next:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.post-nav-next {
  text-align: right;
  align-items: flex-end;
}

.post-nav-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.post-nav-title {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: 1.3;
}

/* ============================================
   4. RELATED POSTS
   ============================================ */

.related-posts {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: var(--border-width-accent) solid var(--color-primary);
}

.related-posts__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.related-posts__title::before {
  content: '→';
  color: var(--color-primary);
  vertical-align: middle;
}

.related-posts__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-posts__list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px dashed var(--color-border);
}

.related-posts__list li:last-child {
  border-bottom: none;
}

.related-posts__list a {
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--duration-fast);
}

.related-posts__list a:hover,
.related-posts__list a:focus-visible {
  color: var(--color-primary);
}

.related-posts__list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.related-posts__list a::before {
  content: '•';
  color: var(--color-primary);
}

/* ============================================
   5. LIST VIEWS (Posts/Projects)
   ============================================ */

.post-list,
.projects-list {
  margin: var(--space-xl) 0;
}

.post-preview,
.project-preview {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.post-preview:last-child,
.project-preview:last-child {
  border-bottom: none;
}

.post-preview__title,
.project-preview__title {
  margin-bottom: var(--space-sm);
}

.post-preview__title a,
.project-preview__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.post-preview__title a:hover,
.project-preview__title a:hover {
  color: var(--color-primary);
}

.post-preview__excerpt,
.project-preview__excerpt {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
  max-width: var(--content-max-width);
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  transition: gap var(--duration-fast), background var(--duration-fast);
}

.read-more:hover,
.read-more:focus-visible {
  background: var(--accent-color-faded, rgba(var(--shadow-color), var(--alpha-5)));
  gap: var(--space-sm);
}

/* ============================================
   6. LEFT PANEL (Sidebar)
   ============================================ */

.left-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--panel-bg-color, var(--primary-600));
  position: relative;
  overflow: hidden;
  color: rgb(var(--shadow-color-light));
  text-align: center;
}

/* Wrapper — full height flex column */
.left-panel__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  width: 100%;
}

/* ── Middle group: identity + nav — vertically centered ── */
.left-panel__middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: auto;
}

/* Background image layer — sits above fallback color */
.left-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--panel-bg-image, none);
  background-size: cover;
  background-position: center;
  /* background-attachment: scroll avoids unnecessary compositing on fixed panel */
  z-index: 0;
}

/* Gradient overlay — sits above background image */
.left-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
}

/* Dark mode: slightly heavier overlay */
[data-theme="dark"] .left-panel::before,
.dark-mode .left-panel::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* Content sits above both pseudo-elements */
.left-panel > * {
  position: relative;
  z-index: 2;
}

/* ── Identity block: avatar + title + tagline — anchored to top ── */
.left-panel__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.left-panel__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(var(--shadow-color-light), var(--alpha-30));
  margin-bottom: var(--space-sm);
  object-fit: cover;
}

.left-panel__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: rgb(var(--shadow-color-light));
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.left-panel__title a {
  color: inherit;
  text-decoration: none;
}

.left-panel__tagline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(var(--shadow-color-light), 0.75);
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* ── Navigation — below identity with subtle separator ── */
.left-panel__nav {
  width: 100%;
  max-width: 14rem;
  text-align: center;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(var(--shadow-color-light), 0.15);
}

.left-panel__nav > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left-panel__nav li {
  margin-bottom: 2px;
}

.left-panel__nav a {
  color: rgba(var(--shadow-color-light), var(--alpha-70));
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  padding: var(--space-xs) var(--space-sm);
  min-height: var(--touch-target-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast),
              background var(--duration-fast);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.left-panel__nav a:hover {
  color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-300) 10%, transparent);
}

.left-panel__nav a:active {
  color: var(--accent-200);
  background: color-mix(in srgb, var(--accent-300) 15%, transparent);
}

.left-panel__nav a:focus-visible {
  outline: 2px solid var(--accent-300);
  outline-offset: 1px;
}

/* Active page — accent pill */
.left-panel__nav a.active {
  color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-300) 12%, transparent);
  font-weight: var(--font-semibold);
  border-left: var(--border-width-rule) solid var(--accent-300);
  padding-left: calc(var(--space-sm) - 3px);
}

/* Sub-navigation (e.g. Tags under Articles) */
.left-panel__subnav {
  padding-left: var(--space-sm);
  margin-top: 0;
}

.left-panel__subnav li {
  margin-bottom: 0;
}

.left-panel__subnav a {
  font-size: 0.8rem;
  color: rgba(var(--shadow-color-light), var(--alpha-70));
  letter-spacing: 0.1em;
}

.left-panel__subnav a:hover {
  color: var(--accent-300);
}

.left-panel__subnav a.active {
  color: var(--accent-300);
  opacity: 1;
}

/* ── Bottom block: social + utilities — pinned to bottom ── */
.left-panel__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  width: 100%;
}

/* --- Social links row --- */
.left-panel__social {
  width: 100%;
}

.left-panel__social .social-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.left-panel__social li {
  display: flex;
  justify-content: center;
}

.left-panel__social a {
  color: rgba(var(--shadow-color-light), var(--alpha-50));
  font-size: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast),
              background var(--duration-fast);
  text-decoration: none;
}

.left-panel__social a svg {
  width: 1.25rem;
  height: 1.25rem;
}

.left-panel__social a:hover {
  color: rgba(var(--shadow-color-light), var(--alpha-80));
  background: color-mix(in srgb, var(--accent-300) 8%, transparent);
}

.left-panel__social a:active {
  color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-300) 12%, transparent);
}

.left-panel__social a:focus-visible {
  outline: 2px solid var(--accent-300);
  outline-offset: 1px;
}

/* --- Utilities row (Search + Theme Toggle) --- */
.left-panel__utilities {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(var(--shadow-color-light), 0.15);
}

/* Unified icon button style for sidebar utilities */
.left-panel__icon-btn {
  color: rgba(var(--shadow-color-light), var(--alpha-70));
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--duration-fast),
              background var(--duration-fast);
}

.left-panel__icon-btn:hover {
  color: var(--accent-300);
  background: color-mix(in srgb, var(--accent-300) 10%, transparent);
}

.left-panel__icon-btn:active {
  color: var(--accent-200);
  background: color-mix(in srgb, var(--accent-300) 15%, transparent);
}

.left-panel__icon-btn:focus-visible {
  outline: 2px solid var(--accent-300);
  outline-offset: 1px;
}

/* Override theme toggle sizing in sidebar context */
.left-panel__utilities .theme-toggle {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(var(--shadow-color-light), var(--alpha-70));
}

.left-panel__utilities .theme-toggle:hover {
  background: color-mix(in srgb, var(--accent-300) 10%, transparent);
  border-color: transparent;
  color: var(--accent-300);
  transform: none;
}

/* Hide social links on mobile (shown in footer instead) */
@media (max-width: 59.99rem) {
  .left-panel__social {
    display: none;
  }
}

/* ============================================
   7. POSTS LIST COMPONENT
   ============================================ */

.posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.posts-list__item {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.posts-list__item:last-child {
  border-bottom: none;
}

.posts-list__date {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.posts-list__date::before,
.posts-list__date::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-light);
}

.posts-list__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

/* Card link wraps image + date + title + excerpt */
.posts-list__link {
  display: block;
  text-decoration: none;
  color: inherit;
  background-image: none;
}

.posts-list__link:hover .posts-list__title,
.posts-list__link:focus-visible .posts-list__title {
  color: var(--color-primary);
}

.posts-list__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.posts-list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ============================================
   POSTS LIST IMAGE
   ============================================ */

.posts-list__image {
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Position for pseudo-element effects */
  position: relative;
  /* Synchronized transition */
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}

.posts-list__image img {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  display: block;
  /* Synchronized transition timing */
  transition: transform var(--duration-normal) var(--ease-out);
}

/* Synchronized hover: container and image together */
.posts-list__link:hover .posts-list__image,
.posts-list__link:focus .posts-list__image {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.posts-list__link:hover .posts-list__image img,
.posts-list__link:focus .posts-list__image img {
  transform: scale(1.05);
}

/* Responsive adjustments */
@media (min-width: 768px) {
  .posts-list__image img {
    max-height: 240px;
  }
}

/* Empty states: use .empty-state from 3-components.css */

/* ============================================
   8. BACKLINKS
   ============================================ */

.backlinks {
  margin-top: var(--space-xl);
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: var(--border-width-accent) solid var(--color-primary);
}

.backlinks__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.backlinks__title::before {
  content: '←';
  color: var(--color-primary);
}

.backlinks__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.backlinks__item {
  padding: var(--space-xs) 0;
  border-bottom: 1px dashed var(--color-border);
}

.backlinks__item:last-child {
  border-bottom: none;
}

.backlinks__link {
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--duration-fast);
}

.backlinks__link:hover,
.backlinks__link:focus-visible {
  color: var(--color-primary);
}

.backlinks__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.backlinks__link::before {
  content: '•';
  color: var(--color-primary);
}

/* ============================================
   9. ABOUT PAGE
   ============================================ */

.about-page {
  max-width: var(--content-max-width);
}

.about-content {
  font-size: var(--text-base);
  line-height: 1.7;
}

.about-content p {
  margin-bottom: var(--space-md);
}

/* ============================================
   10. TOC (Table of Contents)
   Compact, better spacing
   ============================================ */

.toc {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-lg) 0;
  border: 1px solid var(--color-border-light);
}

.toc-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold, 600);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.toc ul {
  list-style: none;
  padding-left: var(--space-sm);
  margin: 0;
  font-size: var(--text-xs);
}

.toc > ul {
  padding-left: 0;
}

.toc li {
  margin-bottom: var(--space-sm);
  line-height: 1.5;
}

.toc a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-xs);
  display: block;
  padding: calc(var(--space-xs) / 2) 0;
  border-left: 2px solid transparent;
  padding-left: var(--space-sm);
  margin-left: calc(-1 * var(--space-sm));
  transition: border-color var(--duration-fast), color var(--duration-fast);
}

.toc a:hover,
.toc a:focus-visible {
  border-left-color: var(--color-primary);
  color: var(--color-primary);
}

.toc a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}

/* ============================================
   11. DENSE GALLERY GRID (Masonry-lite)
   ============================================ */

.gallery-dense {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: dense;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.gallery-dense img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform var(--duration-normal);
  aspect-ratio: 16/9;
}

/* ============================================
   12. TAXONOMY PAGES (Tags, Categories)
   ============================================ */

/* --- Taxonomy List (for _default/taxonomy.html) --- */
.taxonomy-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-lg);
}

/* --- Tags Cloud (for tags/list.html) --- */
.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-lg);
}

/* --- Categories Cloud (for categories/list.html) --- */
.categories-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-lg);
}

/* --- Term Page Navigation --- */
.term-nav {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--border-subtle);
}

.gallery-dense img:hover {
  transform: scale(1.02);
}

/* Spanning modifiers */
.gallery-item--wide { grid-column: span 2; }
.gallery-item--tall { grid-row: span 2; }
.gallery-item--big  { grid-column: span 2; grid-row: span 2; }

@media (max-width: 600px) {
  /* Reset spans on mobile */
  .gallery-item--wide,
  .gallery-item--tall,
  .gallery-item--big {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ============================================
   13. FOOTER STYLES
   ============================================ */

/* --- Layout --- */
.footer-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* --- Sections: visually distinct groups --- */
.footer-section {
  padding: var(--space-md);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}

.footer-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
  font-weight: var(--font-semibold, 600);
}

/* --- Compact card grid (recent posts) --- */
.footer-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
}

.footer-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  background: var(--color-bg);
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.footer-card:hover,
.footer-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background-color: var(--color-bg-secondary);
  box-shadow: var(--shadow-md);
}

.footer-card:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.footer-card__title {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.footer-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* --- Mobile group: nav + social side by side --- */
.footer-mobile-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 480px) {
  .footer-mobile-group {
    grid-template-columns: 1fr;
  }
}

/* Hide nav/social on desktop- sidebar already has them */
@media (min-width: 60rem) {
  .footer-mobile-only {
    display: none;
  }
}

/* --- Nav list --- */
.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav__list a {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-nav__list a:hover {
  color: var(--color-link, var(--color-primary));
}

/* --- Social list --- */
.footer-social-section .social-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-rss {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-rss:hover {
  color: var(--color-link, var(--color-primary));
}

/* --- Attribution: centered --- */
.footer-attribution {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
  max-width: 40rem;
  margin-inline: auto;
}

.footer-attribution p {
  margin: 0;
  line-height: var(--leading-relaxed, 1.75);
}

.footer-attribution a {
  display: inline !important;
  white-space: normal !important;
}

.footer-attribution img {
  display: inline !important;
  vertical-align: text-bottom;
  height: 22px !important;
  margin-left: 3px;
}

/* --- General footer link styles --- */
.site-footer a {
  white-space: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.site-footer img {
  display: inline-block;
  height: 22px;
  vertical-align: middle;
}

/* ============================================
   EXTERNAL STUB PAGES
   Redirect pages for external publications/projects
   ============================================ */

.external-stub {
  max-width: 42rem;
}

.external-stub__header {
  margin-bottom: var(--space-lg);
}

.external-stub__header .post-title {
  margin-bottom: var(--space-sm);
}

.external-stub__description {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-text-secondary, var(--text-700));
  margin-bottom: var(--space-lg);
}

.external-stub__body {
  margin-bottom: var(--space-lg);
}

.external-stub__cta {
  margin: var(--space-xl) 0;
}

.external-stub__cta .btn svg {
  flex-shrink: 0;
}

.external-stub__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border, var(--background-200));
}

.external-stub__tags .tag {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary, var(--background-100));
  color: var(--color-text-secondary, var(--text-700));
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.external-stub__tags .tag:hover {
  background: var(--color-bg-tertiary, var(--background-200));
}

/* ============================================
   15. YEAR-BASED POST GROUPING
   (Consolidated from theme-enhancements.css)
   ============================================ */

.posts-by-year {
  max-width: var(--content-wide-max-width);
  margin: 0 auto;
}

.year-group {
  margin-bottom: var(--space-lg);
}

.year-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
}

.year-heading .anchor-link {
  opacity: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: opacity var(--duration-fast);
}

.year-heading:hover .anchor-link {
  opacity: 1;
}

.posts-year-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ============================================
   16. COMPACT POST LIST ITEMS
   (Consolidated from theme-enhancements.css)
   ============================================ */

.post-list-compact {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.post-list-compact:last-child {
  border-bottom: none;
}

.post-list-compact__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  text-decoration: none;
  gap: var(--space-md);
  transition: color var(--duration-fast);
}

.post-list-compact__link:hover,
.post-list-compact__link:focus-visible {
  color: var(--color-primary);
}

.post-list-compact__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.post-list-compact__link:hover .post-list-compact__title,
.post-list-compact__link:focus-visible .post-list-compact__title {
  color: var(--color-primary);
}

.post-list-compact__title {
  font-weight: 500;
  color: var(--color-text);
  font-size: var(--text-base);
  transition: color var(--duration-fast);
}

.post-list-compact__meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.post-list-compact__meta time {
  font-variant-numeric: tabular-nums;
}

.post-list-compact__tags {
  display: flex;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: var(--space-xs) 0 0 0;
  font-size: var(--text-xs);
}

.post-list-compact__tags a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.post-list-compact__tags a:hover {
  color: var(--color-primary);
}

.post-list-compact__tags-more {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-style: italic;
}

@media (max-width: 600px) {
  .post-list-compact__link {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .post-list-compact__meta {
    font-size: var(--text-xs);
  }
}

/* ============================================
   17. POST ADDONS SYSTEM
   (Consolidated from theme-enhancements.css)
   ============================================ */

.post-addons {
  margin-top: var(--space-xxl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.addon {
  margin-bottom: var(--space-lg);
}

.addon-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold, 600);
  margin-bottom: var(--space-md);
  color: var(--color-text);
}

/* Author About Addon */
.author-card {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.author-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.author-info {
  flex: 1;
}

.author-name {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.author-bio {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.author-social {
  display: flex;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.author-social a {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.author-social a:hover {
  color: var(--color-primary);
}

/* Related Posts Addon */
.related-posts-addon {
  margin-bottom: var(--space-lg);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-post-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

@supports (grid-template-rows: subgrid) {
  .related-post-card {
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}

/* Hover + focus states consolidated in 3-components.css */

.related-post-link {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  text-decoration: none;
  color: inherit;
}

@supports (grid-template-rows: subgrid) {
  .related-post-link {
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}

.related-post-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  isolation: isolate;
}

.related-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-normal) var(--ease-out);
}

/* Related post image zoom: consolidated above with grid-item */

.related-post-content {
  padding: var(--space-md);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

@supports (grid-template-rows: subgrid) {
  .related-post-content {
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
}

.related-post-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin: 0 0 var(--space-xs) 0;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-post-desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm) 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-post-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  align-self: end;
}

/* ============================================
   18. IMMERSIVE SIDEBAR - Cinematic Entrance Effect
   (Consolidated from immersive-sidebar.css)

   Specificity strategy: uses higher-specificity selectors
   to naturally outrank competing rules in sections above
   and 2-layout.css, eliminating the need for !important.
   ============================================ */

/* Scroll lock during immersive overlay */
body[data-immersive-state="true"] {
  overflow: hidden !important;
  height: 100vh;
  height: 100dvh;
  animation: immersive-unlock-scroll 0s 4s forwards;
}

@keyframes immersive-unlock-scroll {
  to {
    overflow: auto;
    height: auto;
  }
}

/* Default state - Fixed sidebar */
@media screen and (min-width: 60rem) {
  #sidebar-container .left-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 20rem;
    height: 100vh;
    height: 100dvh;
    z-index: 100;
    overflow-y: auto;
  }

  .layout-wrapper #main-content {
    margin-left: 20rem;
    opacity: 1;
    transform: none;
  }
}

/* Initial full-viewport overlay state */
@media screen and (min-width: 60rem) {
  #sidebar-container .left-panel[data-immersive="true"] {
    width: 100vw;
    width: 100dvw;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: width var(--duration-slow) var(--ease-out);
    overflow-y: auto;
    padding: var(--space-xl) var(--space-lg);
  }

  #sidebar-container .left-panel[data-immersive="true"] a,
  #sidebar-container .left-panel[data-immersive="true"] button {
    pointer-events: auto;
    position: relative;
    z-index: 1;
  }

  #sidebar-container .left-panel[data-immersive="true"] .left-panel__content {
    transform: scale(1.1);
    transition: transform var(--duration-slow) var(--ease-out);
  }

  #sidebar-container .left-panel[data-immersive="true"] .left-panel__title {
    font-size: 2.5rem;
    transition: font-size var(--duration-slow) var(--ease-out);
  }

  body[data-immersive-state="true"] .layout-wrapper #main-content {
    opacity: 0;
    margin-left: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out), margin-left var(--duration-slow) var(--ease-out);
  }

  body[data-immersive-state="true"] #main-content .nav-bar {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Morphed state */
@media screen and (min-width: 60rem) {
  #sidebar-container .left-panel[data-immersive="morphed"] {
    width: 20rem;
    z-index: 100;
    transition: width var(--duration-slow) var(--ease-out);
    padding: var(--space-xl) var(--space-6);
  }

  #sidebar-container .left-panel[data-immersive="morphed"] .left-panel__content {
    transform: scale(1);
    transition: transform var(--duration-slow) var(--ease-out);
  }

  #sidebar-container .left-panel[data-immersive="morphed"] .left-panel__title {
    font-size: 2rem;
  }

  body[data-immersive-state="morphed"] .layout-wrapper #main-content,
  body[data-immersive-state="complete"] .layout-wrapper #main-content {
    opacity: 1;
    margin-left: 20rem;
    pointer-events: auto;
  }
}

/* Scroll indicator */
@media screen and (min-width: 60rem) {
  .scroll-indicator {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-inverse, rgba(255, 255, 255, 0.85));
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 1;
    transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
    pointer-events: none;
    z-index: var(--z-lightbox);
  }

  #sidebar-container .left-panel[data-immersive="morphed"] .scroll-indicator,
  #sidebar-container .left-panel[data-immersive="complete"] .scroll-indicator,
  body[data-immersive-state="complete"] .scroll-indicator,
  body[data-immersive-state="morphed"] .scroll-indicator {
    opacity: 0;
    transform: translateY(20px);
  }

  .scroll-indicator__chevron {
    width: 30px;
    height: 40px;
    position: relative;
  }

  .scroll-indicator__chevron::before,
  .scroll-indicator__chevron::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(-50%) rotate(45deg);
    animation: bounce-chevron 2s ease-in-out infinite;
  }

  .scroll-indicator__chevron::before { top: 0; animation-delay: 0s; }
  .scroll-indicator__chevron::after { top: 10px; animation-delay: 0.2s; opacity: 0.6; }

  @keyframes bounce-chevron {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) rotate(45deg) translateY(0); }
    40% { transform: translateX(-50%) rotate(45deg) translateY(10px); }
    60% { transform: translateX(-50%) rotate(45deg) translateY(5px); }
  }
}

@media screen and (max-width: 60rem) {
  body .scroll-indicator { display: none; }
}

/* ============================================
   18b. NATURE-OF-WORK FILTER
   Pill buttons for filtering by natureofwork
   ============================================ */

.nature-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

/* .nature-filter__btn replaced by .tag .tag--plain (design system) */

/* Portfolio filters removed - now uses work-filters pattern from 3-components.css */

/* ============================================
   20. THREADS
   Landing page grid, single thread timeline,
   and homepage preview cards.
   (Moved from 3-components.css - page-specific layout)
   ============================================ */

/* Thread intro text on landing page */
.thread-intro {
  max-width: 65ch;
  margin-bottom: var(--space-8);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Landing page: grid of thread cards */
.threads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.thread-card {
  display: block;
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-left: var(--border-width-rule) solid var(--thread-accent, var(--color-primary));
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.thread-card:hover,
.thread-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--thread-accent, var(--color-primary));
  box-shadow: var(--shadow-md);
}

.thread-card:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.thread-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
}

.thread-card__description {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
  line-height: 1.5;
}

.thread-card__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Single thread: narrative text */
.thread-narrative {
  max-width: 65ch;
  margin-bottom: var(--space-8);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Single thread: ordered post sequence (vertical timeline) */
.thread-sequence {
  list-style: none;
  padding: 0;
  border-left: 2px solid var(--color-border-light);
  margin-left: var(--space-4);
}

.thread-sequence__item {
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
  position: relative;
}

/* Last item: terminate the timeline — cover the border below the dot */
.thread-sequence__item:last-child {
  margin-bottom: 0;
}

.thread-sequence__item:last-child::after {
  content: '';
  position: absolute;
  left: -2px;
  top: calc(var(--space-4) + 8px);
  bottom: 0;
  width: 2px;
  background: var(--color-bg);
}

.thread-sequence__item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: var(--space-4);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

.thread-post {
  display: block;
}

.thread-post__image {
  flex-shrink: 0;
  width: 120px;
}

.thread-post__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm, 4px);
  object-fit: cover;
}

.thread-post__content h2 {
  margin: 0 0 var(--space-1);
  font-size: 1rem;
  font-weight: var(--font-semibold);
}

/* Card link wraps image + content */
.thread-post__link {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  background-image: none;
}

.thread-post__link:hover h2,
.thread-post__link:focus-visible h2 {
  color: var(--color-primary);
}

.thread-post__content p {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}

.thread-post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Homepage: thread preview cards (grid) */
.threads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .threads-grid {
    grid-template-columns: 1fr;
  }
}

.thread-preview-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--thread-accent, var(--color-primary));
  text-decoration: none;
  color: inherit;
  background-image: none;
  border-radius: var(--radius-md);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.thread-preview-card:hover,
.thread-preview-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.thread-preview-card:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.thread-preview-card h3 {
  font-size: 0.95rem;
  margin: 0 0 var(--space-xs);
  font-weight: var(--font-semibold);
}

.thread-preview-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm);
  line-height: 1.5;
  flex: 1;
}

.thread-preview-card__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: auto;
}

/* Responsive: thread sequence stacks on mobile */
@media (max-width: 39.99rem) {
  .thread-post__link {
    flex-direction: column;
  }

  .thread-post__image {
    width: 100%;
    max-width: 200px;
  }

  .thread-sequence {
    margin-left: var(--space-2);
  }

  .thread-sequence__item {
    padding-left: var(--space-4);
  }

  .threads-grid {
    grid-template-columns: 1fr;
  }
}

/* Dark mode: thread sequence */
[data-theme="dark"] .thread-sequence,
.dark-mode .thread-sequence {
  border-left-color: var(--color-border);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .thread-card {
    transition: none;
  }
}

/* ============================================
   21. NAV PRIMARY / SECONDARY SPLIT
   Secondary items (Portfolio, Résumé) are visually
   demoted so the carrier bag nav reads first.
   (Moved from 3-components.css - layout concern)
   ============================================ */

/* Nav bar secondary styles: moved to 3-components.css */

/* Left panel sidebar: secondary items smaller + muted */
.left-panel__nav li.nav-secondary:first-of-type {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(var(--shadow-color-light), var(--alpha-15));
}

.left-panel__nav li.nav-secondary a {
  font-size: 0.7rem;
  opacity: 0.55;
}

.left-panel__nav li.nav-secondary a:hover {
  opacity: var(--opacity-hover);
}

/* ============================================
   22. SOCIAL FEED (generic RSS/Atom shortcode)
   ============================================ */

.social-feed {
  margin: var(--space-lg) 0;
}

.social-feed__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-semibold, 600);
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

.social-feed__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 600px) {
  .social-feed__cards {
    grid-template-columns: 1fr;
  }
}

/* Anchor permalink — top-right of card, visible on hover */
.social-feed__anchor {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold, 600);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--duration-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.social-feed__cards .grid-item:hover .social-feed__anchor,
.social-feed__anchor:focus-visible {
  opacity: 1;
}

.social-feed__anchor:hover {
  color: var(--color-primary);
  background: var(--color-bg);
}

.social-feed__error {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--text-sm);
}
/* ============================================
   NUTSHELL.CSS

   Styles for Nutshell expandable inline sections.
   Original: Nicky Case (ncase/nutshell, MIT)
   Restyled to use site design tokens.

   Components:
   1. Expandable links & indicator balls
   2. Bubbles (speech-bubble containers)
   3. Bubble content & overflow
   4. Preview truncation
   5. Close all button
   6. Reduced motion
   ============================================ */

/* ============================================
   1. EXPANDABLE LINKS
   ============================================ */

.nutshell-expandable {
  color: inherit;
  text-decoration: none;
  border-bottom: dotted 1.5px var(--color-text-muted);
  position: relative;
  transition: opacity var(--duration-fast) var(--ease-out);
  opacity: 1;
  cursor: pointer;
}

.nutshell-expandable:hover {
  color: inherit;
  opacity: 0.8;
}

.nutshell-expandable .nutshell-expandable-text {
  padding-left: 0.35em;
}

/* Animated indicator balls */
.nutshell-ball-up,
.nutshell-ball-down {
  position: absolute;
  display: inline-block;
  left: 1px;
  width: 0.15em;
  height: 0.15em;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: top var(--duration-fast) var(--ease-out);
}

/* Ball positions- unified cross-browser */
.nutshell-expandable[mode=closed] .nutshell-ball-up   { top: 0.3em; }
.nutshell-expandable[mode=closed] .nutshell-ball-down  { top: 0.6em; }
.nutshell-expandable[mode=closed]:hover .nutshell-ball-up   { top: 0.1em; }
.nutshell-expandable[mode=closed]:hover .nutshell-ball-down  { top: 0.8em; }
.nutshell-expandable[mode=open] .nutshell-ball-up    { top: 0.3em; }
.nutshell-expandable[mode=open] .nutshell-ball-down   { top: 0.6em; }
.nutshell-expandable[mode=open]:hover .nutshell-ball-up    { top: 0.45em; }
.nutshell-expandable[mode=open]:hover .nutshell-ball-down   { top: 0.45em; }

/* Reading context line inside bubble ("you were reading...") */
.nutshell-bubble-context {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.7;
  border-bottom: 1px solid var(--color-border-light);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-style: italic;
}

/* ============================================
   2. BUBBLES
   ============================================ */

.nutshell-bubble {
  display: inline-block;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  margin-top: var(--space-6);
  top: 0;
  transition: top var(--duration-normal) linear;
  box-shadow: var(--shadow-card);
}

/* Speech-bubble arrow (outline) */
.nutshell-bubble-arrow {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid var(--color-border);
  position: absolute;
  top: -20px;
  pointer-events: none;
  --arrow-background: var(--color-bg);
}

/* Speech-bubble arrow (fill) */
.nutshell-bubble-arrow::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid var(--color-bg);
  border-bottom-color: var(--arrow-background);
  position: absolute;
  top: 1.5px;
  left: -20px;
  pointer-events: none;
}

/* ============================================
   3. BUBBLE CONTENT & OVERFLOW
   ============================================ */

/* Overflow container- handles open/close animation */
.nutshell-bubble-overflow {
  overflow: hidden;
}

.nutshell-bubble-overflow[mode=opening] {
  transition: height var(--duration-normal) var(--ease-out);
}

.nutshell-bubble-overflow[mode=closing] {
  transition: height var(--duration-normal) ease-in;
}

/* Section content area */
.nutshell-bubble-overflow-section {
  padding: 0 var(--space-md);
  padding-bottom: var(--space-sm);
  overflow: hidden;
}

.nutshell-bubble-overflow-section > div {
  margin: var(--space-md) 0;
}

.nutshell-bubble-overflow-section img,
.nutshell-bubble-overflow-section video {
  max-width: 100%;
}

.nutshell-bubble-overflow-section img[data-float=left] {
  float: left;
  margin: var(--space-md);
}

.nutshell-bubble-overflow-section img[data-float=right] {
  float: right;
  margin: var(--space-md);
}

.nutshell-bubble-overflow-section iframe {
  max-width: 100%;
  border: 1px solid var(--color-border-light);
}

/* Recursive nested bubbles- stretch to fill parent */
.nutshell-bubble-overflow-section .nutshell-bubble {
  width: calc(100% + 2em - 6px);
  position: relative;
  right: calc(1em - 2px);
}

/* Source attribution ("from url...") */
.nutshell-bubble-from {
  font-size: var(--text-xs);
  margin-bottom: -0.69em;
  opacity: var(--alpha-70);
}

/* Close button at bottom of bubble */
.nutshell-bubble-overflow-close {
  font-family: inherit;
  font-size: var(--text-sm);
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: var(--alpha-30);
  transition: opacity var(--duration-fast) var(--ease-out);
}

.nutshell-bubble-overflow-close:hover {
  background: none;
  opacity: 1;
}

/* Content styling within bubbles */
.nutshell-bubble li {
  margin-bottom: var(--space-sm);
}

.nutshell-bubble code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  padding: 0.2em var(--space-xs);
}

.nutshell-bubble blockquote {
  margin-left: 0;
  margin-right: 0;
  border-left: var(--border-width-rule) solid var(--color-primary);
  background: var(--color-bg-secondary);
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-6);
  margin-top: 0;
  font-style: italic;
}

/* ============================================
   4. PREVIEW TRUNCATION
   ============================================ */

/* Subtle visual distinction from surrounding body text */
.nutshell-bubble-overflow-section > div {
  font-size: 0.92em;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* "Read more" link after truncated preview */
.nutshell-read-more {
  margin-top: var(--space-xs);
  margin-bottom: 0;
  font-size: var(--text-sm);
  text-align: right;
}

.nutshell-read-more a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.nutshell-read-more a:hover {
  opacity: 0.75;
}

/* ============================================
   5. CLOSE ALL NUTSHELLS BUTTON
   ============================================ */

#nutshell-close-all {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-sticky);
  transition: opacity var(--duration-slow) var(--ease-out);
  opacity: 0;
  text-align: right;
  cursor: pointer;
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--space-sm);
  border-radius: 0 0 0 var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

#nutshell-close-all[show=yes] {
  opacity: 1;
}

#nutshell-close-all[show=no] {
  opacity: 0;
}

/* ============================================
   6. REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .nutshell-ball-up,
  .nutshell-ball-down,
  .nutshell-bubble,
  .nutshell-bubble-overflow,
  .nutshell-expandable,
  .nutshell-bubble-overflow-close,
  #nutshell-close-all {
    transition: none !important;
  }
}
/* ============================================
   5-UTILITIES.CSS
   
   Functional Utility Classes
   - Typography utilities
   - Spacing (margin/padding)
   - Visibility & display
   - Measure (line length)
   - Legacy compatibility layer
   ============================================ */

/* ============================================
   1. VISIBILITY & ACCESSIBILITY
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.hidden { display: none !important; }
.invisible { visibility: hidden; }

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ============================================
   2. DISPLAY UTILITIES
   ============================================ */

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* ============================================
   3. TEXT UTILITIES
   ============================================ */

/* Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Transformation */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-normal-case { text-transform: none; }

/* Font Size */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-xxl { font-size: var(--text-xxl); }

/* Font Weight */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: 700; }

/* Font Style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Font Family */
.font-body { font-family: var(--font-body); }
.font-heading { font-family: var(--font-heading); }
.font-mono { font-family: var(--font-mono); }

/* Text Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Text Color */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-body { color: var(--color-text); }

/* --- Editorial Text Utilities --- */
/* .lead class consolidated in 7-typography.css */

.text-faded { color: var(--color-text-muted); }

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================================
   4. SPACING UTILITIES (Margin)
   Using semantic naming (xs, sm, md, lg, xl)
   ============================================ */

/* Margin - All sides */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* Legacy numbered aliases for compatibility */
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }
.mt-6 { margin-top: var(--space-xl); }
.mt-8 { margin-top: var(--space-xl); }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Legacy numbered aliases */
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }
.mb-6 { margin-bottom: var(--space-xl); }
.mb-8 { margin-bottom: var(--space-xl); }

/* Margin Left */
.ml-0 { margin-left: 0; }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }
.ml-auto { margin-left: auto; }

/* Margin Right */
.mr-0 { margin-right: 0; }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }
.mr-auto { margin-right: auto; }

/* Margin X (Left + Right) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin Y (Top + Bottom) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

/* ============================================
   5. SPACING UTILITIES (Padding)
   ============================================ */

/* Padding - All sides */
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Legacy numbered aliases */
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }
.p-6 { padding: var(--space-xl); }
.p-8 { padding: var(--space-xl); }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

/* Padding Left */
.pl-0 { padding-left: 0; }
.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }

/* Padding Right */
.pr-0 { padding-right: 0; }
.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }

/* Padding X */
.px-0 { padding-left: 0; padding-right: 0; }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

/* Padding Y */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* ============================================
   6. MEASURE (Line Length Control)
   ============================================ */

.measure { max-width: var(--content-max-width); }
.measure-narrow { max-width: 45ch; }
.measure-wide { max-width: 80ch; }

/* Legacy aliases */
.max-w-content { max-width: var(--content-max-width); }
.max-w-narrow { max-width: 45ch; }
.max-w-wide { max-width: 80ch; }

/* ============================================
   7. WIDTH & HEIGHT
   ============================================ */

.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }

/* ============================================
   8. POSITION
   ============================================ */

.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ============================================
   9. OVERFLOW
   ============================================ */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }

/* ============================================
   10. BORDER RADIUS
   ============================================ */

.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: calc(var(--radius-md) / 2); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 9999px; }

/* ============================================
   11. BACKGROUND & COLOR
   ============================================ */

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-bg { background-color: var(--color-bg); }
.bg-bg-secondary { background-color: var(--color-bg-secondary); }

/* ============================================
   12. ASPECT RATIOS (Layout Stability)
   ============================================ */

.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-portrait { aspect-ratio: 3 / 4; }

/* Object-fit helper for images */
.object-cover { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

/* ============================================
   13. LAZY LOAD SHIMMER (Performance UI)
   ============================================ */

.img-loading {
  background: linear-gradient(
    110deg, 
    var(--color-bg-secondary) 8%, 
    var(--color-bg-tertiary) 18%, 
    var(--color-bg-secondary) 33%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* Remove animation once loaded */
.img-loading.loaded,
img:not([loading="lazy"]) {
  animation: none;
  background: transparent;
}

/* ============================================
   14. CLEARFIX
   ============================================ */

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================
   15. ASPECT RATIO CONTAINERS (Legacy Fallback)
   (Consolidated from theme-enhancements.css)
   Uses padding-top hack for older browsers;
   prefer .aspect-video/.aspect-square above
   ============================================ */

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
}

.aspect-ratio--16x9 { padding-top: 56.25%; }
.aspect-ratio--4x3 { padding-top: 75%; }
.aspect-ratio--1x1 { padding-top: 100%; }
.aspect-ratio--3x2 { padding-top: 66.66%; }
.aspect-ratio--21x9 { padding-top: 42.857%; }

.aspect-ratio > *,
.aspect-ratio > picture > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ============================================
   DELIGHT.CSS - Fun UI Effects

   This file contains playful interactions.
   Disable by not including it, or set
   --transition-* variables to 0.
   ============================================ */

/* --------------------------------------------------
   STAGGER GRID ANIMATIONS
   CSS-first progressive enhancement with @starting-style

   Default: Items visible immediately (no-JS fallback)
   Progressive enhancement: Animate in when JS ready
   -------------------------------------------------- */

/* Default state: Items always visible (no-JS fallback) */
[data-stagger-item],
.grid-item,
.post-preview,
.project-preview,
.posts-list__item {
  opacity: 1;
  transform: translateY(0);
}

/* Progressive enhancement: Only animate if JS is ready AND reduced motion is not preferred */
@media (prefers-reduced-motion: no-preference) {
  /* When JS is ready, set up starting styles for entry animations */
  .js-ready [data-stagger] > [data-stagger-item],
  .js-ready [data-stagger] > .grid-item,
  .js-ready [data-stagger] > .post-preview,
  .js-ready [data-stagger] > .project-preview,
  .js-ready [data-stagger] > .posts-list__item,
  .js-ready [data-stagger] > li.posts-list__item {
    /* Modern browsers: @starting-style for entry animations */
    @starting-style {
      opacity: 0;
      transform: translateY(20px);
    }

    /* Prepare for animation */
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--duration-normal, 300ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1)),
      transform var(--duration-normal, 300ms) var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
    transition-delay: var(--stagger-delay, 0ms);
  }

  /* Stagger delays: 40ms steps for 1-8, then 20ms diminishing steps, cap at 440ms */
  .js-ready [data-stagger] > :nth-child(1) { --stagger-delay: 0ms; }
  .js-ready [data-stagger] > :nth-child(2) { --stagger-delay: 40ms; }
  .js-ready [data-stagger] > :nth-child(3) { --stagger-delay: 80ms; }
  .js-ready [data-stagger] > :nth-child(4) { --stagger-delay: 120ms; }
  .js-ready [data-stagger] > :nth-child(5) { --stagger-delay: 160ms; }
  .js-ready [data-stagger] > :nth-child(6) { --stagger-delay: 200ms; }
  .js-ready [data-stagger] > :nth-child(7) { --stagger-delay: 240ms; }
  .js-ready [data-stagger] > :nth-child(8) { --stagger-delay: 280ms; }
  .js-ready [data-stagger] > :nth-child(9) { --stagger-delay: 300ms; }
  .js-ready [data-stagger] > :nth-child(10) { --stagger-delay: 320ms; }
  .js-ready [data-stagger] > :nth-child(11) { --stagger-delay: 340ms; }
  .js-ready [data-stagger] > :nth-child(12) { --stagger-delay: 360ms; }
  .js-ready [data-stagger] > :nth-child(13) { --stagger-delay: 380ms; }
  .js-ready [data-stagger] > :nth-child(14) { --stagger-delay: 400ms; }
  .js-ready [data-stagger] > :nth-child(15) { --stagger-delay: 420ms; }
  /* Items 16+ share the cap- diminishing returns prevent perceptible hang */
  .js-ready [data-stagger] > :nth-child(n+16) { --stagger-delay: 440ms; }

  /* Items waiting to be revealed (hidden initially only when JS ready) */
  .js-ready [data-stagger] > [data-stagger-item]:not(.stagger-visible),
  .js-ready [data-stagger] > .grid-item:not(.stagger-visible),
  .js-ready [data-stagger] > .post-preview:not(.stagger-visible),
  .js-ready [data-stagger] > .project-preview:not(.stagger-visible),
  .js-ready [data-stagger] > .posts-list__item:not(.stagger-visible) {
    opacity: 0;
    transform: translateY(20px);
    /* Safety fallback: force-show after 2s if JS fails to add .stagger-visible */
    animation: stagger-fallback 0.01ms forwards;
    animation-delay: 2s;
  }

  @keyframes stagger-fallback {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Reduced motion for stagger items- consolidated in 0-reset.css */

/* Reveal-container stagger: delay driven by --stagger-i set via JS */
.reveal-container > .reveal {
  transition-delay: calc(var(--stagger-i, 0) * 0.1s);
}

/* --------------------------------------------------
   1. READING PROGRESS BAR
   Shows scroll progress for article content
   -------------------------------------------------- */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    var(--color-link, var(--color-primary)) 100%
  );
  z-index: var(--z-max);
  width: 0%;
  transition: width var(--duration-fast, 0.15s) ease-out;
  box-shadow: 0 0 10px var(--color-link-glow);
}

.reading-progress--complete {
  background: linear-gradient(
    90deg,
    var(--color-success) 0%,
    var(--color-primary) 100%
  );
}

/* Hide on mobile for cleaner experience */
@media (max-width: 768px) {
  .reading-progress {
    height: 2px;
  }
}

/* --------------------------------------------------
   2. LINK HOVER EFFECTS
   Consolidated in 7-typography.css
   This file only adds special effects beyond the base
   -------------------------------------------------- */

/* Glow effect for focused links - extends base link styles */
a:not(.btn):not(.nav-link):not(.no-hover):focus-visible {
  box-shadow: 0 0 6px var(--color-link-glow);
}

/* --------------------------------------------------
   3. BUTTON EFFECTS
   Enhanced button effects (base styles in 3-components.css)
   -------------------------------------------------- */

/* Ripple effect on click - extends base button styles */
.btn::after, .button::after, button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(var(--shadow-color-light), var(--alpha-30));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--duration-slow) ease, height var(--duration-slow) ease;
}

.btn:active::after, .button:active::after, button[type="submit"]:active::after {
  width: 300px;
  height: 300px;
}

/* --------------------------------------------------
   4. DARK MODE TRANSITION
   Smooth color scheme switching
   -------------------------------------------------- */

/* Theme toggle transition: scoped to dark-mode switching only.
   Applied via .theme-transitioning class added/removed by DarkMode JS. */
body.theme-transitioning {
  transition:
    background-color var(--duration-normal, 0.3s) ease,
    color var(--duration-normal, 0.3s) ease;
}

/* --------------------------------------------------
   5. CODE BLOCK COPY BUTTON
   Copy code to clipboard functionality
   -------------------------------------------------- */

pre {
  position: relative;
}

.code-copy-btn {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(var(--shadow-color-light), var(--alpha-10));
  border: 1px solid rgba(var(--shadow-color-light), var(--alpha-20));
  border-radius: var(--radius-md);
  color: rgba(var(--shadow-color-light), var(--alpha-80));
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  opacity: var(--opacity-secondary);
  transform: translateY(0);
  transition:
    opacity var(--duration-fast),
    transform var(--duration-fast),
    background-color var(--duration-fast),
    border-color var(--duration-fast),
    color var(--duration-fast);
}

pre:hover .code-copy-btn,
pre:focus-within .code-copy-btn {
  opacity: 1;
  transform: translateY(0);
}

.code-copy-btn:hover {
  background: rgba(var(--shadow-color-light), var(--alpha-20));
  border-color: rgba(var(--shadow-color-light), var(--alpha-30));
  color: rgb(var(--shadow-color-light));
}

.code-copy-btn:focus-visible {
  opacity: 1;
  transform: translateY(0);
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Icon states */
.code-copy-btn .copy-icon {
  display: block;
}

.code-copy-btn .check-icon {
  display: none;
}

.code-copy-btn.copied {
  background: var(--color-success);
  border-color: var(--color-success);
  color: rgb(var(--shadow-color-light));
}

.code-copy-btn.copied .copy-icon {
  display: none;
}

.code-copy-btn.copied .check-icon {
  display: block;
}

.code-copy-btn.error {
  background: var(--color-error);
  border-color: var(--color-error);
}

/* Mobile: always show copy button */
@media (pointer: coarse) {
  .code-copy-btn {
    opacity: 1;
    transform: translateY(0);
    padding: calc(var(--space-xs) * 1.5);
  }

  .code-copy-btn .copy-text {
    display: none;
  }
}


/* --------------------------------------------------
   BACK TO TOP BUTTON
   -------------------------------------------------- */

.back-to-top {
  position: fixed;
  bottom: calc(var(--space-lg) + 48px + var(--space-sm));
  right: var(--space-lg);
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    visibility var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out),
    background-color var(--duration-fast);
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-card);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-bg);
  color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(var(--shadow-color), var(--alpha-20));
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-bg);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-primary);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------
   SECTION DIVIDERS
   -------------------------------------------------- */

.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent
  );
  margin: var(--space-xxl) 0;
  position: relative;
}

.section-divider::after {
  content: "\22C6";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg);
  padding: 0 var(--space-md);
  color: var(--color-primary);
  font-size: var(--text-xl);
}

.section-divider--simple {
  background: var(--color-border);
  margin: var(--space-xl) 0;
}

.section-divider--simple::after {
  display: none;
}

/* Reduced motion support- consolidated in 0-reset.css */
@font-face {
  font-family: 'icomoon';
  src: url('/icomoon/fonts/icomoon.woff?vwjl1k') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-signal:before {
  content: "\e906";
}
.icon-threads:before {
  content: "\e908";
}
.icon-playstation:before {
  content: "\e909";
}
.icon-messenger:before {
  content: "\e90c";
}
.icon-stripe:before {
  content: "\e90d";
}
.icon-slack:before {
  content: "\e90e";
}
.icon-gitlab:before {
  content: "\e910";
}
.icon-line:before {
  content: "\e911";
}
.icon-medium:before {
  content: "\e912";
}
.icon-xbox:before {
  content: "\e901";
}
.icon-wechat:before {
  content: "\e903";
}
.icon-discord:before {
  content: "\e904";
}
.icon-mastodon:before {
  content: "\e905";
}
.icon-twitter:before {
  content: "\1d54f";
}
.icon-book:before {
  content: "\e91f";
}
.icon-library:before {
  content: "\e921";
}
.icon-phone:before {
  content: "\e942";
}
.icon-envelop:before {
  content: "\e945";
}
.icon-location:before {
  content: "\e947";
}
.icon-bubbles:before {
  content: "\e96c";
}
.icon-quotes-right:before {
  content: "\e978";
}
.icon-wrench:before {
  content: "\e991";
}
.icon-trophy:before {
  content: "\e99e";
}
.icon-briefcase:before {
  content: "\e9ae";
}
.icon-earth:before {
  content: "\e9ca";
}
.icon-link:before {
  content: "\e9cb";
}
.icon-star-empty:before {
  content: "\2606";
}
.icon-star-half:before {
  content: "\272e";
}
.icon-star-full:before {
  content: "\2605";
}
.icon-heart:before {
  content: "\e9da";
}
.icon-new-tab:before {
  content: "\ea7e";
}
.icon-amazon:before {
  content: "\ea87";
}
.icon-google:before {
  content: "\ea88";
}
.icon-google-plus:before {
  content: "\ea8b";
}
.icon-google-drive:before {
  content: "\ea8f";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-whatsapp:before {
  content: "\ea93";
}
.icon-spotify:before {
  content: "\ea94";
}
.icon-telegram:before {
  content: "\ea95";
}
.icon-twitter-old:before {
  content: "\ea96";
}
.icon-vine:before {
  content: "\ea97";
}
.icon-vk:before {
  content: "\ea98";
}
.icon-renren:before {
  content: "\ea99";
}
.icon-sina-weibo:before {
  content: "\ea9a";
}
.icon-rss:before {
  content: "\ea9b";
}
.icon-youtube:before {
  content: "\ea9d";
}
.icon-twitch:before {
  content: "\ea9f";
}
.icon-vimeo:before {
  content: "\eaa0";
}
.icon-lanyrd:before {
  content: "\eaa2";
}
.icon-flickr2:before {
  content: "\eaa4";
}
.icon-dribbble:before {
  content: "\eaa7";
}
.icon-behance:before {
  content: "\eaa8";
}
.icon-deviantart:before {
  content: "\eaaa";
}
.icon-500px:before {
  content: "\eaab";
}
.icon-steam:before {
  content: "\eaac";
}
.icon-dropbox:before {
  content: "\eaae";
}
.icon-onedrive:before {
  content: "\eaaf";
}
.icon-github:before {
  content: "\eab0";
}
.icon-npm:before {
  content: "\eab1";
}
.icon-basecamp:before {
  content: "\eab2";
}
.icon-trello:before {
  content: "\eab3";
}
.icon-wordpress:before {
  content: "\eab4";
}
.icon-joomla:before {
  content: "\eab5";
}
.icon-ello:before {
  content: "\eab6";
}
.icon-blogger:before {
  content: "\eab7";
}
.icon-tumblr:before {
  content: "\eab9";
}
.icon-yahoo:before {
  content: "\eabb";
}
.icon-soundcloud:before {
  content: "\eac3";
}
.icon-skype:before {
  content: "\eac5";
}
.icon-reddit:before {
  content: "\eac6";
}
.icon-hackernews:before {
  content: "\eac7";
}
.icon-wikipedia:before {
  content: "\eac8";
}
.icon-linkedin2:before {
  content: "\eaca";
}
.icon-lastfm:before {
  content: "\eacb";
}
.icon-delicious:before {
  content: "\eacd";
}
.icon-stumbleupon:before {
  content: "\eace";
}
.icon-stackoverflow:before {
  content: "\ead0";
}
.icon-pinterest2:before {
  content: "\ead2";
}
.icon-xing2:before {
  content: "\ead4";
}
.icon-flattr:before {
  content: "\ead5";
}
.icon-foursquare:before {
  content: "\ead6";
}
.icon-yelp:before {
  content: "\ead7";
}
.icon-paypal:before {
  content: "\ead8";
}
.icon-mail:before {
  content: "\ea83";
}
.icon-rss2:before {
  content: "\ea9c";
}
.icon-box-add:before {
  content: "\e95e";
}
.icon-spinner11:before {
  content: "\21bb";
}
.icon-cog:before {
  content: "\e994";
}
.icon-power-cord:before {
  content: "\e9b7";
}
.icon-menu:before {
  content: "\2630";
}
.icon-arrow-right2:before {
  content: "\2192";
}
.icon-arrow-left2:before {
  content: "\2190";
}
.icon-home3:before {
  content: "\e902";
}
.icon-mail2:before {
  content: "\ea84";
}
.icon-brightness-contrast:before {
  content: "\1f506";
}
.icon-search:before {
  content: "\1f50d";
}
.icon-key:before {
  content: "\e98d";
}
.icon-quill:before {
  content: "\e907";
}
.icon-flag:before {
  content: "\e9cc";
}
.icon-man-woman:before {
  content: "\e9de";
}
.icon-cross:before {
  content: "\274e";
}
.icon-file-empty:before {
  content: "\e924";
}
.icon-printer:before {
  content: "\e954";
}
.icon-user-plus:before {
  content: "\e973";
}
.icon-file-pdf:before {
  content: "\eadf";
}
.icon-copy:before {
  content: "\1f4cb";
}
.icon-checkmark:before {
  content: "\2705";
}
.icon-history:before {
  content: "\1f552";
}
.icon-svg:before {
  content: "\eae9";
}