/*  =========================================================
    1. GLOBAL RESET & FONT CONFIGURATION
    ========================================================= */
    html, body {
        margin: 0;
        padding: 0;
        background-color: #000000;                /* Pure black background room canvas */
        color: #FFFFFF;                           /* Crisp white baseline typography */
        font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
        line-height: 1.6;
        -webkit-overflow-scrolling: touch;
        }

/*  =========================================================
    2. FIXED HEADER LAYOUT CONTAINER
    ========================================================= */
    .main-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #000000;
        z-index: 1000;
        display: flex;
        flex-direction: column;                     /* Stacks title line and text links vertically */
        align-items: center;                        /* Locks absolute horizontal symmetry alignment */
        padding-top: 36px;                          /* Breathing room above the logo text */
        }

/*  =========================================================
    3. AUTOMOTIVE PINSTRIPE DIVIDERS
    ========================================================= */
    .horizontal-divider {
        position: relative;                        /* Reference anchor room for lower accent line */
        height: 3px;                               /* Substantial primary chrome line thickness */
        background-color: rgb(50, 50, 50);
        border-radius: 1.5px;                      /* Retina anti-aliased end cap rounding */
        width: 100%;
        max-width: 800px;                           /* Locked to global site width constraints */
        margin-top: 16px;
        }

    .horizontal-divider::after {
        content: '';
        position: absolute;
        top: 6px;                                  /* Placed 3px below the primary line */
        left: 50%;
        transform: translateX(-50%);               /* Geometric center alignment track */
        height: 1.5px;                             /* Tighter, secondary needle stroke line */
        width: 90%;                                /* 90% of 800px = exactly 720px length */
        max-width: 720px;
        background-color: rgb(25, 25, 25);         /* Deep charcoal shadow reflection tone */
        border-radius: 0.75px;
        }

/*  =========================================================
    4. SYMMETRICAL TYPOGRAPHY CONTAINERS
    ========================================================= */
    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        text-indent: 1em;                           /* Exact letter tracking counterbalance */
        margin: 0;
        font-size: 24px;
        font-weight: 200;                           /* Editorial brand light weight factor */
        letter-spacing: 1em;
        color: #FFFFFF;
        text-transform: uppercase;
        }

/*  =========================================================
    5. FIXED LAYOUT SPACER BLOCK
    ========================================================= */
    .header-spacer {
        height: 170px;                             /* Clears the fixed navigation area safely */
        }

/*  =========================================================
    6. GLOBAL NAVIGATION MENU TRACK
    ========================================================= */
    .nav-menu {
        display: flex;
        justify-content: center;
        gap: 110px;                                 /* Editorial breathing air space between links */
        margin-top: 21px;
        padding-bottom: 16px;
        }

    .nav-item {
        font-size: 18px;
        font-weight: 400;
        text-transform: uppercase;
        color: rgb(140, 140, 140);
        text-decoration: none;
        transition: color 0.2s ease;
        }

    .nav-item:hover, .nav-item.active-page {
        color: rgb(255, 255, 255) !important;     /* Pure white illumination anchor point */
        }

    .nav-item-1 { letter-spacing: 0.65em; text-indent: .65em; }
    .nav-item-2 { letter-spacing: 0.55em; text-indent: .55em; }
    .nav-item-3 { letter-spacing: 0.55em; text-indent: .55em; }

/*  =========================================================
    7. CORE PAGE STRUCTURAL LAYOUT GRID
    ========================================================= */
    .content-container {
        position: relative;                        /* Anchor room for absolute content switches */
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 48px 0px 0px 0px;
        box-sizing: border-box;
        animation: initialPageLoadFade 2.5s ease-in-out forwards;
        padding-bottom: 0px;
        }

/*  =========================================================
    11. IMAGE CAROUSEL STRUCTURE (UPDATES CANVAS)
    ========================================================= */
    .carousel-wrapper {
        position: relative;
        width: 100%;
        max-width: 800px;
        height: 720px;
        background-color: rgb(0, 0, 0);
        overflow: hidden;
        }

    .carousel-slide {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        opacity: 0;
        transition: opacity 2.5s ease-in-out;
        z-index: 1;
        }

    .carousel-slide.active {
        opacity: 1;
        z-index: 2;
        }

    @keyframes initialPageLoadFade {
        from { opacity: 0; }
        to { opacity: 1; }
        }

    .carousel-image {
        width: 100% !important;
        height: 600px !important;
        max-width: 100%;
        object-fit: cover;
        display: block;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        border: 2px solid rgb(50, 50, 50);          /* Shared 2px charcoal layout border line */
        box-sizing: border-box;
        }

    .carousel-caption {
        width: 100%;
        max-width: 800px;
        box-sizing: border-box;
        border-top: 2px solid rgb(20, 20, 20);
        border-radius: 1px;
        margin-top: 5px;
        padding-top: 10px;
        background-color: rgb(0,0,0);
        }

    .carousel-caption h2 {
        margin: 0 0 6px 0;
        font-size: 22px;
        font-weight: 200;
        letter-spacing: 0.3em;
        text-indent: .3em;
        text-align: center;
        color: rgb(255, 255, 255);
        }

    .carousel-caption h2 .dash { color: rgb(210, 210, 210); }

    .carousel-caption p {
        margin: 0;
        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0.6em;
        text-indent: .6em;
        color: rgb(120, 120, 120);
        text-align: center;
        line-height: 1.5;
        }

/*  =========================================================
    12. Interactive Arrow Keys
    ========================================================= */
    .carousel-arrow {
        position: absolute;
        top: 300px;
        transform: translateY(-50%);
        background-color: rgb(30, 30, 30);
        color: rgb(255, 255, 255);
        border: none;
        font-size: 24px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease-in-out, background-color 0.2s ease, color 0.2s ease;
        }

    .carousel-arrow.visible { opacity: 0.6; pointer-events: auto; }

    @media (hover: hover) {
        .carousel-arrow:hover { opacity: 1 !important; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); }
        }

    .carousel-arrow.active-tap { opacity: 1 !important; background-color: rgb(255, 255, 255) !important; color: rgb(0, 0, 0) !important; }
    .prev-arrow { left: 20px; }
    .next-arrow { right: 20px; }

/*  =========================================================
    13. CAROUSEL INDICATOR DOTS LAYOUT SETTINGS
    ========================================================= */
    .carousel-indicators {
        display: flex;
        justify-content: center;
        gap: 0px;
        margin-top: 12px;
        }

    /* THE TOUCH ZONE: The parent box builds your invisible hit field */
    .dot {
        position: relative;
        width: 48px;
        height: auto;
        padding: 12px 8px;
        margin: 0px;
        background-color: rgba(0, 0, 0, 0.001);
        cursor: pointer;
        opacity: 0.05;
        transition: opacity 1.5s ease-in-out;
        }

    /* THE VISIBLE BAR: This draws your pristine, architectural rectangle layout */
    .dot::after {
        content: '';
        position: absolute;
        top: 12px;                                 /* Matches your top padding track */
        left: 8px;                                 /* Matches your left padding track */
        width: 48px;
        height: 4px;
        background-color: rgb(255, 255, 255);
        border-radius: 2px;
        }

    @media (hover: hover) {
        /* Gentle Proportional Hover Luminescence:
        Increases your visibility smoothly when a cursor rests anywhere inside
        the 64x28px touch target area, holding a rock-solid, steady illumination */
        .dot:hover {
            opacity: 0.20;
            transition: opacity 0.2s ease-in-out;
        }

        /* If the slide is already active, hovering over it intensifies the white line to 0.45 */
        .dot.active:hover {
            opacity: 0.45;
            transition: opacity 0.2s ease-in-out;
        }
    }

    .dot.active {
        opacity: 0.33;
        transition: opacity 1.5s ease-in-out;
        }

/*  =========================================================
    14. GLOBAL SYMMETRICAL COPYRIGHT FOOTER
    ========================================================= */

   /* GLOBAL Copyright */
   .site-footer {
      position: relative;                        /* Re-anchored cleanly into natural scrolling flow */
      width: 100%;
      background-color: #000000;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.6em;
      text-indent: .6em;
      color: rgb(40, 40, 40);
      margin-top: 96px;
      padding-bottom: 24px;
      white-space: nowrap;
      transition: opacity 1.5s ease-in-out;
      opacity: 1;
      }

   /* Copyright for the collections view, rides in last row of the grid */
   .site-footer-pictures-tiles {
      grid-column: span 2;                      /* Stretches the cell across both columns! */
      width: 100%;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.6em;
      text-indent: .6em;
      color: rgb(40, 40, 40);
      margin-top: 56px;                         /* Snug editorial breathing room below row 2 */
      padding-bottom: 24px;
      white-space: nowrap;
      }

   /* Copyright for the thumbs view, rides in last row of the grid */
   .site-footer-pictures-thumbs {
      grid-column: span 4;                      /* Spans all 4 gallery columns! */
      width: 100%;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.6em;
      text-indent: .6em;
      color: rgb(40, 40, 40);
      margin-top: 56px;                         /* Symmetrical 96px cushion below your prints */
      padding-bottom: 24px;
      white-space: nowrap;
      }

/*  =========================================================
    15. HIGH-DENSITY THUMBNAIL MATRIX & PORTALS ARCHITECTURE
    ========================================================= */
    .gallery-canvas {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        position: relative;                        /* Baseline anchor coordinate room for absolute layers */
        min-height: 400px;                         /* Holds the site layout height box scale on layer change */
        padding-top: 48px;                         /* Global cushion clears top fixed navigation lines */
        box-sizing: border-box;
        margin-top: -48px;
        }

    /* --- THEMATIC INTERLOCKING VISIBILITY LAYER STACKS --- */

    /* State 1: The Main Cover Portals Grid
       By keeping this relative, it maintains its physical height, safely
       forcing your copyright footer down the page exactly like it used to! */
    .portals-grid {
        width: 100%;
        max-width: 800px;
        position: relative;
        margin: 0 auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 1.5s ease-in-out, visibility 1.5s step-end;
        }

    /* State 2: The Active Floating Photo Matrix Walls
       These sit quietly as absolute layers, waiting to fade in over the top */
    .photo-wall {
        width: 100%;
        max-width: 800px;
        position: absolute;
        top: 48px;
        left: 50%;
        transform: translateX(-50%);
        padding-top: 134px;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 1.5s ease-in-out, visibility 1.5s step-end;
        }

    /* Active State Stage Controller */
    .view-visible {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: opacity 1.5s ease-in-out, visibility 1.5s step-start;
        }

    /* 1. Apply the horizontal centering coordinate ONLY to your absolute photo walls */
    .photo-wall.view-visible {
        transform: translateX(-50%) !important;
        }

    /* 2. Forces your main 2x2 portals grid to use standard geometric margins */
    .portals-grid.view-visible {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin: 0 auto !important;
        }

    .portals-grid.view-hidden {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        }

    /* 3. Forces the thumbnail matrix inside your active walls to deploy its tracks */
    .photo-wall.view-visible .thumbnail-matrix {
        display: grid !important;
        }

    /* Utility overrides to draw the layouts back onto active tracks */
    .portals-grid.view-visible {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        }

    .photo-wall.view-visible .thumbnail-matrix {
        display: grid !important;
        }

    .view-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        }

    /* --- PORTALS TILES & TYPOGRAPHY --- */
    .portal-tile {
        text-decoration: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        }

    .portal-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background-color: rgb(0, 0, 0);
        border: 2px solid rgb(50, 50, 50);
        box-sizing: border-box;
        }

    .portal-cover-img {
        width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1;
        filter: brightness(105%); transition: filter 0.4s ease-in-out;
        }

    /* Portal Overlay Darkroom Filters */
    .portal-frame::before {
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        -webkit-mask-image: radial-gradient(circle, transparent 90%, black 100%);
        mask-image: radial-gradient(circle, transparent 90%, black 100%);
        opacity: 1; transition: opacity 0.4s ease-in-out;
        }

    .portal-frame::after {
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2;
        background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
        opacity: 1; transition: opacity 0.4s ease-in-out;
        }

    .portal-tile:hover .portal-cover-img { filter: brightness(100%); }
    .portal-tile:hover .portal-frame::before { opacity: 0; }
    .portal-tile:hover .portal-frame::after { opacity: 0; }

    .portal-tile h2 {
        margin: 12px 0 0 0; font-size: 18px; font-weight: 400;
        font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
        color: rgb(120, 120, 120); text-transform: uppercase; text-align: center;
        transition: color 0.4s ease-in-out;
        }

    .portal-tile:hover h2 { color: rgb(255, 255, 255); }
    .portal-title-1 { letter-spacing: 0.68em; text-indent: 0.68em; }
    .portal-title-2 { letter-spacing: 0.42em; text-indent: 0.42em; }
    .portal-title-3 { letter-spacing: 0.61em; text-indent: 0.61em; }
    .portal-title-4 { letter-spacing: 0.78em; text-indent: 0.78em; }

    /* --- HIGH-DENSITY THUMBNAIL MATRIX GRID SETUP --- */
    .thumbnail-matrix {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        width: 100%;
        box-sizing: border-box;
        }




    .thumb-card {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background-color: rgb(0, 0, 0);
        border: 1px solid rgb(40, 40, 40);
        box-sizing: border-box;
        cursor: pointer;
        }

   .thumb-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity 0.4s ease-in-out;
      }

   /* Applies the blur effect */
   .thumb-card::before {
      content: '';
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
      -webkit-mask-image: radial-gradient(circle, transparent 75%, black 95%);
      mask-image: radial-gradient(circle, transparent 75%, black 98%);
      opacity: 1;
      transition: opacity 0.4s ease-in-out;
      }

   .thumb-card::after {
      content: '';
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      background: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
      -webkit-backdrop-filter: brightness(104%);
      backdrop-filter: brightness(104%);
      opacity: 1;
      transition: opacity 0.4s ease-in-out;
      }

   .thumb-card:hover .thumb-img {

      }

    .thumb-card:hover::before {
      opacity: 0;
      }


    .thumb-card:hover::after {
      opacity: 0;
      }

/* The Primary Collection Context Title */
    .wall-title {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;

        font-size: 24px;
        font-weight: 200;                           /* Light branding weight matches logo format */
        font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
        color: #FFFFFF;
        text-transform: uppercase;
        white-space: nowrap;

        /* Elegant wide-tracked layout geometry */
        letter-spacing: 1em;
        text-indent: 1em;
        z-index: 100;
    }

    /* Symmetrical Back Button Navigation Token */
    .gallery-back-btn {
        position: absolute;                        /* Pins back button to top-left boundary margin shelf */
        top: 54px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-block;
        background: none;
        border: none;
        color: rgb(80, 80, 80);
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6em;
        text-indent: 0.6em;
        cursor: pointer;
        padding: 0;
        z-index: 100;
        transition: color 0.2s ease;
        }

    .gallery-back-btn:hover {
        color: rgb(160, 160, 160);
        }

/* =========================================================
   17. DEDICATED HIGH-RESOLUTION GALLERY CINEMA OVERLAY
   ========================================================= */

    /* Main backdrop screen wrapper - Master viewport fixed container */
   .lightbox-stage-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       background-color: rgb(0, 0, 0);
       z-index: 99999;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: flex-start; /* Dead-center vertical axis alignment */
       overflow: hidden;
       opacity: 0;
       visibility: hidden;
       pointer-events: none;
       transition: opacity 1.5s ease-in-out, visibility 1.5s step-end;
       }

    .lightbox-stage-overlay.stage-active {
       opacity: 1;
       visibility: visible;
       pointer-events: auto;
       transition: opacity 1.5s ease-in-out, visibility 1.5s step-start;
       }

    /* Completely isolated inner content holder block */
   .lightbox-plate-holder {
        position: fixed;
        top: 48vh;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: min-content;
        max-width: 100vw;
        box-sizing: border-box;
        margin-: 0px;
        transition: opacity 1.5s ease-in-out;
        }

    /* Dedicated image presentation track - Pure structural reality */
   .lightbox-film-plate {
       width: auto;
       height: auto;
       object-fit: contain;
       border: 2px solid rgb(50, 50, 50); /* Your intuitive signature frame */
       box-sizing: border-box;
       display: block;
       max-width: min(1800px, 85vw);
       max-height: min(1200px, 76vh);
       }


/* --- THE ISOLATED TRANSPORT NAVIGATION ARROWS --- */

   /* TOUCH ZONES FOR BACK AND NEXT */
   .cinema-touch-zone {
      position: fixed;
      width: 20vw;
      bottom: 0px; /* Stretches flat against the very bottom floor of the window */
      cursor: pointer;
      z-index: 100004; /* Floats safely right behind your arrow graphics */
      background-color: rgba(0, 0, 0, 0.001);
      transition: background-color 0.2s ease;
      }

   .touch-back { left: 0; }

   .touch-forward { right: 0; }

   .cinema-touch-zone:hover {
      background-color: rgba(0, 0, 0, 0.001);
      }

   /* THE COLLAPSED ARROW CONTROLLERS (THE EYE CANDY) */
   .cinema-arrow {
      position: fixed;
      width: 20vw;
      height: 48px; /* Perfectly mirrors your 48px Photoshop asset envelope */
      background: none;
      border: none;
      padding: 0px;
      margin: 0px;
      cursor: pointer;
      z-index: 100005; /* Sits over the top of the touch zone layers */
      display: flex;
      align-items: center;
      opacity: 1;
      }

    /* Rigidly pins the back target to the far left monitor bezel edge */
    .arrow-back {
        left: 0;
        justify-content: flex-start;
        }

    /* Rigidly pins the forward target to the far right monitor bezel edge */
    .arrow-forward {
        right: 0;
        justify-content: flex-end;
        }

    /* THE CUSTOM PNG GRAPHICS SCALE ENGINE */
    .cinema-arrow img {
        width: 48px;
        height: 48px;
        display: block;
        filter: brightness(0);
        transition: filter 0.3s ease-in-out;
        }

    /* --- INTERACTIVE LUMINESCENCE TRACKS --- */

    @media (hover: hover) {
      /* When the mouse rests over the arrow container block itself... */
      .cinema-arrow:hover img {
          filter: brightness(0.33); /* Glides up to a clean, mid-contrast glow! */
          transition: filter 0.2s ease-in-out;
          }

      /* =========================================================
         THE TOUCH-ZONE HOVER CONNECTORS
         =========================================================
         Bridges the gap perfectly! The exact millisecond your mouse
         enters the massive touch-zone shield, this rule commands
         the respective arrow graphic to instantly glow up! */
      .touch-back:hover ~ .arrow-back img,
      .touch-forward:hover ~ .arrow-forward img {
          filter: brightness(0.33); /* Soft, visible illumination target */
          transition: filter 0.2s ease-in-out;
          }
      }

      /* Momentary tactile high-contrast response when clicked or tapped on glass */
      .cinema-arrow:active img,
      .cinema-touch-zone:not(.touch-playback):active ~ .cinema-arrow img {
         filter: brightness(0.66);
         transition: filter 0.05s ease;
         }




    /* THE Snug Border Calibration Margins
       Applies your fine-tuned 20px layout spacing directly to the child graphics
       to keep them perfectly clear of your 2px charcoal line constraints! */
    .arrow-back img {
        margin-left: 3vw;
        }

    .arrow-forward img {
        margin-right: 3vw;
        }

    /* Terminal Close Button UI Token */
    .lightbox-exit-trigger {
        position: absolute;
        padding: 0px;
        color: rgb(40, 40, 40);
        display: block;
        width: auto;           /* Shuts down wide horizontal bounding box scaling */
        height: auto;
        text-align: right;
        font-weight: 200;
        cursor: pointer;
        z-index: 100010;
        transition: color 0.2s ease;
        line-height: .7;
        top: clamp(12px, 2.5vw, 20px);
        right: clamp(16px, 4vw, 40px);
        font-size: clamp(36px, 5vw, 96px);
        }

    .lightbox-exit-trigger:hover {
        color: rgb(180, 180, 180);
        }

/* --- LINE UNDER THE HIGH RESOLUTION IMAGE IN SLIDE SHOW MODE --- */

    .lightbox-divider-stripe {
        width: 100%;
        box-sizing: border-box;
        border-top: 2px solid rgb(20, 20, 20);
        border-radius: 1px;
        margin-top: 5px;
        }

/* --- THE ISOLATED TYPOGRAPHY PROOF-OF-LIFE SHEET --- */

   .lightbox-text-poc-sheet {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      margin-top: 16px;
      padding: 0px 0px;
      transition: opacity 1.5s ease-in-out;
      }

    .lightbox-text-poc-sheet h2 {
      margin: 0px;
      padding: 0px;
      color: rgb(255, 255, 255);
      font-size: clamp(18px, 2.2vw, 28px);
      font-weight: 200;
      font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
      letter-spacing: 0.3em;
      text-indent: 0.3em;
      text-transform: uppercase;
      line-height: 1;
      }

   /* --- THE LIGHTBOX TEXT CINEMA ACCENT SHIELD --- */
   .lightbox-text-poc-sheet h2 .dash {
      color: rgb(100, 100, 100); /* Soft, muted tone for your editorial hyphen element */
      font-weight: 300;
      padding: 0 4px; /* Crisp spacing buffer around the hyphen line */
      }



    .lightbox-text-poc-sheet p {
        margin: 0px;
        padding: 0px;
        font-size: clamp(12px, 0.85vw, 18px);
        font-weight: 400;
        letter-spacing: 0.6em;
        text-indent: .6em;
        color: rgb(120, 120, 120);
        text-align: center;
        line-height: 1.5;
        margin-top: 10px;
        }

    body.cinema-lock {
            overflow: hidden;
        }

/* ====================================================================
18. SLIDESHOW PLAYBACK & PUASE
==================================================================== */

  /* POSITION PLAY / PAUSE TOUCH ZONE */
  .touch-playback {
      position: fixed;
      top: 0px;
      height: 300px;
      width: 300px;
      left: 50%;
      margin-left: -150px;
      background-color: rgba(0, 0, 0, 0.001);
      border: none;
      padding: 0px;
      cursor: pointer;
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
      z-index: 200000;
      display: flex;
      align-items: center;
      justify-content: center;
      /* border: 2px solid rgb(255, 0, 0);    For testing only */
      }

   /* REST STATE FOR PLAY / PAUSE BUTTON */
   .touch-playback img {
      width: 96px;
      height: 96px;
      display: block;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      }

   /* HOVER */
   @media (hover: hover) {
      .touch-playback:hover img {
         opacity: .66;
         transition: opacity 0.2s ease-in-out;
         }
      }

   /* CLICK */
   .touch-playback:active img {
      opacity: 1;
      transition: opacity 0.05s ease;
      }