/* United Earth • private gallery visual polish • 2026-10-09
   Deep Atlantic blue / moonlight glass, photo-first. No original images modified. */
:root{
 --sea:#071827;
 --ink:#f1f7ff;
 --secondary:#aebed1;
 --teal:#a7d6ff;
 --line:rgba(170,204,239,.18);
 --ue-ice:#d3edff;
 --ue-blue-glow:rgba(66,152,248,.20);
 --ue-glass:rgba(13,37,70,.30);
 --ue-glass-border:rgba(166,213,255,.42);
}
body{background:var(--sea);color:var(--ink)}
button:focus-visible,select:focus-visible,.gallery-enter:focus-visible{
 outline:2px solid #b7e3ff;
 outline-offset:3px
}
/* A quiet editorial entry, not a prominent colored sales CTA. */
#photo-space>.lede{margin-bottom:clamp(26px,5.2vw,49px)}
.photo-section-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:clamp(12px,3vw,28px);
 padding:0 0 19px;
 margin-bottom:25px;
 border-bottom:1px solid rgba(173,205,243,.20);
}
.photo-section-head .works-title{min-width:0;display:flex;flex-direction:column;align-items:start;gap:7px}
.photo-section-head .works-title h2{font-size:clamp(24px,4.9vw,41px);letter-spacing:-.047em;line-height:1.14}
.photo-section-head .works-title .secondary{font-size:11px;letter-spacing:.06em;color:#abc2dc}
.gallery-enter{
 display:inline-flex;
 justify-content:center;
 align-items:center;
 flex:none;
 gap:11px;
 min-height:44px;
 padding:9px 13px 9px 17px;
 color:#d9ecff;
 background:linear-gradient(130deg,rgba(24,75,127,.31),rgba(16,51,89,.17));
 border:1px solid rgba(159,208,255,.37);
 border-radius:100px;
 box-shadow:inset 0 1px rgba(219,239,255,.13),0 3px 20px rgba(7,36,76,.10);
 -webkit-backdrop-filter:blur(15px);
 backdrop-filter:blur(15px);
 font-size:12px;
 font-weight:580;
 letter-spacing:.015em;
 text-wrap:nowrap;
 transition:background .2s,border-color .2s,box-shadow .2s,color .2s;
}
.gallery-enter-arrow{
 display:grid;place-items:center;
 width:24px;height:24px;
 border:1px solid rgba(174,211,252,.20);
 background:rgba(76,149,220,.095);
 border-radius:50%;
 font-size:16px;
 font-weight:400;
 color:#b2dfff;
}
.gallery-enter:hover,.gallery-enter:focus-visible{
 border-color:rgba(172,217,255,.70);
 background:linear-gradient(130deg,rgba(45,107,171,.44),rgba(20,67,128,.29));
 box-shadow:inset 0 1px rgba(219,239,255,.15),0 0 20px rgba(73,146,249,.15);
 color:white;
}
.gallery-enter:active{transform:scale(.985)}
/* Let the works command the space, not repeated pills. */
.gallery{row-gap:clamp(33px,5.5vw,56px);column-gap:clamp(16px,2.5vw,30px)}
.art-photo{background:#0c2134;border:1px solid rgba(164,197,234,.14);border-radius:2px;box-shadow:0 12px 32px rgba(0,8,19,.10)}
.art-photo img{transition:transform .35s cubic-bezier(.23,.82,.25,1)}
.art-photo:hover img{transform:scale(1.01)}
.art-meta{padding-top:13px}
.art-meta strong{font-weight:560;letter-spacing:-.025em}
.art-meta i{color:#a4cfff}
.art-buttons{margin-top:4px}
.art-buttons .btn:not(:focus-visible){
 min-height:44px;
 padding:6px 0;
 border:0;
 border-radius:0;
 background:transparent;
 box-shadow:none;
 color:#bedaf6;
 font-weight:520;
 font-size:12px;
}
.art-buttons .btn:hover{color:#eef8ff;background:transparent}
.art-buttons .btn:focus-visible{border-radius:4px}
.eyebrow,.art-meta i,.identity,.editor-top span{color:var(--teal)}
.tabs button[aria-selected=true]::after{background:linear-gradient(90deg,#78b8ff,#badfff)}
.private{color:#b8dafb;border-color:rgba(155,208,252,.32)}
.private[aria-pressed=true]{background:rgba(58,133,220,.18)}
/* ALL active controls use translucent blue, never solid white or mint. */
.btn.highlight,
.count-controls button[aria-pressed=true],
.viewer .viewer-modes button[aria-pressed=true],
.viewer #motion-enable,
#motion-enable,
.motion-offer-actions #motion-enable{
 color:#edf8ff!important;
 background:linear-gradient(145deg,rgba(54,122,198,.39),rgba(22,77,149,.35))!important;
 border:1px solid rgba(161,216,255,.74)!important;
 box-shadow:inset 0 1px 0 rgba(225,244,255,.20),
            inset 0 -1px 0 rgba(54,120,210,.18),
            0 0 15px rgba(63,144,241,.17)!important;
 -webkit-backdrop-filter:blur(15px) saturate(1.14);
 backdrop-filter:blur(15px) saturate(1.14);
}
.btn.highlight:hover,
.viewer .viewer-modes button[aria-pressed=true]:hover,
.viewer #motion-enable:hover{
 background:linear-gradient(140deg,rgba(73,147,222,.51),rgba(28,96,175,.45))!important;
 box-shadow:inset 0 1px rgba(227,247,255,.25),0 0 21px rgba(70,152,246,.23)!important;
}
.viewer .viewer-modes button:not([aria-pressed=true]),
.viewer .viewer-nav button,
.viewer .motion-offer-actions button:not(#motion-enable){
 color:#d8eafa;
 background:linear-gradient(155deg,rgba(12,34,66,.32),rgba(6,21,42,.25));
 border:1px solid rgba(176,207,246,.28);
 box-shadow:inset 0 1px rgba(210,235,255,.05);
}
.viewer .viewer-modes button:not([aria-pressed=true]):hover,
.viewer .viewer-nav button:hover{
 border-color:rgba(161,213,255,.49);
 background:rgba(31,80,134,.34);
}
.viewer .viewer-sheet{
 background:linear-gradient(153deg,rgba(14,36,66,.65),rgba(9,25,46,.69));
 border:1px solid rgba(173,211,250,.26);
 box-shadow:0 12px 36px rgba(1,11,31,.24),inset 0 1px 0 rgba(208,236,255,.06);
 -webkit-backdrop-filter:blur(24px) saturate(1.08);
 backdrop-filter:blur(24px) saturate(1.08);
}
.viewer .viewer-sheet .viewer-modes button{transition:border-color .18s,background .18s,box-shadow .18s}
.viewer .motion-offer-panel{
 background:linear-gradient(140deg,rgba(15,44,80,.53),rgba(8,29,59,.48));
 border-color:rgba(157,206,249,.34);
 box-shadow:0 8px 27px rgba(1,15,36,.18),inset 0 1px rgba(236,247,255,.09);
}
.viewer .motion-offer-panel h2{color:#e9f6ff}
.viewer .viewer-close,.viewer .viewer-tools-toggle,
.journey-head button,.journey-scene-zoom,
.journey-related,.language-picker{
 background:rgba(11,37,69,.32);
 color:#f1f8ff;
 border-color:rgba(169,207,246,.35);
 -webkit-backdrop-filter:blur(16px);
 backdrop-filter:blur(16px);
}
.viewer .viewer-close:hover,.viewer .viewer-tools-toggle:hover,
.journey-head button:hover,.journey-scene-zoom:hover{
 background:rgba(26,79,133,.46);
 border-color:rgba(167,214,255,.63);
 box-shadow:0 0 15px rgba(60,139,233,.12);
}
.viewer-tools-toggle[aria-expanded=true]{
 background:rgba(30,82,140,.52)!important;
 border-color:rgba(172,218,255,.60)!important;
 box-shadow:inset 0 1px rgba(205,237,255,.11),0 0 13px rgba(70,150,239,.13);
}
.viewer .viewer-feedback{background:rgba(13,37,70,.54);border-color:rgba(170,216,249,.28)}
.journey-head #journey-language{background:rgba(12,43,80,.36);border-color:rgba(167,208,249,.33)}
.journey-scene-zoom{color:#dfedff}
.journey-progress{background:rgba(159,205,247,.19)}
#journey-progress-line{background:linear-gradient(90deg,#569de5,#a7d7ff)}
.journey-actions button,.journey-explore-actions button,.journey-explore-bar button{
 border-color:rgba(158,208,250,.38);
 background:rgba(15,52,98,.30);
 color:#e4f3ff;
}
.journey-actions button:hover,.journey-explore-actions button:hover{
 border-color:rgba(170,217,255,.65);
 background:rgba(27,87,161,.39)
}
@media(max-width:380px){
 .photo-section-head .works-title h2{font-size:23px}
 .gallery-enter{padding:8px 10px 8px 12px;gap:7px;font-size:11px}
 .gallery-enter-arrow{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){
 .gallery-enter,.art-photo img,.viewer .viewer-sheet .viewer-modes button{transition:none!important}
}

/* Gallery welcome should be clean even on compact phones. */
.footer-note{font-size:11px;line-height:1.58;max-width:680px;color:#88a1be;border-color:rgba(172,206,245,.16);margin-top:75px}
@media(max-width:350px){
 .photo-section-head .works-title h2{font-size:21px;letter-spacing:-.053em}
 .photo-section-head{gap:7px}
 .gallery-enter{font-size:11px;padding:8px 9px 8px 11px}
 .gallery-enter-arrow{width:21px;height:21px}
}

/* Brand alignment: values copied from the LIVE United Earth entry-blue.css.
   These are the official United Earth colors, not a separate invented palette. */
:root{
 --ue-night:#031728;
 --ue-deep:#0b2940;
 --ue-horizon:#123f61;
 --ue-blue:#66a8ff;
 --ue-cyan:#35c8e6;
 --ue-ice:#f5faff;
 --ue-mist:#a8bac8;
 --ue-brand-accent-blue:#0284c7;
 --sea:var(--ue-night);
 --ink:var(--ue-ice);
 --secondary:var(--ue-mist);
 --teal:var(--ue-blue);
 --line:rgba(102,168,255,.21);
 --ue-blue-glow:rgba(102,168,255,.19);
 --ue-glass:rgba(11,41,64,.42);
 --ue-glass-border:rgba(102,168,255,.42);
}
body{background:var(--ue-night);color:var(--ue-ice)}
.head{border-color:rgba(102,168,255,.18)}
.tabs{border-color:rgba(102,168,255,.18)}
.tabs button[aria-selected=true]::after{background:var(--ue-blue)}
.eyebrow,.art-meta i,.editor-top span{color:var(--ue-blue)}
.gallery-enter{
 color:var(--ue-ice);
 background:linear-gradient(145deg,rgba(18,63,97,.45),rgba(11,41,64,.47));
 border-color:rgba(102,168,255,.43);
 box-shadow:inset 0 1px rgba(245,250,255,.09),0 0 10px rgba(102,168,255,.06);
 padding:9px 18px;
 gap:0;
}
.gallery-enter:hover,.gallery-enter:focus-visible{
 color:#fff;
 background:rgba(18,63,97,.65);
 border-color:var(--ue-blue);
 box-shadow:inset 0 1px rgba(245,250,255,.15),0 0 17px rgba(102,168,255,.20);
}
.gallery-enter-arrow{display:none!important}
.art-photo{background:var(--ue-deep);border-color:rgba(102,168,255,.14)}
.art-meta strong{color:var(--ue-ice)}
.art-meta small{color:var(--ue-mist)}
/* A photograph is its own entry. No arrow or duplicated Step Inside links. */
.art-meta i{display:none!important}
.art-buttons .btn::after,html[dir="rtl"] .art-buttons .btn::after{content:none!important}
.art-buttons:empty{display:none}
.art-photo:focus-visible{outline:2px solid var(--ue-blue);outline-offset:3px}
.private{border-color:rgba(102,168,255,.40);color:#c4dfff}
.private[aria-pressed=true]{background:rgba(102,168,255,.17)}
/* Active and passive state distinguishable but both use actual website blue. */
.btn.highlight,
.count-controls button[aria-pressed=true],
.viewer .viewer-modes button[aria-pressed=true],
.viewer #motion-enable,
#motion-enable,
.motion-offer-actions #motion-enable{
 color:var(--ue-ice)!important;
 background:linear-gradient(145deg,rgba(18,63,97,.68),rgba(11,41,64,.64))!important;
 border:1px solid rgba(102,168,255,.78)!important;
 box-shadow:inset 0 1px rgba(245,250,255,.14),0 0 16px rgba(102,168,255,.19)!important;
 -webkit-backdrop-filter:blur(15px);
 backdrop-filter:blur(15px);
}
.btn.highlight:hover,.viewer .viewer-modes button[aria-pressed=true]:hover,
.viewer #motion-enable:hover{
 background:rgba(18,63,97,.83)!important;
 border-color:var(--ue-blue)!important;
 box-shadow:inset 0 1px rgba(245,250,255,.15),0 0 19px rgba(102,168,255,.24)!important;
}
.viewer .viewer-modes button:not([aria-pressed=true]),
.viewer .viewer-nav button,
.viewer .motion-offer-actions button:not(#motion-enable){
 color:#e3f0ff;
 background:rgba(3,23,40,.42);
 border-color:rgba(102,168,255,.29);
 box-shadow:inset 0 1px rgba(245,250,255,.05)
}
.viewer .viewer-modes button:not([aria-pressed=true]):hover,
.viewer .viewer-nav button:hover{background:rgba(18,63,97,.48);border-color:rgba(102,168,255,.56)}
.viewer .viewer-sheet{
 background:linear-gradient(155deg,rgba(11,41,64,.80),rgba(3,23,40,.80));
 border-color:rgba(102,168,255,.32);
 box-shadow:inset 0 1px rgba(245,250,255,.075),0 15px 34px rgba(3,23,40,.30);
}
.viewer .motion-offer-panel{
 background:linear-gradient(145deg,rgba(11,41,64,.63),rgba(3,23,40,.61));
 border-color:rgba(102,168,255,.43);
 box-shadow:inset 0 1px rgba(245,250,255,.09),0 8px 24px rgba(3,23,40,.19);
}
.viewer .viewer-close,.viewer .viewer-tools-toggle,
.journey-head button,.journey-scene-zoom,
.journey-related,.language-picker{
 background:rgba(11,41,64,.38);
 border-color:rgba(102,168,255,.39);
 color:var(--ue-ice);
}
.viewer .viewer-close:hover,.viewer .viewer-tools-toggle:hover,
.journey-head button:hover,.journey-scene-zoom:hover{
 background:rgba(18,63,97,.55);
 border-color:var(--ue-blue);
 box-shadow:0 0 14px rgba(102,168,255,.14);
}
.viewer-tools-toggle[aria-expanded=true]{
 background:rgba(18,63,97,.65)!important;
 border-color:var(--ue-blue)!important;
 box-shadow:0 0 15px rgba(102,168,255,.19)!important;
}
.journey-head #journey-language{background:rgba(11,41,64,.44);border-color:rgba(102,168,255,.34)}
.journey-progress{background:rgba(102,168,255,.20)}
#journey-progress-line{background:var(--ue-blue)}
.journey-actions button,.journey-explore-actions button,.journey-explore-bar button{
 background:rgba(11,41,64,.44);
 color:var(--ue-ice);
 border-color:rgba(102,168,255,.42);
}
.journey-actions button:hover,.journey-explore-actions button:hover{
 background:rgba(18,63,97,.58);
 border-color:var(--ue-blue)
}
button:focus-visible,select:focus-visible,.gallery-enter:focus-visible{
 outline-color:var(--ue-blue);
}
@media(max-width:350px){.gallery-enter{padding-inline:13px}}