/* ============================================
   MOBILE RESPONSIVENESS SYSTEM
   ============================================
   This stylesheet implements a comprehensive mobile responsiveness system:
   
   1. All pages/sections wrapped in .landing containers
   2. Background images use object-fit: contain, centered, no-repeat
   3. All content elements positioned relative to their container
   4. Overflow: hidden applied to containers to prevent spillage
   5. Touch-friendly EXIF interactions via JavaScript
   6. Desktop styles and hover behaviors preserved
   7. All changes documented for persistence
   
   Mobile breakpoints:
   - ≤768px: Tablet and mobile devices
   - ≤480px: Small mobile phones
   ============================================ */

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

/* AGGRESSIVE GAP REMOVAL - Force all sections to start at top */
/* Applied globally to prevent white gaps on mobile, even after GitHub export */
section:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: 0 !important;
}

/* Ensure no spacing between any sections */
section + section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Prevent any default browser spacing on all sections */
/* Applied globally to prevent white gaps on mobile, even after GitHub export */
section {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* iOS Safari fix: prevent address bar from creating gaps */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Smooth scrolling for entire document */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow-x: hidden;
  /* Prevent any default spacing that creates gaps */
  box-sizing: border-box;
  /* iOS Safari fix: prevent address bar from creating gaps */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body {
  background: transparent !important; /* No background to show through gaps */
  color: #1a1a1a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  font-size: 18px;
  overflow-x: hidden;
  margin: 0 !important;
  padding: 0 !important;
  /* Enable smooth scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Prevent any default spacing that creates gaps */
  border: none;
  box-sizing: border-box;
  /* Ensure body doesn't create gaps */
  height: auto;
  min-height: auto;
  /* Prevent any default spacing that creates gaps on GitHub Pages */
  position: relative;
  width: 100%;
  /* iOS Safari fix: prevent address bar from creating gaps */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Global image optimization */
img {
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box; /* Ensure images stay within containers */
}

/* ============================================
   GLOBAL CONTENT ELEMENT STYLES
   ============================================
   All content elements (buttons, photos, text) resize proportionally
   and stay within their container bounds
   ============================================ */
button,
.photo,
.content-element {
  box-sizing: border-box;
  max-width: 100%;
}

/* Ensure all interactive elements are properly contained */
button {
  overflow: visible;
  white-space: nowrap;
}

figure.photo {
  box-sizing: border-box;
  overflow: hidden; /* Contain photo and EXIF data */
}

/* Landing Page */
/* ============================================
   PAGE CONTAINER STRUCTURE
   ============================================
   Each page/section is wrapped in .landing container
   Backgrounds fit viewport, content elements stay within
   Windows are bound to their parent section
   ============================================ */
.landing {
  position: relative;
  width: 100%;
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden; /* Prevent content from spilling out */
  /* Contain all child elements within this section */
  contain: layout style paint;
  box-sizing: border-box;
  /* Force landing to start at top with no gaps */
  top: 0 !important;
  left: 0 !important;
  vertical-align: top;
}

.landing-background {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  z-index: 1;
  overflow: hidden; /* Contain background image */
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure background fills entire section with no gaps */
  right: 0;
  bottom: 0;
}

.landing-background img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Fit viewport without cropping */
  object-position: center center;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0.95) contrast(1.05);
  /* Smooth transition for any transform changes */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
  /* Maintain landscape on desktop */
  transform-origin: center center;
}

.landing-background .exif-data {
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 2;
}

/* About-me Window - Mac OS X 2009 style, only on landing page */
/* Bound to #landing section - cannot overflow */
#landing .about-me-window {
  position: absolute;
  z-index: 2;
  max-width: 240px; /* 50% smaller (was 480px) */
  width: 240px;
  top: 100px;
  right: 8%;
  left: auto;
  padding: 0;
  transition: left 0.3s ease, top 0.3s ease, z-index 0s;
  /* Mac OS X 2009 window styling */
  background: #E8E8E8;
  border: 1px solid #A0A0A0;
  border-radius: 5px;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: default;
  user-select: none;
  transition: height 0.3s ease, max-height 0.3s ease;
  box-sizing: border-box;
  /* Ensure window stays within #landing section */
  max-width: calc(100% - 16%);
  contain: layout style paint;
}

/* ============================================
   CONTENT ELEMENTS - WINDOW CONTAINMENT
   ============================================
   All content elements positioned relative to .landing container
   Stay within container bounds, resize proportionally on mobile
   Windows are bound to their parent section and cannot overflow
   ============================================ */
.landing-content,
.relearning-window,
.relearning-hear-window {
  position: absolute;
  z-index: 2;
  overflow: hidden; /* Contain content within element */
  box-sizing: border-box; /* Ensure element stays within container */
  /* Prevent windows from overlapping into other sections */
  max-width: 100%;
  max-height: 100vh;
  /* Ensure windows stay within their parent section */
  left: auto;
  right: auto;
}

.landing-content {
  max-width: 480px;
  width: 480px;
  top: 100px;
  right: 8%;
  padding: 0;
  transition: left 0.3s ease, top 0.3s ease, z-index 0s;
  /* Mac OS X 2009 window styling */
  background: #E8E8E8;
  border: 1px solid #A0A0A0;
  border-radius: 5px;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  cursor: default;
  user-select: none;
  transition: height 0.3s ease, max-height 0.3s ease;
}

/* Minimized state */
.landing-content.minimized {
  height: 22px;
  max-height: 22px;
}

.landing-content.minimized .landing-text-wrapper {
  display: none;
}

/* Social Links Window */
/* Bound to #landing section - cannot overflow */
.social-window {
  position: absolute;
  z-index: 2;
  max-width: 380px;
  width: 380px;
  top: 300px;
  left: 8%;
  right: auto;
  padding: 0;
  background: #E8E8E8;
  border: 1px solid #A0A0A0;
  border-radius: 5px;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  max-height: 420px;
  overflow: hidden; /* Contain content within element */
  display: flex;
  flex-direction: column;
  cursor: default;
  user-select: none;
  transition: height 0.3s ease, max-height 0.3s ease;
  will-change: transform;
  box-sizing: border-box; /* Ensure element stays within container */
  /* Ensure window stays within its parent section */
  max-width: calc(100% - 16%);
  contain: layout style paint;
}

.social-window.minimized {
  height: 22px;
  max-height: 22px;
}

.social-window.minimized .social-content {
  display: none;
}

.social-window.minimized .window-title-bar {
  cursor: pointer;
}

.social-window .window-title {
  font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 22px;
  margin: 0;
  padding: 0;
  color: #2C2C2C;
  text-transform: none;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  flex: 1;
}

.social-content {
  padding: 0;
  overflow: hidden;
  flex: 1;
  background: #FFFFFF;
  margin: 2px;
  border: 1px inset #E8E8E8;
  box-shadow: inset 1px 1px 0 #808080;
  min-height: 0;
  max-height: 395px;
}

/* Last.fm Classic Style */
.lastfm-content {
  padding: 10px;
  height: 100%;
  overflow-y: auto;
  background: #FFFFFF;
  max-height: 395px;
}

.lastfm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 2px solid #D51007;
  margin-bottom: 12px;
}

.lastfm-username {
  font-family: 'Verdana', 'Arial', sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #D51007;
  text-transform: lowercase;
  text-decoration: none;
  transition: color 0.2s;
}

.lastfm-username:hover {
  color: #FF0000;
  text-decoration: underline;
}

.lastfm-period {
  font-family: 'Verdana', 'Arial', sans-serif;
  font-size: 10px;
  color: #666666;
}

.lastfm-artists {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lastfm-artist {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-left: 3px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.lastfm-artist:hover {
  background: #F5F5F5;
  border-left-color: #D51007;
}

.lastfm-rank {
  font-family: 'Verdana', 'Arial', sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #D51007;
  width: 20px;
  text-align: right;
  flex-shrink: 0;
}

.lastfm-artist-info {
  flex: 1;
  min-width: 0;
}

.lastfm-artist-name {
  font-family: 'Verdana', 'Arial', sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 2px;
}

.lastfm-artist-name a {
  color: #000000;
  text-decoration: none;
}

.lastfm-artist-name a:hover {
  color: #D51007;
  text-decoration: underline;
}

.lastfm-playcount {
  font-family: 'Verdana', 'Arial', sans-serif;
  font-size: 9px;
  color: #666666;
}

.lastfm-loading,
.lastfm-error {
  font-family: 'Verdana', 'Arial', sans-serif;
  font-size: 11px;
  color: #666666;
  text-align: center;
  padding: 20px;
}

.lastfm-error {
  color: #D51007;
}

/* Scrollbar for Last.fm content */
.lastfm-content::-webkit-scrollbar {
  width: 12px;
}

.lastfm-content::-webkit-scrollbar-track {
  background: #F5F5F5;
  border-left: 1px solid #E0E0E0;
}

.lastfm-content::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-left: 1px solid #E0E0E0;
}

.lastfm-content::-webkit-scrollbar-thumb:hover {
  background: #BBBBBB;
}

/* Resize handle effect in bottom right corner */
.landing-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background-image: 
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.15) 2px,
      rgba(0, 0, 0, 0.15) 3px
    );
  pointer-events: none;
  z-index: 5;
}

/* Mac OS X 2009 Title Bar */
.window-title-bar {
  height: 22px;
  background: linear-gradient(to bottom, #D0D0D0 0%, #B0B0B0 100%);
  border-bottom: 1px solid #808080;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  -webkit-app-region: drag;
}

/* Mobile: Disable drag functionality - make title bar static */
@media (max-width: 768px) {
  .window-title-bar {
    cursor: default !important; /* Not draggable on mobile */
    -webkit-app-region: no-drag !important;
    pointer-events: auto; /* Allow clicks but not drag */
  }

  /* Show only close button on mobile - hide minimize/zoom */
  .window-controls {
    display: flex !important; /* Show controls on mobile for close button */
  }

  .window-controls .window-minimize,
  .window-controls .window-zoom {
    display: none !important; /* Hide minimize and zoom buttons */
  }

  .window-controls .window-close {
    display: block !important; /* Show close button */
  }

  /* ============================================
     FIRST PAGE: Interactive Windows (Mobile Only)
     ============================================
     Windows on first page (#landing) are hidden by default
     Show only title bar as clickable indicator
     Toggle full window visibility when title bar is clicked
     Windows can overlap if needed
     ============================================ */
  /* Hide window content by default, show only title bar as clickable indicator */
  #landing .about-me-window:not(.window-active),
  #landing .social-window:not(.window-active) {
    height: 22px !important; /* Only title bar height */
    max-height: 22px !important;
    overflow: hidden;
  }

  #landing .about-me-window:not(.window-active) .landing-text-wrapper,
  #landing .about-me-window:not(.window-active) .social-content,
  #landing .social-window:not(.window-active) .social-content {
    display: none !important; /* Hide content when not active */
  }

  /* Show full window when active */
  #landing .about-me-window.window-active {
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    opacity: 1;
    visibility: visible;
  }

  #landing .social-window.window-active {
    height: auto !important;
    max-height: 250px !important; /* Keep max-height constraint */
    display: flex !important;
    opacity: 1;
    visibility: visible;
  }

  #landing .about-me-window.window-active .landing-text-wrapper,
  #landing .social-window.window-active .social-content {
    display: block !important; /* Show content when active */
  }

  /* Make title bars always visible and clickable - mobile only */
  #landing .about-me-window .window-title-bar,
  #landing .social-window .window-title-bar {
    cursor: pointer !important;
    display: flex !important; /* Always show title bar */
    flex-shrink: 0;
  }

  /* Title bar hover effect to indicate clickability */
  #landing .about-me-window:not(.window-active) .window-title-bar:hover,
  #landing .social-window:not(.window-active) .window-title-bar:hover {
    background: linear-gradient(to bottom, #E0E0E0 0%, #C0C0C0 100%) !important;
  }
}

.window-title-bar:hover {
  background: linear-gradient(to bottom, #D8D8D8 0%, #B8B8B8 100%);
}

.social-window .window-title-bar {
  cursor: move;
}

/* ============================================
   SECTION CONTAINMENT & SEAMLESS FLOW
   ============================================
   All sections are exactly viewport height with no gaps.
   Windows are contained within their parent sections.
   ============================================ */
section {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden;
  position: relative;
  /* Ensure no gaps above or between sections */
  border: none !important;
  box-sizing: border-box;
  /* Force sections to start at top with no spacing */
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  /* Remove any default spacing */
  vertical-align: top !important;
  display: block !important;
}

.relearning-section {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden;
  position: relative;
}

.opinion-section {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden;
  position: relative;
}

/* Enter Noise Journal Button - Masking Tape Style */
/* Content element: positioned relative to .landing container */
#enter-noise-journal {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  font-family: 'Permanent Marker', 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 24px;
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 20px;
  box-sizing: border-box; /* Ensure button stays within container */
  max-width: calc(100% - 80px); /* Prevent overflow on small screens */
  /* Realistic masking tape background */
  background: 
    linear-gradient(135deg, #f5f5dc 0%, #f0f0e0 50%, #f5f5dc 100%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
  background-size: 100% 100%, 8px 100%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  transform: translateY(-50%) rotate(-1.5deg);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Masking tape torn edge effect */
#enter-noise-journal::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  width: 4px;
  height: 100%;
  background: linear-gradient(to right, 
    rgba(245, 245, 220, 0.8) 0%,
    rgba(245, 245, 220, 0.4) 50%,
    transparent 100%
  );
  border-radius: 2px 0 0 2px;
}

#enter-noise-journal::after {
  content: '';
  position: absolute;
  top: 0;
  right: -2px;
  width: 4px;
  height: 100%;
  background: linear-gradient(to left, 
    rgba(245, 245, 220, 0.8) 0%,
    rgba(245, 245, 220, 0.4) 50%,
    transparent 100%
  );
  border-radius: 0 2px 2px 0;
}

#enter-noise-journal:hover,
#enter-noise-journal:focus {
  color: #ff6b35;
  transform: translateY(-50%) rotate(-0.5deg) scale(1.05);
  /* Film halation effect - warm orange/red glow */
  text-shadow: 
    0 0 8px rgba(255, 107, 53, 0.8),
    0 0 16px rgba(255, 107, 53, 0.6),
    0 0 24px rgba(255, 107, 53, 0.4),
    0 0 32px rgba(255, 107, 53, 0.2),
    0 0 40px rgba(255, 107, 53, 0.1);
  box-shadow: 
    0 3px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 20px rgba(255, 107, 53, 0.3),
    0 0 40px rgba(255, 107, 53, 0.15),
    0 0 60px rgba(255, 107, 53, 0.1);
}

/* Relearning windows - bound to their respective sections */
.relearning-window {
  top: 100px;
  right: 8%;
  /* Inherits overflow: hidden and box-sizing from .landing-content */
  /* Ensure window stays within #relearning-page section */
  max-width: calc(100% - 16%);
  contain: layout style paint;
}

.relearning-window .landing-title,
.relearning-hear-window .landing-title {
  font-size: 10px;
  padding: 0 60px;
  white-space: normal;
  line-height: 1.3;
  word-wrap: break-word;
}

.relearning-hear-window {
  top: 100px;
  right: 8%;
  /* Inherits overflow: hidden and box-sizing from .landing-content */
  /* Ensure window stays within #relearning-hear-page section */
  max-width: calc(100% - 16%);
  contain: layout style paint;
}

/* Sound typography - experimental, rhythm-based */
.sound-text {
  text-align: center;
}

.sound-quote {
  margin: 40px 0;
  line-height: 1.8;
}

.quote-line-1,
.quote-line-2,
.quote-line-3 {
  font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 8px;
  letter-spacing: 1px;
  color: #1a1a1a;
}

.quote-line-1 {
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 600;
}

.quote-line-2 {
  font-size: 15px;
  letter-spacing: 1.5px;
  font-weight: 400;
}

.quote-line-3 {
  font-size: 13px;
  letter-spacing: 0.8px;
  font-style: italic;
  font-weight: 300;
  margin-top: 12px;
}

.tags {
  font-size: 11px;
  color: #666;
  font-style: italic;
}

.read-more {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #808080;
}

.read-more a {
  color: #0000FF;
  text-decoration: underline;
  font-weight: 600;
}

/* Window Controls - Mac OS X 2009 Style (Traffic Lights) */
.window-controls {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  z-index: 11;
  -webkit-app-region: no-drag;
  cursor: default;
}

.window-controls button {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.5) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
  z-index: 20;
  pointer-events: auto;
}

.window-close {
  background: #FF5F57;
  border-color: rgba(0, 0, 0, 0.15);
}

.window-close:hover {
  background: #FF6F67;
}

.window-close:active {
  background: #EE4F47;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) inset;
}

.window-minimize {
  background: #FFBD2E;
  border-color: rgba(0, 0, 0, 0.15);
}

.window-minimize:hover {
  background: #FFCD3E;
}

.window-minimize:active {
  background: #EEAD1E;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) inset;
}

.window-zoom {
  background: #28C940;
  border-color: rgba(0, 0, 0, 0.15);
}

.window-zoom:hover {
  background: #38D950;
}

.window-zoom:active {
  background: #18B930;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) inset;
}

.landing-title {
  font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 22px;
  margin: 0;
  padding: 0;
  color: #2C2C2C;
  text-transform: none;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  flex: 1;
}

.landing-text-wrapper {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: auto;
  scrollbar-color: #808080 #E8E8E8;
  background: #FFFFFF;
  margin: 2px;
  border: 1px inset #E8E8E8;
  box-shadow: inset 1px 1px 0 #808080;
  min-height: 0;
}

.landing-text-wrapper::-webkit-scrollbar {
  width: 16px;
}

.landing-text-wrapper::-webkit-scrollbar-track {
  background: #C0C0C0;
  border-left: 1px solid #808080;
}

.landing-text-wrapper::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #808080 0%, #606060 100%);
  border: 1px solid #000000;
  border-right: none;
}

.landing-text-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, #909090 0%, #707070 100%);
}

.landing-text {
  font-family: 'Geneva', 'Lucida Grande', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #000000;
  margin: 0;
}

.landing-text p {
  margin-bottom: 12px;
  font-weight: 400;
}

.landing-text .intro-lead {
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.landing-text a {
  color: #0000FF;
  text-decoration: underline;
  text-underline-offset: 1px;
}

.landing-text a:hover {
  color: #0066FF;
}

.landing-text .book-note {
  font-style: italic;
  color: #000000;
  padding-left: 16px;
  border-left: 2px solid #808080;
}

.gear-list {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #808080;
}

.gear-list strong {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
}

.gear-list ul {
  list-style: none;
  padding-left: 0;
}

.gear-list li {
  margin-bottom: 6px;
  padding-left: 16px;
  position: relative;
  font-size: 12px;
  line-height: 1.5;
}

.gear-list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #000000;
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.scroll-link {
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  transition: all 0.3s;
  animation: bounce 2s infinite;
}

.scroll-link:hover {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  transform: translateX(-50%) translateY(5px);
}

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

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 24px 32px;
  background: rgba(250, 250, 250, 0.95);
  backdrop-filter: blur(10px);
  z-index: 200;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  box-sizing: border-box;
  /* Prevent header from creating gaps */
  padding-top: 24px;
  padding-bottom: 24px;
}

header h1 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: lowercase;
  color: #1a1a1a;
  margin: 0;
}

.site-nav {
  display: flex;
  gap: 24px;
  align-items: center;
}

.site-nav a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: lowercase;
  color: #1a1a1a;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus {
  opacity: 0.7;
}

/* Dropdown Menu */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 2px;
  background: rgba(250, 250, 250, 0.98);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 120px;
  z-index: 1000;
  padding: 8px 0;
  /* Extend upward to bridge hover gap */
  padding-top: 12px;
  margin-top: -8px;
}

.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: lowercase;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 0.2s ease;
}

/* First menu item extends upward to bridge hover gap */
.dropdown-menu a:first-child {
  padding-top: 12px;
  margin-top: -4px;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus {
  background: rgba(0, 0, 0, 0.05);
  opacity: 1;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
}

/* Touch device support for dropdown */
@media (hover: none) {
  .dropdown.active .dropdown-menu {
    display: block;
  }
}

/* Main Content */
main {
  max-width: 700px;
  margin: 0 auto;
  padding: 100px 24px 80px;
  /* Prevent overflow */
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Posts */
article.post {
  margin-bottom: 120px;
  scroll-margin-top: 100px;
}

article.post:last-child {
  margin-bottom: 60px;
}

/* Photo Styling - 35mm aesthetic */
figure.photo {
  margin: 0 0 40px 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}

figure.photo img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  filter: contrast(1.05) brightness(0.98) saturate(1.1);
  /* Film grain effect */
  background-image: 
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.03) 0px,
      transparent 1px,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 3px
    );
  image-rendering: -webkit-optimize-contrast;
  object-fit: contain;
  /* Prevent overflow on mobile */
  overflow: hidden;
}

/* EXIF Data - Thin Banner on Border */
.exif-data {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

figure.photo:hover .exif-data,
.landing-background:hover .exif-data {
  opacity: 1;
  transform: translateY(0);
}

/* Touch-friendly EXIF interactions */
/* Make EXIF data areas touch-friendly */
@media (hover: none) {
  .landing-background,
  figure.photo {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }
  
  /* On touch devices, EXIF starts hidden but can be toggled */
  .landing-background .exif-data,
  figure.photo .exif-data {
    /* Keep default hidden state, toggle via JavaScript */
    opacity: 0;
    transform: translateY(100%);
  }
}

/* Touch-friendly EXIF toggle class (for JavaScript) */
.exif-data.touch-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.exif-banner {
  display: block;
  font-family: 'Courier New', Courier, 'Liberation Mono', 'Lucida Console', monospace;
  font-size: 7px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.9);
  /* Apple-style glassmorphism banner */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 4px 8px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 -2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  letter-spacing: 0.2px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Landing page EXIF positioning - same banner style */
.landing-background .exif-data {
  bottom: 0;
  left: 0;
  right: 0;
}

.landing-background .exif-banner {
  font-size: 8px;
  padding: 5px 10px;
}

/* Post Content */
.post-content {
  width: 100%;
}

.post-content time {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 12px;
  font-weight: 400;
}

.post-content h2 {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #1a1a1a;
  letter-spacing: -0.5px;
}

.post-content p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 18px;
  color: #333;
  font-weight: 300;
}

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

/* Footer */
footer {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 24px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  /* Prevent footer from creating gaps */
  margin-top: 0;
  box-sizing: border-box;
}

footer p {
  font-size: 12px;
  color: #999;
  letter-spacing: 1px;
  text-transform: uppercase;
}

footer .footer-subtext {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  body > section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
  }

  header {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
  }

  section:first-of-type {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  section + section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
  }

  #relearning-hear-page + #opinion-page,
  section#relearning-hear-page + section#opinion-page,
  #relearning-hear-page + .opinion-section,
  section#relearning-hear-page + .opinion-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #opinion-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Fix all images for mobile */
  img {
    max-width: 100%;
    height: auto;
    width: 100%;
    object-fit: contain;
    display: block;
  }

  /* ============================================
     MOBILE: Background Sections - Full Viewport Coverage
     ============================================
     ALL sections are exactly 100vh on mobile
     Background images use cover scaling and center positioning
     No margins/padding that create white space
     Applied globally to all pages
     ============================================ */
  /* All background containers - exactly 100vh, no gaps */
  /* iOS Safari fix: Use 100dvh (dynamic viewport height) for better mobile support */
  .landing-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    /* Use both 100vh and 100dvh for maximum compatibility */
    height: 100vh !important; /* Exactly 100% of viewport height */
    height: 100dvh !important; /* Dynamic viewport height for iOS Safari */
    min-height: 100vh !important;
    min-height: 100dvh !important; /* Dynamic viewport height for iOS Safari */
    max-height: 100vh !important;
    max-height: 100dvh !important; /* Dynamic viewport height for iOS Safari */
    overflow: hidden !important;
    z-index: 1; /* Background layer */
    /* Remove all margins and padding */
    margin: 0 !important;
    padding: 0 !important;
    /* Ensure no gaps */
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    /* iOS Safari specific: prevent address bar from creating gaps */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* All background images - cover and center on mobile */
  .landing-background img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Cover scaling - fills entire section */
    object-position: center center !important; /* Center the image */
    /* Remove any transforms that might create gaps */
    transform: none !important;
    transform-origin: center center;
    /* Smooth transition */
    transition: filter 0.3s ease;
    display: block !important;
    /* Ensure image fills container completely */
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Prevent any gaps */
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ============================================
     MOBILE: Background Container as Flex Container
     ============================================
     Background container uses flexbox layout on mobile
     All elements are positioned inside/relative to background container
     Background image remains unchanged, elements flow on top
     ============================================ */
  /* ============================================
     MOBILE: Background Container Layout
     ============================================
     Section uses flexbox - elements are positioned inside/relative to background
     Background container remains absolute for layering
     All content elements flow on top of background using flexbox
     ============================================ */
  /* Landing section: flex container for all elements - exactly 100vh, no gaps */
  /* iOS Safari fix: Use 100dvh (dynamic viewport height) for better mobile support */
  .landing {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 15px 10px !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    gap: 15px !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 2;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    scroll-margin-top: 0 !important;
    scroll-margin-bottom: 0 !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* Ensure #landing section content stays above other sections */
  #landing {
    z-index: 10 !important;
    position: relative !important;
  }

  /* Background container already defined above - uses cover scaling */

  /* ============================================
     MOBILE-FIRST: SECTION CONTAINMENT
     ============================================
     All sections are exactly viewport height with no gaps.
     Windows are constrained to viewport width.
     Prevent overflow-x globally.
     ============================================ */
  /* ALL sections: exactly 100vh, no white gaps - GLOBAL MOBILE FIX */
  /* iOS Safari fix: Use 100dvh (dynamic viewport height) for better mobile support */
  section {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
    position: relative !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    contain: layout style paint;
    box-sizing: border-box !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    vertical-align: top !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    display: block !important;
    scroll-margin-top: 0 !important;
    scroll-margin-bottom: 0 !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  /* ALL sections: exactly 100vh with no margins/padding on mobile - GLOBAL */
  /* iOS Safari fix: Use 100dvh (dynamic viewport height) for better mobile support */
  section,
  section.landing,
  section#landing,
  section#relearning-page,
  section#relearning-hear-page,
  section#opinion-page,
  .relearning-section,
  .opinion-section {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-sizing: border-box;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    vertical-align: top !important;
    position: relative !important;
    scroll-margin-top: 0 !important;
    scroll-margin-bottom: 0 !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Notebook Page - Mobile Responsive */
  #landing .notebook-page {
  position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(100%); /* Hidden by default on mobile */
    width: 90%;
    max-width: 90%;
    max-height: 85vh;
    z-index: 15; /* Above all elements on mobile */
  }

  #landing .notebook-page.open {
    transform: translateY(-50%) translateX(0);
  }

  #landing .notebook-content {
    padding: 0 20px 20px 28px;
    font-size: 11px;
    line-height: 32px; /* Maintain line alignment */
    max-height: calc(85vh - 20px);
  }

  /* About-me trigger button - Mobile */
  #landing .about-me-trigger {
    right: 5px;
    font-size: 12px;
    padding: 6px 10px;
    display: inline-block !important;
  }

  /* Content elements: anchored on top of background, scale correctly on mobile */
  /* First page windows show title bar by default, toggle full window on click */
  #landing .landing-content,
  #landing .about-me-window {
    position: relative !important; /* Anchored to background section */
    order: 1; /* Can appear in any order - can overlap */
    width: 100% !important;
    max-width: 85% !important; /* Responsive width - scales correctly */
    margin: 0 !important; /* No margin, use gap instead */
    max-height: none !important; /* Full height when active */
    height: 22px !important; /* Title bar height by default */
    z-index: 10 !important; /* Above background (z-index: 1) - stays on top */
    padding: 0;
    backdrop-filter: blur(6px);
    background-color: rgba(20, 20, 20, 0.35);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box !important;
    /* Flex properties - anchored inside background container */
    flex-shrink: 0;
    flex-grow: 0;
    align-self: center; /* Center within flex container */
    /* Prevent overflow */
    overflow-x: hidden !important;
    min-width: 0;
    /* Smooth transition for show/hide */
    transition: height 0.3s ease, max-height 0.3s ease !important;
  }

  /* Force windows to always be open when active - remove minimized state */
  #landing .landing-content.minimized,
  #landing .about-me-window.minimized {
    height: auto !important;
    max-height: none !important;
  }

  #landing .landing-content.minimized .landing-text-wrapper,
  #landing .about-me-window.minimized .landing-text-wrapper {
    display: block !important; /* Always show content when active */
  }

  /* Relearning windows: anchored on top of background, scale correctly on mobile */
  .relearning-window,
  .relearning-hear-window {
    position: relative !important; /* Anchored to background section */
    order: 1; /* Control stacking order */
    width: 100% !important;
    max-width: 85% !important; /* Responsive width - scales correctly */
    margin: 0 !important; /* No margin, use gap instead */
    max-height: none !important; /* Always full height - no minimize */
    height: auto !important; /* Natural height */
    z-index: 10 !important; /* Above background (z-index: 1) - stays on top */
    backdrop-filter: blur(6px);
    background-color: rgba(20, 20, 20, 0.35);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box !important;
    /* Flex properties - anchored inside background container */
    flex-shrink: 0;
    flex-grow: 0;
    align-self: center; /* Center within flex container */
    /* Prevent overflow */
    overflow-x: hidden !important;
    min-width: 0;
    /* Disable minimize state on mobile */
    transition: none !important; /* No transitions for dragging */
  }

  /* Force relearning windows to always be open on mobile */
  .relearning-window.minimized,
  .relearning-hear-window.minimized {
    height: auto !important;
    max-height: none !important;
  }

  .relearning-window.minimized .landing-text-wrapper,
  .relearning-hear-window.minimized .landing-text-wrapper {
    display: block !important; /* Always show content */
  }

  /* Social window: anchored on top of background, scale correctly on mobile */
  /* Last.fm window always open on mobile with increased height for 10 items */
  /* High z-index to stay above other sections' backgrounds */
  #landing .social-window,
  #landing .social-window:not(.window-active),
  #landing .social-window.window-active,
  #landing .social-window.minimized {
    position: relative !important;
    order: 1;
    width: 100% !important;
    max-width: 70% !important;
    margin: 0 !important;
    max-height: 400px !important; /* Increased height to show 10 items */
    height: auto !important; /* Always open on mobile */
    z-index: 100 !important; /* High z-index to stay above other sections */
    backdrop-filter: blur(6px);
    background-color: rgba(20, 20, 20, 0.35);
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box !important;
    flex-shrink: 1;
    flex-grow: 0;
    align-self: center;
    overflow-x: hidden !important;
    min-width: 0;
    transition: none !important;
  }

  /* Force social window content to always be visible */
  #landing .social-window .social-content,
  #landing .social-window:not(.window-active) .social-content,
  #landing .social-window.window-active .social-content,
  #landing .social-window.minimized .social-content {
    display: block !important;
  }

  .social-content {
    max-height: 350px !important; /* Increased to show 10 items */
    overflow-y: auto;
  }

  .lastfm-content {
    max-height: 320px !important; /* Increased to show 10 items */
    overflow-y: auto;
    padding: 8px !important;
    font-size: 9px !important;
  }

  /* Make Last.fm text smaller on mobile */
  .lastfm-header {
    padding-bottom: 4px !important;
  }

  .lastfm-username {
    font-size: 10px !important;
  }

  .lastfm-period {
    font-size: 8px !important;
  }

  .lastfm-artist {
    padding: 4px !important;
    gap: 6px !important;
  }

  .lastfm-rank {
    font-size: 9px !important;
    width: 16px !important;
  }

  .lastfm-artist-name {
    font-size: 9px !important;
  }

  .lastfm-playcount {
    font-size: 7px !important;
  }

  /* EXIF data: anchored to background container */
  .landing-background .exif-data {
    position: absolute !important; /* Keep absolute for background overlay */
    bottom: 15px !important;
    left: 15px !important;
    right: auto !important;
    z-index: 15 !important; /* Above all content */
    margin: 0;
    padding: 0;
  }

  /* Enter noise journal button: inside background container, positioned at bottom on mobile */
  #enter-noise-journal {
    position: relative !important;
    order: 999 !important; /* Move to bottom */
    z-index: 15 !important;
    max-width: calc(100% - 40px) !important;
    width: auto !important;
    margin: auto auto 20px auto !important; /* Push to bottom with bottom margin */
    font-size: 18px !important;
    padding: 10px 16px;
    align-self: center !important; /* Center horizontally */
    flex-shrink: 0;
    margin-top: auto !important; /* Push to bottom of flex container */
  }

  /* Text elements: smaller sizing for mobile */
  .landing-text-wrapper {
    padding: 12px 10px; /* Reduced padding */
    min-height: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-height: calc(70vh - 50px); /* Adjusted for smaller windows */
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal overflow */
    box-sizing: border-box; /* Ensure proper sizing */
  }

  /* Ensure text never gets cut off - smaller font for mobile */
  .landing-text {
    padding: 0 4px; /* Reduced padding */
    margin: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    line-height: 1.5; /* Tighter line height */
    font-size: 10px; /* Smaller font for mobile */
    box-sizing: border-box; /* Ensure proper sizing */
    max-width: 100%; /* Prevent overflow */
  }

  .landing-text p {
    margin-bottom: 18px;
    padding: 0;
  }

  .landing-text a {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .landing-title {
    font-size: 9px; /* Smaller title for mobile */
    padding: 0 40px; /* Reduced padding */
    line-height: 1.3;
  }

  /* Remove duplicate .landing-text rule - already defined above */
  
  .landing-text .intro-lead {
    font-size: 10px; /* Smaller lead text for mobile */
  }

  .sound-text {
    padding: 20px 0;
  }

  .sound-quote {
    margin: 30px 0;
  }

  .quote-line-1 {
    font-size: 14px;
  }

  .quote-line-2 {
    font-size: 13px;
  }

  .quote-line-3 {
    font-size: 12px;
  }

  .gear-list li {
    font-size: 11px;
  }

  /* Scroll indicator: contained within landing container */
  .scroll-indicator {
    position: relative;
    bottom: auto;
    margin: 30px auto;
    display: block;
    z-index: 10;
    box-sizing: border-box;
    max-width: 100%; /* Prevent overflow */
  }

  .scroll-link {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 20px;
  }

  header {
    padding: 20px 16px !important;
    flex-direction: row;
    margin: 0 !important;
    /* Collapse unnecessary padding around headers */
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    box-sizing: border-box;
  }

  header h1 {
    font-size: 12px;
  }

  .site-nav {
    gap: 16px;
  }

  .site-nav a {
    font-size: 12px;
  }

  .dropdown-menu {
    right: 0;
    min-width: 100px;
  }

  .dropdown-menu a {
    font-size: 12px;
    padding: 6px 12px;
  }

  main {
    padding: 80px 20px 60px;
  }

  article.post {
    margin-bottom: 70px;
  }

  .post-content time {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .post-content h2 {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 16px;
  }

  .post-content p {
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 16px;
  }

  figure.photo {
    margin-bottom: 28px;
    overflow: hidden;
  }

  figure.photo img {
  width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  .exif-banner {
    font-size: 6px;
    padding: 3px 6px;
  }

  .landing-background .exif-banner {
    font-size: 7px;
    padding: 4px 8px;
  }

  .landing-background .exif-data {
    bottom: 15px;
    left: 15px;
  }

  footer {
    padding: 30px 20px;
  }

  /* Enter Noise Journal Button - Mobile (Anchored to container, bottom of page) */
  #enter-noise-journal {
    position: relative !important;
    order: 999 !important; /* Move to bottom */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: rotate(-1.5deg);
    font-size: 20px;
    padding: 10px 16px;
    z-index: 10;
    margin: auto auto 20px auto !important; /* Push to bottom with bottom margin */
    align-self: center !important; /* Center horizontally */
    flex-shrink: 0;
    margin-top: auto !important; /* Push to bottom of flex container */
  }

  #enter-noise-journal:hover,
  #enter-noise-journal:focus {
    transform: rotate(-0.5deg) scale(1.05);
  }

  /* Scroll indicators: inside background container, positioned with flexbox */
  .scroll-indicator {
    position: relative !important; /* Relative to .landing flex container */
    order: 3; /* Appears last in flex container */
    margin: 0 !important; /* No margin, use gap instead */
    z-index: 10 !important; /* Above background */
    flex-shrink: 0;
    align-self: center; /* Center within flex container */
  }

  /* Prevent horizontal overflow for containers - mobile-first */
  .landing-content,
  .social-window,
  .relearning-window,
  .relearning-hear-window,
  .about-me-window,
  .landing-text-wrapper,
  .social-content,
  .lastfm-content {
    overflow-x: hidden !important;
    word-wrap: break-word;
    /* Smooth scrolling for all content containers */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Constrain to viewport width */
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* ============================================
     SMOOTH SCROLLING FOR MOBILE
     ============================================
     Ensures all scrollable elements scroll smoothly
     with momentum on mobile devices
     ============================================ */
  .landing-text-wrapper,
  .social-content,
  .lastfm-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Smooth momentum scrolling on iOS */
    overscroll-behavior: contain;
  }
}

/* Small mobile phones */
@media (max-width: 480px) {
  /* ============================================
     SMALL MOBILE: Background Image Rotation
     ============================================
     Maintains counter-clockwise rotation for very small screens.
     
     IMPORTANT: Background images fit viewport without zooming or cropping.
     Uses object-fit: contain with viewport-based dimensions (100vh x 100vw)
     to ensure full image visibility on all mobile devices.
     ============================================ */
  .landing-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh !important; /* Exactly viewport height - seamless */
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    z-index: 1; /* Background layer */
    margin: 0;
    padding: 0;
  }

  .landing-background img {
    /* Maintain counter-clockwise rotation on small screens - fit viewport without zoom */
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vh;
    height: 100vw;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center center;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Ensure image doesn't overflow or zoom */
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  img {
    max-width: 100%;
    height: auto;
    overflow: hidden;
  }

  /* Small mobile: ALL landing sections - exactly 100vh, no gaps */
  .landing {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 12px 8px !important; /* Slightly less padding on small screens */
    margin: 0 !important; /* No top/bottom margins - eliminate white gaps */
    height: 100vh !important; /* Exactly 100% of viewport height */
    min-height: 100vh !important;
    max-height: 100vh !important;
    gap: 12px !important; /* Slightly smaller gap on small screens */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 2;
    box-sizing: border-box !important;
    border: none !important; /* No borders */
    /* Ensure no gaps */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  /* Small mobile: ALL background containers - exactly 100vh, cover scaling */
  .landing-background {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important; /* Exactly 100% of viewport height */
    min-height: 100vh !important;
    max-height: 100vh !important;
    z-index: 1;
    overflow: hidden !important;
    margin: 0 !important; /* No margins - eliminate gaps */
    padding: 0 !important; /* No padding - eliminate gaps */
    border: none !important;
  }

  /* Small mobile: ALL background images - cover and center */
  .landing-background img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Cover scaling - fills entire section */
    object-position: center center !important; /* Center the image */
    transform: none !important; /* No rotation on small mobile */
    display: block !important;
    image-rendering: auto;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Small mobile: content elements - static, always open */
  .landing-content,
  .about-me-window {
    position: relative !important;
    max-width: 90% !important; /* Wider on small screens */
    width: 100% !important;
    margin: 0 auto !important;
    max-height: none !important;
    height: auto !important; /* Always full height */
    z-index: 10 !important;
    transition: none !important; /* No transitions */
  }

  /* Force windows open on small mobile */
  .landing-content.minimized,
  .about-me-window.minimized {
    height: auto !important;
    max-height: none !important;
  }

  .landing-content.minimized .landing-text-wrapper,
  .about-me-window.minimized .landing-text-wrapper {
    display: block !important;
  }

  /* Small mobile: social window - static, always open */
  .social-window {
    position: relative !important;
    max-width: 85% !important;
    width: 100% !important;
    margin: 0 auto !important;
    max-height: 200px !important;
    height: auto !important;
    z-index: 10 !important;
    transition: none !important; /* No transitions */
  }

  .social-window.minimized {
    height: auto !important;
    max-height: 200px !important;
  }

  .social-window.minimized .social-content {
    display: block !important;
  }

  .relearning-window,
  .relearning-hear-window {
    position: relative !important;
    max-width: 90% !important;
    width: 100% !important;
    margin: 0 auto !important;
    max-height: none !important;
    height: auto !important; /* Always full height */
    z-index: 10 !important;
    transition: none !important; /* No transitions */
  }

  .relearning-window.minimized,
  .relearning-hear-window.minimized {
    height: auto !important;
    max-height: none !important;
  }

  .relearning-window.minimized .landing-text-wrapper,
  .relearning-hear-window.minimized .landing-text-wrapper {
    display: block !important;
  }

  /* Small mobile: Last.fm content even smaller */
  .lastfm-content {
    max-height: 100px !important; /* Very small for small mobile */
    padding: 6px !important;
    font-size: 8px !important;
  }

  .lastfm-username {
    font-size: 9px !important;
  }

  .lastfm-period {
    font-size: 7px !important;
  }

  .lastfm-artist {
    padding: 3px !important;
  }

  .lastfm-rank {
    font-size: 8px !important;
    width: 14px !important;
  }

  .lastfm-artist-name {
    font-size: 8px !important;
  }

  .lastfm-playcount {
    font-size: 6px !important;
  }

  /* Small mobile: EXIF data - keep absolute for background overlay */
  .landing-background .exif-data {
    z-index: 15 !important;
    bottom: 10px !important;
    left: 10px !important;
  }

  /* Small mobile: scroll indicators - anchored with flexbox */
  .scroll-indicator {
    position: relative !important;
    z-index: 15 !important;
    margin: 10px auto !important;
  }

  /* Small mobile: enter noise journal button - anchored with flexbox */
  #enter-noise-journal {
    position: relative !important;
    z-index: 15 !important;
    font-size: 16px !important;
    padding: 8px 14px !important;
    margin: 10px auto !important;
    align-self: flex-start;
  }

  /* Text elements: small mobile - even smaller sizing */
  .landing-text-wrapper {
    padding: 10px 8px; /* Reduced padding */
    max-height: calc(65vh - 45px); /* Adjusted for smaller windows */
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal overflow */
    box-sizing: border-box; /* Ensure proper sizing */
  }

  .landing-text {
    font-size: 9px; /* Smaller font for small mobile */
    line-height: 1.4; /* Tighter line height */
    padding: 0 3px; /* Reduced padding */
    box-sizing: border-box; /* Ensure proper sizing */
    max-width: 100%; /* Prevent overflow */
  }

  .landing-title {
    font-size: 8px; /* Smaller title for small mobile */
    padding: 0 35px; /* Reduced padding */
  }

  .landing-text {
    font-size: 9px; /* Smaller text for small mobile */
    line-height: 1.4;
  }

  .landing-text .intro-lead {
    font-size: 9px; /* Smaller lead text for small mobile */
  }

  .sound-quote {
    margin: 20px 0;
  }

  .quote-line-1 {
    font-size: 13px;
  }

  .quote-line-2 {
    font-size: 12px;
  }

  .quote-line-3 {
    font-size: 11px;
  }

  .gear-list {
    margin-top: 24px;
    padding-top: 20px;
  }

  .gear-list li {
    font-size: 13px;
    margin-bottom: 6px;
  }

  main {
    padding: 70px 16px 50px;
  }

  article.post {
    margin-bottom: 60px;
  }

  .post-content h2 {
    font-size: 24px;
  }

  .post-content p {
    font-size: 15px;
    line-height: 1.7;
  }

  .exif-banner {
    font-size: 5px;
    padding: 3px 5px;
  }

  .landing-background .exif-banner {
    font-size: 6px;
    padding: 3px 6px;
  }

  /* Enter Noise Journal Button - Small Mobile (Anchored to container) */
  #enter-noise-journal {
    position: relative !important; /* Relative to parent container */
    order: 1; /* Control stacking order */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: rotate(-1.5deg);
    font-size: 18px;
    padding: 8px 14px;
    z-index: 10;
    margin: 10px auto !important; /* Center horizontally */
    align-self: flex-start; /* Align to left side */
    flex-shrink: 0;
  }

  #enter-noise-journal:hover,
  #enter-noise-journal:focus {
    transform: rotate(-0.5deg) scale(1.05);
  }
}

/* Typography refinement */
@supports (font-variation-settings: normal) {
  body {
    font-feature-settings: "kern" 1, "liga" 1;
    font-kerning: normal;
  }
}

/* Subtle animations */
article.post {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

article.post:nth-child(1) { animation-delay: 0.1s; }
article.post:nth-child(2) { animation-delay: 0.2s; }
article.post:nth-child(3) { animation-delay: 0.3s; }
article.post:nth-child(4) { animation-delay: 0.4s; }

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