/* Prevent padding from causing overflow */
                       *, *::before, *::after { box-sizing: border-box; }
                       
                       html, body { height: 100%; }
                       
                       body { margin:0; font-family: 'Poppins', sans-serif; }
                       
                       header {
                         position: fixed;
                         top:0;
                         left:0;
                         right:0;
                         width:100%;
                         background: transparent;
                         padding:0.5rem 1rem;
                         display:flex;
                         align-items:center;
                         justify-content: space-between;
                         padding: 0.5rem 1rem;
                         z-index:2000;
                        
                       }

                       
                       header h1 {
                           margin-bottom: 20px;
                           font-family: 'Poppins', sans-serif;
                           font-size: 1.2rem; /* 40px/16=2.5em */
                           font-weight: normal;
                           letter-spacing: 8px;
                           text-align: center;
                       }
                       
                       header h2 {
                           font-family: 'Poppins', sans-serif;
                           font-size: 0.8rem; /* 40px/16=2.5em */
                           font-weight: normal;
                           letter-spacing: 2px;
                       }
                       
                       header button {
                           margin-top: 1rem;
                           padding: 0.8rem 1rem;
                           background: #0077cc;
                           color: #fff;
                           border: none;
                           border-radius: 4px;
                           cursor: pointer;
                       }
                       
                       h1 {
                         
                           font-family: 'Poppins', sans-serif;
                           font-size: 1.2rem; /* 40px/16=2.5em */
                           font-weight: bold;
                           letter-spacing: 4px;
                           text-align: center;
                       }
                       
                       h2 {
                           margin: 0 0 0.5rem 0;
                           font-family: 'Poppins', sans-serif;
                           font-size: 1.0rem; /* 40px/16=2.5em */
                           font-weight: normal;
                           letter-spacing: 2px;
                           text-align: center;
                       }
                       
                       .top-bar a:hover, .top-bar button:hover {
                           background: #ccc;
                       }
                       
                       section {
                           background: #fff;
                           padding: 1.0rem;
                           border-radius: 8px;
                           box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                           margin-bottom: 20px;
                       }
                       
                       section img {
                           max-width: 100%;
                           border-radius: 6px;
                           margin-bottom: 1rem;
                           
                           display:block;
                           margin-left:auto;
                           margin-right:auto;
                       }
                       
                       /* Desktop: horizontal bar */
                       @media (min-width:768px) {
                         
                         #backBtnHeader { font-size:1rem; }
                       }
                       
                       
                       .menu-toggle {
                         font-size:2rem;
                         color: black;
                         background:none;
                         border:none;
                         cursor:pointer;
                         
                         margin-top: 40px;
                         position: absolute;
                         left: 1rem;
                       }
                       
                       /* Base nav menu (mobile dropdown) */
                       #navMenu {
                         display: none;
                         position: absolute;
                         top:3rem;
                         left:1rem;
                         background: rgba(255,255,255,0.95);
                         border-radius: 4px;
                         box-shadow: 0 2px 6px rgba(0,0,0,0.2);
                       }
                       #navMenu.active { display: block; }
                       #navMenu ul {
                         list-style:none;
                         margin:0;
                         padding:0;
                       }
                       #navMenu li { padding:0.5rem 1rem; }
                       #navMenu a {
                         color:black;
                         text-decoration:none;
                       }

                       /* Desktop: horizontal bar */
                       @media (min-width:768px) {
                         .menu-toggle { display:none; }
                         #navMenu {
                           display:block;
                           position:static;
                           background:transparent;
                           box-shadow:none;
                         }
                         #navMenu ul {
                           display:flex;
                           gap:2rem;
                         }
                         #navMenu li { padding:0; }
                       }
                     
                       /* Main area: vertically centered when there's extra height, but scrolls when taller */
                       .page-wrapper {
                           flex: 1;
                           display: flex;
                           flex-direction: column;
                           padding: 1rem;
                       }
                       
                       /* This block is what gets centered vertically when there is extra space */
                       .center-when-room {
                           margin-block: auto;             /* pushes block to vertical center if there's room */
                           width: 100%;
                           display: flex;
                           flex-direction: column;
                           align-items: center;            /* keep inner content centered horizontally wrapper-wise */
                           gap: 1rem;
                       }
                       
                       
                       
                       main {
                           width: 100%;
                           max-width: 800px;               /* desktop reading width */
                           margin: 0 auto;                 /* horizontal centering */
                           /*text-align: left;*/
                       }
                       
                       main img {
                           display: block;
                           max-width: 100%;                /* never exceed container */
                           height: auto;
                           margin-bottom: 1rem;
                           border-radius: 6px;
                       }
                       
                       main p {
                           font-size: 1.1rem;
                           line-height: 1.6;
                           overflow-wrap: anywhere;        /* prevent long words/URLs from causing overflow */
                           margin: 0;
                       }
                       
                       main a {
                           display: inline-block;
                           margin-top: 1rem;
                           color: blue;
                           text-decoration: none;
                       }
                       
                       #langBtn {
                           padding: 0.5rem 1rem;
                           font-size: 1rem;
                           cursor: pointer;
                           align-self: center;             /* centered under content */
                       }
                       
                       /* Mobile: hamburger + dropdown below, no overflow */
                       @media (max-width: 768px) {
                           
                           header {
                               
                               justify-content: flex-start;
                           }
                           
                           .menu-toggle {
                               display: block;
                           }
                           
                           .menu-bar {
                               justify-content:flex-start;
                           }
                           
                           
                           #navMenu ul {
                               display: none;                       /* hidden until toggle */
                               flex-direction: column;
                               position: absolute;
                               top: 100%;
                               left: 0;
                               background: #f9f9f9;
                               width: 180px);             /* fit within viewport */
                               border-radius: 4px;
                               padding: 0.5rem 0;
                               box-shadow: 0 4px 12px rgba(0,0,0,0.12);
                               
                           }
                           
                           #navMenu.active ul {
                               
                               display: flex;
                           }
                           
                           #navMenu a {
                               padding: 0.5rem 1rem;
                               display: block;
                               text-decoration:none;
                               font-weight:500;
                           }
                           
                       }
                       
                       /* Grids */
                       .grid {
                           display: grid;
                           grid-template-columns: 1;
                           gap: 0.5rem;
                           margin-top: 1rem;
                       }
                       
                       .grid img {
                           width: 100%;
                           display: block;
                       }
                       
                       .grid2 {
                           width: 100%;
                           display: block;
                       }
                       
                       .caption_home_thumbnail {
                           text-decoration: none;
                           font-family: 'Poppins', sans-serif;
                           font-size: 0.5rem;
                           text-align: center;
                           font-weight: normal;
                           letter-spacing: 2px;
                       }

       /* Photo overlay */
       .photo-page {
           display: none;
           position: fixed;
           inset: 0;
           background: #111;
           overflow: auto;
       }
       .photo-page.active { display: block; }
       
       /* Container to center image in Fit mode */
       .photo-container {
           display: flex;
           width: 100%;
           justify-content: center;
           align-items: center;
       }
       /* Zoom mode: top-left anchor */
       .photo-page.zoom .photo-container {
           justify-content: flex-start;
           align-items: flex-start;
       }
       .photo-page,
       #fullImage {
         touch-action: pan-x pan-y; /* allow scrolling, block pinch-zoom */
       }
       
         /* Fixed buttons stay at viewport corners */
         .photo-btn {
           position: fixed;
           top: 1rem;
           font-size: 1.1rem;
           color: white;
           background: rgba(0,0,0,0.5);
           padding: 0.4rem 0.8rem;
           border-radius: 4px;
           z-index: 1000;
           cursor: pointer;
           border: none;
           text-decoration: none;
         }
         .photo-btn.back { left: 1rem; }
         .photo-btn.toggle { right: 1rem; }
       
       /* Large image with smooth transition */
       #fullImage {
         display: block;
         max-width: none;
         height: auto;
         transition: width 0.4s ease, height 0.4s ease;
       }
       
       /* Page-level back button */
       .back-btn, .toggle-btn {
         display:inline-block; margin-bottom:1rem; padding:0.5rem 1rem;
         background:transparent; color:white; text-decoration:none; border-radius:4px;
       }
       
       .back-btn, .toggle-btn {
           position: fixed;
           top: 1rem;
          
           border: none;
           border-radius: 4px;
           font-weight: bold;
           font-size: 1rem;
           z-index: 1000;
       }
       
       .back-btn { left: 1rem; }
       .toggle-btn { right: 1rem; }
       }
       
       /* Carousel */
       .carousel {
         position: relative;
         overflow: hidden;
         width: 100%;
         max-height: 400px;
       }

       .carousel img {
         width: 100%;
         display: none;
         object-fit: cover;
       }

       .carousel img.active {
         display: block;
         transition: opacity 1s;
       }

       .asym-gallery {
         display: grid;
         /* First two cols together = Big's width, each = half */
         grid-template-columns: 1fr 1fr 1fr;
         grid-auto-rows: 200px; /* size of small square */
         gap: 4px;
         margin: 0 8px;
         grid-template-areas:
           "big big side1"
           "big big side2"
           "bottom1 bottom2 bottom3";
       }

       .asym-gallery img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         cursor: pointer;
       }

       .big     { grid-area: big; }
       .side1   { grid-area: side1; }
       .side2   { grid-area: side2; }
       .bottom1 { grid-area: bottom1; }
       .bottom2 { grid-area: bottom2; }
       .bottom3 { grid-area: bottom3; }

       @media (max-width: 600px) {
         .asym-gallery { grid-auto-rows: 120px; }
       }
       @media (max-width: 400px) {
         .asym-gallery { grid-auto-rows: 90px; }
       }

/* Back button */
.back-btn {
  position: fixed;
  top: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 1rem;
  font-family: system-ui, sans-serif;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1001;
  transition: opacity 0.3s ease;
}

.back-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

.back-btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
}


/* Hover & tap feedback */
.back-btn:hover {
  background: rgba(0,0,0,0.8);
}
.back-btn:active {
  transform: scale(0.95);
}

/* Hide the "Back" text on small screens */
@media (max-width: 768px) {
  .back-btn span {
    display: none;
  }
}