/* ==================== PORTFOLIO WEBSITE STYLES ==================== */
/* Modern CSS with organized structure */

/* ==================== FONT DECLARATIONS ==================== */

@font-face {
  font-family: 'Chalet';
  src: url('../font/Chalet-Medium.woff2') format('woff2'),
       url('../font/Chalet-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chalet';
  src: url('../font/Chalet-Bold.woff2') format('woff2'),
       url('../font/Chalet-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NB International Pro';
  src: url('../font/NB-International-Pro-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NB International Pro';
  src: url('../font/NB-International-Pro-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NB International Pro';
  src: url('../font/NB-International-Pro-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Buffon-Bold';
  src: url('../font/Buffon-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InputMono';
  src: url('../font/InputMono-Light.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InputMono';
  src: url('../font/InputMono-Medium.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'InputMono';
  src: url('../font/InputMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Written';
  src: url('../font/Written.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ProtoMono';
  src: url('../font/ProtoMono-MediumShadow.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==================== CSS CUSTOM PROPERTIES ==================== */
:root {
  /* ==================== TYPOGRAPHY ==================== */
  /* Font sizes - Base scale (fixed) */
  --text-2xs: 0.625rem;      /* 10px - smallest text */
  --text-xs: 0.75rem;        /* 12px - captions, labels */
  --text-sm: 0.9rem;       /* 14px - small body text */
  --text-base: 1rem;         /* 16px - body text */
  --text-lg: 1.125rem;       /* 18px - emphasized body */
  --text-xl: 1.25rem;        /* 20px - small headings */

  /* Font sizes - Responsive scale (headings) */
  --text-2xl: clamp(1.5rem, 4vw, 1.75rem);     /* 24-28px - h4 */
  --text-3xl: clamp(1.875rem, 5vw, 2.25rem);   /* 30-36px - h3 */
  --text-4xl: clamp(2.25rem, 6vw, 3rem);       /* 36-48px - h2 */
  --text-5xl: clamp(3rem, 8vw, 4rem);          /* 48-64px - h1 */
  --text-6xl: clamp(3.75rem, 10vw, 5rem);      /* 60-80px - display */

  /* Semantic typography - use for consistent type hierarchy */
  --type-display: var(--text-6xl);      /* Hero headings */
  --type-h1: var(--text-5xl);           /* Page titles */
  --type-h2: var(--text-4xl);           /* Section titles */
  --type-h3: var(--text-3xl);           /* Subsection titles */
  --type-h4: var(--text-2xl);           /* Card titles */
  --type-body: var(--text-base);        /* Body text */
  --type-body-sm: var(--text-sm);       /* Small body */
  --type-caption: var(--text-xs);       /* Captions, labels */
  --type-label: var(--text-2xs);        /* Tiny labels */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Line heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* Font families */
  --font-body: 'NB International Pro', 'Chalet', sans-serif;
  --font-heading: var(--font-body);     /* Same as body by default */
  --font-mono: 'Source Code Pro', monospace;
  --font-accent: 'Written';

  /* ==================== SPACING SCALE ==================== */
  /* Base spacing tokens - use for padding, margin, gap */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.875rem;  /* 30px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-25: 6.25rem;  /* 100px */

  /* Semantic spacing - use for consistent component spacing */
  --gap-xs: var(--space-1);   /* Tight spacing - tags, chips */
  --gap-sm: var(--space-2);   /* Small spacing - inline elements */
  --gap-md: var(--space-4);   /* Default spacing - cards, buttons */
  --gap-lg: var(--space-6);   /* Large spacing - sections */
  --gap-xl: var(--space-8);   /* Extra large - major sections */

  /* Semantic margins */
  --margin-section: var(--space-20);  /* Between major sections */
  --margin-component: var(--space-8); /* Between components */
  --margin-element: var(--space-4);   /* Between related elements */

  /* ==================== GRID & COLUMNS ==================== */
  /* Column counts */
  --columns-1: 1;
  --columns-2: 2;
  --columns-3: 3;
  --columns-4: 4;
  --columns-6: 6;
  --columns-12: 12;

  /* Grid templates - reusable column patterns */
  --grid-1-col: 1fr;
  --grid-2-col: repeat(2, 1fr);
  --grid-3-col: repeat(3, 1fr);
  --grid-4-col: repeat(4, 1fr);
  --grid-sidebar: 240px 1fr;              /* Sidebar + main */
  --grid-sidebar-content: 0.9fr 1.5fr 1fr; /* 3-column with emphasis on middle */
  --grid-auto-fit: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive auto-fitting */
  --grid-auto-fill: repeat(auto-fill, minmax(280px, 1fr)); /* Responsive auto-filling */

  /* Column widths */
  --col-xs: 280px;
  --col-sm: 320px;
  --col-md: 480px;
  --col-lg: 640px;
  --col-xl: 800px;

  /* ==================== SIZE SCALE ==================== */
  --size-xs: 14px;
  --size-md: 24px;
  --size-lg: 28px;

  /* Component-specific sizes */
  --size-footer-tab: 60px;
  --size-footer-tab-mobile: 50px;
  --size-folder-height: 100px;

  /* ==================== BORDER RADIUS ==================== */
  --radius-sm: 4px;     /* Tags, small buttons */
  --radius-md: 8px;     /* Cards, images */
  --radius-lg: 12px;    /* Modals, large surfaces */
  --radius-full: 50%;   /* Avatars, circles */

  /* ==================== BORDER WIDTHS ==================== */
  --border-normal: 2px;
  --border-thick: 4px;
  --border-frame: 14px;

  /* ==================== SHADOWS ==================== */
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* ==================== TRANSITIONS ==================== */
  --transition-fast: 0.15s ease-in-out;
  --transition: 0.3s ease-in-out;

  /* ==================== LAYOUT ==================== */
  --max-width: 66vw;
  --min-height: 90vh;

  /* Container widths */
  --container-xs: 400px;
  --container-sm: 800px;
  --container-md: 1000px;
  --container-lg: 1200px;
  --container-xl: 1400px;
  --container-2xl: 1600px;

  /* ==================== THEME PALETTE (Layer 1) ==================== */
  /* Raw color values - THESE CHANGE WHEN THEME CHANGES */

  /* Surfaces (backgrounds) */
  --palette-surface-1: #f2f0e9;      /* Primary surface - body, modals */
  --palette-surface-2: #e4e0d4;      /* Elevated - borders, elevated surfaces, footer */
  --palette-surface-3: #d9d3c6;      /* Folder tabs, muted elements */

  /* Foregrounds (text, borders, frames) */
  --palette-foreground-primary: #1b1c1d;     /* Main text, strong borders */
  --palette-foreground-secondary: #aea692;    /* Secondary text */
  --palette-foreground-inverse: var(--palette-surface-1);   /* Light text - synced with body bg */

  /* Accents */
  --palette-accent-1: #ff4551;               /* Primary accent - avatar, highlights, CTAs, banners */

  /* Typography families (theme-dependent) */
  --palette-font-body: 'NB International Pro', 'Chalet', sans-serif;
  --palette-font-heading: 'Buffon-Bold', serif;
  --palette-font-accent: 'Written';

  /* ==================== SEMANTIC TOKENS (Layer 2) ==================== */
  /* These reference Layer 1 - they don't change, their values do */

  /* Backgrounds */
  --bg-body: var(--palette-surface-1);
  --bg-surface: var(--palette-surface-1);    /* Same as body */
  --bg-elevated: var(--palette-surface-2);
  --bg-footer: var(--palette-surface-2);     /* Same as elevated */
  --bg-muted: var(--palette-surface-3);      /* Folder tabs */
  --bg-muted-hover: var(--palette-surface-3); /* Same as muted */

  /* Text */
  --text-primary: var(--palette-foreground-primary);
  --text-secondary: var(--palette-foreground-secondary);
  --text-inverse: var(--palette-foreground-inverse);

  /* Borders */
  --border-strong: var(--palette-foreground-primary);  /* Same as main text */

  /* Accents */
  --accent-primary: var(--palette-accent-1);
  --accent-secondary: var(--palette-foreground-primary);  /* Folder, decorative elements */

  /* Banners */
  --banner-fill-color: var(--palette-banner-fill);

  /* Semantic */
  --color-error: var(--palette-error);

  /* Typography */
  --font-body: var(--palette-font-body);
  --font-heading: var(--palette-font-heading);
  --font-mono: var(--palette-font-mono);

  /* ==================== FIXED VALUES (Non-theme-dependent) ==================== */
  --overlay: rgba(0, 0, 0, 0.8);
  --palette-error: #ff0000;
  --palette-banner-fill: var(--palette-accent-1);

}

/* ==================== BASE STYLES ==================== */
* {
  box-sizing: border-box;
}

html {
  font-size: var(--text-base);
  scroll-behavior: smooth;
  overflow-x: hidden; /* Prevent horizontal scroll */
  overflow-y: auto; /* Allow vertical scroll */
  cursor: none; /* Hide default cursor */
}

body {
  margin: 0;
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background: transparent; /* No background - let .app-body handle it */
  transition: background-color var(--transition), color var(--transition);
  min-height: 100vh;
  overflow-x: hidden; /* Prevent horizontal scroll */
  overflow-y: auto; /* Allow vertical scroll */
  cursor: none; /* Hide default cursor */
}

/* ==================== CUSTOM CURSOR ==================== */
.custom-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background-color: var(--accent-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease-out, width 0.2s ease, height 0.2s ease, opacity 0.3s ease;
  opacity: 1;
}

.custom-cursor.hover {
  width: 24px;
  height: 24px;
}

@media (pointer: coarse) {
  .custom-cursor {
    display: none;
  }
}

p {
  font-family: var(--font-body);
}

/* ==================== LAYOUT COMPONENTS ==================== */
.app-body {
  min-height: 100vh;
  background-color: var(--bg-body); /* Match main-content background */
  transition: background-color var(--transition);
  box-sizing: border-box;
}

/* Scroll trigger spacer */
.scroll-trigger-spacer {
  height: 200vh;
  height: 200dvh; /* Use dynamic viewport height for URL bar flexibility */
  pointer-events: none;
}

.app-header {
  position: fixed;
  top: 0;
  left: 1%;
  right: 1%;
  width: 98%;
  z-index: 1000; /* High z-index to ensure it's above everything */
  padding: var(--space-3) var(--space-6);
  background-color: transparent;
  opacity: 0; /* Hidden initially */
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
}

.app-header.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-top: var(--space-3);
}

.nav-left {
  flex: 0 0 auto;
}

.nav-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  font-family: var(--palette-font-heading);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.nav-right {
  display: flex;
  gap: var(--space-8);
  flex: 0 0 auto;
}

.nav-link {
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--palette-font-heading);
  text-transform: uppercase;
  transition: opacity var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);

  &:hover {
    opacity: 0.7;
  }

  &:visited {
    color: var(--text-primary);
  }
}

.nav-text {
  display: inline;
}

/* ==================== VERTICAL SIDEBAR TEXT ==================== */
.vertical-sidebar-text {
  position: fixed;
  left: 3%;
  top: 60vh;
  transform: rotate(-90deg);
  transform-origin: left center;
  font-size: var(--text-sm);
  font-family: var(--palette-font-accent);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  white-space: nowrap;
  transition: opacity var(--transition), visibility var(--transition);
}

.vertical-sidebar-text.visible {
  opacity: 1;
  visibility: visible;
}

.main-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-4) var(--space-6) var(--space-4);
}

.content-wrapper {
  width: 100%;
  max-width: var(--max-width);
  min-height: var(--min-height);
  display: flex;
  flex-direction: column;
  background-color: transparent;
}

/* ==================== INTRO SECTION ==================== */
.intro-section {
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 500px;
  align-content: center;
}

.intro-text {
  width: 100%;
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: 0;
  font-size: var(--text-xl);
  line-height: var(--line-height-relaxed);
  text-align: center;
  font-weight: var(--font-weight-light);
  color: var(--text-primary);
  font-family: var(--font-body);
  box-sizing: border-box;
}

/* ==================== MAIN CONTENT SECTION ==================== */
.main-content-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  border-radius: var(--radius-md);
  background-color: transparent;
  opacity: 1;
  transform: translateY(0);


}

/* ==================== UTILITY CLASSES ==================== */

/* ==================== ANIMATIONS ==================== */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInMain {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating animations */
@keyframes float-1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

@keyframes float-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-25px, 25px) rotate(-120deg); }
  66% { transform: translate(35px, -15px) rotate(-240deg); }
}

@keyframes float-3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(20px, 30px) rotate(150deg); }
  66% { transform: translate(-30px, -25px) rotate(300deg); }
}

@keyframes float-4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-35px, -20px) rotate(-90deg); }
  66% { transform: translate(25px, 35px) rotate(-180deg); }
}

@keyframes float-5 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(15px, -35px) rotate(180deg); }
  66% { transform: translate(-25px, 15px) rotate(360deg); }
}

/* ==================== RESPONSIVE DESIGN ==================== */
/* Mobile media queries consolidated below at line ~1755 */

/* ==================== ACCESSIBILITY & PRINT STYLES ==================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


@media print {
  /* Removed - header should be visible */

  .intro-text {
    color: black !important;
  }

  .portfolio-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ==================== PERSISTENT BORDER FRAME ==================== */
.border-frame {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: var(--border-frame) solid var(--border-strong);
  pointer-events: none;
  z-index: 10000;
  box-sizing: border-box;

}

/* ==================== OPENING ANIMATION STYLES ==================== */
.opening-animation {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Use dynamic viewport height for URL bar flexibility */
  background-color: var(--bg-body);
  z-index: 2;
  overflow: visible;
  transform: none !important;
  will-change: auto !important;
}

.opening-text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 10;
}

.opening-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 95%;
  max-width: 100%;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
  overflow: visible;
  position: relative;
}

.opening-large-text {
  font-size: clamp(4.5rem, 14.4vw, 19.8rem);
  font-weight: var(--font-weight-bold);
  color: var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-heading);
  line-height: 0.85;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  max-width: 100%;
  position: relative;

  /* Keep text on its original lines, but allow scaling */
  white-space: normal;
  word-break: keep-all;
}

/* Each line in the opening text should be a block element */
.opening-large-text .opening-line {
  display: block;
  white-space: nowrap; /* Prevent wrapping within each line */
  text-align: center; /* Center each line from the start */
  width: auto; /* Auto width so text centers naturally */
  margin: 0 auto; /* Center the line itself */
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

.opening-avatar-wrapper {
  width: clamp(4rem, 10vw, 8rem);
  height: clamp(4rem, 10vw, 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition);
  border-radius: var(--radius-full);
  border: var(--border-frame) solid var(--accent-primary);
  background: transparent;
  position: relative;
}

.opening-avatar-wrapper::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-full);
  border: var(--border-thick) solid var(--accent-primary);
  opacity: 0.6;
}

.opening-avatar {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.opening-scroll-indicator {
  position: absolute;
  bottom: var(--space-7);
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-secondary);
  font-size: var(--text-base);
  z-index: 20;
  opacity: 1;
  pointer-events: none;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

.opening-icons-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

.physics-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 20 !important; /* Above text container so capsules overlay text */
  pointer-events: none; /* Don't block scroll */
  overflow: visible !important; /* Allow banners to be visible */

  canvas {
    display: block !important; /* CRITICAL: Canvas must be visible for mouse tracking */
    width: 100%;
    height: 100%;
    cursor: grab;
    pointer-events: auto; /* Canvas itself can be interacted with */
    opacity: 0; /* Invisible but still captures mouse events */

    &:active {
      cursor: grabbing;
    }
  }
}

/* Capsule styles moved to capsule-styles.css for easier editing */

/* ==================== PHYSICS BANNER STYLES ==================== */
/* Banner capsules with scalloped corners using border-image technique */

.physics-banner {
  position: absolute;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: grab;
  z-index: 21 !important; /* Above text container so capsules overlay "Howdy" text */
  visibility: visible !important;
  opacity: 1 !important;

  /* Scalloped corners applied via border-image (set inline) */
  /* border-image-source and colors set dynamically in JS */

  /* Performance optimizations for smooth animation */
  will-change: transform;
  backface-visibility: hidden; /* Optimize rendering */

  &:active {
    cursor: grabbing;
  }
}

.physics-banner .banner-text {
  color: var(--capsule-text-color);
  font: var(--capsule-text-font);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.main-content-hidden {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Main content - slides up to cover opening */
#main-content {
  position: fixed;
  top: 100vh;
  top: 100dvh; /* Use dynamic viewport height for URL bar flexibility */
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 3; /* Above opening animation so it can slide over */
  background-color: var(--bg-footer); /* Darker beige background to cover opening animation */
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Tab/lip - positioned to be visible in viewport */
.footer-tab {
  position: fixed;
  bottom: var(--space-1);
  left: 50%;
  transform: translateX(-50%);
  width: var(--size-footer-tab);
  height: var(--size-footer-tab);
  background-color: var(--bg-elevated);
  border-radius: var(--radius-full);
  z-index: 1000;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition);
  animation: tabBounce 2s ease-in-out infinite;
}

.footer-tab-arrow {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--border-strong);
  user-select: none;
  margin-top: -2px;
}

/* Bounce animation for footer tab */
@keyframes tabBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}

/* Footer preview bar at the bottom */
.main-content-footer-preview {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--space-8);
  background-color: var(--bg-footer);
  z-index: 999;
  pointer-events: none;
}

.main-container {
  background-color: transparent;
  padding-top: var(--space-8);
  min-height: 100vh;
}

#main-app-container {
  background: transparent;
}

/* ==================== FILING FOLDER TOP ==================== */
.filing-folder-top {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: var(--container-lg);
  height: var(--size-folder-height);
  background-color: var(--accent-secondary); 
  overflow: visible;
  z-index: 10; /* Above table so it can overlay */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* Rounded top corners */
  opacity: 0; /* Hidden initially */
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
  cursor: pointer;

  /* Subtract the tab shape from the folder using SVG clip-path with smooth curves */
  /* Creates a cutout at the top center for the folder tab with rounded edges */
  clip-path: url(#folderClipPath);
}

/* ==================== ARCHIVES TABLE SECTION ==================== */

.archives-section {
  width: 100%;
  margin: 0 auto;
  padding-bottom: var(--space-8);
  background: transparent;
  box-sizing: border-box;
}

@media (min-width: 1200px) {
  .archives-section {
    max-width: var(--container-xl);
  }
}

/* ==================== MOBILE FOOTER ==================== */
.mobile-footer {
  display: none; /* Hidden by default, shown only on mobile */
  padding: var(--space-8) var(--space-5);
  text-align: center;
  background: transparent;
}

.mobile-footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.mobile-footer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.mobile-footer-link:hover {
  opacity: 0.7;
}

.mobile-footer-icon {
  width: var(--size-md);
  height: var(--size-md);
  display: block;
}

.mobile-footer-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-footer-name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
  color: var(--text-primary);
  margin: 0;
}

.mobile-footer-copyright {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-light);
  color: var(--text-primary);
  margin: 0;
  opacity: 0.7;
}

.archives-title {
  font-size: clamp(3rem, 12vw, 10rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--border-strong);
  font-family: var(--palette-font-heading);
  text-align: center;
  margin: 0;
  text-transform: uppercase;
}

.archives-subtitle {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-light);
  color: var(--text-secondary);
  font-family: var(--palette-font-accent);
  text-align: center;
  margin: -40px 0 var(--space-12);
}

/* ==================== LAYOUT 1: FEATURED CARDS (MODULAR) ==================== */
/* Individual featured card layout - can be easily removed */

/* Folder tabs */
.folder-tabs {
  width: 100%;
  max-width: var(--container-md);
  margin: 0 auto;
  margin-top: var(--space-25);
  display: flex;
  gap: var(--space-2);
  padding: 0;
  padding-right: var(--space-8);
}

.folder-tab {
  padding: var(--space-2) var(--space-6);
  background: color-mix(in srgb, var(--bg-muted) 50%, transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}

.folder-tab::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: var(--space-2);
  height: var(--space-2);
  background: transparent;
  border-bottom-right-radius: 8px;
  box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--bg-muted) 50%, transparent);
}

.folder-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -8px;
  width: var(--space-2);
  height: var(--space-2);
  background: transparent;
  border-bottom-left-radius: 8px;
  box-shadow: -4px 4px 0 0 color-mix(in srgb, var(--bg-muted) 50%, transparent);
}

.folder-tab:hover {
  background: color-mix(in srgb, var(--bg-muted) 70%, transparent);
}

.folder-tab:hover::before {
  box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--bg-muted) 70%, transparent);
}

.folder-tab:hover::after {
  box-shadow: -4px 4px 0 0 color-mix(in srgb, var(--bg-muted) 70%, transparent);
}

.folder-tab.active {
  background: var(--bg-muted);
  font-weight: var(--font-weight-medium);
}

.layout-1-container {
  width: 100%;
  max-width: var(--container-md);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-8) var(--space-8) var(--space-16) var(--space-8);
  background-color: var(--bg-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  min-height: 600px;
}

.featured-card {
  width: 100%;
  background: var(--bg-body);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  display: grid;
  grid-template-columns: 0.9fr 1.5fr minmax(220px, 1fr);
  grid-template-rows: 1fr auto;
  gap: var(--space-10);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background var(--transition);
}

.featured-card:hover {
  background: var(--border-strong);
}

.featured-card:hover * {
  color: var(--bg-body);
}

.featured-card:hover .featured-card-arrow {
  color: var(--bg-body);
  border-color: var(--bg-body);
}

.featured-card:hover .featured-card-arrow img {
  filter: invert(1);
}

.featured-card-title {
  grid-column: 1;
  grid-row: 1 / 3;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--font-weight-normal);
  margin: 0;
  color: var(--text-primary);
  line-height: var(--line-height-tight);
  align-self: center;
  text-align: center;
  text-decoration: underline;
}

.featured-card-description {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  margin: 0;
  color: var(--text-primary);
}

.featured-card-image {
  grid-column: 3;
  grid-row: 1 / 3;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: start;
  border: var(--border-normal) solid var(--accent-secondary);
}

.featured-card-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

.featured-card-meta {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: var(--space-6);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-primary);
  align-self: start;
}

.featured-card-company {
  font-weight: var(--font-weight-normal);
}

.featured-card-year {
  font-weight: var(--font-weight-light);
}

.featured-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  width: var(--size-lg);
  height: var(--size-lg);
  border: var(--border-normal) solid var(--border-strong);
  border-radius: var(--radius-full);
  margin-left: auto;
}

.featured-card-arrow img {
  width: var(--size-xs);
  height: var(--size-xs);
  object-fit: contain;
}

/* Featured card mobile responsive - moved to consolidated mobile section below */

/* ==================== LOCK ICON ==================== */

.lock-icon {
  display: block;
  text-align: center;
  margin-bottom: var(--space-2);
  opacity: 1;
  transition: opacity var(--transition), filter var(--transition);
}

.lock-icon img {
  width: var(--space-5);
  height: auto;
  display: inline-block;
}

/* ==================== HOVER PREVIEW (Mouse Follow) ==================== */

/* Hide inline hover images - we use a shared container */
.project-card .hover-preview,
.featured-card .hover-preview {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  visibility: hidden !important;
}

/* Shared hover preview container (created by JS) */
.hover-preview {
  position: fixed;
  width: 625px;
  height: 469px;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: var(--radius-md);
  transition: opacity var(--transition);
}

.hover-preview.visible {
  opacity: 1;
}

/* Image slider */
.hover-preview .hover-image-slider {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.hover-preview .hover-image-item {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.hover-preview .hover-image-item img,
.hover-preview .hover-image-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: var(--radius-md);
}

.hover-preview .hover-image-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.hover-preview .hover-image-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ==================== RESPONSIVE: TABLET ==================== */


/* ==================== PASSWORD MODAL ==================== */
.password-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay);
  backdrop-filter: blur(4px);
}

.password-modal-content {
  position: relative;
  z-index: 100001;
  background-color: var(--bg-surface);
  border: var(--border-thick) solid var(--border-strong);
  border-radius: 0;
  padding: var(--space-8) var(--space-6);
  max-width: var(--container-xs);
  width: 90%;
  text-align: center;
}


.password-modal-title {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
  text-align: center;
}

.password-modal-lock-icon {
  width: var(--space-12);
  height: var(--space-12);
  margin: 0 auto var(--space-6);
  display: block;
  opacity: 0.8;
}

.password-modal-hint {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-light);
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 var(--space-6) 0;
}

.password-input {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  border: var(--border-normal) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-body);
  color: var(--text-primary);
  box-sizing: border-box;
  margin-bottom: var(--space-4);
  transition: border-color var(--transition);
}

.password-input:focus {
  outline: none;
  border-color: var(--border-strong);
}

.password-modal-cancel-link {
  display: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
  margin-top: var(--space-4);
  transition: opacity var(--transition);
}

.password-modal-cancel-link:hover {
  opacity: 0.7;
}

.password-modal-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-2);
}

.password-button {
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-base);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  border: var(--border-thick) solid var(--border-strong);
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--transition);
  letter-spacing: 0.05em;
}

.password-button-primary {
  background-color: var(--border-strong);
  color: var(--text-inverse);
}

.password-button-primary:hover {
  background-color: var(--border-strong);
  border-color: var(--border-strong);
}



.password-button-secondary {
  background-color: transparent;
  color: var(--text-primary);
}

.password-button-secondary:hover {
  background-color: var(--bg-surface);
}


.password-error {
  color: var(--color-error);
  font-size: var(--text-sm);
  text-align: center;
  margin: 0;
}

/* ==================== PROJECT MODAL ==================== */
.project-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.project-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay);
  pointer-events: all;
  opacity: 0;
  transition: opacity var(--transition);
}

.project-modal.active .project-modal-overlay {
  opacity: 1;
}

.project-modal-content {
  position: relative;
  background-color: var(--bg-body);
  border: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  width: 90vw;
  max-width: var(--container-2xl);
  height: 94vh;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: all;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.project-modal-content::-webkit-scrollbar {
  display: none;
}

.project-modal.active .project-modal-content {
  transform: translateY(0);
}

/* Modal header row — full-width top section with title + metadata */
.modal-header-row {
  padding: var(--space-8);
  padding-bottom: var(--space-6);
}

/* Preamble — hero image + slider above bucketed content */
.modal-preamble {
  width: 100%;
  padding: 0 var(--space-8) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Container for all per-bucket sections */
.modal-buckets-container {
  width: 100%;
}

/* Each bucket: two-column grid (text left, images right) on desktop */
.modal-bucket {
  display: grid;
  grid-template-columns: 25% 75%;
  border-top: var(--border-normal) solid var(--border-primary);
}

/* Bucket text — left column */
.modal-bucket-text {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Bucket images — right column */
.modal-bucket-images {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.modal-bucket-images:empty {
  display: none;
}

/* Links row at the bottom of bucketed content */
.modal-links-row {
  border-top: var(--border-normal) solid var(--border-primary);
}

.modal-links-row .modal-bucket-text {
  padding: var(--space-8);
}
/* Close button */
.modal-close-button {
  position: fixed;
  top: var(--space-8);
  right: var(--space-8);
  background: var(--bg-body);
  border: var(--border-normal) solid var(--border-strong);
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--border-strong);
  cursor: pointer;
  padding: 0;
  transition: opacity var(--transition);
  width: var(--space-10);
  height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
}

.modal-close-button:hover {
  opacity: 0.6;
}


/* Dark mode for metadata grid borders */

/* New header row with title and metadata grid */
.modal-header-row {
  display: grid;
  grid-template-columns: 1fr auto;
  position: relative;
}

.modal-title-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-column: 1 / -1;
}

.project-modal-content .modal-title-column h1 {
  font-size: var(--text-3xl);
  line-height: var(--line-height-tight);
  margin: 0;
  width: 100%;
  text-align: center;
  text-decoration: underline;
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  color: var(--border-strong);
}

.modal-metadata-grid {
  grid-column: 1 / -1;
}

/* Metadata grid - 3 centered rows with 1px borders */
.modal-metadata-grid {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: auto;
  font-weight: var(--font-weight-light);
}

.metadata-cell {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.metadata-cell:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .modal-metadata-grid {
    min-height: 80px;
  }
}

/* Role row - centered */
.metadata-cell-role {
  justify-content: center;
}

/* Images within each bucket */
.modal-bucket-images img,
.modal-bucket-images video {
  width: 100%;
  max-width: var(--container-lg);
  height: auto;
  object-fit: contain;
  display: block;
}

/* ==================== BUCKET SECTIONS ====================  */
/* Numbered label shown above each section heading */
.bucket-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-elevated);
  padding: var(--space-2);
  min-height: var(--space-8);
  border-radius: var(--radius-md);
}

.bucket-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  background-color: var(--text-secondary);
  color: var(--bg-body);
  border-radius: var(--radius-md);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  line-height: 1;
  font-family: var(--font-body);
}

.bucket-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}


/* Mermaid diagram container */
.mermaid-placeholder {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background-color: #ffff;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
}

.mermaid-placeholder svg {
  width: 100%;
  height: 100%;
}

.mermaid-placeholder svg text,
.mermaid-placeholder svg tspan,
.mermaid-placeholder svg foreignObject * {
  font-family: 'Caveat', cursive !important;
}

/* +/- zoom controls overlaid on diagram */
.diagram-controls {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 10;
}

.diagram-btn {
  width: 28px;
  height: 28px;
  background: var(--bg-body);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background var(--transition-fast);
}

.diagram-btn:hover {
  background: var(--bg-secondary);
}

/* Sub-number circle in the image caption row: 1.1, 1.2, 2.1 etc. */
.media-sub-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 var(--space-1);
  background-color: var(--text-secondary);
  color: var(--bg-body);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  line-height: 1;
  margin-right: var(--space-2);
}

/* Modal typography - applies to all content in modal */
/* H2 styles for content sections (Context, Work, etc.) */
.project-modal-content h2 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  margin: 0;
  color: var(--text-primary);
}

.project-modal-content p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
  margin: 0;
}

.project-modal-content a {
  font-family: var(--font-body);
  color: var(--text-primary);
  text-decoration: underline;
}

.project-modal-content a:hover {
  opacity: 0.7;
}


/* Hero image — thumbnail shown at top of the image column, no caption */
.modal-hero-image {
  width: 100%;
  max-width: var(--container-lg);
  margin: var(--space-2) 0;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--text-primary);
}

.modal-hero-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
}

/* Device mockup variant — centers and scales the device to fit */
.modal-hero-image--device {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-8) var(--space-6);
  overflow: hidden;
}

.modal-hero-image--device .device {
  flex-shrink: 0;
}

/* Device screen media — JS (setupDeviceScreen) overrides object-fit per image based on aspect ratio.
   Default cover+top is kept for videos (always recorded to match the slot). */
.modal-hero-image--device .device-screen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.modal-hero-image--device video.device-screen {
  object-fit: cover;
  object-position: top;
}

/* Two images/videos stacked vertically under one caption */
.media-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.media-pair img,
.media-pair video {
  width: 100%;
  display: block;
}

/* Audio toggle button overlay for specific videos */
.video-audio-wrapper {
  position: relative;
}

.audio-toggle-btn {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease;
  z-index: 2;
}

.audio-toggle-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.audio-toggle-btn .sound-waves {
  display: none;
}

.audio-toggle-btn.unmuted .mute-x {
  display: none;
}

.audio-toggle-btn.unmuted .sound-waves {
  display: block;
}

/* Media item wrapper with caption */
.modal-media-item {
  width: 100%;
  max-width: var(--container-lg);
  margin: var(--space-2) 0;
  border: var(--space-4) solid var(--bg-elevated);
  border-top: var(--border-normal) solid var(--bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}

.modal-media-caption {
  min-height: var(--space-12);
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  line-height: var(--line-height-normal);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-media-item img,
.modal-media-item video {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}

/* ==================== IMAGE SLIDER ==================== */
.slider-container-wrapper {
  width: 100%;
  max-width: var(--container-lg);
  margin: var(--space-4) 0;
  border: var(--space-4) solid var(--bg-elevated);
  border-top: var(--border-normal) solid var(--bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}

.slider-main-caption {
  min-height: var(--space-12);
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  line-height: var(--line-height-normal);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.image-slider {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-elevated);
}

.slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}

.slider-wrapper:focus {
  outline: none;
}

.slider-track {
  display: flex;
  transition: transform 0.3s ease;
}

.slider-slide {
  min-width: 100%;
  display: none;
  flex-direction: column;
}

.slider-slide.active {
  display: flex;
}

.slider-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.slider-caption {
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  text-align: center;
}

.slider-dots {
  position: absolute;
  bottom: 11%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  z-index: 10;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-lg);
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer !important;
  pointer-events: auto;
  transition: background 0.2s ease;
  padding: 0;
}

.slider-dot.active {
  background: var(--accent-primary);
}

.slider-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}


@media (max-width: 1024px) {
  .archives-section {
    padding: var(--space-8) var(--space-4);
  }

  .hover-preview {
    width: 375px;
    height: 281px;
  }
}

/* ==================== RESPONSIVE: MOBILE (Cards Layout) ==================== */

@media (max-width: 768px) {
  /* General layout adjustments */
  .main-content-section {
    flex-direction: column;
    gap: var(--space-4);
  }

  .content-wrapper {
    max-width: 95vw;
  }

  .intro-section {
    padding: var(--space-8) var(--space-4);
  }

  .archives-subtitle {
    margin: 0 0 var(--space-12);
  }

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

  /* Password modal - mobile adjustments */
  .password-button {
    width: 100%;
  }

  .password-modal-cancel-link {
    display: block;
  }

  /* Fix viewport height - match colleague's approach exactly */
  html {
    height: 100%;
  }

  body {
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
    overflow: hidden; /* No scroll - tap to transition instead */
  }

  .opening-animation {
    height: 100%;
  }

  .opening-text-container,
  .opening-icons-container,
  .physics-container {
    height: 100%;
  }

  #main-content {
    height: 100%;
    overflow: hidden; /* Scrolling happens inside main-container instead */
  }

  .main-container {
    height: 100%;
    overflow-y: auto;
    align-items: flex-start; /* Start content at top instead of centering */
    min-height: auto; /* Remove min-height constraint */
  }

  /* Hide header/nav bar on mobile */
  .app-header {
    display: none;
  }

  /* Hide vertical sidebar text on mobile */
  .vertical-sidebar-text {
    display: none;
  }

  /* Opening animation - larger text for mobile (fewer lines) */
  .opening-large-text,
  .opening-subtitle-text {
    font-size: clamp(4.5rem, 14.4vw, 19.8rem);
  }

  .opening-avatar-wrapper {
    width: 1em;
    height: 1em;
    border-width: 6px;
  }

  .opening-avatar-wrapper::before {
    border-width: var(--border-normal);
  }

  /* Footer tab */
  .footer-tab {
    width: var(--size-footer-tab-mobile);
    height: var(--size-footer-tab-mobile);
  }

  .footer-tab-arrow {
    font-size: var(--text-xl);
  }

  .archives-section {
    padding: var(--space-8) var(--space-5);
  }

  /* Project cards - stack vertically on mobile */
  .project-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    min-height: auto;
    border-bottom: none;
    margin-bottom: var(--space-6);
  }

  .project-card::after {
    display: none; /* Remove hover wipe on mobile */
  }

  /* Hide filing folder and footer preview on mobile */
  .filing-folder-top,
  .main-content-footer-preview {
    display: none;
  }

  /* Make main content start slightly visible at bottom (peeking out) */
  #main-content {
    top: calc(-50px + 100dvh);
  }

  /* Adjust footer tab size and position on mobile */
  .footer-tab {
    position: fixed;
    bottom: var(--space-5);
    left: 50%;
    width: var(--size-footer-tab-mobile);
    height: var(--size-footer-tab-mobile);
    animation: tabBounce 2s ease-in-out infinite;
  }

  .footer-tab-arrow {
    font-size: var(--text-xl);
  }

  /* Bounce animation for footer tab on mobile */
  @keyframes tabBounce {
    0%, 100% {
      transform: translateX(-50%) translateY(0);
    }
    50% {
      transform: translateX(-50%) translateY(-8px);
    }
  }

  /* Disable hover preview on mobile */
  .hover-preview {
    display: none;
  }

  /* Show mobile footer */
  .mobile-footer {
    display: block;
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  /* Featured cards - mobile responsive */
  .layout-1-container {
    padding: var(--space-4);
  }

  .featured-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    gap: var(--space-4);
    padding: var(--space-6);
  }

  .featured-card-title {
    grid-column: 1;
    grid-row: 1;
  }

  .featured-card-image {
    grid-column: 1;
    grid-row: 2;
    max-height: 200px;
    width: 100%;
  }

  .featured-card-description {
    grid-column: 1;
    grid-row: 3;
  }

  .featured-card-meta {
    grid-column: 1;
    grid-row: 4;
  }

  /* Modals - mobile responsive */
  .project-modal-content {
    height: 95vh;
    flex-direction: column;
    display: flex;
    width: 100vw;
    max-width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none; /* Hide scrollbar Firefox */
    -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
  }

  .project-modal-content::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
  }

  /* Stack bucket columns: text on top, images below */
  .modal-bucket {
    grid-template-columns: 1fr;
  }

  .modal-bucket-text {
    padding: var(--space-6);
  }

  .modal-bucket-images {
    padding: var(--space-4) var(--space-6);
    padding-top: 0;
  }

  .modal-bucket-images img,
  .modal-bucket-images video {
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .modal-preamble {
    padding: 0 var(--space-6) var(--space-4);
  }

  /* Stack header on mobile */
  .modal-header-row {
    gap: var(--space-4);
    padding: var(--space-6);
  }

  .project-modal-content .modal-title-column h1 {
    font-size: var(--text-2xl);
  }

  .modal-metadata-grid {
    min-width: auto;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .metadata-cell {
    padding: 0;
    font-size: var(--text-xs);
  }

  /* Adjust media item borders on mobile */
  .modal-media-item {
    border: var(--border-thick) solid var(--bg-elevated);
    border-radius: var(--radius-md);
    margin: var(--space-2) 0;
    overflow: hidden;
    padding: var(--space-2);
  }

  .modal-media-caption {
    min-height: 36px;
    font-size: var(--text-xs);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-bottom: var(--space-3);
  }

  /* Fix modal viewport on mobile */
  .project-modal-content {
    height: 100dvh; /* Full height with dynamic viewport for URL bar adaptation */
    padding-top: calc(env(safe-area-inset-top, 0px) + 50px); /* Safe area + breathing room below status bar */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* Remove transform on mobile to allow position: fixed to work */
  .project-modal.active .project-modal-content {
    transform: none;
  }

  /* Adjust close button position for mobile safe area */
  .modal-close-button {
    top: calc(env(safe-area-inset-top, 0px) + var(--space-4));
    right: var(--space-4);
  }
}

@media (max-width: 480px) {
  .archives-section {
    padding: var(--space-4) var(--space-2);
  }
}