:root{--surface:#fffdf8;--card-edge:#cabfae;--accent-deep:#584278;--scene:#f3ecf8;--paper:#f5e5c5;--paper-edge:#d7b87d}
:root[data-theme=city],.card-holder[data-theme=city]{--bg:#f1e9da;--scene:#f1e9da;--ink:#433124;--muted:#786453;--purple:#985136;--purple-soft:#ebd8bb;--yellow:#efc76b;--line:#e6d9c4;--surface:#fffcf3;--card-edge:#cab69a;--accent-deep:#703923;--paper:#f0dbae;--paper-edge:#c19b5d}
:root[data-theme=coast],.card-holder[data-theme=coast]{--bg:#e6f3f2;--scene:#e6f3f2;--ink:#203e47;--muted:#5b7880;--purple:#237b8c;--purple-soft:#cce7e8;--yellow:#f4d983;--line:#d1e4e3;--surface:#fafffd;--card-edge:#a9cbcb;--accent-deep:#165967;--paper:#d9efea;--paper-edge:#90c8c5}
html,body{background:var(--scene);transition:background-color .5s,color .35s}
.brand-symbol,.title-island,.flip-button{box-shadow:inset 0 1px 1px #ffffff50,inset 0 -2px 2px #00000012,0 4px 0 var(--accent-deep),0 8px 15px #28313615}
.square-button,.day-tab[aria-current=true]{background:var(--surface);box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--card-edge),0 6px 12px #2737410a}
.day-tab[data-group=d3] .day-code{background:#c9e7e6;color:#216776}.day-tab[data-group=d2] .day-code{background:#eed4a0;color:#704527}
.card-face{background:var(--surface);border:1px solid #ffffffbc;box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--surface),0 5px 0 var(--card-edge),0 8px 0 color-mix(in srgb,var(--card-edge),white 32%),0 17px 27px -13px #263c4938}
.card-front::after{content:'';position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--card-edge),transparent 75%);border-radius:calc(var(--radius) - 5px);pointer-events:none}
.type-art{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:9px;padding:14px 125px 14px 24px;background:var(--paper)!important;border:1px solid #ffffff8a;box-shadow:inset 0 2px 3px #8c714320,inset 0 -1px 0 #fff}
.type-word{font-size:3.5rem;line-height:1.06;transform:rotate(-3deg);flex-shrink:0;white-space:nowrap;letter-spacing:.015em;text-shadow:0 1px 0 var(--paper),1px 2px 0 color-mix(in srgb,var(--ink),white 56%),2px 3px 0 color-mix(in srgb,var(--ink),white 72%)}
.type-date{position:static;line-height:1.2;font-size:.625rem;letter-spacing:.06em;flex-shrink:0;transform:rotate(-2deg);color:var(--muted)}
.art-punctuation{display:inline-block;text-shadow:0 2px 0 #ffffff78;transform:rotate(7deg)}
.art-mascot{width:150px;height:150px;filter:drop-shadow(0 8px 5px #543f3826);bottom:-4px}
.card-holder[data-compact=compact] .type-art{padding:9px 100px 9px 18px;gap:9px;min-height:75px;max-height:112px}
.card-holder[data-compact=compact] .type-word{font-size:2.2rem;line-height:1.05}
.card-holder[data-compact=compact] .type-date{position:static;display:block;font-size:.5625rem}
.card-holder[data-compact=compact] .art-mascot{width:105px;height:105px}
.entry-body h2{font-weight:850;letter-spacing:-.02em;text-shadow:0 1px 0 #fff,0 2px 0 color-mix(in srgb,var(--ink),transparent 93%)}
.time{color:var(--purple);text-shadow:0 1px 0 #fff,0 2px 0 color-mix(in srgb,var(--purple),white 63%)}
.tag{border:1px solid #ffffff95;box-shadow:inset 0 1px 0 #fff,0 2px 0 color-mix(in srgb,var(--card-edge),transparent 42%)}
.photo-album,.photo-wide{background:var(--paper);border:1px solid color-mix(in srgb,var(--paper-edge),transparent 50%);box-shadow:inset 0 2px 4px #6245150c}
.photo-album::before{border-color:color-mix(in srgb,var(--paper-edge),transparent 50%)}
.photo-print{border:1px solid #ffffffc9;box-shadow:0 1px 0 #d1c7b5,0 3px 0 #fffcf8,0 8px 10px #3b3c3729;transform:perspective(800px) rotateY(3deg) rotate(-3deg)}
.photo-print::before{box-shadow:0 1px 2px #66583416}
.photo-location{color:var(--ink);text-shadow:0 1px 0 #fff8,1px 2px 0 color-mix(in srgb,var(--ink),white 75%)}
.photo-date,.photo-shot{color:var(--muted)}.photo-source{color:var(--purple)}
.photo-wide .photo-main{transform:perspective(800px) rotateX(2deg) rotate(-1.5deg)}
.photo-gallery-link{font:inherit;font-size:.625rem;line-height:1.4;color:var(--purple);font-weight:700;display:inline-flex;align-items:center;gap:4px;min-height:30px;text-decoration:none;background:var(--surface);padding:5px 9px;border-radius:11px;box-shadow:0 2px 0 var(--card-edge)}
.tip{background:color-mix(in srgb,var(--paper),white 55%)}.route-flag{box-shadow:inset 0 1px 0 #ffffff60,0 3px 0 var(--accent-deep)}
.travel-stats>div{background:var(--bg);box-shadow:inset 0 1px 2px #32473208}
.photo-sticker{box-shadow:0 2px 0 var(--paper-edge),0 5px 8px #3332}

.masthead{gap:18px}.edition{white-space:nowrap}
@media(max-width:760px){.type-art{padding:12px 115px 12px 20px}.type-word{font-size:3rem}.type-date{font-size:.5625rem}.masthead{gap:8px}.brand{font-size:.9375rem;gap:7px}.brand-symbol{width:32px;height:34px;font-size:1.2rem;border-radius:12px}.brand-small{font-size:.43rem}.edition{font-size:.625rem}.edition span{margin:0 3px}.photo-album{justify-content:center}.photo-label{max-width:160px}}
@media(max-width:370px){.edition{display:none}.card-holder[data-compact=compact] .type-word{font-size:1.85rem}.card-holder[data-compact=compact] .art-mascot{width:92px;height:92px}.card-holder[data-compact=compact] .type-art{padding-right:90px}}
@media(prefers-reduced-motion:reduce){html,body{transition:none}}
.reference-gallery{background:var(--surface);width:min(720px,calc(100vw - 20px));max-height:94svh;overflow:auto}.reference-gallery .directory-header h2{font-size:1.25rem}.reference-gallery figure{padding:16px 22px 0}.reference-gallery figure>img{width:100%;height:min(45svh,460px);object-fit:contain;border-radius:12px;background:var(--paper)}.reference-gallery figcaption{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;padding:13px 0;font-size:.8rem}.reference-gallery figcaption a{font-size:.6875rem;color:var(--purple);text-decoration:none}.reference-controls{display:flex;justify-content:center;align-items:center;gap:28px;margin:4px 0 18px;font-size:.75rem;font-weight:750}.reference-thumbs{display:flex;gap:8px;padding:0 22px 22px}.reference-thumbs button{flex:1;min-width:0;padding:3px;border-radius:10px;border:2px solid transparent}.reference-thumbs button[aria-current]{border-color:var(--purple)}.reference-thumbs img{height:55px;width:100%;object-fit:cover;border-radius:6px}

/* Photos stay in the current itinerary, in a single native modal. */
.photo-expand svg{width:12px;height:12px;stroke-width:1.8}
body.photo-viewer-open{overflow:hidden}
.reference-gallery{width:min(880px,calc(100vw - 24px));height:min(900px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden;border-radius:24px;overscroll-behavior:contain;background:var(--surface,var(--bg))}
.reference-gallery[open]{display:flex;flex-direction:column}
.reference-gallery::backdrop{background:#102825b8;backdrop-filter:blur(5px)}
.reference-gallery .directory-header{flex:none;padding:14px 18px;gap:12px}
.reference-gallery .directory-header h2{font-size:1.125rem;margin:0;line-height:1.5;overflow-wrap:anywhere}
.reference-gallery .close-button{flex:none}
.reference-gallery figure{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 18px 0}
.reference-image-stage{position:relative;flex:1;min-height:60px;display:grid;place-items:center;overflow:hidden;background:var(--paper,var(--bg));border-radius:12px;touch-action:pan-y pinch-zoom}
.reference-image-stage>img{width:100%;height:100%;min-height:0;object-fit:contain;user-select:none}
.reference-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-size:.875rem;color:var(--ink)}
.reference-status button{padding:10px 18px;border-radius:12px;background:var(--purple);color:white}
.reference-gallery [hidden]{display:none!important}
.reference-gallery figcaption{flex:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 12px;padding:12px 0;line-height:1.5}
.reference-gallery figcaption strong{font-weight:600;font-size:.8125rem;max-height:4.5em;overflow:auto}
.reference-gallery figcaption a{font-size:.6875rem;min-height:32px;display:inline-flex;align-items:center}
.reference-controls{flex:none;margin:0;padding:0 18px 12px;gap:22px}
.reference-controls .square-button{width:44px;height:44px;border-radius:14px}
.reference-thumbs{flex:none;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 18px 16px;gap:9px;scrollbar-width:none}
.reference-thumbs button{flex:0 0 62px;min-height:54px;padding:3px;border-radius:9px;background:var(--bg)}
.reference-thumbs img{height:46px}
@media(max-height:560px){.reference-gallery .directory-header{padding:7px 14px}.reference-gallery figure{padding:8px 14px 0}.reference-gallery figcaption{padding:5px 0}.reference-controls{padding-bottom:8px}.reference-thumbs{display:none}}
