/*
Theme Name: Vangelis Rokkas Portfolio
Theme URI: https://www.vangelisrokkas.gr/
Author: Vangelis Rokkas
Description: Independent photography portfolio theme with square motion galleries and fullscreen viewing.
Version: 0.12.1
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: vangelis-rokkas
*/

:root{--vr-paper:#f2f0eb;--vr-ink:#171717;--vr-white:#fff;--vr-muted:#777;--vr-line:rgba(0,0,0,.13)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--vr-paper);color:var(--vr-ink);font-family:Arial,Helvetica,sans-serif}
body.vr-home-body{background:#111}
button,a{color:inherit;font:inherit}a{text-decoration:none}button{border:0;background:none;padding:0;cursor:pointer}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.vr-home{height:100svh;min-height:540px;position:relative;overflow:hidden;color:var(--vr-white);background:#111;user-select:none}
.vr-slides,.vr-slide,.vr-slide-shade{position:absolute;inset:0}.vr-slide{background-position:center;background-size:cover;opacity:0;transform:scale(1.015);transition:opacity 1.45s ease,transform 7s linear;pointer-events:none}.vr-slide.is-active{opacity:1;transform:scale(1)}.vr-slide-shade{background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 25%,transparent 67%,rgba(0,0,0,.3));pointer-events:none}
.vr-home-header{position:absolute;z-index:5;top:34px;left:50%;width:min(88vw,1180px);min-height:126px;padding:19px 54px 17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;background:rgba(12,14,13,.32);border:1px solid rgba(255,255,255,.18);border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transform:translateX(-50%);box-shadow:0 16px 55px rgba(0,0,0,.09)}
.vr-brand{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;text-shadow:0 1px 18px rgba(0,0,0,.25)}.vr-brand strong{font-size:22px;font-weight:500;letter-spacing:.025em}.vr-brand span{font-size:9px;text-transform:uppercase;letter-spacing:.34em;opacity:.82}
.vr-brand-logo{display:block;width:auto;max-width:min(260px,42vw);max-height:58px;object-fit:contain}
.vr-category-menu{display:flex;align-items:center;gap:clamp(24px,2.8vw,52px);font-size:12px;letter-spacing:.025em}.vr-category-menu>a{position:relative;padding:8px 0;text-shadow:0 1px 15px rgba(0,0,0,.25)}.vr-category-menu>a:after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:#fff;transition:right .28s ease}.vr-category-menu>a:hover:after,.vr-category-menu>a:focus-visible:after{right:0}
.vr-architecture-item{position:relative}.vr-panorama-link{position:absolute!important;top:100%;left:0;min-width:max-content;padding:8px 0 0!important;font-size:9px;letter-spacing:.11em;opacity:.78;display:var(--vr-panorama-home-display,block)}.vr-panorama-link:after{display:none}
.vr-menu-button{display:none;align-items:center;gap:8px;color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.14em}.vr-menu-button svg,.vr-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.vr-slide-controls{position:absolute;z-index:5;left:3.3vw;bottom:38px;display:flex;align-items:center;gap:14px}.vr-slide-controls button{width:38px;height:38px;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.48);border-radius:50%;font-size:22px;transition:background .2s,border-color .2s}.vr-slide-controls button:hover{background:rgba(255,255,255,.14);border-color:#fff}.vr-slide-count{min-width:59px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;letter-spacing:.14em}.vr-slide-count b{font-size:13px}.vr-slide-count i{opacity:.5;font-style:normal}.vr-slide-dots{position:absolute;z-index:5;right:3.3vw;bottom:52px;display:flex;gap:9px}.vr-slide-dots button{width:24px;height:2px;background:rgba(255,255,255,.42);transition:width .25s,background .25s}.vr-slide-dots button.is-active{width:43px;background:#fff}
.vr-menu-overlay{position:absolute;z-index:20;inset:0;background:#f1efe9;color:var(--vr-ink);display:grid;place-items:center;transform:translateY(-102%);transition:transform .55s cubic-bezier(.72,0,.2,1)}.vr-menu-overlay.is-open{transform:translateY(0)}.vr-close{position:absolute;top:28px;right:24px;width:42px;height:42px;display:grid;place-items:center}.vr-menu-overlay nav{width:min(82vw,600px);display:flex;flex-direction:column}.vr-menu-overlay nav>a{display:flex;align-items:baseline;gap:22px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.16);font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,7vw,64px);letter-spacing:-.045em}.vr-menu-overlay nav>a span{width:24px;font-family:Arial,sans-serif;font-size:9px;letter-spacing:.14em;color:#777}.vr-menu-secondary{margin-top:32px;display:flex;gap:30px;font-size:13px}.vr-menu-secondary a{font-family:Arial,sans-serif!important;font-size:13px!important;border:0!important;padding:0!important;letter-spacing:0!important}

.vr-gallery-page{min-height:100vh;background:var(--vr-paper);user-select:none}.vr-gallery-header{height:108px;padding:0 clamp(24px,4.5vw,76px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--vr-line);position:relative;z-index:3}.vr-gallery-header .vr-brand{align-items:flex-start;text-align:left;text-shadow:none}.vr-gallery-header .vr-brand strong{font-size:17px}.vr-gallery-header .vr-brand span{font-size:7px}.vr-gallery-header nav{display:flex;gap:clamp(19px,2.4vw,39px);font-size:11px}.vr-gallery-header nav a{padding:11px 0;position:relative;color:#777}.vr-gallery-header nav a.is-active{color:#111}.vr-gallery-header nav a.is-active:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:#111}.vr-home-link{justify-self:end;font-size:10px;text-transform:uppercase;letter-spacing:.16em}.vr-gallery-intro{min-height:325px;padding:70px clamp(24px,7.8vw,132px) 60px;display:flex;align-items:end}.vr-gallery-intro p{margin:0 0 20px;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--vr-muted)}.vr-gallery-intro h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,7vw,104px);line-height:.84;font-weight:400;letter-spacing:-.055em}
.vr-gallery-header .vr-brand-logo{max-width:190px;max-height:48px}
.vr-square-grid{width:min(92vw,1540px);margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(9px,1.15vw,18px);padding-bottom:clamp(70px,9vw,150px)}.vr-photo{overflow:hidden;background:#ddd;position:relative;aspect-ratio:1}.vr-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.035)}.vr-photo[data-orientation=portrait] img{animation:vr-pan-y var(--vr-duration,12s) ease-in-out infinite alternate}.vr-photo[data-orientation=landscape] img{animation:vr-pan-x var(--vr-duration,16s) ease-in-out infinite alternate}.vr-photo:hover img,.vr-photo:focus-visible img{animation-play-state:paused;filter:brightness(.94)}@keyframes vr-pan-y{0%{object-position:50% 0}100%{object-position:50% 100%}}@keyframes vr-pan-x{0%{object-position:8% 50%}100%{object-position:92% 50%}}
.vr-empty{width:min(92vw,1540px);margin:0 auto;padding:30px 0 150px;color:#666}.vr-gallery-footer{min-height:120px;padding:0 clamp(24px,4.5vw,76px);border-top:1px solid var(--vr-line);display:flex;align-items:center;justify-content:space-between;font-size:9px;text-transform:uppercase;letter-spacing:.15em}
.vr-lightbox{position:fixed;z-index:50;inset:0;background:rgba(9,9,9,.97);color:#fff;display:none;place-items:center}.vr-lightbox.is-open{display:grid}.vr-lightbox img{max-width:calc(100vw - 180px);max-height:calc(100vh - 100px);object-fit:contain}.vr-lightbox button{position:absolute;color:#fff}.vr-lightbox-close{top:25px;right:30px;padding:12px;font-size:28px}.vr-lightbox-prev,.vr-lightbox-next{top:50%;width:54px;height:54px;border:1px solid rgba(255,255,255,.3);border-radius:50%;font-size:28px}.vr-lightbox-prev{left:28px}.vr-lightbox-next{right:28px}.vr-lightbox-count{position:absolute;bottom:22px;font-size:9px;letter-spacing:.18em;color:#aaa}
.vr-content{width:min(88vw,900px);margin:0 auto;padding:90px 0 140px}.vr-content h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,7vw,90px);font-weight:400;letter-spacing:-.045em;margin:0 0 55px}.vr-content .entry-content{font-size:17px;line-height:1.75}.vr-content img{max-width:100%;height:auto}

@media(max-width:1000px){.vr-home-header{top:22px;width:calc(100% - 36px);min-height:108px;padding:17px 54px;gap:11px}.vr-category-menu{display:none}.vr-menu-button{display:flex}.vr-slide-controls{left:24px;bottom:28px}.vr-slide-dots{right:24px;bottom:42px}}
@media(max-width:900px){.vr-gallery-header{height:90px;grid-template-columns:1fr auto}.vr-gallery-header nav{display:none}.vr-gallery-intro{min-height:270px}.vr-square-grid{width:calc(100% - 28px);grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.vr-lightbox img{max-width:calc(100vw - 40px);max-height:calc(100vh - 130px)}.vr-lightbox-prev,.vr-lightbox-next{top:auto;bottom:20px}.vr-lightbox-prev{left:20px}.vr-lightbox-next{right:20px}}
@media(max-width:560px){.vr-home{min-height:480px}.vr-home-header{top:16px;width:calc(100% - 24px);min-height:104px;padding:16px 18px}.vr-brand strong{font-size:20px}.vr-slide-controls{left:18px;bottom:21px;gap:9px}.vr-slide-controls button{width:35px;height:35px}.vr-slide-dots{display:none}.vr-menu-overlay nav{width:calc(100% - 44px)}.vr-gallery-header{height:76px;padding:0 18px}.vr-gallery-header .vr-brand strong{font-size:15px}.vr-home-link span{display:none}.vr-gallery-intro{min-height:260px;padding:48px 20px 34px}.vr-gallery-intro h1{font-size:48px}.vr-square-grid{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 10px 70px;gap:7px}.vr-gallery-footer{min-height:90px;padding:0 18px}.vr-gallery-footer span{display:none}.vr-content{padding:55px 0 90px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.vr-slide,.vr-menu-overlay{transition:none}.vr-photo img{animation:none!important}}

/* User-controlled Portfolio Theme Settings. Kept after the base rules so the
   saved options can safely override the design without editing theme files. */
:root{--vr-home-logo-width:260px;--vr-mobile-logo-width:210px;--vr-header-width:1180px;--vr-header-top:34px;--vr-header-left:50%;--vr-logo-offset-x:0px;--vr-logo-offset-y:0px;--vr-header-opacity:.32;--vr-header-blur:10px;--vr-home-shade:.42;--vr-gallery-columns:4;--vr-gallery-columns-tablet:3;--vr-gallery-columns-mobile:2;--vr-gallery-gap:18px;--vr-gallery-title-size:104px;--vr-gallery-title-font:Georgia,"Times New Roman",serif;--vr-lightbox-opacity:.97;--vr-photo-motion-state:running}
.vr-home-header{top:var(--vr-header-top);left:var(--vr-header-left);width:min(88vw,var(--vr-header-width));background:rgba(12,14,13,var(--vr-header-opacity));backdrop-filter:blur(var(--vr-header-blur));-webkit-backdrop-filter:blur(var(--vr-header-blur))}
.vr-home-header>.vr-brand{transform:translate(var(--vr-logo-offset-x),var(--vr-logo-offset-y))}
.vr-home-header .vr-brand-logo{max-width:min(var(--vr-home-logo-width),42vw);max-height:76px}
.vr-slide-shade{background:linear-gradient(180deg,rgba(0,0,0,var(--vr-home-shade)),transparent 25%,transparent 67%,rgba(0,0,0,.3))}
.vr-gallery-intro h1{font-family:var(--vr-gallery-title-font);font-size:clamp(48px,7vw,var(--vr-gallery-title-size))}
.vr-square-grid{grid-template-columns:repeat(var(--vr-gallery-columns),minmax(0,1fr));gap:var(--vr-gallery-gap)}
.vr-photo[data-orientation=portrait] img,.vr-photo[data-orientation=landscape] img{animation-play-state:var(--vr-photo-motion-state)}
.vr-lightbox{background:rgba(9,9,9,var(--vr-lightbox-opacity))}
@media(max-width:900px){.vr-square-grid{grid-template-columns:repeat(var(--vr-gallery-columns-tablet),minmax(0,1fr));gap:min(var(--vr-gallery-gap),10px)}}
@media(max-width:560px){.vr-home-header .vr-brand-logo{max-width:min(var(--vr-mobile-logo-width),72vw)}.vr-square-grid{grid-template-columns:repeat(var(--vr-gallery-columns-mobile),minmax(0,1fr));gap:min(var(--vr-gallery-gap),7px)}}

/* 0.3.0 responsive design-control layer. */
:root{--vr-header-height:126px;--vr-header-padding-x:54px;--vr-header-radius:63px;--vr-header-border-opacity:.18;--vr-header-bg-rgb:12,14,13;--vr-header-text:#fff;--vr-header-shadow-opacity:.09;--vr-header-gap:15px;--vr-menu-gap:38px;--vr-slide-fade:1.5s;--vr-slide-scale:1.02;--vr-slide-controls-display:flex;--vr-slide-dots-display:flex;--vr-panorama-home-display:block;--vr-panorama-mobile-display:flex;--vr-panorama-gallery-display:block;--vr-gallery-width:92vw;--vr-gallery-ratio:1 / 1;--vr-intro-height:325px;--vr-gallery-title-size-mobile:48px;--vr-title-letter-spacing:-.06em;--vr-body-font:Arial,Helvetica,sans-serif;--vr-menu-font:Arial,Helvetica,sans-serif;--vr-menu-size:12px;--vr-body-size:17px;--vr-line-custom:#d2d0cc;--vr-photo-bg:#ddd;--vr-lightbox-bg-rgb:9,9,9;--vr-lightbox-margin:90px;--vr-lightbox-button-size:54px}
body{font-family:var(--vr-body-font)}
.vr-home{color:var(--vr-header-text)}
.vr-slide{transform:scale(var(--vr-slide-scale));transition:opacity var(--vr-slide-fade) ease,transform 7s linear}
.vr-home-header{min-height:var(--vr-header-height);padding-left:var(--vr-header-padding-x);padding-right:var(--vr-header-padding-x);background:rgba(var(--vr-header-bg-rgb),var(--vr-header-opacity));border-color:rgba(255,255,255,var(--vr-header-border-opacity));border-radius:var(--vr-header-radius);color:var(--vr-header-text);gap:var(--vr-header-gap);box-shadow:0 16px 55px rgba(0,0,0,var(--vr-header-shadow-opacity))}
.vr-category-menu{font-family:var(--vr-menu-font);font-size:var(--vr-menu-size);gap:var(--vr-menu-gap)}
.vr-menu-overlay .vr-panorama-mobile-link{display:var(--vr-panorama-mobile-display)}
.vr-gallery-intro .vr-panorama-gallery-link{display:var(--vr-panorama-gallery-display)}
.vr-slide-controls{display:var(--vr-slide-controls-display)}
.vr-slide-dots{display:var(--vr-slide-dots-display)}
.vr-gallery-page{background:var(--vr-paper);color:var(--vr-ink)}
.vr-gallery-header{border-color:var(--vr-line-custom)}
.vr-gallery-header nav{font-family:var(--vr-menu-font)}
.vr-gallery-intro{min-height:var(--vr-intro-height)}
.vr-gallery-intro h1{letter-spacing:var(--vr-title-letter-spacing)}
.vr-square-grid{width:min(var(--vr-gallery-width),1540px)}
.vr-photo{aspect-ratio:var(--vr-gallery-ratio);background:var(--vr-photo-bg)}
.vr-gallery-footer{border-color:var(--vr-line-custom)}
.vr-content .entry-content{font-size:var(--vr-body-size)}
.vr-lightbox{background:rgba(var(--vr-lightbox-bg-rgb),var(--vr-lightbox-opacity))}
.vr-lightbox img{max-width:calc(100vw - (var(--vr-lightbox-margin) * 2));max-height:calc(100vh - var(--vr-lightbox-margin))}
.vr-lightbox-prev,.vr-lightbox-next{width:var(--vr-lightbox-button-size);height:var(--vr-lightbox-button-size)}
/* 0.5.0 independent tablet and mobile design variables. */
:root{--vr-tablet-logo-width:230px;--vr-tablet-header-width:96vw;--vr-tablet-header-top:22px;--vr-tablet-header-height:108px;--vr-tablet-header-padding-x:42px;--vr-tablet-header-radius:54px;--vr-tablet-header-gap:11px;--vr-tablet-header-opacity:.32;--vr-tablet-header-blur:10px;--vr-tablet-menu-button-size:11px;--vr-tablet-controls-x:24px;--vr-tablet-controls-bottom:28px;--vr-tablet-control-size:38px;--vr-tablet-slide-controls-display:flex;--vr-tablet-slide-dots-display:flex;--vr-tablet-gallery-width:96vw;--vr-tablet-gallery-gap:10px;--vr-tablet-title-size:72px;--vr-tablet-body-size:16px;--vr-tablet-lightbox-margin:40px;--vr-tablet-lightbox-button-size:50px;--vr-mobile-header-width:94vw;--vr-mobile-header-top:16px;--vr-mobile-header-height:104px;--vr-mobile-header-padding-x:18px;--vr-mobile-header-radius:42px;--vr-mobile-header-gap:9px;--vr-mobile-header-opacity:.32;--vr-mobile-header-blur:10px;--vr-mobile-menu-button-size:11px;--vr-mobile-controls-x:18px;--vr-mobile-controls-bottom:21px;--vr-mobile-control-size:35px;--vr-mobile-slide-controls-display:flex;--vr-mobile-slide-dots-display:none;--vr-mobile-gallery-width:100vw;--vr-mobile-gallery-gap:7px;--vr-mobile-body-size:15px;--vr-mobile-lightbox-margin:20px;--vr-mobile-lightbox-button-size:46px}
@media(max-width:1000px){.vr-home-header{top:var(--vr-tablet-header-top);width:var(--vr-tablet-header-width);min-height:var(--vr-tablet-header-height);padding-left:var(--vr-tablet-header-padding-x);padding-right:var(--vr-tablet-header-padding-x);border-radius:var(--vr-tablet-header-radius);gap:var(--vr-tablet-header-gap);background:rgba(var(--vr-header-bg-rgb),var(--vr-tablet-header-opacity));backdrop-filter:blur(var(--vr-tablet-header-blur));-webkit-backdrop-filter:blur(var(--vr-tablet-header-blur))}.vr-home-header .vr-brand-logo{max-width:min(var(--vr-tablet-logo-width),60vw)}.vr-menu-button{font-size:var(--vr-tablet-menu-button-size)}.vr-slide-controls{left:var(--vr-tablet-controls-x);bottom:var(--vr-tablet-controls-bottom);display:var(--vr-tablet-slide-controls-display)}.vr-slide-controls button{width:var(--vr-tablet-control-size);height:var(--vr-tablet-control-size)}.vr-slide-dots{right:var(--vr-tablet-controls-x);bottom:calc(var(--vr-tablet-controls-bottom) + 14px);display:var(--vr-tablet-slide-dots-display)}}
@media(max-width:1000px){.vr-square-grid{width:min(var(--vr-tablet-gallery-width),100%);gap:var(--vr-tablet-gallery-gap)}.vr-gallery-intro h1{font-size:var(--vr-tablet-title-size)}.vr-content .entry-content{font-size:var(--vr-tablet-body-size)}.vr-lightbox img{max-width:calc(100vw - (var(--vr-tablet-lightbox-margin) * 2));max-height:calc(100vh - 130px)}.vr-lightbox-prev,.vr-lightbox-next{width:var(--vr-tablet-lightbox-button-size);height:var(--vr-tablet-lightbox-button-size)}}
@media(max-width:560px){.vr-home-header{top:var(--vr-mobile-header-top);width:var(--vr-mobile-header-width);min-height:var(--vr-mobile-header-height);padding-left:var(--vr-mobile-header-padding-x);padding-right:var(--vr-mobile-header-padding-x);border-radius:var(--vr-mobile-header-radius);gap:var(--vr-mobile-header-gap);background:rgba(var(--vr-header-bg-rgb),var(--vr-mobile-header-opacity));backdrop-filter:blur(var(--vr-mobile-header-blur));-webkit-backdrop-filter:blur(var(--vr-mobile-header-blur))}.vr-home-header .vr-brand-logo{max-width:min(var(--vr-mobile-logo-width),72vw)}.vr-menu-button{font-size:var(--vr-mobile-menu-button-size)}.vr-slide-controls{left:var(--vr-mobile-controls-x);bottom:var(--vr-mobile-controls-bottom);display:var(--vr-mobile-slide-controls-display)}.vr-slide-controls button{width:var(--vr-mobile-control-size);height:var(--vr-mobile-control-size)}.vr-slide-dots{right:var(--vr-mobile-controls-x);bottom:calc(var(--vr-mobile-controls-bottom) + 14px);display:var(--vr-mobile-slide-dots-display)}.vr-gallery-intro h1{font-size:var(--vr-gallery-title-size-mobile)}.vr-square-grid{width:var(--vr-mobile-gallery-width);gap:var(--vr-mobile-gallery-gap)}.vr-content .entry-content{font-size:var(--vr-mobile-body-size)}.vr-lightbox img{max-width:calc(100vw - (var(--vr-mobile-lightbox-margin) * 2));max-height:calc(100vh - 130px)}.vr-lightbox-prev,.vr-lightbox-next{width:var(--vr-mobile-lightbox-button-size);height:var(--vr-mobile-lightbox-button-size)}}

/* 0.7.0 visual-layout positioning, with independent values per viewport. */
:root{--vr-tablet-header-left:50%;--vr-mobile-header-left:50%;--vr-tablet-logo-offset-x:0px;--vr-tablet-logo-offset-y:0px;--vr-mobile-logo-offset-x:0px;--vr-mobile-logo-offset-y:0px}
@media(max-width:1000px){.vr-home-header{left:var(--vr-tablet-header-left)}.vr-home-header>.vr-brand{transform:translate(var(--vr-tablet-logo-offset-x),var(--vr-tablet-logo-offset-y))}}
@media(max-width:560px){.vr-home-header{left:var(--vr-mobile-header-left)}.vr-home-header>.vr-brand{transform:translate(var(--vr-mobile-logo-offset-x),var(--vr-mobile-logo-offset-y))}}

/* 0.7.1: apply the chosen logo width directly. The earlier maximum-height
   constraint could prevent visible resizing of wide logo artwork. */
.vr-home-header .vr-brand-logo{width:min(var(--vr-home-logo-width),42vw);max-width:none;max-height:none;height:auto}
@media(max-width:1000px){.vr-home-header .vr-brand-logo{width:min(var(--vr-tablet-logo-width),60vw);max-width:none;max-height:none}}
@media(max-width:560px){.vr-home-header .vr-brand-logo{width:min(var(--vr-mobile-logo-width),72vw);max-width:none;max-height:none}}

/* 0.7.7: one persistent responsive logo-width expression. The image reads an
   active variable that switches at each breakpoint, so releasing a resize
   gesture cannot revert it or leak a fixed desktop width into smaller screens. */
:root{--vr-active-logo-width:var(--vr-home-logo-width);--vr-active-logo-cap:42vw}
@media(max-width:1000px){:root{--vr-active-logo-width:var(--vr-tablet-logo-width);--vr-active-logo-cap:60vw}}
@media(max-width:560px){:root{--vr-active-logo-width:var(--vr-mobile-logo-width);--vr-active-logo-cap:72vw}}

/* 0.7.8 independently movable and resizable homepage menus. */
:root{--vr-menu-offset-x:0px;--vr-menu-offset-y:0px;--vr-tablet-menu-offset-x:0px;--vr-tablet-menu-offset-y:0px;--vr-mobile-menu-offset-x:0px;--vr-mobile-menu-offset-y:0px}
.vr-home-header>.vr-category-menu{transform:translate(var(--vr-menu-offset-x),var(--vr-menu-offset-y))}
@media(max-width:1000px){.vr-home-header>.vr-menu-button{transform:translate(var(--vr-tablet-menu-offset-x),var(--vr-tablet-menu-offset-y))}}
@media(max-width:560px){.vr-home-header>.vr-menu-button{transform:translate(var(--vr-mobile-menu-offset-x),var(--vr-mobile-menu-offset-y))}}

/* 0.9.0 responsive focal points for slideshow and gallery crops. */
.vr-slide,.vr-photo{--vr-active-focal-x:var(--vr-focal-desktop-x,50%);--vr-active-focal-y:var(--vr-focal-desktop-y,50%)}
.vr-slide{background-position:var(--vr-active-focal-x) var(--vr-active-focal-y)}
.vr-photo img{object-position:var(--vr-active-focal-x) var(--vr-active-focal-y)}
@media(max-width:1000px){.vr-slide,.vr-photo{--vr-active-focal-x:var(--vr-focal-tablet-x,50%);--vr-active-focal-y:var(--vr-focal-tablet-y,50%)}}
@media(max-width:560px){.vr-slide,.vr-photo{--vr-active-focal-x:var(--vr-focal-mobile-x,50%);--vr-active-focal-y:var(--vr-focal-mobile-y,50%)}}
@keyframes vr-pan-y{0%{object-position:var(--vr-active-focal-x) clamp(0%,calc(var(--vr-active-focal-y) - 6%),100%)}100%{object-position:var(--vr-active-focal-x) clamp(0%,calc(var(--vr-active-focal-y) + 6%),100%)}}
@keyframes vr-pan-x{0%{object-position:clamp(0%,calc(var(--vr-active-focal-x) - 8%),100%) var(--vr-active-focal-y)}100%{object-position:clamp(0%,calc(var(--vr-active-focal-x) + 8%),100%) var(--vr-active-focal-y)}}

/* 0.11.0 independent tablet/mobile open-menu design. */
:root{--vr-tablet-overlay-bg-rgb:241,239,233;--vr-tablet-overlay-text:#171717;--vr-tablet-overlay-opacity:1;--vr-tablet-overlay-item-size:48px;--vr-tablet-overlay-width:82vw;--vr-tablet-overlay-item-space:14px;--vr-tablet-overlay-close-size:42px;--vr-tablet-overlay-transform:translateY(-102%);--vr-tablet-overlay-closed-opacity:1;--vr-mobile-overlay-bg-rgb:241,239,233;--vr-mobile-overlay-text:#171717;--vr-mobile-overlay-opacity:1;--vr-mobile-overlay-item-size:42px;--vr-mobile-overlay-width:88vw;--vr-mobile-overlay-item-space:12px;--vr-mobile-overlay-close-size:42px;--vr-mobile-overlay-transform:translateY(-102%);--vr-mobile-overlay-closed-opacity:1}
.vr-menu-overlay{pointer-events:none;opacity:1;transition:transform .55s cubic-bezier(.72,0,.2,1),opacity .35s ease}
.vr-menu-overlay.is-open{pointer-events:auto;transform:translate(0);opacity:1}
@media(max-width:1000px){.vr-menu-overlay{background:rgba(var(--vr-tablet-overlay-bg-rgb),var(--vr-tablet-overlay-opacity));color:var(--vr-tablet-overlay-text);transform:var(--vr-tablet-overlay-transform);opacity:var(--vr-tablet-overlay-closed-opacity)}.vr-menu-overlay nav{width:min(var(--vr-tablet-overlay-width),600px)}.vr-menu-overlay nav>a{padding:var(--vr-tablet-overlay-item-space) 0;font-size:var(--vr-tablet-overlay-item-size)}.vr-menu-overlay .vr-close{width:var(--vr-tablet-overlay-close-size);height:var(--vr-tablet-overlay-close-size)}}
@media(max-width:560px){.vr-menu-overlay{background:rgba(var(--vr-mobile-overlay-bg-rgb),var(--vr-mobile-overlay-opacity));color:var(--vr-mobile-overlay-text);transform:var(--vr-mobile-overlay-transform);opacity:var(--vr-mobile-overlay-closed-opacity)}.vr-menu-overlay nav{width:min(var(--vr-mobile-overlay-width),600px)}.vr-menu-overlay nav>a{padding:var(--vr-mobile-overlay-item-space) 0;font-size:var(--vr-mobile-overlay-item-size)}.vr-menu-overlay .vr-close{width:var(--vr-mobile-overlay-close-size);height:var(--vr-mobile-overlay-close-size)}}

/* 0.12.0 responsive Collection Page Layout Editor. */
:root{--vr-collection-header-height:108px;--vr-collection-logo-width:190px;--vr-collection-menu-size:11px;--vr-collection-intro-x:8vw;--vr-collection-intro-top:70px;--vr-collection-intro-bottom:60px;--vr-collection-title-align:left;--vr-tablet-collection-header-height:90px;--vr-tablet-collection-logo-width:190px;--vr-tablet-collection-intro-height:270px;--vr-tablet-collection-intro-x:8vw;--vr-tablet-collection-title-align:left;--vr-mobile-collection-header-height:76px;--vr-mobile-collection-logo-width:190px;--vr-mobile-collection-intro-height:260px;--vr-mobile-collection-intro-x:20px;--vr-mobile-collection-title-align:left}
.vr-gallery-header{height:var(--vr-collection-header-height)}
.vr-gallery-header .vr-brand-logo{width:min(var(--vr-collection-logo-width),30vw);max-width:none;height:auto}
.vr-gallery-header nav{font-size:var(--vr-collection-menu-size)}
.vr-gallery-intro{padding:var(--vr-collection-intro-top) clamp(24px,var(--vr-collection-intro-x),132px) var(--vr-collection-intro-bottom);text-align:var(--vr-collection-title-align)}
.vr-gallery-intro>div{width:100%}
@media(max-width:900px){.vr-gallery-header{height:var(--vr-tablet-collection-header-height)}.vr-gallery-header .vr-brand-logo{width:min(var(--vr-tablet-collection-logo-width),40vw)}.vr-gallery-intro{min-height:var(--vr-tablet-collection-intro-height);padding-left:clamp(20px,var(--vr-tablet-collection-intro-x),100px);padding-right:clamp(20px,var(--vr-tablet-collection-intro-x),100px);text-align:var(--vr-tablet-collection-title-align)}}
@media(max-width:560px){.vr-gallery-header{height:var(--vr-mobile-collection-header-height)}.vr-gallery-header .vr-brand-logo{width:min(var(--vr-mobile-collection-logo-width),55vw)}.vr-gallery-intro{min-height:var(--vr-mobile-collection-intro-height);padding-left:var(--vr-mobile-collection-intro-x);padding-right:var(--vr-mobile-collection-intro-x);text-align:var(--vr-mobile-collection-title-align)}}

/* 0.12.1 restores the clearly visible automatic travel inside gallery frames.
   Focal points still define the initial crop; animation then reveals the full
   vertical or horizontal photograph and pauses on hover/focus. */
@media(prefers-reduced-motion:no-preference){
  .vr-photo[data-orientation="portrait"] img{animation-name:vr-portrait-travel;animation-duration:var(--vr-duration,12s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:var(--vr-photo-motion-state)}
  .vr-photo[data-orientation="landscape"] img{animation-name:vr-landscape-travel;animation-duration:var(--vr-duration,16s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:var(--vr-photo-motion-state)}
  .vr-photo:hover img,.vr-photo:focus-visible img{animation-play-state:paused}
}
@keyframes vr-portrait-travel{0%{object-position:var(--vr-active-focal-x) 0%}100%{object-position:var(--vr-active-focal-x) 100%}}
@keyframes vr-landscape-travel{0%{object-position:0% var(--vr-active-focal-y)}100%{object-position:100% var(--vr-active-focal-y)}}