/* Pencil atlas replaces the empty space below the compact settings controls. */
html body #settings.travel-settings{box-sizing:border-box;width:min(1120px,96vw);max-width:none;max-height:94dvh;padding:20px 22px 14px;margin:auto;overflow:auto;background:#fcfcf8;color:#292925;box-shadow:0 20px 80px #0004;overscroll-behavior:contain}
html body #settings.travel-settings{border-image:none;border:1px solid #65655d;outline:1px solid #99998a;outline-offset:-6px;border-radius:4px 10px 5px 8px}
#settings.travel-settings::backdrop{background:#eeeee9c9;backdrop-filter:blur(5px)}
#settings.travel-settings .close{position:absolute;right:8px;top:7px;z-index:4}
#settings .travel-settings-top{display:flex;align-items:center;gap:26px;padding:0 50px 15px 0;border-bottom:1px solid #94948a77}
#settings .travel-settings-heading{flex:1}
#settings .travel-settings-heading h2{margin:0;font:31px/1.1 Pirata,Georgia,serif}
#settings .travel-settings-top .setting-note{margin:5px 0 0;font:15px/1.35 IMFellEnglish,Georgia,serif;color:#63635c}
#settings .travel-settings-top label{display:flex;align-items:center;gap:12px;margin:0;padding:8px 0;border:0;font:18px/1.2 IMFellEnglish,Georgia,serif;white-space:nowrap}
#settings .travel-settings-top input{accent-color:#30332c;width:19px;height:19px;cursor:pointer}
#settings .travel-map-heading{position:static;display:flex;align-items:end;justify-content:space-between;gap:14px;margin:17px 5px 2px;padding:0}
#settings .travel-map-heading p{font:9px/1.4 monospace;letter-spacing:.17em;margin:0 0 4px;color:#717167}
#settings .travel-map-heading h3{font:32px/1.2 Pirata,Georgia,serif;margin:0}
.travel-map-location{font:12px/1.4 IMFellEnglish,Georgia,serif;text-align:right;color:#626257;max-width:210px}
.travel-map-window{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#aaa99d #efefe9;overscroll-behavior-x:contain}
.travel-map-canvas{position:relative;display:block;aspect-ratio:3/2;width:100%;min-width:660px;isolation:isolate}
.travel-map-canvas>picture{position:absolute;inset:0;display:block;pointer-events:none}
.travel-map-canvas>picture>img{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;border:0;max-width:none;max-height:none;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;user-select:none}
.travel-landmark{position:absolute;left:var(--x);top:var(--y);width:25%;height:22%;transform:translate(-50%,-35%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;color:#24241f;text-decoration:none;z-index:1;outline-offset:3px;-webkit-tap-highlight-color:transparent}
.travel-pin{width:25px;height:25px;display:grid;place-items:center;filter:drop-shadow(0 1px 3px #fffd);transition:transform .2s}
.travel-pin svg{width:100%;height:100%;fill:#fffdf2;stroke:#33362b;stroke-width:1.25}
.travel-label{display:flex;flex-direction:column;align-items:center;padding:5px 12px;background:#fffff4ed;box-shadow:0 1px 5px #ffffffe0;border:1px solid #88866d44;border-radius:50% 9% 42% 6%;transition:transform .2s,box-shadow .2s}
.travel-label small{font:10px/1.2 IMFellEnglish,Georgia,serif;color:#68685e;letter-spacing:.05em}
.travel-label strong{font:clamp(18px,2vw,25px)/1.15 Pirata,Georgia,serif;white-space:nowrap;font-weight:400}
.travel-landmark:is(:hover,:focus-visible){z-index:3}
.travel-landmark:is(:hover,:focus-visible) .travel-label{transform:translateY(-3px) scale(1.07);box-shadow:0 0 20px 10px #fffff2cc}
.travel-landmark:is(:hover,:focus-visible) .travel-pin{transform:translateY(-5px) rotate(12deg)}
.travel-landmark:focus-visible{outline:1px dashed #43443a;border-radius:35%}
.travel-landmark[aria-current] .travel-pin svg{fill:#33362b;stroke:#ffffef}
.travel-landmark[aria-current] .travel-label{border-color:#444638}
.travel-tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);width:190px;padding:8px 12px;background:#fffff6;box-shadow:1px 3px 7px #292b2530;border:1px solid #aaa998;color:#505044;font:14px/1.3 IMFellEnglish,Georgia,serif;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s}
.travel-landmark:is(:hover,:focus-visible) .travel-tip{opacity:1;visibility:visible;transform:translateX(-50%)}
.travel-pan-hint{display:none}
.travel-interiors{display:flex;align-items:center;gap:10px;border-top:1px solid #94948a77;padding:12px 4px 0;flex-wrap:wrap}
.travel-interiors>span{font:17px/1.2 Pirata,Georgia,serif;margin-right:auto}
.travel-interiors a{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #8c8c7866;color:#33372d;background:#f6f6ed;font:16px/1.2 IMFellEnglish,Georgia,serif;text-decoration:none;min-height:44px;box-sizing:border-box}
.travel-interiors a:hover,.travel-interiors a:focus-visible{background:#e9eadf;border-color:#626655}
.travel-interiors svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}
@media(max-width:700px){
 html body #settings.travel-settings{width:calc(100vw - 14px);max-height:calc(100dvh - 14px);padding:16px 12px 12px}
 #settings .travel-settings-top{gap:12px;align-items:start;padding-right:58px;flex-wrap:wrap;padding-bottom:10px}
 #settings .travel-settings-heading h2{font-size:27px}
 #settings .travel-settings-top .setting-note{font-size:13px;max-width:240px}
 #settings .travel-settings-top label{font-size:16px;padding:3px 0;min-height:30px}
 #settings .travel-map-heading{align-items:start;margin-top:12px}
 #settings .travel-map-heading h3{font-size:25px}
 #settings .travel-map-heading p{font-size:8px}
 .travel-map-location{font-size:11px;max-width:105px}
 .travel-pan-hint{display:block;font:12px/1.35 IMFellEnglish,Georgia,serif;color:#626258;margin:7px 5px}
 .travel-label strong{font-size:20px}
 .travel-interiors{display:grid;grid-template-columns:1fr 1fr;gap:7px}
 .travel-interiors>span{grid-column:1 / -1}
 .travel-interiors a{font-size:15px;justify-content:space-between;padding:9px}
}

@media(min-width:701px){html body #settings.travel-settings{width:min(1120px,96vw,max(740px,calc((94dvh - 240px)*1.5 + 44px)))}}

/* The pocket atlas is a purpose-drawn portrait composition, never a desktop crop. */
@media(max-width:700px){
 .travel-map-window{overflow:visible}
 .travel-map-canvas{min-width:0;aspect-ratio:2/3}
 .travel-map-canvas>picture>img{object-fit:contain}
 .travel-landmark{width:46%;height:18%}
 .travel-landmark[data-travel=home]{--x:25%!important;--y:19%!important}
 .travel-landmark[data-travel=house]{--x:74%!important;--y:19%!important}
 .travel-landmark[data-travel=wares]{--x:25%!important;--y:48%!important}
 .travel-landmark[data-travel=archive]{--x:74%!important;--y:48%!important}
 .travel-landmark[data-travel=wall]{--x:25%!important;--y:77%!important}
 .travel-landmark[data-travel=contact]{--x:74%!important;--y:77%!important}
 .travel-label{padding:4px 7px}
 .travel-label strong{font-size:clamp(17px,4.9vw,24px)}
 .travel-label small{font-size:10px}
 .travel-pin{width:20px;height:20px}
 .travel-tip{box-sizing:border-box;width:135px;font-size:12px}
}