/* A handheld edition of the same island, with room to walk and read. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.mobile-map-hint,.mobile-room-hint{display:none}
#island-viewport{overflow:hidden}
.room-controls button,.map-pad button{-webkit-touch-callout:none;-webkit-user-select:none}
dialog{max-height:calc(100dvh - 32px)}

@media screen and (max-width:860px){
  :root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
  body.modal-open{position:fixed;top:var(--page-scroll-top,0px);left:0;right:0;width:100%}
  body{overflow-wrap:break-word}
  .masthead{padding:calc(16px + var(--safe-top)) max(16px,var(--safe-right)) 14px max(16px,var(--safe-left));gap:12px;grid-template-columns:minmax(44px,1fr) auto minmax(84px,1fr)}
  .header-actions{gap:0}.header-actions .header-right{display:none}
  #menu-button{min-height:44px;min-width:44px;max-width:100%;font-size:14px}
  .wordmark{min-height:44px;align-content:center;padding:0 0 0 4px}
  .wordmark>span{font-size:25px;letter-spacing:4px}.wordmark small{font-size:10px;letter-spacing:3.5px;margin-top:5px}
  .language-picker select{font-size:16px;min-height:44px;padding:8px;max-width:108px}
  .desktop-nav,html[lang=en] .desktop-nav{justify-content:flex-start;gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 max(16px,var(--safe-right)) 0 max(16px,var(--safe-left));scroll-padding-inline:16px}
  .desktop-nav::-webkit-scrollbar{display:none}
  .desktop-nav button{flex:none;white-space:nowrap;font-size:14px;min-height:48px;padding:10px 1px}
  .desktop-nav button::after{bottom:0}
  main{padding-inline:max(14px,var(--safe-left)) max(14px,var(--safe-right));min-width:0}
  .room-heading{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:17px 0 10px}
  .room-name{grid-column:1/-1;grid-row:1;text-align:left;min-width:0}
  .room-name h1,html[lang=en] .room-name h1{font-size:26px;line-height:1.4;letter-spacing:.5px}
  .room-heading .eyebrow{font-size:12px;letter-spacing:1.3px}
  .room-heading>.quiet-button,.back-button{min-height:44px;font-size:14px;padding-block:8px;white-space:normal;text-align:left}
  .room-journey{display:block;padding:4px 0 12px}
  .room-journey>span{font-size:12px}
  .room-journey>div{display:flex;gap:7px 16px;flex-wrap:wrap;margin-top:2px}
  .room-journey button{min-height:44px;font-size:14px;padding-block:8px}
  .room-frame{border-radius:20px;box-shadow:0 14px 34px #031e2855}
  #room-world{height:clamp(230px,calc(100svh - 390px),400px);touch-action:pan-y pinch-zoom}
  #room-player{width:40px;height:60px}
  #room-welcome{left:18px;top:18px;max-width:calc(100% - 36px)}
  #room-welcome span{font-size:12px;line-height:1.65}#room-welcome strong{font-size:21px}
  .room-hotspot,html[lang=en] .room-hotspot{min-height:44px;max-width:180px;font-size:14px;line-height:1.45;white-space:normal;padding:9px 12px}
  .room-hud{display:block;padding:12px}
  .room-progress{font-size:12px;letter-spacing:.4px}
  .room-hud p{font-size:14px;line-height:1.65;min-height:0;margin-top:4px}
  .room-controls{display:grid;grid-template-columns:54px minmax(0,1fr) 54px;gap:10px;margin-top:12px}
  .room-controls button{height:52px;min-width:0;border-radius:16px;font-size:24px}
  #interact{min-width:0;max-width:none;font-size:14px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;padding:7px 10px}
  #room-stops{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin-top:14px}
  #room-stops button{min-height:52px;font-size:14px;line-height:1.6;min-width:0;gap:8px;padding:12px 0}
  #room-stops .num{flex:none}
  .room-footnote{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px;align-items:center}
  .room-footnote .desktop-room-hint{display:none}
  .room-footnote .mobile-room-hint{display:block;flex-basis:100%;max-width:none;font-size:12px;line-height:1.8}
  .room-footnote>.text-link{font-size:14px;line-height:1.6;min-height:44px;max-width:100%;margin-left:auto;padding-block:8px}
  .island-intro{display:block;padding:20px 0 16px}.island-intro h1{font-size:26px}.island-intro>p{font-size:14px}
  .island-stage{min-width:0;border-radius:20px}
  #island-viewport{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom}
  #island-viewport::-webkit-scrollbar{display:none}
  #world{width:100%;min-width:600px;aspect-ratio:1.5}
  .map-pin,html[lang=en] .map-pin{min-height:44px;min-width:106px;max-width:138px;padding:8px 10px;border-radius:12px}
  .map-pin strong,html[lang=en] .map-pin strong{font-size:14px;line-height:1.4;white-space:normal;letter-spacing:0}
  .map-pin .pin-number{width:20px;height:20px;font-size:11px;left:-6px;top:-8px}
  .map-pin small{display:none}#map-player{width:32px;height:48px}
  .island-sign,.island-sign>span:last-child{font-size:12px;letter-spacing:1px}
  .island-hud{gap:10px;padding:13px;min-height:88px}
  .host-message>span{font-size:12px}.host-message p{font-size:14px;line-height:1.65}
  .round-button{width:44px;height:44px}.host-avatar{width:40px;height:40px}
  #cancel-walk{min-height:44px;font-size:14px;padding:8px 0}
  .mobile-map-hint{display:block;font-size:12px;line-height:1.8;color:var(--muted);margin:11px 0 0;text-align:center}
  .island-toolbar{min-width:0;gap:8px;flex-wrap:wrap;margin-top:5px}.key-hint{display:none}
  .walk-tools>.quiet-button{min-height:44px;font-size:14px;padding:8px 0}
  .map-pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:6px}
  #map-controls{gap:16px;padding:14px 10px}#map-controls p{font-size:14px;line-height:1.8;flex:1}
  .destination-list{grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:0;padding:0;margin-top:14px;gap:0 18px}
  .destination,.destination:first-child,.destination:nth-child(3n){min-width:0;margin:0;padding:15px 0;border:0;border-bottom:1px solid var(--line)}
  .destination strong,html[lang=en] .destination strong{font-size:16px;line-height:1.5}.destination small{font-size:12px;line-height:1.7}
  .destination>span,.destination.visited>span::after{font-size:12px}
  .site-footer{padding:0 max(18px,var(--safe-right)) calc(24px + var(--safe-bottom)) max(18px,var(--safe-left));margin-top:30px}
  .footer-top{display:block}.footer-top>p>span{font-size:14px}
  .footer-top nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;margin-top:14px}
  .footer-top nav button{min-height:44px;font-size:14px;text-align:left}
  .footer-bottom{display:block;font-size:12px}.footer-bottom>span:last-child{display:block;font-size:12px;line-height:1.8;letter-spacing:.5px;margin-top:4px}
  dialog{max-width:100%;max-height:calc(var(--visual-height,100dvh) - var(--safe-top) - 16px);overscroll-behavior:contain}
  .close-button{width:46px;height:46px;min-width:46px;font-size:29px}
  .reading-dialog{position:fixed;inset:calc(var(--visual-top,0px) + var(--safe-top) + 10px) 0 auto;margin:0 auto;width:min(680px,100%);height:calc(var(--visual-height,100dvh) - var(--safe-top) - 10px);max-height:calc(var(--visual-height,100dvh) - var(--safe-top) - 10px);border-radius:25px 25px 0 0;overflow:hidden}
  .reading-spread{display:block;height:100%;overflow-y:auto;overscroll-behavior:contain;scroll-padding-top:64px;-webkit-overflow-scrolling:touch}
  .reading-dialog .reading-close{position:absolute;right:max(14px,var(--safe-right));top:14px;width:46px;height:46px;z-index:5;box-shadow:0 3px 18px #102e3740}
  .reading-dialog .reading-cover,.reading-dialog .reading-cover.no-image{height:auto;min-height:250px;padding:94px 22px 23px;display:flex;align-items:flex-end}
  .reading-dialog .reading-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .reading-place{inset:22px 76px auto 22px;padding:0;gap:4px}
  .reading-place>span:first-child,.reading-place>span:last-child{font-size:12px;letter-spacing:1px}
  .reading-cover-caption{position:relative;inset:auto;width:100%;padding:0}
  #reading-kicker{font-size:12px;letter-spacing:1px;line-height:1.7;margin:0 0 9px}
  .reading-dialog #reading-title,html[lang=en] .reading-dialog #reading-title,html[lang=ja] .reading-dialog #reading-title{font-size:clamp(27px,7.4vw,34px);line-height:1.45;letter-spacing:.5px;max-width:none;margin:0 0 12px;text-wrap:balance}
  .reading-arrival{font-size:12px;line-height:1.7}
  .reading-dialog .reading-inner{height:auto;overflow:visible;padding:25px max(22px,var(--safe-right)) calc(26px + var(--safe-bottom)) max(22px,var(--safe-left))}
  .reading-heading{flex-wrap:wrap;gap:7px 15px;padding:0;margin-bottom:22px}
  .reading-dialog .reading-heading .eyebrow{font-size:12px;letter-spacing:.6px}#reading-page{font-size:12px}
  .reading-dialog .reading-copy{font-size:16px;line-height:1.9}
  .reading-dialog .reading-copy p:first-child,html[lang=en] .reading-dialog .reading-copy p:first-child,html[lang=ja] .reading-dialog .reading-copy p:first-child{font-size:20px;line-height:1.8}
  .reading-dialog .reading-facts>div,html[lang=en] .reading-dialog .reading-facts>div{grid-template-columns:22px minmax(0,1fr);gap:5px 10px;align-items:start;font-size:16px}
  .reading-dialog .reading-facts dd{grid-column:2;overflow-wrap:anywhere}.reading-dialog .reading-facts dt{font-size:14px}
  .reading-dialog .reading-facts>div:not(:has(>span)),.reading-dialog.theme-bridal .reading-facts>div,.reading-dialog.theme-jewellery .reading-facts>div,html[lang=en] .reading-dialog.theme-bridal .reading-facts>div,html[lang=en] .reading-dialog.theme-jewellery .reading-facts>div{grid-template-columns:minmax(0,1fr)}
  .reading-dialog .reading-facts>div:not(:has(>span)) dd,.reading-dialog.theme-bridal .reading-facts dd,.reading-dialog.theme-jewellery .reading-facts dd{grid-column:1}
  .reading-dialog .reading-tabs button{min-height:48px;font-size:14px;grid-template-columns:21px minmax(0,1fr) 15px;gap:4px 8px}
  .reading-dialog .reading-tabs small{font-size:12px;grid-column:2;grid-row:2}.reading-tabs .route-mark{grid-column:3;grid-row:1/3}
  .reading-route>summary{min-height:52px;font-size:14px}.reading-route>summary small{display:none}
  .reading-dialog .reading-footer{flex-wrap:wrap;align-items:end;gap:16px;margin-top:22px}
  .reading-dialog .reading-footer>.quiet-button{font-size:14px;min-height:48px;white-space:normal;text-align:left}
  .reading-next-stop{flex:1 1 160px}.reading-next-stop>span{font-size:12px;line-height:1.7}
  .reading-dialog .reading-next-stop>.primary-button{min-height:48px;max-width:100%;font-size:14px;padding:12px 20px;white-space:normal}
  .reading-signature{font-size:12px;line-height:1.8;letter-spacing:.5px;flex-wrap:wrap;gap:4px;margin-top:24px;padding-top:10px}.reading-signature>span{font-size:12px;letter-spacing:0}
  .reading-reference>summary,.reading-reference .art-note,.reading-reference .reading-source{font-size:14px;line-height:1.8}
  .reading-reference>summary{padding-block:10px}.reading-action small{font-size:12px}.scene-invitation>img{width:85px}
  .reading-dialog .enquiry-form input,.reading-dialog .enquiry-form select,.reading-dialog .enquiry-form textarea{font-size:16px;min-height:48px;scroll-margin-block:76px 24px}
  .enquiry-person{grid-template-columns:1fr;gap:0}.enquiry-form textarea{min-height:130px}
  .enquiry-backup{font-size:14px;gap:5px}.enquiry-backup a,.enquiry-backup button{display:inline-flex;align-items:center;min-height:44px}
  .form-page-fallback{min-height:48px}.copy-button{min-height:50px}
  .nav-dialog,.nav-dialog.compact{width:min(680px,calc(100% - 16px));padding:0 20px calc(22px + var(--safe-bottom));border-radius:24px}
  .nav-dialog .dialog-heading{position:sticky;top:0;background:var(--paper);z-index:3;padding:23px 0 15px;margin-bottom:15px;gap:16px;border-bottom:1px solid #d9dfd0}
  .dialog-heading h2{font-size:23px;line-height:1.5}.dialog-heading .eyebrow{font-size:12px;letter-spacing:1px}
  .quick-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 18px}.nav-cover{height:96px}
  .nav-group h3{font-size:19px;line-height:1.5}.nav-group h3 button{min-height:44px}.nav-group .nav-en{font-size:12px;letter-spacing:.2px}
  .nav-subitems{display:grid;grid-template-columns:1fr;gap:0}.nav-subitems button,html[lang=en] .nav-subitems button{font-size:14px;min-height:48px;padding:8px 0;line-height:1.6}
  .nav-subitems button small,.single-room .nav-subitems button small{font-size:12px}.dialog-note{font-size:14px;line-height:1.8}
  .quick-nav.single-room,.single-room .nav-subitems{grid-template-columns:1fr}.single-room .nav-cover{height:150px}
  .small-dialog{padding:29px 24px calc(26px + var(--safe-bottom));width:min(560px,calc(100% - 20px))}
  .small-dialog>.eyebrow{padding-right:45px;font-size:12px}.small-dialog h2{font-size:25px;max-width:none}
  .small-dialog>p:not(.eyebrow){font-size:16px}.small-dialog .quiet-button,.small-dialog .primary-button{min-height:48px;white-space:normal}
  .exit-actions{flex-wrap:wrap;gap:14px}.setting-row{gap:18px}.setting-row small{font-size:14px}.setting-row input{width:28px;height:28px}
  .collection-heading{align-items:start;gap:12px;flex-wrap:wrap}.collection-heading h3{font-size:27px}.collection-edition{font-size:12px;text-align:left}
  .collection-empty{min-height:230px;padding:30px 20px}.product-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .product-photo{aspect-ratio:4/5;max-height:480px}.product-card-heading strong{font-size:21px}.product-price,.product-description{font-size:16px}
  .product-details-label{font-size:14px;min-height:32px}.product-description dt{font-size:14px}
}
@media screen and (max-width:440px){
  #menu-button>span:not(.menu-icon){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .masthead{grid-template-columns:minmax(44px,1fr) auto minmax(84px,1fr);gap:8px}
  .language-picker select{max-width:94px;padding-inline:7px}
  .wordmark>span{font-size:24px;letter-spacing:3.5px}
  .reading-dialog .reading-inner{padding-inline:max(20px,var(--safe-left)) max(20px,var(--safe-right))}
}
@media screen and (max-width:360px){
  .masthead{padding-inline:max(12px,var(--safe-left)) max(12px,var(--safe-right));gap:5px}
  .wordmark>span{font-size:22px;letter-spacing:2.5px}.wordmark small{letter-spacing:3px}
  .quick-nav{grid-template-columns:1fr}.nav-cover{height:135px}
  .room-controls{grid-template-columns:48px minmax(0,1fr) 48px;gap:8px}.room-name h1,html[lang=en] .room-name h1{font-size:24px}
  #map-controls{flex-wrap:wrap}#map-controls p{flex-basis:100%;text-align:center}
}
@media screen and (max-width:960px) and (max-height:520px) and (orientation:landscape){
  .masthead{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px;padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}
  main{padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}
  #room-world{height:clamp(220px,64svh,330px)}
  .reading-dialog{height:calc(var(--visual-height,100dvh) - 12px);max-height:calc(var(--visual-height,100dvh) - 12px);width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px);border-radius:20px}
  .reading-dialog .reading-cover,.reading-dialog .reading-cover.no-image{min-height:230px}
}