/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
   :root {
    --gap: 16px;
    --sidebar-min: 260px;
    --main-min: 380px;
    --wrap-max: 1400px;
    --box-padding: 12px;
    --border-radius: 10px;
  }
  


/* ========================================
   IMPORTS & FONTS
   ======================================== */
   @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&family=Courier+Prime&display=swap');

   @font-face {
       font-family: 'SUPERCAR';
       src: url(fonts/SUPERCAR.TTF) format('truetype');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   
   @font-face {
       font-family: 'cyber';
       src: url(fonts/cyber_h.ttf) format('truetype');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   
   @font-face {
       font-family: 'dotmatri';
       src: url(fonts/DOTMATRI.TTF) format('truetype');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   
   @font-face {
       font-family: 'kodemono';
       src: url(fonts/kodemono.ttf) format('truetype');
       font-weight: normal;
       font-style: normal;
       font-display: swap;
   }
   
   /* ========================================
      RESET & BASE STYLES
      ======================================== */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }
   
   body {
       font-family: 'Crimson Text', Georgia, serif;
       background: #f5f5f0;
       background: url(bgimages/waverly-farmers-market-bike.jpg);
       background-size: cover;
       background-attachment: fixed;
       color: #333;
       line-height: 1.6;
   }
   
   /* ========================================
      HEADER
      ======================================== */
   .header {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       margin: 30px auto 0;
       padding: 20px 0;
       text-align: center;
       position: relative;
   }
   
   .header h1 {
       font-family: 'SUPERCAR', Georgia, serif;
       font-size: clamp(2.5rem, 5vw, 4rem);
       font-weight: 600;
       margin: 0;
       padding: 0;
       line-height: 1.2;
       color: #dfb21d;
       text-shadow: 
           2px 2px 0 rgba(255, 255, 255, 0.8),
           4px 4px 0 rgba(0, 0, 0, 0.2),
           0 0 20px rgba(79, 61, 70, 0.3);
       transition: all 0.3s ease;
       cursor: pointer;
   }
   
   /* ========================================
      CAMERA DECORATIONS
      ======================================== */
   .camera-decor {
       position: absolute;
       width: 120px;
       height: auto;
       opacity: 0.9;
   }
   
   .camera-left {
       left: 10%;
       top: 50%;
       transform: translateY(-50%);
   }
   
   .camera-right {
       right: 10%;
       top: 50%;
       transform: translateY(-50%) rotate(5deg);
   }
   
   .camera-decor img {
       width: 100%;
       height: auto;
       filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));
   }
   
   /* Camera Info Tooltip */
   .camera-info {
       display: none;
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background: rgb(139, 120, 93);
       background-image: url(bgimages/green-crumpled-paper.jpg);
       border: 2px dotted #efc4da;
       border-radius: 8px;
       padding: 10px;
       width: 180px;
       max-height: 140px;
       overflow-y: auto;
       box-shadow: 0 4px 12px rgba(0,0,0,0.2);
       z-index: 100;
   }
   
   .camera-decor:hover .camera-info {
       display: block;
   }
   
   .camera-info h3 {
       font-size: 14px;
       margin-bottom: 10px;
       color: #f8b3ca;
   }
   
   .camera-info ul {
       list-style: none;
       font-size: 12px;
       line-height: 1.6;
   }
   
   .camera-info li {
       margin-bottom: 8px;
       color: #f6c900;
   }
   
   /* ========================================
      MENU / NAVBAR
      ======================================== */
   .menu {
       display: flex;
       justify-content: center;
       width: 100%;
       margin: 20px auto;
       padding: 0;
   }
   
   .menu ul {
       list-style-type: none;
       text-align: center;
       background-image: url(bgimages/crumpled.jpg);
       border-radius: var(--border-radius);
       box-shadow: 1px 1px 5px rgb(23, 23, 23);
       display: flex;
       flex-direction: row;
       justify-content: space-evenly;
       align-items: center;
       flex-wrap: wrap;
       width: 100%;
       max-width: 650px;
       padding: 10px;
       margin: 0;
       gap: 5px;
   }
   
   .menu li {
       display: flex;
       flex: 1 1 auto;
       min-width: fit-content;
   }
   
   .menu a {
       font-family: 'dotmatri', 'Verdana', Geneva, Tahoma, sans-serif;
       color: rgb(142, 43, 83);
       font-size: clamp(12px, 1.5vw, 14px);
       font-weight: bold;
       text-decoration: none;
       display: block;
       padding: 10px 15px;
       border-radius: var(--border-radius);
       transition: transform 0.3s ease;
       white-space: nowrap;
       text-align: center;
       width: 100%;
   }
   
   .menu a:hover {
       transform: scale(1.3);
   }
   
   /* ========================================
      MAIN CONTAINER
      ======================================== */
   .container {
       display: flex;
       max-width: 1400px;
       margin: 0 auto;
       padding: 40px 20px;
       gap: 40px;
   }
   
   /* ========================================
      SIDEBAR
      ======================================== */
   .sidebar {
       width: 200px;
       flex-shrink: 0;
       font-family: 'dotmatri';
   }
   
   .sidebar h1 {
       font-size: 18px;
       margin-bottom: 30px;
       color: #fffdfd;
       text-transform: lowercase;
   }
   
   .sidebar nav {
       position: sticky;
       top: 40px;
   }
   
   .sidebar ul {
       list-style: none;
   }
   
   .sidebar li {
       margin-bottom: 12px;
   }
   
   .sidebar a {
       color: #fcfafa;
       text-decoration: none;
       font-size: 16px;
       cursor: pointer;
       display: block;
       padding: 4px 0;
   }
   
   .sidebar a:hover,
   .sidebar a.active {
       color: #f5c7eb;
       text-decoration: underline;
   }
   
   /* ========================================
      GALLERY WRAPPER
      ======================================== */
   .gallery-wrapper {
       flex: 1;
       background: #ffffff00;
       background-image: url(bgimages/harlequin2.jpg);
       border: 1px solid #0c0c0c;
       border-radius: 5px;
       box-shadow: 
           inset 0 0 0 1px #e5e5e5,
           0 2px 4px rgba(0,0,0,0.1);
       padding: 40px;
   }
   
   .gallery {
       column-count: 3;
       column-gap: 20px;
   }
   
   /* ========================================
      POLAROID CARDS
      ======================================== */
   .polaroid {
       background: #fbedcc;
       background-image: url(bgimages/crumpled.jpg);
       padding: 0;
       box-shadow: 0 3px 10px rgba(0,0,0,0.2);
       cursor: pointer;
       transition: transform 0.2s;
       break-inside: avoid;
       margin-bottom: 20px;
       position: relative;
       border: 1px solid #e5dcc3;
   }
   
   .polaroid:hover {
       transform: translateY(-5px) rotate(1deg);
       box-shadow: 0 6px 18px rgba(0,0,0,0.25);
   }
   
   .polaroid.hidden {
       display: none;
   }
   
   .polaroid-img {
       width: 100%;
       overflow: hidden;
       max-height: 400px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #f9f9f9;
       border-bottom: 1px solid #e5dcc3;
   }
   
   .polaroid-img img,
   .polaroid-img video {
       width: 100%;
       height: auto;
       max-height: 400px;
       object-fit: cover;
       display: block;
   }
   
   /* Caption Area with Lines */
   .polaroid-caption {
       padding: 40px 15px 15px 15px;
       background: #efe4c4;
       font-family: 'kodemono', monospace;
       font-size: 12.5px;
       color: #333;
       text-align: center;
       min-height: 85px;
       position: relative;
       background: repeating-linear-gradient(
           transparent,
           transparent 18px,
           #4a010100 18px,
           #30000000 19px
       );
   }
   
   /* Stamp in Top Right of Caption */
   /*.polaroid-caption::before {
       content: 'xoxo';
       position: absolute;
       top: 10px;
       right: 10px;
       width: 60px;
       height: 20px;
       border: 2px dashed #999;
       background: rgba(253, 214, 214, 0.904);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
   }*/
   
   /* ========================================
      LIGHTBOX
      ======================================== */
   .lightbox {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.9);
       z-index: 1000;
       justify-content: center;
       align-items: center;
       font-family: 'kodemono';
   }
   
   .lightbox.active {
       display: flex;
   }
   
   .lightbox-content {
       max-width: 90%;
       max-height: 90%;
       position: relative;
   }
   
   .lightbox-content img,
   .lightbox-content video {
       max-width: 100%;
       max-height: 90vh;
       object-fit: contain;
   }
   
   .lightbox-caption {
       color: white;
       text-align: center;
       margin-top: 15px;
       font-size: 14px;
       font-family: 'kodemono';
   }
   
   .lightbox-close {
       position: absolute;
       top: 20px;
       right: 30px;
       font-size: 40px;
       color: white;
       cursor: pointer;
       z-index: 1001;
   }
   
   /* ========================================
      RESPONSIVE BREAKPOINTS
      ======================================== */
   
   /* Tablet - under 1024px */
   @media (max-width: 1024px) {
       .gallery {
           column-count: 2;
       }
   
       .camera-decor {
           width: 80px;
       }
   
       .camera-left {
           left: 5%;
       }
   
       .camera-right {
           right: 5%;
       }
   }
   
   /* Mobile - under 768px */
   @media (max-width: 768px) {
       .container {
           flex-direction: column;
           padding: 20px;
       }
   
       .sidebar {
           width: 100%;
       }
   
       .sidebar nav {
           position: static;
       }
   
       .sidebar ul {
           display: flex;
           flex-wrap: wrap;
           gap: 15px;
       }
   
       .gallery {
           column-count: 1;
       }
   
       .camera-decor {
           width: 60px;
       }
   
       .camera-left {
           left: 2%;
       }
   
       .camera-right {
           right: 2%;
       }
   }