html { scroll-behavior:smooth; }
.imageViewer { box-sizing:border-box; max-width:94vw; max-height:94vh; padding:52px 56px 16px; border:0; border-radius:6px; background:#fff; color:#222; box-shadow:0 8px 48px #0006; text-align:center; }
.imageViewer::backdrop { background:rgb(0 0 0 / 75%); }
.imageViewer img { display:block; max-width:calc(94vw - 112px); max-height:68vh; width:auto; height:auto; margin:auto; }
.imageViewer button { box-sizing:border-box; width:44px; height:44px; border:1px solid #dedbd6; border-radius:50%; background:#fff; color:#42372d; padding:0; cursor:pointer; font:28px/1 Arial,sans-serif; margin:0; box-shadow:0 2px 8px #0002; transition:background-color .15s, color .15s; }
.imageViewer button:not([hidden]) { display:inline-flex; align-items:center; justify-content:center; }
.imageViewer button:hover { background:#42372d; color:#fff; }
.imageViewer button:focus-visible { outline:3px solid #1877f2; outline-offset:2px; }
.imageViewer .imageViewerClose { position:absolute; right:8px; top:6px; font-size:0; }
.imageViewerClose::before, .imageViewerClose::after { content:""; position:absolute; top:50%; left:50%; width:19px; height:2px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); }
.imageViewerClose::after { transform:translate(-50%,-50%) rotate(-45deg); }
.imageViewerPrevious, .imageViewerNext { position:absolute; top:50%; transform:translateY(-50%); }
.imageViewer .imageViewerPrevious, .imageViewer .imageViewerNext { font-size:0; }
.imageViewerPrevious::before, .imageViewerNext::before { content:""; width:10px; height:10px; border:solid currentColor; border-width:2px 2px 0 0; }
.imageViewerPrevious::before { transform:rotate(-135deg); margin-left:5px; }
.imageViewerNext::before { transform:rotate(45deg); margin-right:5px; }
.imageViewerPrevious { left:6px; }
.imageViewerNext { right:6px; }
.imageViewerCaption { padding:10px 0; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Keep the existing title artwork while letting the first scene show through its white background. */
body#index #header p.loading { mix-blend-mode:multiply; pointer-events:none; }
body#index #header ul.fadeImg li:first-child { display:block; opacity:0.35; }

/* Homepage social banners and embedded panels. */
.sideBar .bnr .instagramBanner { display:block; box-sizing:border-box; width:209px; height:61px; padding:8px 6px; background:#9b287b; background:linear-gradient(120deg,#733bb4,#bd287b,#d64b36); color:#fff; text-align:center; text-decoration:none; line-height:1.3; }
.sideBar .bnr .instagramBanner strong { display:block; font-family:Arial,sans-serif; font-size:20px; color:#fff; }
.sideBar .bnr .instagramBanner span { display:block; font-family:Arial,sans-serif; font-size:11px; color:#fff; }
.sideBar .bnr .instagramBanner:focus { outline:3px solid #222; outline-offset:3px; }
.wrapper .contentsWrapper .mainArea h3.socialHeading { display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; margin:18px 0 16px; padding:12px 16px; border:1px solid #e2d9c9; border-left:5px solid #986b43; border-radius:4px; background:#faf7f0; color:#42372d; line-height:1.4; }
.socialHeading span { font-family:Arial,sans-serif; font-size:22px; font-weight:bold; }
.wrapper .contentsWrapper .mainArea h3.socialHeadingInstagram { border-left-color:#b63e82; background:linear-gradient(110deg,#fbf3ea,#faf0f7); }
.wrapper .contentsWrapper .mainArea h3.socialHeadingFacebook { border-color:#d6e1ef; border-left-color:#1877f2; background:#f1f6fc; color:#244566; }

body#index .mainArea .instagram-media { background:#fff; border:1px solid #ddd; border-radius:3px; margin:0 0 24px; max-width:528px; min-width:326px; padding:0; width:100%; }
body#index .mainArea .instagramFallback { padding:16px; }
body#index .mainArea .facebookFeed { display:block; margin:0 auto 12px; border:none; overflow:hidden; }

.visitNotice { font-weight:bold; }
