/* ==========================================================================
   GSC-TEMPC GALLERY — V4 (phone-style gallery)
   Loaded AFTER gallery_page.css. Everything is prefixed .gx- so it cannot
   collide with the hero or the older gallery styles.

   Palette: white paper · logo green #30AA28 · antique gold · cinema-dark
   viewer (dark ONLY inside the full-screen viewer).
   ========================================================================== */

:root{
    --gx-green:#30AA28;
    --gx-green-d:#2a9622;
    --gx-green-soft:rgba(48,170,40,.09);
    --gx-gold:#caa45a;
    --gx-gold-l:#e0c98f;
    --gx-ink:#1d2a1f;
    --gx-muted:#6f7a72;
    --gx-line:rgba(48,170,40,.16);
    --gx-line-s:rgba(48,170,40,.09);
    --gx-ph:#e6ebe4;
    --gx-ease:cubic-bezier(.22,1,.36,1);
    --gx-max:1560px;
    --gx-pad:clamp(14px,3.4vw,56px);
    --gx-top:0px;      /* set by JS: height of a fixed site header */
    --gx-bar-h:0px;    /* set by JS: height of the sticky search bar */
    --gx-safe-t:env(safe-area-inset-top,0px);
    --gx-safe-b:env(safe-area-inset-bottom,0px);
}

.gx *,.gx *::before,.gx *::after,
.gx-viewer *,.gx-viewer *::before,.gx-viewer *::after,
.gx-selbar *,.gx-toast *{box-sizing:border-box;}
.gx button,.gx input,.gx select,.gx-viewer button,.gx-selbar button{font:inherit;color:inherit;}
.gx button,.gx-viewer button,.gx-selbar button{-webkit-tap-highlight-color:transparent;}
.gx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.gx [hidden],.gx-viewer [hidden],.gx-selbar[hidden]{display:none!important;}

.gx{
    position:relative;
    width:100%;
    background:#fff;
    color:var(--gx-ink);
    font-family:'Poppins',Arial,sans-serif;
    padding-bottom:clamp(60px,8vw,120px);
    min-height:60vh;
}
.gx :focus-visible,.gx-viewer :focus-visible,.gx-selbar :focus-visible{
    outline:2px solid var(--gx-gold);
    outline-offset:3px;
}

/* ------------------------------------------------------------------ stats */
.gx-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    max-width:var(--gx-max);
    margin:0 auto;
    padding:0 var(--gx-pad);
}
.gx-stats__item{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:12px;
    padding:26px 10px;
    border-bottom:1px solid var(--gx-line-s);
}
.gx-stats__item b{
    font-family:'Fraunces',Georgia,serif;
    font-weight:600;
    font-size:clamp(1.7rem,3vw,2.5rem);
    color:var(--gx-green);
    letter-spacing:-.04em;
    line-height:1;
}
.gx-stats__item span{
    font-size:.72rem;
    font-weight:500;
    color:var(--gx-muted);
    letter-spacing:.04em;
}

/* ------------------------------------------------------------------- tabs */
.gx-tabs{
    position:relative;
    display:flex;
    gap:0;
    width:max-content;
    max-width:calc(100% - 2 * var(--gx-pad));
    margin:clamp(26px,4vw,44px) auto 0;
    padding:4px;
    border:1px solid var(--gx-line);
    border-radius:999px;
    background:#fff;
}
.gx-tab{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:44px;
    padding:0 clamp(20px,4vw,34px);
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--gx-muted);
    font-size:.82rem;
    font-weight:600;
    letter-spacing:.02em;
    cursor:pointer;
    transition:color .3s ease;
}
.gx-tab.is-active{color:#fff;}
.gx-tabs__ink{
    position:absolute;
    z-index:0;
    top:4px;
    bottom:4px;
    left:4px;
    width:0;
    border-radius:999px;
    background:var(--gx-green);
    box-shadow:0 8px 20px rgba(48,170,40,.28);
    transition:transform .45s var(--gx-ease),width .45s var(--gx-ease);
}

/* ---------------------------------------------------------- section heads */
.gx-section-head{
    max-width:var(--gx-max);
    margin:0 auto;
    padding:clamp(34px,5vw,64px) var(--gx-pad) clamp(18px,2.4vw,30px);
}
.gx-section-head h2{
    margin:0;
    font-family:'Fraunces',Georgia,serif;
    font-weight:600;
    font-size:clamp(2.4rem,5.5vw,4.8rem);
    letter-spacing:-.05em;
    line-height:.95;
    color:var(--gx-green);
}
.gx-section-head p{
    margin:14px 0 0;
    max-width:520px;
    color:var(--gx-muted);
    font-family:'Bodoni Moda',Georgia,serif;
    font-size:clamp(.92rem,1.2vw,1.05rem);
    line-height:1.65;
}

/* ============================================================== ALBUMS === */
.gx-album-grid{
    max-width:var(--gx-max);
    margin:0 auto;
    padding:0 var(--gx-pad);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-flow:dense;
    gap:clamp(10px,1.4vw,18px);
}
.gx-album{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:4 / 5;
    padding:0;
    border:0;
    border-radius:clamp(14px,1.6vw,22px);
    overflow:hidden;
    background:var(--gx-ph);
    cursor:pointer;
    text-align:left;
    isolation:isolate;
    transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
    transition:transform .5s var(--gx-ease),box-shadow .5s ease;
    box-shadow:0 10px 30px rgba(48,170,40,.08);
}
.gx-album:hover{box-shadow:0 26px 60px rgba(48,170,40,.22);}
.gx-album--feature{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;}
.gx-album--wide{grid-column:span 2;aspect-ratio:auto;}
.gx-album__img,.gx-album__ph{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.gx-album__ph{filter:blur(18px);transform:scale(1.15);}
.gx-album__img{opacity:0;transition:opacity .7s ease,transform 1.2s var(--gx-ease);}
.gx-album__img.is-loaded{opacity:1;}
.gx-album:hover .gx-album__img{transform:scale(1.06);}
.gx-album::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(180deg,rgba(4,20,10,0) 38%,rgba(4,20,10,.82) 100%);
}
.gx-album__body{
    position:absolute;
    left:0;right:0;bottom:0;
    z-index:2;
    padding:clamp(14px,1.8vw,26px);
    color:#fff;
}
.gx-album__title{
    margin:0;
    font-family:'Fraunces',Georgia,serif;
    font-weight:600;
    font-size:clamp(1.15rem,1.7vw,1.7rem);
    line-height:1.05;
    letter-spacing:-.03em;
    text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.gx-album--feature .gx-album__title{font-size:clamp(1.8rem,3.4vw,3.4rem);letter-spacing:-.045em;}
.gx-album__meta{
    margin:7px 0 0;
    font-size:.7rem;
    font-weight:500;
    color:rgba(255,255,255,.82);
}
.gx-album__reveal{
    margin:10px 0 0;
    max-height:0;
    overflow:hidden;
    opacity:0;
    color:var(--gx-gold-l);
    font-size:.72rem;
    font-weight:600;
    transition:max-height .45s var(--gx-ease),opacity .35s ease;
}
.gx-album:hover .gx-album__reveal,
.gx-album:focus-visible .gx-album__reveal{max-height:40px;opacity:1;}
.gx-album__badge{
    position:absolute;
    z-index:2;
    top:12px;left:12px;
    padding:6px 11px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    color:var(--gx-green-d);
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.04em;
}
.gx-album.is-in{animation:gxRise .8s var(--gx-ease) both;}
@keyframes gxRise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}

/* ============================================================== PHOTOS === */
.gx-photos{max-width:var(--gx-max);margin:0 auto;}

/* sticky search bar + chips */
.gx-bar{
    position:sticky;
    top:var(--gx-top);
    z-index:60;
    padding:12px var(--gx-pad) 10px;
    margin-top:clamp(20px,3vw,34px);
    background:rgba(255,255,255,.92);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
    backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--gx-line-s);
}
.gx-bar__row{display:flex;align-items:center;gap:10px;}

.gx-search{position:relative;flex:1 1 auto;min-width:0;max-width:560px;}
.gx-search input{
    width:100%;
    height:46px;
    padding:0 44px 0 44px;
    border:1px solid var(--gx-line);
    border-radius:999px;
    outline:none;
    background:#f6f9f5;
    color:var(--gx-ink);
    font-size:16px; /* >=16px stops iOS zooming into the field */
    transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
    -webkit-appearance:none;
    appearance:none;
}
.gx-search input::-webkit-search-cancel-button{-webkit-appearance:none;}
.gx-search input::placeholder{color:#8a948d;}
.gx-search input:focus{background:#fff;border-color:var(--gx-green);box-shadow:0 0 0 4px rgba(48,170,40,.12);}
.gx-search>i{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--gx-green);font-size:.8rem;pointer-events:none;}
.gx-search__clear{
    position:absolute;right:8px;top:50%;
    width:30px;height:30px;
    display:none;place-items:center;
    transform:translateY(-50%);
    border:0;border-radius:50%;
    background:rgba(48,170,40,.1);
    color:var(--gx-muted);
    cursor:pointer;
}
.gx-search__clear.is-visible{display:grid;}

.gx-iconbtn{
    position:relative;
    flex:0 0 46px;
    width:46px;height:46px;
    display:grid;place-items:center;
    border:1px solid var(--gx-line);
    border-radius:50%;
    background:#fff;
    color:var(--gx-green);
    font-size:1rem;
    cursor:pointer;
    transition:background .25s ease,color .25s ease,border-color .25s ease,transform .3s var(--gx-ease);
}
.gx-iconbtn:hover{border-color:var(--gx-green);transform:translateY(-2px);}
.gx-iconbtn[aria-pressed="true"]{background:var(--gx-green);border-color:var(--gx-green);color:#fff;}
.gx-iconbtn__badge{
    position:absolute;top:-4px;right:-4px;
    min-width:19px;height:19px;padding:0 5px;
    display:grid;place-items:center;
    border-radius:999px;
    background:var(--gx-gold);
    color:#fff;
    font-size:.6rem;font-weight:700;
}

/* album chips: single scrolling row, like a phone's album bar */
.gx-chips{
    display:flex;
    gap:8px;
    margin:10px calc(var(--gx-pad) * -1) 0;
    padding:2px var(--gx-pad) 4px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
}
.gx-chips::-webkit-scrollbar{display:none;}
.gx-chip{
    flex:0 0 auto;
    display:inline-flex;align-items:center;gap:8px;
    min-height:38px;
    padding:0 16px;
    border:1px solid var(--gx-line);
    border-radius:999px;
    background:#fff;
    color:#5d6a61;
    font-size:.74rem;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    scroll-snap-align:start;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.gx-chip em{font-style:normal;font-weight:500;color:#9aa49d;font-size:.66rem;}
.gx-chip:hover{border-color:var(--gx-green);color:var(--gx-green);}
.gx-chip.is-active{background:var(--gx-green);border-color:var(--gx-green);color:#fff;}
.gx-chip.is-active em{color:rgba(255,255,255,.78);}

/* sub bar */
.gx-subbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px var(--gx-pad) 0;
}
.gx-subbar__right{display:flex;align-items:center;gap:8px;}
.gx-seg{display:inline-flex;padding:3px;border:1px solid var(--gx-line);border-radius:999px;background:#fff;}
.gx-seg button{
    min-height:36px;padding:0 16px;
    border:0;border-radius:999px;
    background:transparent;color:var(--gx-muted);
    font-size:.74rem;font-weight:600;cursor:pointer;
    transition:background .25s ease,color .25s ease;
}
.gx-seg button.is-active{background:var(--gx-green-soft);color:var(--gx-green-d);}
.gx-select{position:relative;display:inline-flex;align-items:center;}
.gx-select>i{position:absolute;left:14px;color:var(--gx-green);font-size:.78rem;pointer-events:none;}
.gx-select select{
    height:42px;
    max-width:170px;
    padding:0 30px 0 36px;
    border:1px solid var(--gx-line);
    border-radius:999px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2330AA28' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center;
    color:var(--gx-ink);
    font-size:.74rem;font-weight:600;
    -webkit-appearance:none;appearance:none;
    cursor:pointer;
}
.gx-sort{
    height:42px;padding:0 16px;
    display:inline-flex;align-items:center;gap:8px;
    border:1px solid var(--gx-line);border-radius:999px;
    background:#fff;color:var(--gx-ink);
    font-size:.74rem;font-weight:600;cursor:pointer;
}
.gx-sort i{color:var(--gx-green);}
.gx-count{
    margin:14px 0 0;
    padding:0 var(--gx-pad);
    color:var(--gx-muted);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.02em;
}

/* timeline + month groups */
.gx-timeline{padding:6px var(--gx-pad) 0;}
.gx-group{margin-top:clamp(26px,3.4vw,44px);}
.gx-group__head{
    position:sticky;
    top:calc(var(--gx-top) + var(--gx-bar-h));
    z-index:20;
    display:flex;
    align-items:baseline;
    gap:12px;
    margin:0 calc(var(--gx-pad) * -1) 12px;
    padding:12px var(--gx-pad) 10px;
    background:linear-gradient(#fff 72%,rgba(255,255,255,0));
}
.gx-group__head h3{
    margin:0;
    font-family:'Fraunces',Georgia,serif;
    font-weight:600;
    font-size:clamp(1.35rem,2.4vw,2.1rem);
    letter-spacing:-.035em;
    color:var(--gx-green);
}
.gx-group__head span{
    color:var(--gx-muted);
    font-size:.68rem;
    font-weight:600;
}
.gx-row{display:flex;gap:var(--gx-gap,4px);margin-bottom:var(--gx-gap,4px);}

/* tile */
.gx-tile{
    position:relative;
    flex:1 1 0;
    min-width:0;
    overflow:hidden;
    background:var(--gx-ph);
    cursor:pointer;
    opacity:0;
    transform:translateY(14px) scale(.985);
    transition:opacity .6s ease,transform .6s var(--gx-ease);
    border-radius:var(--gx-radius,3px);
    -webkit-user-select:none;user-select:none;
    -webkit-touch-callout:none;
}
.gx-tile.is-in{opacity:1;transform:none;}
.gx-tile__ph,.gx-tile__img{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    object-fit:cover;
    display:block;
}
.gx-tile__ph{filter:blur(14px);transform:scale(1.12);}
.gx-tile__img{opacity:0;transition:opacity .55s ease,transform .8s var(--gx-ease);}
.gx-tile.is-loaded .gx-tile__img{opacity:1;}
.gx-tile.is-loaded .gx-tile__ph{opacity:0;transition:opacity .6s ease .15s;}
.gx-tile::after{
    content:"";
    position:absolute;inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,transparent 55%,rgba(4,20,10,.62) 100%);
    opacity:0;
    transition:opacity .35s ease;
}
.gx-tile__cap{
    position:absolute;
    left:10px;right:44px;bottom:9px;
    z-index:2;
    overflow:hidden;
    color:#fff;
    font-size:.64rem;font-weight:600;
    white-space:nowrap;text-overflow:ellipsis;
    transform:translateY(8px);
    opacity:0;
    transition:transform .4s var(--gx-ease),opacity .3s ease;
}
@media (hover:hover){
    .gx-tile:hover .gx-tile__img{transform:scale(1.05);}
    .gx-tile:hover::after,.gx-tile:focus-visible::after{opacity:1;}
    .gx-tile:hover .gx-tile__cap{transform:none;opacity:1;}
    .gx-tile:hover .gx-tile__fav,.gx-tile:focus-within .gx-tile__fav{opacity:1;}
}
.gx-tile__badge{
    position:absolute;z-index:3;
    top:8px;right:8px;
    min-width:26px;height:26px;padding:0 8px;
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    border-radius:999px;
    background:rgba(5,28,19,.55);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    color:#fff;
    font-size:.6rem;font-weight:600;
    pointer-events:none;
}
.gx-tile__badge i{font-size:.55rem;}
.gx-tile__fav{
    position:absolute;z-index:4;
    right:6px;bottom:6px;
    width:34px;height:34px;
    display:grid;place-items:center;
    border:0;border-radius:50%;
    background:transparent;
    color:#fff;
    font-size:.82rem;
    cursor:pointer;
    opacity:0;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,.55));
    transition:opacity .25s ease,transform .3s var(--gx-ease);
}
.gx-tile__fav:active{transform:scale(.85);}
.gx-tile.is-fav .gx-tile__fav{opacity:1;color:#ff6b7d;}
@media (hover:none){.gx-tile__fav{opacity:.0;} .gx-tile.is-fav .gx-tile__fav{opacity:1;}}

/* select mode */
.gx-tile__check{
    position:absolute;z-index:5;
    top:8px;left:8px;
    width:26px;height:26px;
    display:none;place-items:center;
    border:2px solid #fff;
    border-radius:50%;
    background:rgba(0,0,0,.18);
    color:transparent;
    font-size:.64rem;
    transition:background .2s ease,transform .3s var(--gx-ease);
    box-shadow:0 1px 6px rgba(0,0,0,.3);
}
.gx.is-selecting .gx-tile__check{display:grid;}
.gx.is-selecting .gx-tile__fav{display:none;}
.gx-tile.is-selected .gx-tile__check{background:var(--gx-green);border-color:var(--gx-green);color:#fff;transform:scale(1.08);}
.gx-tile.is-selected .gx-tile__img{transform:scale(.88);}
.gx-tile.is-selected{background:var(--gx-green-soft);}
.gx-tile.is-selected .gx-tile__img,.gx-tile.is-selected .gx-tile__ph{border-radius:8px;}

/* empty / no results */
.gx-noresults,.gx-empty-page{
    max-width:520px;
    margin:0 auto;
    padding:70px 24px;
    text-align:center;
    color:var(--gx-muted);
    font-family:'Bodoni Moda',Georgia,serif;
}
.gx-noresults i,.gx-empty-page i{display:block;margin-bottom:16px;font-size:2.6rem;color:#b9c3bb;}
.gx-sentinel{height:1px;}
.gx-btn{
    display:inline-flex;align-items:center;gap:9px;
    min-height:46px;padding:0 24px;
    border:1px solid var(--gx-green);
    border-radius:999px;
    background:var(--gx-green);
    color:#fff;
    font-family:'Poppins',Arial,sans-serif;
    font-size:.78rem;font-weight:600;
    cursor:pointer;
    transition:transform .3s var(--gx-ease),background .25s ease;
}
.gx-btn:hover{background:var(--gx-green-d);transform:translateY(-2px);}
.gx-btn--gold{background:var(--gx-gold);border-color:var(--gx-gold);}
.gx-btn--gold:hover{background:#b8914a;}

/* month scrubber (desktop) */
.gx-scrub{
    position:fixed;
    right:6px;
    top:50%;
    z-index:55;
    display:none;
    flex-direction:column;
    gap:2px;
    max-height:70vh;
    overflow-y:auto;
    padding:8px 4px;
    transform:translateY(-50%);
    border-radius:14px;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    scrollbar-width:none;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}
.gx-scrub::-webkit-scrollbar{display:none;}
.gx-scrub.is-shown{opacity:1;pointer-events:auto;}
.gx-scrub button{
    padding:5px 8px;
    border:0;border-radius:8px;
    background:transparent;
    color:#8a948d;
    font-size:.6rem;font-weight:700;letter-spacing:.04em;
    text-align:center;line-height:1.15;
    cursor:pointer;
}
.gx-scrub button small{display:block;font-weight:500;font-size:.52rem;opacity:.8;}
.gx-scrub button:hover{color:var(--gx-green);}
.gx-scrub button.is-active{background:var(--gx-green);color:#fff;}
@media (min-width:1000px){.gx-scrub:not([hidden]){display:flex;}}

/* multi-select bar */
.gx-selbar{
    position:fixed;
    left:50%;
    bottom:calc(18px + var(--gx-safe-b));
    z-index:300;
    width:min(640px,calc(100% - 24px));
    display:flex;align-items:center;gap:10px;
    padding:10px 12px 10px 10px;
    transform:translate(-50%,0);
    border-radius:999px;
    background:#17301b;
    color:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
    animation:gxSelIn .45s var(--gx-ease) both;
}
@keyframes gxSelIn{from{opacity:0;transform:translate(-50%,24px);}to{opacity:1;transform:translate(-50%,0);}}
.gx-selbar__x{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.1);cursor:pointer;}
.gx-selbar__n{flex:1;font-size:.8rem;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gx-selbar__link{border:0;background:transparent;color:var(--gx-gold-l);font-size:.74rem;font-weight:600;cursor:pointer;padding:8px;}
.gx-selbar .gx-btn{min-height:40px;padding:0 18px;font-size:.74rem;}
.gx-selbar .gx-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;}

/* custom "View" cursor (mouse devices only) */
.gx-cursor{
    position:fixed;left:0;top:0;z-index:400;
    width:78px;height:78px;margin:-39px 0 0 -39px;
    display:none;place-items:center;
    border-radius:50%;
    background:rgba(48,170,40,.92);
    color:#fff;
    font-size:.68rem;font-weight:600;letter-spacing:.08em;
    pointer-events:none;
    opacity:0;
    transform:translate3d(-100px,-100px,0) scale(.4);
    transition:opacity .25s ease;
}
.gx-cursor.is-on{opacity:1;}
@media (hover:hover) and (pointer:fine){.gx-cursor{display:grid;}}

/* toast */
.gx-toast{
    position:fixed;
    left:50%;bottom:calc(86px + var(--gx-safe-b));
    z-index:100001;
    max-width:calc(100% - 32px);
    padding:12px 20px;
    border-radius:999px;
    background:rgba(20,28,22,.94);
    color:#fff;
    font-size:.78rem;font-weight:500;
    opacity:0;
    transform:translate(-50%,14px);
    pointer-events:none;
    transition:opacity .3s ease,transform .4s var(--gx-ease);
}
.gx-toast.is-on{opacity:1;transform:translate(-50%,0);}

/* back to top */
.gx-totop{
    position:fixed;
    right:calc(18px + env(safe-area-inset-right,0px));
    bottom:calc(18px + var(--gx-safe-b));
    z-index:90;
    width:48px;height:48px;
    display:grid;place-items:center;
    border:0;border-radius:50%;
    background:var(--gx-green);
    color:#fff;
    box-shadow:0 14px 34px rgba(48,170,40,.34);
    cursor:pointer;
    opacity:0;
    transform:translateY(16px);
    pointer-events:none;
    transition:opacity .3s ease,transform .4s var(--gx-ease);
}
.gx-totop.is-visible{opacity:1;transform:none;pointer-events:auto;}
body.gx-selecting-on .gx-totop{bottom:calc(86px + var(--gx-safe-b));}

/* =============================================================== VIEWER === */
.gx-viewer{
    position:fixed;
    inset:0;
    z-index:100000;
    display:none;
    overflow:hidden;
    color:#fff;
    font-family:'Poppins',Arial,sans-serif;
    touch-action:none;
    overscroll-behavior:contain;
    height:100vh;height:100dvh;
}
.gx-viewer.is-open{display:block;}
.gx-viewer:focus{outline:none;}
.gx-v-bg{position:absolute;inset:0;background:#050a07;opacity:0;transition:opacity .4s ease;}
.gx-viewer.is-shown .gx-v-bg{opacity:1;}

.gx-v-stage{position:absolute;inset:0;touch-action:none;cursor:grab;}
.gx-v-stage.is-grabbing{cursor:grabbing;}
.gx-v-track{position:absolute;inset:0;will-change:transform;}
.gx-v-pane{
    position:absolute;
    top:0;bottom:0;
    width:100%;
    display:flex;align-items:center;justify-content:center;
    padding:calc(62px + var(--gx-safe-t)) 0 calc(132px + var(--gx-safe-b));
    overflow:hidden;
}
.gx-v-media{
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;height:auto;
    object-fit:contain;
    -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
    will-change:transform;
    transform-origin:50% 50%;
    background:#0d1410;
}
.gx-v-media--video{width:min(100%,1280px);height:100%;background:#000;}
.gx-v-media.is-fade{opacity:0;}
.gx-v-pane.is-loading::after{
    content:"";
    position:absolute;left:50%;top:50%;
    width:34px;height:34px;margin:-17px 0 0 -17px;
    border:2px solid rgba(255,255,255,.18);
    border-top-color:var(--gx-gold-l);
    border-radius:50%;
    animation:gxSpin .8s linear infinite;
}
@keyframes gxSpin{to{transform:rotate(360deg);}}
.gx-v-ghost{
    position:fixed;z-index:100002;
    object-fit:cover;
    margin:0;
    pointer-events:none;
    transition:left .42s var(--gx-ease),top .42s var(--gx-ease),width .42s var(--gx-ease),height .42s var(--gx-ease),border-radius .42s var(--gx-ease);
    will-change:left,top,width,height;
}

/* chrome: top bar */
.gx-v-top,.gx-v-bottom{transition:opacity .35s ease,transform .45s var(--gx-ease);}
.gx-v-top{
    position:absolute;
    left:0;right:0;top:0;
    z-index:5;
    display:flex;align-items:center;gap:4px;
    padding:calc(10px + var(--gx-safe-t)) 10px 26px;
    background:linear-gradient(180deg,rgba(0,0,0,.62),transparent);
}
.gx-v-top__spacer{flex:1;}
.gx-v-btn{
    width:44px;height:44px;
    flex:0 0 auto;
    display:grid;place-items:center;
    padding:0;
    border:0;border-radius:50%;
    background:transparent;
    color:#fff;
    font-size:1rem;
    text-decoration:none;
    cursor:pointer;
    transition:background .25s ease,color .25s ease,transform .3s var(--gx-ease);
}
.gx-v-btn:hover{background:rgba(255,255,255,.14);}
.gx-v-btn[aria-pressed="true"]{color:var(--gx-gold-l);}
.gx-v-btn.is-fav{color:#ff6b7d;}
.gx-v-btn--sm{width:36px;height:36px;font-size:.85rem;}
.gx-v-back{display:none;}
.gx-v-x{display:block;}
@media (max-width:760px){.gx-v-back{display:block;}.gx-v-x{display:none;}.gx-hide-m{display:none!important;}}

/* side arrows (desktop) */
.gx-v-nav{
    position:absolute;
    top:50%;
    z-index:5;
    width:54px;height:54px;
    margin-top:-27px;
    display:none;place-items:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    background:rgba(255,255,255,.07);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    color:#fff;
    cursor:pointer;
    transition:background .25s ease,opacity .35s ease,border-color .25s ease;
}
.gx-v-nav:hover{background:rgba(255,255,255,.16);border-color:var(--gx-gold-l);}
.gx-v-nav--prev{left:22px;}
.gx-v-nav--next{right:22px;}
.gx-v-nav[disabled]{opacity:.2;cursor:default;}
@media (hover:hover) and (pointer:fine) and (min-width:761px){.gx-v-nav{display:grid;}}

/* bottom: caption + filmstrip */
.gx-v-bottom{
    position:absolute;
    left:0;right:0;bottom:0;
    z-index:5;
    padding:34px 0 calc(12px + var(--gx-safe-b));
    background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);
}
.gx-viewer.is-chromeless .gx-v-top{opacity:0;transform:translateY(-14px);pointer-events:none;}
.gx-viewer.is-chromeless .gx-v-bottom{opacity:0;transform:translateY(14px);pointer-events:none;}
.gx-viewer.is-chromeless .gx-v-nav{opacity:0;pointer-events:none;}
.gx-v-cap{padding:0 18px 12px;text-align:center;}
.gx-v-cap__title{
    font-size:.86rem;font-weight:600;
    text-shadow:0 2px 10px rgba(0,0,0,.6);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gx-v-cap__sub{margin-top:4px;color:rgba(255,255,255,.68);font-size:.68rem;font-weight:500;}
.gx-v-strip{
    display:flex;gap:6px;
    padding:0 50vw;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
}
.gx-v-strip::-webkit-scrollbar{display:none;}
.gx-v-thumb{
    position:relative;
    flex:0 0 auto;
    width:46px;height:58px;
    padding:0;
    border:0;border-radius:6px;
    overflow:hidden;
    background:#16201a;
    opacity:.5;
    cursor:pointer;
    transform:scale(.92);
    transition:opacity .3s ease,transform .4s var(--gx-ease),width .4s var(--gx-ease);
}
.gx-v-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.gx-v-thumb.is-active{opacity:1;transform:none;width:60px;box-shadow:0 0 0 2px var(--gx-gold-l);}
.gx-v-thumb i{position:absolute;right:4px;bottom:4px;font-size:.5rem;color:#fff;filter:drop-shadow(0 1px 3px #000);}

/* slideshow progress */
.gx-v-progress{position:absolute;left:0;right:0;top:0;height:3px;z-index:6;opacity:0;transition:opacity .3s ease;}
.gx-v-progress span{display:block;height:100%;width:0;background:var(--gx-gold-l);}
.gx-viewer.is-playing .gx-v-progress{opacity:1;}
.gx-viewer.is-playing .gx-v-progress span{animation:gxProg var(--gx-dur,4s) linear forwards;}
@keyframes gxProg{from{width:0}to{width:100%}}

/* info panel */
.gx-v-info{
    position:absolute;
    z-index:8;
    right:0;top:0;bottom:0;
    width:min(340px,100%);
    padding:calc(14px + var(--gx-safe-t)) 22px 24px;
    background:rgba(12,20,15,.94);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-left:1px solid rgba(255,255,255,.08);
    overflow-y:auto;
    touch-action:pan-y;
    animation:gxPanelIn .45s var(--gx-ease) both;
}
@keyframes gxPanelIn{from{transform:translateX(30px);opacity:0;}to{transform:none;opacity:1;}}
.gx-v-info header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.gx-v-info h3{margin:0;font-family:'Fraunces',Georgia,serif;font-size:1.4rem;font-weight:600;letter-spacing:-.03em;}
.gx-v-info dl{margin:0;}
.gx-v-info dt{margin-top:18px;color:var(--gx-gold-l);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.gx-v-info dd{margin:5px 0 0;font-size:.84rem;line-height:1.5;word-break:break-word;color:rgba(255,255,255,.92);}
@media (max-width:760px){
    .gx-v-info{
        top:auto;left:0;right:0;bottom:0;
        width:100%;max-height:62%;
        padding:20px 22px calc(26px + var(--gx-safe-b));
        border-left:0;border-top:1px solid rgba(255,255,255,.1);
        border-radius:22px 22px 0 0;
        animation-name:gxSheetIn;
    }
    .gx-v-info::before{content:"";display:block;width:42px;height:4px;margin:-8px auto 14px;border-radius:4px;background:rgba(255,255,255,.25);}
}
@keyframes gxSheetIn{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}

.gx-v-hint{
    position:absolute;left:50%;top:calc(76px + var(--gx-safe-t));
    z-index:6;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(0,0,0,.55);
    font-size:.7rem;font-weight:500;
    transform:translateX(-50%);
    opacity:0;pointer-events:none;
    transition:opacity .5s ease;
}
.gx-v-hint.is-on{opacity:1;}
body.gx-lock{overflow:hidden!important;touch-action:none;}

/* =========================================================== RESPONSIVE === */
@media (max-width:1100px){
    .gx-album-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:760px){
    .gx-album-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .gx-album--feature{grid-column:span 2;grid-row:span 1;aspect-ratio:16 / 11;}
    .gx-album--wide{grid-column:span 1;aspect-ratio:4 / 5;}
    .gx-album__reveal{max-height:40px;opacity:1;}
    .gx-stats__item{flex-direction:column;align-items:center;gap:6px;padding:18px 6px;}
    .gx-stats__item span{font-size:.62rem;}
    .gx-tab{padding:0 24px;font-size:.78rem;}
    .gx-subbar{padding-top:14px;}
    .gx-subbar__right{width:100%;justify-content:space-between;}
    .gx-select{flex:1;}
    .gx-select select{width:100%;max-width:none;}
    .gx-group__head h3{font-size:1.3rem;}
    .gx-selbar__link{display:none;}
    .gx-selbar{border-radius:22px;}
    .gx-v-thumb{width:40px;height:52px;}
    .gx-v-thumb.is-active{width:52px;}
    .gx-v-pane{padding-bottom:calc(120px + var(--gx-safe-b));}
}
@media (max-width:420px){
    .gx-seg button{padding:0 13px;}
    .gx-iconbtn,.gx-iconbtn{flex-basis:44px;width:44px;height:44px;}
    .gx-v-btn{width:42px;height:42px;}
    .gx-toast{font-size:.72rem;}
}
@media (orientation:landscape) and (max-height:520px){
    .gx-v-pane{padding:calc(54px + var(--gx-safe-t)) 0 70px;}
    .gx-v-strip,.gx-v-cap__sub{display:none;}
    .gx-v-bottom{padding-top:10px;}
}

@media (prefers-reduced-motion:reduce){
    .gx *,.gx *::before,.gx *::after,
    .gx-viewer *,.gx-viewer *::before,.gx-viewer *::after,
    .gx-selbar,.gx-toast{
        animation-duration:.001ms!important;
        animation-delay:0s!important;
        transition-duration:.001ms!important;
        transition-delay:0s!important;
    }
    .gx-tile{opacity:1;transform:none;}
    .gx-album{transform:none!important;}
}
@media print{
    .gx-bar,.gx-subbar,.gx-tabs,.gx-scrub,.gx-viewer,.gx-selbar,.gx-totop,.gx-cursor{display:none!important;}
}