/* Baltimore Experience walking tours: shared look, a 19th-century broadside */
:root{
  --paper:#efe4cb; --paper2:#e6d7b6; --ink:#1d1712; --ink2:#4a3f33; --rule:#2a221a;
  --red:#8e1d17; --gold:#8a6a2a; --shade:rgba(29,23,18,.08);
  --face:"Abril Fatface", "Times New Roman", serif;
  --body:"IM Fell English", Georgia, serif;
  --sc:"IM Fell English SC", Georgia, serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:#2b241c;color:var(--ink);-webkit-text-size-adjust:100%}
body{font:18px/1.55 var(--body);min-height:100vh}
a{color:var(--red)}
button{font:inherit;color:inherit}
.sheet{max-width:640px;margin:0 auto;min-height:100vh;padding:14px 16px 60px;
  background:var(--paper) radial-gradient(ellipse at 30% 10%, rgba(255,255,255,.35), transparent 60%),
             radial-gradient(ellipse at 80% 90%, rgba(120,80,30,.12), transparent 55%);
  background-color:var(--paper); box-shadow:0 0 60px rgba(0,0,0,.5)}
.frame{border:3px double var(--rule);padding:14px 14px 22px;outline:1px solid var(--rule);outline-offset:4px;margin:6px}
.kicker{font:15px/1.2 var(--sc);letter-spacing:.18em;text-align:center;text-transform:uppercase;color:var(--ink2)}
h1,h2,h3{font-family:var(--face);font-weight:400;margin:.2em 0;line-height:1.02;text-align:center}
h1{font-size:44px} h1 em{color:var(--red);font-style:normal;display:block}
h2{font-size:30px} h3{font-size:22px}
.sub{text-align:center;font-style:italic;color:var(--ink2);margin:.2em 0 .6em}
.rule{height:0;border-top:1px solid var(--rule);border-bottom:3px solid var(--rule);height:5px;margin:14px 0}
.rule.thin{border-bottom-width:1px;height:3px}
.orn{text-align:center;color:var(--ink2);letter-spacing:.5em;margin:6px 0}
p{margin:.65em 0} .lede{font-style:italic;text-align:center;color:var(--ink2)}
.drop::first-letter{font-family:var(--face);float:left;font-size:58px;line-height:.85;padding:6px 8px 0 0;color:var(--red)}
.notice{border:1px solid var(--rule);padding:8px 12px;margin:14px 0;font-size:15px;background:var(--shade)}
.notice b{font-family:var(--sc);letter-spacing:.12em;font-weight:400;display:block;text-align:center}
.plate{margin:12px 0;border:1px solid var(--rule);padding:6px;background:#f4ead4}
.plate img{display:block;width:100%;height:auto;filter:sepia(.55) contrast(1.05) brightness(.97)}
.plate .cap{font-size:13px;text-align:center;font-style:italic;color:var(--ink2);margin-top:4px}
.btn{display:block;width:100%;margin:10px 0;padding:13px 14px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  font:20px/1.1 var(--face);letter-spacing:.03em;cursor:pointer;text-align:center;text-decoration:none}
.btn.alt{background:transparent;color:var(--ink)} .btn.red{background:var(--red);border-color:var(--red)}
.btn.small{font:15px/1.1 var(--sc);letter-spacing:.12em;padding:9px}
.btn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:10px} .row>*{flex:1}
.stops{list-style:none;padding:0;margin:8px 0}
.stops li{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dotted var(--ink2);cursor:pointer}
.stops .num{font:22px var(--face);width:44px;text-align:center;color:var(--red)}
.stops .t{flex:1;line-height:1.2} .stops .t small{display:block;color:var(--ink2);font-size:14px}
.stops .st{font:13px var(--sc);letter-spacing:.1em;color:var(--ink2);text-align:right;white-space:nowrap}
.stops li.found .st{color:var(--red)}
.topbar{display:flex;justify-content:space-between;align-items:center;font:14px var(--sc);letter-spacing:.12em;margin:0 6px 6px}
.topbar a,.topbar button{background:none;border:0;color:var(--ink);text-decoration:none;cursor:pointer;padding:6px 0;font:inherit}
.units{display:inline-flex;border:1px solid var(--ink)} .units button{padding:3px 8px} .units button.on{background:var(--ink);color:var(--paper)}
/* guide */
.dial{position:relative;width:250px;height:250px;margin:6px auto}
.dial svg{width:100%;height:100%}
.needle{transition:transform .35s ease-out;transform-origin:125px 125px}
.dist{font:46px var(--face);text-align:center;margin:0}
.gps{text-align:center;font-size:14px;color:var(--ink2);font-style:italic}
.dir{font-size:17px;border-left:3px solid var(--red);padding:2px 0 2px 10px;margin:12px 0}
.map{border:1px solid var(--rule);background:#f1e6cc;margin:12px 0}
.map svg{display:block;width:100%;height:auto}
.arrived{animation:arr 1.2s ease-out}
@keyframes arr{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
/* chapters */
.chap{border:1px solid var(--rule);padding:10px 12px;margin:10px 0;background:var(--shade);cursor:pointer;display:flex;gap:10px;align-items:center}
.chap .cn{font:26px var(--face);color:var(--red);width:30px;text-align:center}
.chap .ct{flex:1;line-height:1.2} .chap .ct small{display:block;font-size:14px;color:var(--ink2);font-style:italic}
.chap.done .cn::after{content:"\2713";font-size:14px;display:block;color:var(--ink2)}
.where{font-style:italic;border:1px dashed var(--ink2);padding:6px 10px;margin:8px 0;font-size:16px}
.walkcard{border:2px solid var(--red);padding:10px 12px;margin:16px 0}
.walkcard h3{color:var(--red)}
.listen{display:flex;align-items:center;gap:10px;margin:8px 0}
.listen audio{flex:1;width:100%}
.foot{font-size:12px;text-align:center;color:var(--ink2);margin-top:24px}
.hidden{display:none!important}
/* film */
.film{position:fixed;inset:0;background:#0b0907;z-index:50;display:flex;flex-direction:column}
.film .screen{position:relative;flex:1;overflow:hidden}
.film .pic{position:absolute;inset:-8%;background-size:cover;background-position:center;filter:sepia(.7) contrast(1.15) brightness(.82);
  animation:kb 40s ease-in-out infinite alternate}
@keyframes kb{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.12) translate(-2%,1%)}100%{transform:scale(1.05) translate(2%,-1.5%)}}
.film .vig{position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.85) 100%);pointer-events:none}
.film .grain{position:absolute;inset:0;opacity:.13;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr .4s steps(3) infinite}
@keyframes gr{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
.film .title{position:absolute;top:18px;left:0;right:0;text-align:center;color:#efe4cb;font:26px var(--face);text-shadow:0 2px 8px #000;padding:0 16px}
.film .card{position:absolute;left:16px;right:16px;bottom:22px;margin:0 auto;max-width:600px;background:rgba(11,9,7,.78);color:#efe4cb;
  border:1px solid #8a6a2a;padding:14px 16px;font-size:19px;line-height:1.45;min-height:5.2em;transition:opacity .4s}
.film .bar{height:3px;background:#3a2f22} .film .bar i{display:block;height:100%;width:0;background:#8e1d17}
.film .ctl{display:flex;gap:8px;padding:10px 16px 16px;background:#0b0907}
.film .ctl button{flex:1;background:transparent;border:1px solid #8a6a2a;color:#efe4cb;padding:10px;font:15px var(--sc);letter-spacing:.12em;cursor:pointer}
@media (prefers-reduced-motion:reduce){.film .pic,.film .grain{animation:none}}
@media (min-width:700px){h1{font-size:54px}}

.rose{transition:transform .3s ease-out;transform-origin:125px 125px}
.eta{text-align:center;font:italic 17px var(--body);margin:-4px 0 6px;color:var(--ink2)}
.leg{animation:march 1.1s linear infinite}
@keyframes march{to{stroke-dashoffset:-22}}
@media (prefers-reduced-motion:reduce){.leg{animation:none}}

.demobar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#1d1712;color:#efe4cb;font:14px var(--sc);letter-spacing:.1em}
.demobar span{color:#c9a85a;white-space:nowrap}
.demobar button{flex:1;background:#8e1d17;border:1px solid #c9a85a;color:#efe4cb;padding:10px 8px;font:15px var(--sc);letter-spacing:.08em;cursor:pointer}
.demobar button#demoReset{flex:0 0 auto;background:transparent}
.demobar button:disabled{opacity:.55}
body:has(.demobar) .sheet{padding-bottom:90px}

.plate .credit{font-size:11px;text-align:right;color:var(--ink2);opacity:.8;margin-top:2px;font-family:Georgia,serif}
.plate img{filter:none}
.film .pic{filter:contrast(1.08) brightness(.85)}
.plate img{max-height:62vh;width:auto;max-width:100%;margin:0 auto}

.finder{border:1px solid var(--rule);background:var(--shade);padding:10px;margin:10px 0}
.dial.small{width:190px;height:190px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{border:1px solid var(--ink);background:transparent;padding:6px 9px;font:14px var(--body);cursor:pointer;line-height:1.2}
.chip.on{background:var(--red);border-color:var(--red);color:var(--paper)}

.credits{margin:18px 0 6px;text-align:center}.credits p{margin:.4em 0}.credits .links a{font:18px var(--face);margin:0 4px}.credits .small{font-size:13px;color:var(--ink2)}

.plan{margin:18px 0}.planbox{border:1px solid #1d1712;background:#efe4cb;cursor:zoom-in;margin:8px 0}.planbox svg{display:block;width:100%;height:auto}
#planov{position:fixed;inset:0;z-index:60;background:#1d1712f2;display:flex;flex-direction:column}#planx{align-self:flex-end;margin:10px 12px;background:#efe4cb;color:#1d1712;border:1px solid #1d1712;font:16px 'IM Fell English',serif;padding:6px 14px}
.planscroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}.planscroll svg{display:block;width:max(1000px,100%);height:auto;background:#efe4cb}

.notice .nlink{display:block;margin-top:10px;color:#8e1d17;font-weight:bold;text-decoration:underline}