.main_exp .control button { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; cursor:pointer; padding:0; }
.main_exp .control button:focus-visible, .tour-link:focus-visible { outline:3px solid #f7b74c; outline-offset:3px; }
.main_exp .photo { touch-action:pan-y; }
.main_exp .line { right:200px; width:auto; }
.main_exp .line span { transition:none; }
.tour-link { display:inline-flex; align-items:center; gap:8px; padding:13px 19px; margin:16px 0; color:#fff; background:#181818; border-radius:8px; font-size:14px; font-weight:600; }
.map-fallback { height:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center; text-align:center; padding:24px; background:#eeece7; color:#333; }
.map-fallback p { font-size:16px; line-height:1.6; }
.map-fallback a { padding:12px 18px; border:1px solid #333; border-radius:6px; font-size:14px; background:#fff; }
@media (max-width:767px) {
    .main_exp .control { display:flex; bottom:30px; right:10px; gap:4px; }
    .main_exp .control button { width:44px; height:44px; }
    .main_exp .text { bottom:84px; }
    .main_exp .text h2 { font-size:20px; }
    .main_exp .line { bottom:18px; width:auto; right:10px; }
    .main_exp .box { min-height:200px; }
    .main_exp .photo img { min-height:200px; object-fit:cover; }
}

/* ---------------------------------------------------------------------------
   Media hardening (2026-09)
   Photo slots declare their own aspect ratio so a replacement image of any
   size crops instead of pushing the row out of alignment.
   --------------------------------------------------------------------------- */
.exp_photo li img,
.gallery_photo li img,
.archtecture_list ul li img,
.main_space_list .swiper-slide img,
.parking_info .img li img { display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; background:#f2f2f2; }
.galnc_box .box img { aspect-ratio:1 / 1; object-fit:cover; }
.main_gallery .list li a img { aspect-ratio:239 / 250; object-fit:cover; background:#f2f2f2; }
.main_event .list li img,
.event li img { aspect-ratio:1000 / 1415; object-fit:cover; background:#f2f2f2; }
.main_info .flow .swiper-slide img { display:block; width:100%; height:auto; aspect-ratio:239 / 250; object-fit:cover; }
.venues-list a img { aspect-ratio:1 / 1; }
/* The carousel swaps sources at runtime; the slot must not resize with them. */
.main_exp .photo img { aspect-ratio:1000 / 480; object-fit:cover; }

/* Fixed backgrounds are the desktop parallax; touch devices paint them once
   at viewport size, which crops the artwork badly, so they scroll there. */
.exp_top, .archtecture_top .box { background-repeat:no-repeat; background-color:#111; }
@media (max-width:1070px), (hover:none), (pointer:coarse) {
    .exp_top, .archtecture_top .box { background-attachment:scroll; background-size:cover; }
}

/* ---------------------------------------------------------------------------
   Mobile navigation drawer
   The sticky header sits at z-index 1010, so the drawer and its backdrop have
   to clear it or the header paints over the open menu.
   --------------------------------------------------------------------------- */
.hamback { z-index:1150; }
.hambox { z-index:1200; width:min(86vw, 360px); min-width:0; padding-bottom:env(safe-area-inset-bottom); }
.hambox .box li a { min-height:32px; display:inline-flex; align-items:center; }
/* Separator dots strand themselves at the start of a wrapped line in the
   narrow drawer, so the links carry their own spacing there instead. */
.hambox .box li img { display:none; }
.hambox .box li a { margin-right:14px; }
@media (max-width:767px) {
    .hambox .logo { padding:22px 20px 6px; }
    .hambox .box { padding:16px 20px 40px; }
    .hambox .box li { padding:15px 0; }
    .hambox .close { top:12px; right:14px; width:44px; height:44px; display:grid; place-items:center; }
}

/* ---------------------------------------------------------------------------
   Responsive gaps left by the original stylesheets
   --------------------------------------------------------------------------- */
.insta { width:min(100%, 1000px); box-sizing:border-box; }
@media (max-width:767px) {
    .insta { padding-top:30px; }
    .insta h1 { font-size:20px; line-height:1.4; }

    /* One photo per screen turned these galleries into very long scrolls. */
    .exp_photo ul { flex-direction:row; flex-wrap:wrap; gap:6px; margin:6px 0; }
    .exp_photo li { flex:0 0 calc(50% - 3px); }
    .gallery_photo ul { gap:6px; margin-bottom:6px; }
    .gallery_photo li { flex:0 0 calc(50% - 3px); }

    .main_bn li a { display:block; }
    .location_info a { display:inline-flex; align-items:center; }
    .exp_info a { display:inline-flex; align-items:center; justify-content:center; margin-bottom:8px; }
    .floor_con .list li img { width:140px; }
}
@media (min-width:768px) and (max-width:1070px) {
    .gallery_photo li { flex:0 0 calc(33.333% - 3.34px); }
}

/* ---------------------------------------------------------------------------
   Gallery hero: the arrow is a real control that jumps to the photo grid.
   --------------------------------------------------------------------------- */
.gallery_vod .scroll { display:grid; place-items:center; width:48px; height:48px; margin-left:-24px; border-radius:50%; color:#fff; animation:matehill-nudge 2.2s ease-in-out infinite; }
.gallery_vod .scroll:hover, .gallery_vod .scroll:focus-visible { background:rgba(255,255,255,.16); }
.gallery_vod .scroll:focus-visible { outline:3px solid #f7b74c; outline-offset:3px; }
@keyframes matehill-nudge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(7px); } }
@media (prefers-reduced-motion:reduce) {
    .gallery_vod .scroll { animation:none; }
}

/* Logos carry intrinsic width/height attributes; CSS only ever sets a width. */
.familysite li img, .floor_con .list li img { height:auto; }

/* ---------------------------------------------------------------------------
   Brand marks
   The source files carry a flat grey plate; it now lives in CSS, so the mark
   can sit on the white page and still read as a tile in the facility lists.
   --------------------------------------------------------------------------- */
.exp_info .exp_brand { display:block; width:190px; max-width:58%; height:auto; margin:0 auto 26px; }
.familysite li img, .floor_con .list li img { background:#f2f2f2; }
@media (max-width:767px) { .exp_info .exp_brand { width:150px; margin-bottom:20px; } }

/* ---------------------------------------------------------------------------
   Experience banner
   Phones get their own 3:2 crop; the wide desktop artwork cropped down to a
   narrow sliver of itself at portrait widths.
   --------------------------------------------------------------------------- */
@media (max-width:767px) {
    .exp_top { background-attachment:scroll; background-size:cover; }
    .exp_top01 { background-image:url("../img/optimized/exptop_01_m-945b9b23d0-900.webp"); }
    .exp_top02 { background-image:url("../img/optimized/exptop_02_m-f7f88c61cf-900.webp"); }
    .exp_top03 { background-image:url("../img/optimized/exptop_03_m-5f1b9bc9c3-900.webp"); }
    .exp_top04 { background-image:url("../img/optimized/exptop_04_m-cea8eda13e-900.webp"); }
    .exp_top05 { background-image:url("../img/optimized/exptop_05_m-1841b3ba6f-900.webp"); }
    .exp_top .text p { line-height:1.5; }
}

/* ---------------------------------------------------------------------------
   Section sub-navigation
   Dot separators and bare links wrap badly once a translation runs long, so on
   phones each entry becomes a self-contained chip.
   --------------------------------------------------------------------------- */
@media (max-width:767px) {
    .subtitle .submenu { gap:6px; padding:0 14px; }
    .subtitle .submenu a { display:inline-flex; align-items:center; box-sizing:border-box; min-height:40px; padding:8px 14px; border:1px solid #e3e3df; border-radius:999px; font-size:12px; line-height:1.3; color:#666; }
    .subtitle .submenu .on { background:#1b1b1b; border-color:#1b1b1b; color:#fff; font-weight:700; }
}

/* The 360 tour entry reads as one more destination, not a stray boxed control. */
.hambox .box li a.tour-nav { display:inline-flex; margin:12px 0 0; padding:8px 14px; border:1px solid #e3e3df; border-radius:999px; font-size:12px; color:#555; }

/* ---------------------------------------------------------------------------
   Floor guide, phones
   The 360 link read as a selected tab sitting above the tab row; it belongs
   after the floor carousel, as the call to action it is.
   --------------------------------------------------------------------------- */
@media (max-width:767px) {
    .main_space { display:flex; flex-direction:column; }
    .main_space h1 { order:1; }
    .main_space .tab { order:2; }
    .main_space .main_space_list { order:3; }
    .main_space .tour-link { order:4; align-self:center; margin:20px auto 0; }
}

/* At tablet widths the banner box was far taller than the artwork is deep. */
@media (min-width:768px) and (max-width:1070px) {
    .exp_top { min-height:390px; }
}

/* ---------------------------------------------------------------------------
   Closed events
   A sash across the poster, tilted the opposite way on every other card so a
   grid of them does not read as a pattern. Red-and-white hazard edges keep the
   band unmistakable while the middle stays white, so the label stays legible.
   --------------------------------------------------------------------------- */
/* Clipping belongs on the link, not the list item: `overflow:hidden` on a
   flex item with `flex-basis:0` removes its automatic minimum size and the
   column collapses to nothing. */
.event li > a, .main_event .list li > a { position:relative; display:block; overflow:hidden; }
.event_flag {
    position:absolute; z-index:2; left:50%; top:50%; width:150%;
    transform:translate(-50%, -50%) rotate(-10deg);
    padding:9px 0;
    background:
        repeating-linear-gradient(135deg, #d8232a 0 9px, #fff 9px 18px) top/100% 5px no-repeat,
        repeating-linear-gradient(135deg, #d8232a 0 9px, #fff 9px 18px) bottom/100% 5px no-repeat,
        #fff;
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    color:#111; font-size:12px; font-weight:800; letter-spacing:2px; line-height:1.4;
    text-align:center; text-transform:uppercase; white-space:nowrap;
    pointer-events:none;
}
.event li:nth-child(even) .event_flag,
.main_event .list li:nth-child(even) .event_flag { transform:translate(-50%, -50%) rotate(10deg); }
.main_event .list .event_flag { font-size:10px; letter-spacing:1px; padding:7px 0; }
@media (max-width:1070px) { .main_event .list .event_flag { font-size:9px; letter-spacing:.5px; } }
@media (max-width:767px) {
    .event_flag { font-size:11px; letter-spacing:1.5px; }
    .main_event .list .event_flag { font-size:10px; letter-spacing:1px; }
}