/* Fully Responsive Grid System - Tom Sachs Inspired */
:root {
  --font-primary: 'Courier Prime', monospace;
  --font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-link: #000000;
  --color-accent: #000000;
  
  /* Fluid responsive system - scales continuously with viewport */
  --viewport-unit: clamp(12px, 4vw, 48px);
  --grid: var(--viewport-unit);
  --grid-half: calc(var(--grid) / 2);
  --grid-quarter: calc(var(--grid) / 4);
  --grid-eighth: calc(var(--grid) / 8);
  
  /* Responsive spacing that scales with viewport */
  --space-xs: clamp(0.25rem, 1vw, 1rem);
  --space-sm: clamp(0.5rem, 2vw, 1.5rem);
  --space-md: clamp(1rem, 3vw, 2.5rem);
  --space-lg: clamp(1.5rem, 4vw, 4rem);
  --space-xl: clamp(2rem, 6vw, 6rem);
  
  /* Fluid typography - reduced by 10% */
  --type-uniform: clamp(11px, 2.25vw, 14px);
  --type-label: clamp(9px, 1.8vw, 12px);
  --type-body: var(--type-uniform);
  
  /* Responsive content widths */
  --content-width: min(65ch, 90vw);
  --content-block-gap: var(--space-sm);
  
  /* Dynamic margins that respond to viewport */
  --page-margin: clamp(1rem, 5vw, 8rem);
  --content-margin: clamp(0.5rem, 3vw, 3rem);
}

/* Chaos Mode */
body.chaos-mode {
  --color-bg: #000011;
  --color-text: #00ffff;
  --color-link: #ff00ff;
  --color-accent: #ffff00;
  background: linear-gradient(45deg, #000011, #110033, #330011);
  background-size: 400% 400%;
  animation: chaosGradient 3s ease infinite;
}

@keyframes chaosGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--type-uniform);
  line-height: 1.4;
  background-color: var(--color-bg);
  color: var(--color-text);
  cursor: url('cursor.png') 8 8, crosshair;
  margin: 0;
  padding: 0;
}

body.font-helvetica {
  font-family: var(--font-secondary);
}

/* Tom Sachs uniform typography - links same as text */
a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: inherit;
  font-weight: inherit;
}

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

/* All content inherits uniform typography */
.log-content a,
.project-description a,
.bio-content a,
.contact-info a {
  color: #0066cc;
  text-decoration: underline;
  font-size: inherit;
  font-weight: inherit;
}

.log-content a:hover,
.project-description a:hover,
.bio-content a:hover,
.contact-info a:hover {
  color: #0052a3;
  text-decoration: underline;
}

/* Fully Responsive Navigation - Explicit padding for consistency */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--space-lg);
  display: flex;
  justify-content: start;
  align-items: start;
  z-index: 1000;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

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

.nav-link {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: var(--type-uniform);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
  line-height: 1.4;
}

.nav-link:hover,
.nav-link.active {
  text-decoration: none;
}

/* Responsive Sidebar - Adapts to Available Space */
.sidebar {
  position: fixed;
  right: var(--page-margin);
  top: calc(var(--space-lg) + var(--space-sm));
  width: min(25vw, 300px);
  min-height: var(--space-lg);
  background: var(--color-bg);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 10;
}

.sidebar-controls {
  display: block;
  line-height: 1.1;
}

.sidebar-tagline {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
  margin-bottom: var(--space-xs); /* Tighter paragraph break */
}

.sidebar-quote {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
  font-style: italic;
  margin-bottom: var(--space-xs); /* Tighter paragraph break */
}


/* View Controls - Now in Sidebar */
.view-controls {
  display: none;
}

.nav-controls {
  display: none;
}

.font-toggle,
.chaos-toggle {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text);
  cursor: url('cursor.png') 8 8, crosshair;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0;
  margin: 0;
  text-align: left;
  text-decoration: none;
  line-height: 1;
}

.font-toggle:hover,
.chaos-toggle:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Fully Responsive Main Content Area */
.main {
  margin-top: calc(var(--space-lg) + var(--space-sm));
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  display: flex;
  flex-direction: column; /* Mobile: stack vertically */
  gap: var(--space-lg);
  min-height: calc(100vh - var(--space-lg) - var(--space-sm));
  margin-left: 0;
  margin-right: 0;
}

/* Mobile tagline - shown at top on small screens */
.mobile-tagline {
  display: block;
  font-size: var(--type-uniform); /* Same size as other text */
  line-height: 1.4;
  margin-bottom: var(--space-md);
}

/* Responsive Grid Pages - Fluid Column System */
.projects-main,
.log-main,
.about-main,
.contact-main,
.project-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-md);
}

/* Homepage: Fully Responsive Content Blocks */
.explorer-log {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  padding-right: 0;
  padding-left: 0;
  width: 100%; /* Full width on mobile */
}

.project-highlights {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  padding-right: 0;
  padding-left: 0;
  width: 100%; /* Full width on mobile */
}

/* Sidebar-inline hidden by default on mobile */
.sidebar-inline {
  display: none;
}

/* Mobile footer shown by default */
.mobile-footer {
  display: block;
  width: 100%;
  padding: var(--space-lg) var(--page-margin);
  margin-top: var(--space-lg);
}

.mobile-footer-quote {
  font-size: var(--type-uniform);
  line-height: 1.4;
  margin-bottom: var(--space-md);
}

.mobile-footer-controls {
  display: flex;
  gap: var(--space-sm);
}

/* Section titles: uniform typography, hierarchy through position */
.section-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: var(--content-block-gap);
  color: var(--color-text);
  line-height: 1.4;
}

/* Ensure consistent section alignment at medium breakpoint */
@media (min-width: 600px) and (max-width: 1023px) {
  .section-title {
    margin-bottom: calc(var(--content-block-gap) * 0.75); /* Tighter for 2-column */
  }
}

/* Log Entries - Tom Sachs block system for horizontal reading */
.log-entries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.log-entry {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.5rem;
  max-width: var(--content-width);
}

.log-date {
  font-size: var(--type-uniform);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.4;
}

.log-content {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
}

/* Log archive link */
.log-archive-link {
  margin-top: var(--grid-quarter);
  padding-left: 0;
}

.log-archive-link a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: var(--type-uniform);
  line-height: 1.4;
}

.log-archive-link a:hover {
  text-decoration-color: var(--color-text);
}

/* Fully Responsive Project Grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.5rem; /* Match log-entries spacing exactly */
}

.project-item {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-sm);
  width: 100%;
}

.project-image {
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
}

.project-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.4;
  color: var(--color-text);
}

.project-title a {
  color: var(--color-text);
  text-decoration: underline;
  font-size: inherit;
  font-weight: inherit;
}

.project-title a:hover {
  text-decoration: none;
}

.project-description {
  font-size: var(--type-uniform);
  color: var(--color-text);
  line-height: 1.4;
}

/* More projects link - positioned closer below grid, underlined */
.more-projects-link {
  margin-top: var(--grid-quarter);
  padding-left: 0;
}

.more-projects-link a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: var(--type-uniform);
  line-height: 1.4;
}

.more-projects-link a:hover {
  text-decoration-color: var(--color-text);
}

/* Projects page - Tom Sachs systematic layout */
.projects-main,
.log-main,
.about-main,
.contact-main {
  /* Grid styles inherited from main class */
  margin-left: 0; /* Left-aligned, never centered */
  margin-right: 0;
}

/* Responsive Log Archive */
.log-archive-main {
  display: block;
  padding-right: min(30vw, 350px);
}

.log-archive {
  max-width: min(80ch, 90vw);
  padding-top: var(--space-lg);
  padding-left: var(--space-sm);
}

.log-archive-entries {
  display: grid;
  grid-template-columns: minmax(min-content, 20%) 1fr;
  row-gap: var(--space-lg);
  column-gap: var(--space-md);
}

.log-archive-entry {
  display: contents;
}

.log-archive-entry .log-date {
  font-size: var(--type-uniform);
  color: var(--color-accent);
  text-align: right;
  padding-top: 0.5rem;
}

.log-archive-entry .log-content {
  font-size: var(--type-uniform);
  line-height: 1.4;
  max-width: 60ch;
}

.projects-list,
.log-section,
.about-content,
.contact-content {
  width: 100%;
  max-width: min(90ch, 90vw);
  padding: var(--space-sm);
}

.page-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: var(--content-block-gap);
  color: var(--color-text);
  line-height: 1.4;
}

/* Tom Sachs-inspired Projects Table Layout */
.projects-main {
  padding: var(--space-sm) var(--page-margin);
  display: block !important;
  flex-direction: initial !important;
  grid-template-columns: initial !important;
}

.projects-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  margin-bottom: var(--space-lg);
  color: var(--color-text);
}

.projects-table {
  display: grid;
  grid-template-columns: 1.3fr 200px 1.7fr;
  row-gap: var(--space-xs);
  column-gap: var(--space-xs);
  width: 100%;
  max-width: 1400px;
}

/* Direct grid children - no wrapper divs needed */
.project-table-meta,
.project-table-content {
  /* These will be direct grid children */
}

.project-table-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.project-table-image-placeholder {
  width: 100%;
  height: 120px;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--type-uniform);
  color: var(--color-bg);
}

.project-table-meta {
  font-size: var(--type-uniform);
  line-height: 1.2;
  color: var(--color-text);
}

.project-table-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.project-table-location {
  font-size: var(--type-uniform);
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.project-table-date {
  font-size: var(--type-uniform);
  line-height: 1.2;
  color: var(--color-text);
}

.project-table-category {
  font-size: var(--type-uniform);
  line-height: 1.2;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.project-table-description {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
  max-width: 90%;
  margin-bottom: var(--space-sm);
}

/* New metadata fields styling */
.project-table-status {
  font-size: var(--type-uniform);
  line-height: 1.2;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: var(--space-xs);
}

.project-table-specs {
  margin-top: var(--space-xs);
}

.spec-line {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}

/* Removed .project-table-process - no longer used */

/* Responsive projects table */
@media (max-width: 900px) {
  .projects-table {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
  
  .project-table-image,
  .project-table-meta,
  .project-table-content {
    margin-bottom: var(--space-xs);
  }
  
  .project-table-content {
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-accent);
    margin-bottom: var(--space-sm);
  }
  
  .project-table-content:last-child {
    border-bottom: none;
  }
}

/* Legacy project grid styles for backwards compatibility */
.project-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-md);
  row-gap: var(--space-lg);
}

.project-items .project-item {
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-sm);
}

.project-items .project-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.4;
  color: var(--color-text);
}

.project-items .project-description {
  font-size: var(--type-uniform);
  color: var(--color-text);
  line-height: 1.4;
}

/* Tom Sachs-inspired Biography Layout */
.bio-main {
  padding: var(--space-sm) var(--page-margin);
  display: block !important;
  flex-direction: initial !important;
  grid-template-columns: initial !important;
}

.bio-layout {
  columns: 4;
  column-gap: var(--space-md);
  width: 100%;
}

.bio-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  margin-bottom: var(--space-md);
  color: var(--color-text);
  break-inside: avoid;
}

.bio-description {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
  text-align: left;
  margin-bottom: var(--space-lg);
}

.bio-description p {
  margin-bottom: 1.4em;
}

.bio-description p:last-child {
  margin-bottom: 0;
}

.bio-spacer {
  height: 2.1em; /* 1.5x paragraph space */
  break-inside: avoid;
}

.bio-journey {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
  break-inside: avoid;
}

.bio-journey p {
  margin: 0;
}

.bio-education {
  break-before: column;
}

.bio-section {
  break-inside: avoid;
  margin-bottom: var(--space-lg);
}

.bio-section:not(.bio-education) {
  break-before: auto; /* Prevent unwanted column breaks */
}

.bio-section-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.bio-list {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
}

/* Responsive biography columns */
@media (max-width: 900px) {
  .bio-layout {
    columns: 2;
  }
}

@media (max-width: 600px) {
  .bio-layout {
    columns: 1;
  }
}

/* Bio Photo in Column */
.bio-photo-column {
  break-inside: avoid;
  margin: 0.5em 0;
  text-align: left;
}

.profile-image-column {
  width: 175px;
  height: auto;
}


/* Tom Sachs-inspired Contact Layout - Grid-based for precise control */
.contact-main {
  padding: var(--space-sm) var(--page-margin);
  display: block !important;
  flex-direction: initial !important;
  grid-template-columns: initial !important;
}

.contact-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: 100%;
  align-items: start; /* Ensures top alignment of all columns */
}

.contact-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  margin-bottom: var(--space-lg);
  color: var(--color-text);
  grid-column: 1 / -1; /* Span all columns */
}

.contact-section {
  display: block;
}

/* Ensure first section (Direct Links) is in first column */
.contact-first-section {
  grid-column: 1;
}

.contact-section:nth-child(3) {
  grid-column: 2;
}

.contact-section:nth-child(4) {
  grid-column: 3;
}

.contact-section-title {
  font-size: var(--type-uniform);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.contact-list {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
}

.contact-principles {
  margin-top: var(--space-lg);
}

.principles-text {
  font-size: var(--type-uniform);
  line-height: 1.4;
  color: var(--color-text);
  text-align: left;
}

/* Responsive contact grid - smooth transitions */
@media (max-width: 1024px) {
  .contact-layout {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Reflow sections for 2-column layout */
  .contact-first-section,
  .contact-section:nth-child(3) {
    grid-column: auto;
  }
  
  .contact-section:nth-child(4) {
    grid-column: 1 / -1; /* Span both columns on bottom row */
  }
}

@media (max-width: 768px) {
  .contact-layout {
    gap: var(--space-md); /* Tighter gap on smaller screens */
  }
}

@media (max-width: 600px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  /* All sections stack vertically */
  .contact-first-section,
  .contact-section:nth-child(3),
  .contact-section:nth-child(4) {
    grid-column: 1 !important;
  }
}

/* Legacy contact styles for backwards compatibility */
.contact-info {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-lg);
  max-width: var(--content-width);
  width: 100%;
}

.contact-info p {
  font-size: var(--type-body);
  line-height: 1.4;
}

.contact-links {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-lg);
}

.contact-links strong {
  font-weight: normal;
  color: var(--color-text);
}

.contact-links a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.contact-note {
  color: var(--color-accent);
  font-style: italic;
}

/* Responsive Individual Project Page */
.project-main {
  display: block;
  margin-left: 0;
  margin-right: 0;
  padding-right: min(30vw, 350px);
}

.project-controls {
  width: 100%;
  max-width: min(40ch, 90vw);
  padding-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

.project-content {
  width: 100%;
  max-width: min(80ch, 90vw);
  padding-top: var(--space-lg);
}

.shuffle-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--type-label);
  color: var(--color-text);
  cursor: crosshair;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.project-meta {
  font-size: var(--type-uniform);
  color: var(--color-text);
  margin-bottom: var(--grid-half);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.4;
}

.project-description {
  font-size: var(--type-body);
  line-height: 1.4;
  max-width: var(--content-width);
  width: 100%;
}

.project-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.project-links a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: var(--type-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Responsive Other Projects Section */
.other-projects {
  width: 100%;
  max-width: min(30ch, 90vw);
  padding-top: var(--space-xl);
  margin-top: var(--space-xl);
}

.other-title {
  font-size: var(--type-label);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: var(--grid-half);
}

.other-list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-sm);
}

.other-project {
  font-size: var(--type-uniform);
  color: var(--color-text);
  line-height: 1.4;
}

/* Easter Egg */
.easter-egg {
  display: none;
  margin-top: var(--space-xl);
  max-width: var(--content-width);
  width: 100%;
}

.easter-egg.revealed {
  display: block;
}

.easter-egg p {
  font-size: var(--type-label);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

/* Mobile-First Responsive Design - Continuous Adaptation */

/* COMPREHENSIVE RESPONSIVE SYSTEM */

/* Step 1: Medium screens - Precise 2-column Swiss grid */
@media (min-width: 600px) and (max-width: 1023px) {
  /* Refined spacing for medium screens */
  :root {
    --page-margin: clamp(2rem, 6vw, 4rem);
    --space-md: clamp(0.75rem, 2.5vw, 2rem);
    --type-uniform: 13px; /* Fixed for optimal readability */
  }
  
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--space-md);
    row-gap: 0;
    padding-right: var(--page-margin);
    align-items: start;
  }
  
  .mobile-tagline {
    display: block;
    grid-column: 1 / -1; /* Span both columns */
    margin-bottom: var(--space-lg); /* Strong separation */
    max-width: 65ch; /* Optimal reading length */
  }
  
  .explorer-log {
    grid-column: 1;
    grid-row: 2;
    padding-top: 0;
  }
  
  .project-highlights {
    grid-column: 2;
    grid-row: 2;
    padding-top: 0;
  }
  
  /* Hide desktop elements */
  .sidebar-inline,
  .sidebar,
  .view-controls {
    display: none;
  }
  
  /* Footer below content with proper margins */
  .mobile-footer {
    display: block;
    grid-column: 1 / -1;
    margin-top: var(--space-xl);
  }
}

/* Transition zone: Smooth progression to 3-column layout */
@media (min-width: 900px) and (max-width: 1023px) {
  .explorer-log {
    max-width: 320px; /* Start constraining for upcoming 3-column */
  }
  
  .project-highlights {
    padding-right: calc(var(--space-md) * 2); /* Prepare visual space for sidebar */
  }
}

/* Step 2: Large screens - Add sidebar as third column */
@media (min-width: 1024px) {
  .main {
    display: flex; /* Back to flex for 3-column */
    flex-direction: row;
    padding-right: var(--page-margin); /* No floating sidebar space */
    gap: var(--space-sm); /* Tighter gaps for 3-column */
  }
  
  .explorer-log {
    max-width: 300px; /* Cap explorer log width */
    flex: 0 0 300px; /* Don't grow beyond 300px */
  }
  
  .project-highlights {
    flex: 1; /* Take remaining space */
    max-width: none;
  }
  
  /* Hide mobile elements on large screens */
  .mobile-tagline,
  .mobile-footer {
    display: none;
  }
  
  /* Hide original floating sidebar */
  .sidebar {
    display: none;
  }
  
  /* Show sidebar-inline as third column */
  .sidebar-inline {
    display: block;
    width: 250px;
    flex: 0 0 250px;
    padding: var(--space-sm);
    order: 3; /* After explorer-log and project-highlights */
  }
  
  .sidebar-tagline {
    font-size: var(--type-uniform);
    line-height: 1.4;
    margin-bottom: var(--space-md);
  }
  
  .sidebar-quote {
    font-size: var(--type-uniform);
    line-height: 1.4;
    margin-bottom: var(--space-md);
  }
  
  .sidebar-controls {
    display: block;
  }
  
  .sidebar-controls button {
    display: block;
    margin-bottom: var(--space-xs);
  }
  
  .view-controls {
    display: none; /* Hide duplicate controls */
  }
  
  /* No body::after needed - using proper footer elements */
}

/* Step 3: Extra large screens - Featured projects become 2 columns */
@media (min-width: 1400px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for projects */
  }
}

/* Mobile-first: Small screens - stack everything */
@media (max-width: 599px) {
  :root {
    --page-margin: clamp(1rem, 4vw, 2rem);
    --space-md: var(--space-sm);
  }
  
  /* Simplify navigation */
  .nav {
    position: relative;
    padding: var(--space-sm) var(--page-margin);
  }
  
  .main {
    margin-top: 0;
  }
  
  /* Mobile footer is handled by .mobile-footer element */
  
  .nav-links {
    gap: var(--space-sm);
  }
  
  /* Hide desktop sidebar and controls on mobile */
  .sidebar,
  .view-controls {
    display: none;
  }
}

/* Very small screens: Maximum simplification */
@media (max-width: 480px) {
  :root {
    --page-margin: var(--space-sm);
  }
  
  .nav-links {
    gap: var(--space-sm);
  }
  
  /* Ensure readability on small screens */
  .log-entries,
  .project-items {
    gap: var(--space-md);
  }
  
  /* Keep project-grid consistent with log-entries spacing */
  .project-grid {
    gap: 1.5rem;
  }
}

/* Chaos mode enhancements */
body.chaos-mode a {
  color: var(--color-link);
  text-decoration-color: var(--color-link);
}

body.chaos-mode a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
  text-shadow: 0 0 5px currentColor;
}

body.chaos-mode .nav-link:hover,
body.chaos-mode .nav-link.active {
  color: var(--color-link);
  text-decoration-color: var(--color-link);
  text-shadow: 0 0 5px currentColor;
}

body.chaos-mode .section-title {
  text-shadow: 0 0 10px var(--color-text);
  animation: pulse 2s ease-in-out infinite alternate;
}

body.chaos-mode .sidebar {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

@media (max-width: 768px) {
  body.chaos-mode .sidebar {
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
  }
}

body.chaos-mode .sidebar-tagline,
body.chaos-mode .sidebar-quote {
  text-shadow: 0 0 5px currentColor;
}

body.chaos-mode .font-toggle,
body.chaos-mode .chaos-toggle {
  color: var(--color-link);
  text-shadow: 0 0 3px currentColor;
}

body.chaos-mode .font-toggle:hover,
body.chaos-mode .chaos-toggle:hover {
  color: var(--color-accent);
  text-shadow: 0 0 8px currentColor;
}


@keyframes pulse {
  from { opacity: 1; }
  to { opacity: 0.7; }
}


/* Workshop Mode styles removed - Admin Panel is now the single CMS solution */