/* ═══════════════════════════════════════════════════════════════════════
   WORKING MEMORY - Design System
   A technical journal aesthetic with Tufte-inspired typography
   ═══════════════════════════════════════════════════════════════════════ */

/* Typography Import - Distinctive, characterful choices */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* ─────────────────────────────────────────────────────────────────────
     Color System - Warm paper tones with muted rust accent
     ───────────────────────────────────────────────────────────────────── */
  --color-bg: #FFFEF9;
  --color-bg-elevated: #FFFCF5;
  --color-bg-subtle: #F9F7F1;
  --color-text: #1D1D1D;
  --color-text-muted: #6B6B6B;
  --color-text-subtle: #999999;
  --color-accent: #A0583E;
  --color-accent-hover: #8B4A33;
  --color-accent-light: #C77F68;
  --color-accent-subtle: #E8C5B8;
  --color-border: #E8E4DC;
  --color-border-subtle: #F2EFE8;

  /* ─────────────────────────────────────────────────────────────────────
     Typography - Technical journal hierarchy
     ───────────────────────────────────────────────────────────────────── */
  --font-serif: 'Crimson Pro', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Monaco', monospace;

  --font-size-base: 19px;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2.125rem;
  --font-size-3xl: 2.75rem;

  /* Lethain-inspired line height - not too loose */
  --line-height-base: 1.58;
  --line-height-tight: 1.25;
  --line-height-heading: 1.2;

  /* ─────────────────────────────────────────────────────────────────────
     Spacing - Consistent vertical rhythm aligned to 30px baseline
     Baseline = 19px × 1.58 = 30.02px ≈ 30px
     ───────────────────────────────────────────────────────────────────── */
  --space-xs: 0.395rem;   /* 7.5px  = 0.25× baseline - micro spacing */
  --space-sm: 0.789rem;   /* 15px   = 0.5× baseline - tight spacing */
  --space-md: 1.579rem;   /* 30px   = 1× baseline - standard rhythm */
  --space-lg: 3.158rem;   /* 60px   = 2× baseline - large spacing */
  --space-xl: 4.737rem;   /* 90px   = 3× baseline - extra large */
  --space-2xl: 6.316rem;  /* 120px  = 4× baseline - major sections */

  /* ─────────────────────────────────────────────────────────────────────
     Layout - Generous margins for sidenotes
     ───────────────────────────────────────────────────────────────────── */
  --max-width-prose: 38rem;
  --max-width-wide: 68rem;
  --sidenote-width: 16rem;
  --sidenote-gap: 2rem;

  /* ─────────────────────────────────────────────────────────────────────
     Animation - Subtle, nostalgic timing
     ───────────────────────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease-out;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════
   Reset & Base Styles
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-serif);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  padding: var(--space-lg) var(--space-md);
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   Typography - Technical Journal Hierarchy
   ═══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  line-height: var(--line-height-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: var(--space-lg);      /* 60px = 2× baseline */
  margin-bottom: var(--space-sm);   /* 15px = 0.5× baseline */
  color: var(--color-text);
}

h1 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-xl);   /* 90px = 3× baseline - major section break */
  position: relative;
}

/* Section headings above lists - small label style */
section > h2 {
  font-size: var(--font-size-sm);        /* 0.875rem = 16.6px - understated label */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-top: var(--space-lg);           /* 60px = 2× baseline */
  margin-bottom: var(--space-md);        /* 30px = 1× baseline - tighter */
}

/* Hide decorative marker for section labels */
section > h2::before {
  display: none;
}

h2::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 0.5em;
  width: 0.75rem;
  height: 2px;
  background: var(--color-accent-subtle);
  opacity: 0;
  transition: opacity var(--transition-base), transform var(--transition-base);
  transform: translateX(-0.5rem);
}

h2:hover::before {
  opacity: 1;
  transform: translateX(0);
}

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

h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

p {
  margin-bottom: var(--space-md);   /* 30px = 1× baseline - standard paragraph rhythm */
  max-width: var(--max-width-prose);
}

em {
  font-style: italic;
  color: var(--color-text);
}

strong {
  font-weight: 600;
  color: var(--color-text);
}

/* ─────────────────────────────────────────────────────────────────────
   Links - Subtle underline with nostalgic hover
   ───────────────────────────────────────────────────────────────────── */

a {
  color: var(--color-accent);
  text-decoration: none;
  position: relative;
  border-bottom: 1px solid var(--color-accent-subtle);
  transition: border-color var(--transition-base), color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
  border-bottom-color: var(--color-accent-hover);
}

/* Animated underline for prose links */
.prose a {
  background-image: linear-gradient(
    to right,
    var(--color-accent-light) 0%,
    var(--color-accent-light) 100%
  );
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--color-accent-subtle);
  transition: background-size var(--transition-slow),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.prose a:hover {
  background-size: 100% 1px;
  border-bottom-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   Layout & Structure
   ═══════════════════════════════════════════════════════════════════════ */

.container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  position: relative;
}

.prose {
  max-width: var(--max-width-prose);
  /* Add margin for sidenotes on larger screens */
  margin-right: calc(var(--sidenote-width) + var(--sidenote-gap));
}

@media (max-width: 1200px) {
  .prose {
    margin-right: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Header - Minimal navigation with subtle sophistication
   ═══════════════════════════════════════════════════════════════════════ */

.site-header {
  margin-bottom: var(--space-lg);     /* 60px = 2× baseline - tighter */
  padding-bottom: var(--space-md);    /* 30px = 1× baseline - less space */
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;               /* Center align for logo + text */
  flex-wrap: wrap;
  gap: var(--space-md);              /* 30px = 1× baseline */
  position: relative;
}

/* Subtle decorative line */
.site-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 4rem;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--color-accent-light),
    transparent
  );
  opacity: 0.6;
}

.site-title {
  font-family: var(--font-sans);
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.site-title a {
  color: var(--color-text);
  border: none;
  display: inline-block;             /* Logo only, no flex needed */
  transition: transform var(--transition-base);
}

.site-title a:hover {
  transform: scale(1.05);            /* Subtle grow on hover */
}

/* Mathematical Logo - Truchet Tiles (organic flowing pattern) */
/* Pure CSS implementation - single element creates entire pattern via radial gradients */
.site-logo {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;

  /* Create 3x3 Truchet tile pattern using radial gradients */
  /* Each gradient draws a quarter-circle arc at specific positions */
  background-image:
    /* Row 1 */
    radial-gradient(circle at 0 0, transparent 6.5px, var(--color-accent) 6.5px, var(--color-accent) 8px, transparent 8px),
    radial-gradient(circle at 100% 0, transparent 6.5px, var(--color-accent) 6.5px, var(--color-accent) 8px, transparent 8px),
    radial-gradient(circle at 0 0, transparent 6.5px, var(--color-accent) 6.5px, var(--color-accent) 8px, transparent 8px),

    /* Row 2 */
    radial-gradient(circle at 100% 0, transparent 6.5px, var(--color-accent) 6.5px, var(--color-accent) 8px, transparent 8px),
    radial-gradient(circle at 0 100%, transparent 6.5px, var(--color-accent) 6.5px, var(--color-accent) 8px, transparent 8px),
    radial-gradient(circle at 100% 100%, transparent 6.5px, var(--color-accent) 6.5px, var(--color-accent) 8px, transparent 8px),

    /* Row 3 */
    radial-gradient(circle at 0 100%, transparent 6.5px, var(--color-accent) 6.5px, var(--color-accent) 8px, transparent 8px),
    radial-gradient(circle at 0 0, transparent 6.5px, var(--color-accent) 6.5px, var(--color-accent) 8px, transparent 8px),
    radial-gradient(circle at 100% 0, transparent 6.5px, var(--color-accent) 6.5px, var(--color-accent) 8px, transparent 8px);

  background-size: 8px 8px;
  background-position:
    /* Row 1: cells at 0,0 | 8,0 | 16,0 */
    0 0, 8px 0, 16px 0,
    /* Row 2: cells at 0,8 | 8,8 | 16,8 */
    0 8px, 8px 8px, 16px 8px,
    /* Row 3: cells at 0,16 | 8,16 | 16,16 */
    0 16px, 8px 16px, 16px 16px;

  background-repeat: no-repeat;
  transition: filter var(--transition-base);
}

/* Hover effect - brighten the Truchet curves */
.site-title a:hover .site-logo {
  filter: brightness(1.15) saturate(1.1);
}

.site-nav {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
}

.site-nav a {
  color: var(--color-text-muted);
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 0.25rem 0;
  position: relative;
  transition: color var(--transition-fast);
}

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.site-nav a:hover {
  color: var(--color-accent);
}

.site-nav a:hover::after {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   Welcome Section - Home page introduction
   ═══════════════════════════════════════════════════════════════════════ */

.welcome {
  margin-bottom: var(--space-xl);     /* 90px = 3× baseline */
  padding-bottom: var(--space-lg);    /* 60px = 2× baseline */
  border-bottom: 1px solid var(--color-border-subtle);
}

.welcome h2 {
  margin-top: 0;
  font-size: var(--font-size-xl);     /* 1.5rem - friendly but not overpowering */
  color: var(--color-text);
  font-weight: 600;
  margin-bottom: var(--space-md);     /* 30px = 1× baseline */
}

.welcome h2::before {
  display: none;
}

.welcome .prose {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Sidenotes & Margin Notes - Tufte-inspired annotation system
   ═══════════════════════════════════════════════════════════════════════ */

/* Sidenote container - floats in right margin */
.sidenote,
.marginnote {
  float: right;
  clear: right;
  margin-right: calc(-1 * (var(--sidenote-width) + var(--sidenote-gap)));
  width: var(--sidenote-width);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  position: relative;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-accent-subtle);
}

/* Sidenote number styling */
.sidenote-number {
  counter-increment: sidenote-counter;
  font-size: var(--font-size-xs);
  vertical-align: super;
  line-height: 0;
  color: var(--color-accent);
  margin-left: 0.1rem;
  cursor: pointer;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  position: relative;
  top: -0.5em;
}

/* Counter for sidenotes */
body {
  counter-reset: sidenote-counter;
}

.sidenote::before {
  content: counter(sidenote-counter) " ";
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  font-weight: 600;
  position: relative;
  top: -0.25em;
}

/* Marginnote (no number) */
.marginnote {
  border-left-color: var(--color-border);
}

.marginnote::before {
  content: '→ ';
  color: var(--color-accent-light);
}

/* On smaller screens, convert to footnote-style */
@media (max-width: 1200px) {
  .sidenote,
  .marginnote {
    display: block;
    float: none;
    width: 100%;
    margin: var(--space-md) 0;              /* 30px = 1× baseline */
    padding: var(--space-sm) var(--space-md);  /* 15px 30px */
    background: var(--color-bg-subtle);
    border-left-width: 3px;
    border-radius: 0 3px 3px 0;
  }
}

/* Label for toggling sidenotes on mobile */
.sidenote-toggle {
  display: none;
}

input.margin-toggle {
  display: none;
}

@media (max-width: 1200px) {
  label.sidenote-toggle:not(.sidenote-number) {
    display: inline;
    color: var(--color-accent);
    cursor: pointer;
    font-size: var(--font-size-xs);
    vertical-align: super;
  }

  input.margin-toggle:checked + .sidenote,
  input.margin-toggle:checked + .marginnote {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Post List - Lean, scannable archive inspired by lethain.com
   ═══════════════════════════════════════════════════════════════════════ */

.post-list {
  list-style: none;
  margin-top: var(--space-lg);   /* 60px = 2× baseline - tighter for scannable list */
}

.post-list-item {
  margin-bottom: 0;
  position: relative;
}

/* Each post link is a flex container: title left, date right */
.post-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);                    /* 30px = 1× baseline gap */
  padding: var(--space-sm) 0;              /* 15px = 0.5× baseline vertical padding */
  border: none;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast), transform var(--transition-base);
  border-bottom: 1px solid var(--color-border-subtle);
}

.post-link:hover {
  color: var(--color-accent);
  transform: translateX(0.15rem);
}

/* Title styling - left side */
.post-link .post-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;                      /* 23.75px - prominent but lean (was 1.125rem) */
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: var(--line-height-heading);
  flex: 1;                                 /* Takes available space */
  color: inherit;
}

/* Date styling - right side */
.post-link .post-date {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);          /* 0.875rem - compact */
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;                     /* Prevents date wrapping */
  flex-shrink: 0;                          /* Keeps date width fixed */
}

.post-link:hover .post-date {
  color: var(--color-accent-light);
}

/* Optional: Add subtle marker on hover */
.post-list-item::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.25rem;
  height: 0.25rem;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.post-list-item:hover::before {
  opacity: 1;
}

/* Legacy styles for backwards compatibility (article pages) */
.post-meta {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-sm);   /* 15px = 0.5× baseline */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.post-meta time {
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   Article Layout
   ═══════════════════════════════════════════════════════════════════════ */

article header {
  margin-bottom: var(--space-xl);   /* 90px = 3× baseline */
  padding-bottom: var(--space-lg);  /* 60px = 2× baseline */
  border-bottom: 2px solid var(--color-border);
  position: relative;
}

article header::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--color-accent);
}

article h1 {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Visual Blocking - Quotes, Examples, and Citations
   ═══════════════════════════════════════════════════════════════════════ */

/* Blockquotes - Maggie Appleton inspired */
blockquote {
  margin: var(--space-lg) 0;                    /* 60px = 2× baseline */
  padding: var(--space-md) var(--space-lg);     /* 30px 60px */
  background: var(--color-bg-subtle);
  border-left: 4px solid var(--color-accent);
  font-style: italic;
  color: var(--color-text);
  position: relative;
}

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

blockquote cite {
  display: block;
  margin-top: var(--space-sm);   /* 15px = 0.5× baseline */
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

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

/* Example blocks */
.example,
.definition {
  margin: var(--space-lg) 0;                    /* 60px = 2× baseline */
  padding: var(--space-md) var(--space-lg);     /* 30px 60px */
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent-light);
  position: relative;
}

.example::before {
  content: 'Example';
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);   /* 15px = 0.5× baseline */
}

.definition::before {
  content: 'Definition';
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);   /* 15px = 0.5× baseline */
}

/* Citation references */
cite,
.citation {
  font-style: italic;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   Code Blocks - Technical but elegant
   ═══════════════════════════════════════════════════════════════════════ */

pre {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-md);          /* 30px = 1× baseline */
  overflow-x: auto;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin: var(--space-lg) 0;         /* 60px = 2× baseline */
  position: relative;
}

/* Add subtle glow on focus/hover */
pre:hover {
  border-color: var(--color-accent-subtle);
  box-shadow: 0 0 0 1px var(--color-accent-subtle);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Inline code */
p code,
li code,
td code {
  background: var(--color-bg-subtle);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  font-size: 0.88em;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text);
}

/* Code block with language label */
pre[class*="language-"]::before {
  content: attr(class);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-subtle);
  background: var(--color-bg);
  border-bottom-left-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Lists - Clean hierarchy
   ═══════════════════════════════════════════════════════════════════════ */

.prose ul,
.prose ol {
  margin: var(--space-md) 0;       /* 30px = 1× baseline */
  padding-left: var(--space-lg);   /* 60px = 2× baseline */
}

.prose li {
  margin-bottom: var(--space-xs);  /* 0.25× baseline = 7.5px for comfortable readability */
  line-height: var(--line-height-base);
}

.prose li::marker {
  color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   Tables - Information dense but readable
   ═══════════════════════════════════════════════════════════════════════ */

table {
  width: 100%;
  margin: var(--space-lg) 0;       /* 60px = 2× baseline */
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
}

thead {
  border-bottom: 2px solid var(--color-border);
}

th {
  text-align: left;
  font-weight: 600;
  padding: var(--space-sm);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-xs);
}

td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}

tr:hover {
  background: var(--color-bg-subtle);
}

/* ═══════════════════════════════════════════════════════════════════════
   Sketch & Visualization Containers
   ═══════════════════════════════════════════════════════════════════════ */

.sketch-container {
  margin: var(--space-xl) 0;     /* 90px = 3× baseline */
  padding: var(--space-lg);      /* 60px = 2× baseline */
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  position: relative;
}

.sketch-container::before {
  content: 'Interactive Visualization';
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);   /* 30px = 1× baseline */
}

.sketch-container canvas {
  display: block;
  margin: 0 auto;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════════ */

.site-footer {
  margin-top: var(--space-2xl);    /* 120px = 4× baseline - major section break */
  padding-top: var(--space-lg);    /* 60px = 2× baseline */
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  text-align: center;
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 1px;
  background: var(--color-accent-light);
}

.site-footer p {
  margin: 0;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive Design - Mobile refinements
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --font-size-base: 17px;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
  }

  body {
    padding: var(--space-lg) var(--space-md);
  }

  h1 {
    font-size: var(--font-size-xl);
  }

  h2 {
    font-size: var(--font-size-lg);
  }

  /* Section labels stay small on mobile */
  section > h2 {
    font-size: var(--font-size-xs);    /* Even smaller on mobile for label look */
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-title {
    font-size: var(--font-size-lg);
  }

  .site-name {
    font-size: var(--font-size-lg);
  }

  /* Scale down Truchet logo slightly on mobile */
  .site-logo {
    width: 20px;
    height: 20px;
    /* Adjust background positions for smaller size */
    background-size: 6.67px 6.67px;
    background-position:
      0 0, 6.67px 0, 13.33px 0,
      0 6.67px, 6.67px 6.67px, 13.33px 6.67px,
      0 13.33px, 6.67px 13.33px, 13.33px 13.33px;
  }

  /* Hide decorative elements on mobile */
  h2::before,
  .post-list-item::before {
    display: none;
  }

  /* Adjust post list for mobile - stack if needed */
  .post-link {
    gap: var(--space-sm);              /* 15px = 0.5× baseline (tighter on mobile) */
  }

  /* Adjust title size on tablet */
  .post-link .post-title {
    font-size: var(--font-size-lg);    /* 1.125rem on tablet (smaller than desktop 1.25rem) */
  }

  .post-link .post-date {
    font-size: var(--font-size-xs);    /* Smaller date on mobile */
  }

  .post-list-item:hover {
    transform: none;
  }

  .post-list-item::before {
    display: none;  /* Hide decorative marker on mobile */
  }

  /* Tables scroll horizontally */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  :root {
    --font-size-base: 16px;
  }

  body {
    padding: var(--space-md) var(--space-sm);
  }

  .site-nav {
    font-size: var(--font-size-xs);
    gap: var(--space-sm);
  }

  /* Stack post title and date on very small screens */
  .post-link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);              /* 7.5px = 0.25× baseline */
  }

  .post-link .post-title {
    font-size: var(--font-size-base);  /* 1rem on very small mobile */
  }

  .post-link .post-date {
    font-size: 0.8125rem;              /* Slightly larger when stacked */
    order: -1;                         /* Date appears above title */
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Print Styles - Clean, readable documents
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
  :root {
    --color-bg: white;
    --color-text: black;
    --color-accent: #666;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
    max-width: 100%;
    padding: 0;
  }

  a {
    color: var(--color-text);
    border: none;
    text-decoration: underline;
  }

  /* Hide interactive elements */
  .site-nav,
  .site-footer,
  .sketch-container {
    display: none;
  }

  /* Show URLs after links */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    color: #666;
  }

  /* Avoid page breaks inside elements */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }

  pre,
  blockquote,
  .example {
    page-break-inside: avoid;
  }

  /* Convert sidenotes to footnotes */
  .sidenote,
  .marginnote {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0.5em;
    font-size: 0.9em;
    border-left: 2px solid #ccc;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Logo Options Showcase - Generative Art Patterns
   ═══════════════════════════════════════════════════════════════════════ */

.logo-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.logo-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.logo-option-name {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.logo-preview {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────
   Option A: 10 PRINT Maze - Classic generative art
   ───────────────────────────────────────────────────────────────────── */

.logo-10print {
  width: 48px;
  height: 48px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 12px);
  grid-template-rows: repeat(4, 12px);
}

.logo-10print-cell {
  position: relative;
  overflow: hidden;
}

.logo-10print-cell::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  top: 50%;
  left: 0;
  transform-origin: left center;
}

/* Forward slash cells */
.logo-10print-cell.forward::before {
  transform: rotate(45deg) translateY(-50%);
}

/* Backslash cells */
.logo-10print-cell.back::before {
  transform: rotate(-45deg) translateY(-50%);
}

/* Hover effect - brighten */
.logo-option:hover .logo-10print-cell::before {
  background: var(--color-accent-hover);
}

/* ─────────────────────────────────────────────────────────────────────
   Option B: Recursive Tree - L-System fractal
   ───────────────────────────────────────────────────────────────────── */

.logo-tree {
  width: 48px;
  height: 48px;
  position: relative;
}

.logo-tree svg {
  width: 100%;
  height: 100%;
}

.logo-tree path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--transition-base);
}

.logo-option:hover .logo-tree path {
  stroke: var(--color-accent-hover);
}

/* ─────────────────────────────────────────────────────────────────────
   Option C: Truchet Tiles - Quarter-circle patterns
   ───────────────────────────────────────────────────────────────────── */

.logo-truchet {
  width: 48px;
  height: 48px;
  display: grid;
  grid-template-columns: repeat(3, 16px);
  grid-template-rows: repeat(3, 16px);
  gap: 0;
}

.truchet-tile {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
}

.truchet-tile::before {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  transition: border-color var(--transition-base);
}

/* Tile variations - quarter circles in different positions */
.truchet-tile.tl::before {
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.truchet-tile.tr::before {
  top: 0;
  right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.truchet-tile.bl::before {
  bottom: 0;
  left: 0;
  clip-path: polygon(0 100%, 100% 100%, 0 0);
}

.truchet-tile.br::before {
  bottom: 0;
  right: 0;
  clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

.logo-option:hover .truchet-tile::before {
  border-color: var(--color-accent-hover);
}

/* ═══════════════════════════════════════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════════════════════════════════════ */

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

.no-wrap {
  white-space: nowrap;
}

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

.text-subtle {
  color: var(--color-text-subtle);
}

/* Selection styling */
::selection {
  background: var(--color-accent-subtle);
  color: var(--color-text);
}

::-moz-selection {
  background: var(--color-accent-subtle);
  color: var(--color-text);
}