:root {
  --paper: oklch(96.7% .018 80); --paper-deep: oklch(92.2% .03 78); --ink: oklch(23% .028 48);
  --muted: oklch(44% .026 52); --line: oklch(76% .035 70); --red: oklch(43% .14 28); --green: oklch(39% .07 148);
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --sans: 'Avenir Next', Avenir, 'Gill Sans', sans-serif; --ease-out: cubic-bezier(.22,1,.36,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color: var(--ink); background: var(--paper); font-family: var(--sans); font-kerning: normal; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 500; top: 8px; left: 8px; padding: 12px; color: var(--paper); background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.masthead { z-index: 200; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; padding: 0 clamp(18px,4vw,64px); border-bottom: 1px solid var(--line); background: var(--paper); }
.wordmark { color: var(--ink); font-size: .875rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; }
.wordmark span { color: var(--red); font-size: .65rem; }
.tabs { display: flex; align-self: stretch; }
.tab { min-height: 44px; border: 0; border-bottom: 2px solid transparent; padding: 0 14px; color: var(--muted); background: transparent; cursor: pointer; font-size: .875rem; }
.tab.is-active { color: var(--ink); border-color: var(--red); }
.tab > span { display: inline-grid; min-width: 20px; height: 20px; margin-left: 4px; place-items: center; border-radius: 50%; color: var(--paper); background: var(--red); font-size: .65rem; }
.status { justify-self: end; margin: 0; color: var(--muted); font: italic 1rem var(--serif); }
main { width: min(1440px,100%); margin: auto; padding: 0 clamp(18px,4vw,64px) 96px; }
.hero { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.5fr); align-items: end; min-height: clamp(380px,52vw,640px); padding: clamp(72px,10vw,152px) 0 48px; }
.eyebrow, .place-type { margin: 0 0 12px; color: var(--red); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0 0 -.08em -.04em; font: 500 clamp(4.2rem,10.5vw,10rem)/.78 var(--serif); letter-spacing: -.065em; }
h1 em { color: var(--red); font-weight: 400; }
.hero-note { display: grid; grid-template-columns: 30px 1fr; gap: 16px; max-width: 350px; padding: 24px 0 8px; border-top: 1px solid var(--ink); }
.hero-note span { color: var(--red); font-size: .7rem; font-weight: 700; }
.hero-note p { margin: 0; font: 1.5rem/1.15 var(--serif); }
.controls { display: grid; grid-template-columns: minmax(230px,1fr) 2fr minmax(150px,.5fr); gap: 20px; align-items: end; padding: 16px 0; border-block: 1px solid var(--line); }
.search-field, .select-field { display: grid; gap: 2px; color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.search-field input, .select-field select { width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 7px 2px; color: var(--ink); background: transparent; text-transform: none; }
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.filter-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.filter-chip { flex: 0 0 auto; min-height: 36px; border: 1px solid var(--line); border-radius: 99px; padding: 7px 11px; color: var(--muted); background: transparent; cursor: pointer; font-size: .75rem; }
.filter-chip.is-active { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.view[hidden], .controls[hidden] { display: none; }
.view.is-active { animation: enter 420ms var(--ease-out) both; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 64px 0 18px; border-bottom: 1px solid var(--ink); }
.section-head h2 { margin: 0 0 -.08em -.025em; font: 500 clamp(2.7rem,5vw,5rem)/.9 var(--serif); letter-spacing: -.04em; }
.section-head p { margin: 0; color: var(--muted); font-size: .75rem; }
.place-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: clamp(16px,3vw,46px); padding: clamp(28px,3.7vw,52px) 0; border-bottom: 1px solid var(--line); animation: row-enter 480ms var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
.place-number { padding-top: 3px; color: var(--red); font: italic 1rem var(--serif); font-variant-numeric: tabular-nums; }
.place-copy { min-width: 0; }
.place-copy h3 { max-width: 18ch; margin: 0 0 18px; font: 500 clamp(1.9rem,3.6vw,3.8rem)/.94 var(--serif); letter-spacing: -.04em; }
.traveler-note { max-width: 64ch; margin: 0; color: var(--ink); font: italic 1.15rem/1.5 var(--serif); }
details { max-width: 740px; margin-top: 18px; }
summary { min-height: 44px; padding: 12px 0; color: var(--muted); cursor: pointer; font-size: .75rem; text-decoration: underline; text-underline-offset: 4px; }
.details-body { display: grid; grid-template-rows: auto auto; gap: 12px; padding: 12px 0; }
dl { display: grid; grid-template-columns: repeat(4,auto 1fr); gap: 4px 12px; margin: 0; font-size: .75rem; }
dt { color: var(--muted); } dd { margin: 0; font-weight: 600; }
.fact-note { max-width: 68ch; margin: 0; padding: 12px 14px; color: var(--green); background: oklch(91% .03 142); font-size: .8rem; line-height: 1.45; }
.fact-note:not(.is-verified) { color: var(--red); background: oklch(92% .035 54); }
.fact-note.is-closed { color: var(--paper); background: var(--red); }
.place-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.save-button { min-height: 44px; border: 1px solid var(--ink); padding: 9px 13px; color: var(--ink); background: transparent; cursor: pointer; font-size: .75rem; }
.save-button.is-saved { color: var(--paper); border-color: var(--red); background: var(--red); }
.save-button:disabled { color: var(--muted); border-style: dashed; cursor: default; }
.map-link, .source-link, .text-action { min-height: 44px; border: 0; padding: 12px 2px; color: var(--muted); background: transparent; cursor: pointer; font-size: .75rem; text-underline-offset: 4px; }
.empty { padding: 100px 0; text-align: center; }.empty h2 { margin: 0; font: 3rem var(--serif); }
.map-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; min-height: 680px; border-bottom: 1px solid var(--ink); }
.map-column { min-width: 0; }
.map-toolbar { display: flex; min-height: 56px; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--paper-deep); }
.map-modes { display: flex; }
.map-mode, .locate-button { min-height: 40px; border: 1px solid var(--line); padding: 8px 12px; color: var(--ink); background: var(--paper); cursor: pointer; font-size: .72rem; }
.map-mode + .map-mode { border-left: 0; }
.map-mode.is-active { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.locate-button { border-color: var(--green); color: var(--green); }
.map-status { margin-left: auto; color: var(--muted); font: italic .85rem var(--serif); }
.map { position: relative; min-height: 624px; overflow: hidden; background: var(--paper-deep); }
.map-caption { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); color: var(--muted); background: var(--paper); font-size: .68rem; line-height: 1.4; }
.map-unavailable { display: grid; height: 624px; place-content: center; gap: 6px; padding: 24px; text-align: center; }.map-unavailable strong{font:500 1.7rem var(--serif)}.map-unavailable span{max-width:38ch;color:var(--muted);font-size:.8rem}
.leaflet-container { color: var(--ink); background: var(--paper-deep); font-family: var(--sans); }
.leaflet-control-zoom a { color: var(--ink); background: var(--paper); }
.leaflet-control-attribution { color: var(--muted); background: color-mix(in oklch,var(--paper) 88%,transparent); font-size: .58rem; }
.vienna-div-icon { border: 0; background: transparent; }
.map-pin { display: grid; width: 34px; height: 34px; place-items: center; border: 2px solid var(--paper); border-radius: 50% 50% 50% 16%; color: var(--paper); background: var(--ink); box-shadow: 0 2px 0 color-mix(in oklch,var(--ink) 30%,transparent); transform: rotate(-45deg); font-size: .58rem; font-weight: 700; transition: transform 180ms var(--ease-out),background 180ms linear; }
.map-pin.is-saved { background: var(--red); }
.leaflet-marker-icon:hover .map-pin, .leaflet-marker-icon:focus .map-pin { background: var(--green); transform: rotate(-45deg) scale(1.14); }
.map-pin b { display: block; transform: rotate(45deg); font: inherit; }
.map-popup { color: var(--ink); }.map-popup-meta{margin:0 0 6px;color:var(--red);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.map-popup h3{margin:0 0 6px;font:500 1.55rem/.98 var(--serif)}.map-popup-detail{margin:0 0 10px;color:var(--muted);font-size:.72rem;line-height:1.35}.map-popup-note{margin:0 0 12px;font:italic .9rem/1.4 var(--serif)}.map-popup-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.map-popup-actions button,.map-popup-actions a{min-height:34px;border:1px solid var(--line);padding:7px 9px;color:var(--ink);background:var(--paper);cursor:pointer;font-size:.68rem;text-decoration:none}.map-popup-actions a{display:inline-flex;align-items:center}.leaflet-popup-content-wrapper{border-radius:0;background:var(--paper);box-shadow:0 5px 24px color-mix(in oklch,var(--ink) 20%,transparent)}.leaflet-popup-tip{background:var(--paper)}.leaflet-popup-content{margin:16px}.leaflet-popup-close-button{color:var(--muted)!important}
.area-list { border-left: 1px solid var(--ink); }
.area-list button { display: grid; grid-template-columns: 32px 1fr; gap: 4px 12px; width: 100%; min-height: 84px; border: 0; border-bottom: 1px solid var(--line); padding: 20px 16px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.area-list button.is-active { color: var(--paper); background: var(--red); }.area-list button.is-active small{color:var(--paper)}
.area-list span { grid-row: span 2; color: var(--red); font: italic 1rem var(--serif); }.area-list strong{font:500 1.1rem var(--serif)}.area-list small{color:var(--muted);line-height:1.35}
.intro { max-width: 60ch; margin: 24px 0 64px; color: var(--muted); font: 1.25rem/1.5 var(--serif); }
.day-plan { display: grid; gap: 52px; }.day-group header{display:flex;justify-content:space-between;align-items:end;padding-bottom:16px;border-bottom:2px solid var(--red)}.day-group header h3{margin:0;font:500 clamp(1.7rem,3vw,3rem) var(--serif)}.day-group header small{color:var(--muted)}
.day-group ol { margin: 0; padding: 0; list-style: none; }.day-group li{display:grid;grid-template-columns:180px 1fr auto 40px;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.day-group li span,.day-group li small{color:var(--muted);font-size:.75rem}.day-group li strong{font:500 1.35rem var(--serif)}.day-group li button{min-width:44px;min-height:44px;border:0;color:var(--muted);background:transparent;cursor:pointer;font-size:1.4rem}
.plan-empty { max-width: 500px; margin: 80px auto; text-align: center; }.plan-empty>span{display:inline-grid;width:52px;height:52px;place-items:center;border:1px solid var(--red);border-radius:50%;color:var(--red);font-size:1.7rem}.plan-empty h3{margin:22px 0 6px;font:2.6rem var(--serif)}.plan-empty p{color:var(--muted);line-height:1.55}
.toast { position: fixed; z-index: 500; right: 20px; bottom: max(20px,env(safe-area-inset-bottom)); padding: 13px 16px; color: var(--paper); background: var(--ink); opacity: 0; transform: translateY(12px); pointer-events: none; transition: transform 220ms var(--ease-out),opacity 150ms linear; }.toast.is-visible{opacity:1;transform:none}
@keyframes enter { from{opacity:0;transform:translateY(12px)} } @keyframes row-enter{from{opacity:0;transform:translateY(8px)}}
@media (hover:hover) { .tab:hover{color:var(--ink)}.filter-chip:hover{border-color:var(--ink)}.place-row:hover{transform:translateX(5px)}.save-button:hover{color:var(--paper);background:var(--green);border-color:var(--green)}.map-link:hover,.source-link:hover,.text-action:hover{color:var(--red)}.map-mode:hover,.locate-button:hover{border-color:var(--ink)}.area-list button:hover{color:var(--paper);background:var(--red)}.area-list button:hover small{color:var(--paper)}}
@media (min-width:641px) { .masthead{position:sticky;top:0}.controls{position:sticky;z-index:100;top:72px;background:var(--paper)} }
@media (max-width:900px) { .masthead{grid-template-columns:auto 1fr}.tabs{justify-self:end}.status{display:none}.hero{grid-template-columns:1fr}.hero-note{justify-self:end}.controls{grid-template-columns:1fr auto}.filter-strip{grid-column:1/-1;grid-row:2}.place-row{grid-template-columns:36px minmax(0,1fr)}.place-actions{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap}.map-layout{grid-template-columns:1fr}.area-list{border-top:1px solid var(--ink);border-left:0}dl{grid-template-columns:auto 1fr auto 1fr} }
@media (max-width:640px) { .masthead{display:flex;flex-wrap:wrap;padding:12px 14px 0}.wordmark{width:100%;margin-bottom:5px}.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.tab{padding:10px 2px;font-size:.72rem}.hero{min-height:560px;padding:72px 0 32px}h1{font-size:clamp(4.4rem,23vw,6rem);line-height:.78}h1 em{display:block}h1 br{display:none}.hero-note{justify-self:start;width:min(100%,280px);max-width:none;margin-left:clamp(0px,8vw,30px)}.controls{grid-template-columns:1fr}.filter-strip{grid-column:auto;grid-row:auto}.section-head{padding-top:44px}.section-head p{max-width:120px;text-align:right}.place-row{gap:12px}.place-copy h3{font-size:2.15rem}.traveler-note{font-size:1.05rem}.place-actions{gap:4px}.map-toolbar{flex-wrap:wrap}.map-status{order:3;width:100%;margin-left:0;padding:2px 2px 4px}.map,.map-unavailable{min-height:540px;height:540px}.map-caption{font-size:.64rem}.map-mode,.locate-button{flex:1}.day-group header{align-items:start}.day-group li{grid-template-columns:1fr auto 38px;gap:6px}.day-group li span{grid-column:1/-1}dl{grid-template-columns:auto 1fr}.toast{right:18px;left:18px;text-align:center} }
@media (pointer:coarse) { .filter-chip{min-height:44px}.marker{min-width:44px;min-height:44px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important} }