html, body { font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.6; margin: 0; }
    h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display", serif; }
    .hidden { display: none !important; }
    .row { column-count: 4; column-gap: 8px; padding: 8px; }
    @media screen and (max-width: 1000px) { .row { column-count: 3; } }
    @media screen and (max-width: 800px) { .row { column-count: 2; } }
    @media screen and (max-width: 600px) { .row { column-count: 1; } }
    .column { display: block; width: 100%; margin-bottom: 8px; break-inside: avoid; }
    .column img { width: 100%; height: auto; display: block; border-radius: 2px; transition: opacity 0.3s; }
    .column img:hover { opacity: 0.8; }
    .w3-bar .w3-bar-item { font-size: 18px !important; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
    .w3-bar .w3-right { font-size: 18px !important; }
    .w3-bar .tablink-download { color: inherit !important; text-decoration: none !important; display: block; }
    .w3-bar .tablink-download:hover { background-color: #ccc !important; color: #000 !important; }
    .w3-modal { z-index: 3; display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); }
    .w3-modal-content { margin: auto; background-color: #fff; position: relative; padding: 0; outline: 0; width: 95%; max-width: 1200px; }
    .category { display: none; padding-bottom: 32px; }
    .w3-container { padding: 0.01em 0px; }
    .w3-bar { width: 100%; overflow: hidden; }
    .w3-bar-item { padding: 8px 16px; float: left; width: auto; border: none; display: block; outline: 0; }
    .w3-button { border: none; display: inline-block; padding: 8px 16px; vertical-align: middle; cursor: pointer; text-decoration: none; }
    .w3-black { color: #fff; background-color: #000; }
    .w3-white { color: #000; background-color: #fff; }
    .w3-light-grey { color: #000; background-color: #f1f1f1; }
    .w3-right { float: right; }
    .w3-center { text-align: center; }
    .w3-block { display: block; width: 100%; }
    .w3-card-4 { box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2); }
    .w3-animate-zoom { animation: animatezoom 0.6s; }
    @keyframes animatezoom { from { transform: scale(0); } to { transform: scale(1); } }
    .mainPhoto img { cursor: pointer; width: 100%; height: auto; }
    /* Dark background covering the full viewport */
    #click-barrier {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #111;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    #startSlideshowBtn {
    padding: 18px 44px;
    font-size: 22px;
    font-family: "Playfair Display", serif;
    background-color: #000;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    letter-spacing: 1px;
    }
    #startSlideshowBtn:hover {
    background-color: #fff;
    color: #000;
    }
    /* White font style requested */
    #click-barrier h2 {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0;
    text-align: center;
    }
    /* ===== SLIDESHOW STYLES ===== */
    .slideshow-container {
    position: relative; height: 100vh;
    overflow: hidden; background: black; cursor: pointer;
    }
    .slideshow-container:hover { opacity: 0.97; }
    /* Cleaned up photo constraints */
    .flying-photo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 50%; /* Keeps images at a clean size on desktop */
    max-height: 75vh;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    }
    
    /* Mobile Fix: For screens 600px wide or smaller */
    @media (max-width: 600px) {
    
    /* Standard mobile settings for all photos */
    .flying-photo {
    max-width: 85%;
    max-height: 55vh;
    }
    
    /* TARGET ONLY LANDSCAPE IMAGES: If an image is wider than it is tall */
    .flying-photo[id], 
    .flying-photo {
    /* aspect-ratio query applied directly via fallback mechanics */
    }
    }
    
    /* Clear, bulletproof fix specifically targeting landscape layouts on small screens */
    @media (max-width: 600px) and (orientation: portrait) {
    /* When a user holds their phone vertically, force wide images to constraint by width */
    .flying-photo {
    max-width: 90% !important; /* Prevents the sides from bleeding off the screen edge */
    height: auto !important;   /* Keeps the image proportional so it doesnt look squished */
    }
    }
    .flying-photo { max-width: 65%; max-height: 75vh; }
    }
    /* Entrance animations - fly from edges to center */
    @keyframes flyInTop {
    0% { transform: translate(0, -30%) scale(0.45) rotate(-8deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes flyInBottom {
    0% { transform: translate(0, 30%) scale(0.45) rotate(8deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes flyInLeft {
    0% { transform: translate(calc(-50% - 100vw), 0) scale(0.45) rotate(-6deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes flyInRight {
    0% { transform: translate(30%, 0) scale(0.45) rotate(6deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes flyInTopLeft {
    0% { transform: translate(calc(-50% - 100vw), calc(-50% - 100vh)) scale(0.4) rotate(-12deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes flyInTopRight {
    0% { transform: translate(18%, -18%) scale(0.4) rotate(12deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes flyInBottomLeft {
    0% { transform: translate(calc(-50% - 100vw), calc(-50% + 100vh)) scale(0.4) rotate(12deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes flyInBottomRight {
    0% { transform: translate(18%, 18%) scale(0.4) rotate(-12deg); opacity: 0; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    }
    /* Fly out - starts from center, flies away and fades */
    @keyframes flyOut {
    0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--flyout-x)), calc(-50% + var(--flyout-y))) scale(0.2) rotate(var(--flyout-rot)); opacity: 0; }
    }