:root { --ink:#14252a; --paper:#f7f1e5; --blue:#115c8b; --orange:#e65731; --line:#c8bca7; --white:#fffdf8; font-family:ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } body { margin:0; line-height:1.55; } a { color:inherit; text-decoration-color:var(--orange); text-underline-offset:.16em; text-decoration-thickness:.12em; } a:hover { color:var(--orange); } a:focus-visible,button:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }.wrap { width:min(100% - 2.5rem,72rem); margin:auto; }.skip-link { position:absolute; top:-5rem; left:1rem; z-index:5; padding:.6rem 1rem; background:var(--white); }.skip-link:focus { top:1rem; }.hero { min-height:34rem; color:var(--white); background:linear-gradient(115deg,#0d3f63 0%,#115c8b 57%,#237b91 100%); }.hero .wrap { display:flex; min-height:34rem; flex-direction:column; align-items:flex-start; padding:2rem 0 2.5rem; }.back { color:#d7ebee; text-decoration:none; font-weight:750; }.eyebrow { margin:0; color:var(--orange); font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }.hero .eyebrow { margin-top:auto; color:#a7e1dc; }.hero h1 { max-width:11ch; margin:.45rem 0 1rem; font-family:ui-serif,Georgia,serif; font-size:clamp(3.5rem,8vw,7rem); line-height:.88; letter-spacing:-.07em; }.intro { max-width:42rem; margin:0; font-size:clamp(1.1rem,2vw,1.4rem); }.hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }.button { display:inline-flex; align-items:center; min-height:2.8rem; padding:.65rem .9rem; border:1px solid #d6edf0; color:var(--white); text-decoration:none; font-size:.85rem; font-weight:800; }.button:hover { border-color:var(--orange); color:var(--white); background:var(--orange); }.button.primary { border-color:var(--orange); background:var(--orange); }.button.primary:hover { background:#ca3d22; }.reality { padding:4.5rem 0; }.reality h2,.section-head h2,.plan h2,.transit h2,.practical h2 { max-width:15ch; margin:.5rem 0 1.4rem; font-family:ui-serif,Georgia,serif; font-size:clamp(2.3rem,5vw,4.5rem); line-height:.94; letter-spacing:-.06em; }.facts { display:grid; grid-template-columns:repeat(3,1fr); margin:2rem 0; border:1px solid var(--ink); }.facts p { display:grid; gap:.2rem; margin:0; padding:1rem; }.facts p + p { border-left:1px solid var(--ink); }.facts strong { font-family:ui-serif,Georgia,serif; font-size:2rem; line-height:1; }.facts span { color:#53666c; font-size:.8rem; }.reality > p:last-child { max-width:55rem; font-size:1.1rem; }.map-section { padding-bottom:4.5rem; }.section-head { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.25rem; }.section-head h2 { margin-bottom:0; }.section-head button { flex:0 0 auto; border:1px solid var(--ink); padding:.7rem .9rem; color:var(--ink); background:transparent; font:800 .8rem/1 ui-sans-serif,system-ui,sans-serif; cursor:pointer; } #map { height:clamp(28rem,62vw,45rem); border:1px solid var(--ink); background:#dbe5e7; }.leaflet-container { font-family:ui-sans-serif,system-ui,sans-serif; }.stop-icon { display:grid; width:1.75rem; height:1.75rem; place-items:center; border:2px solid var(--white); border-radius:50%; color:var(--white); background:var(--orange); box-shadow:0 1px 5px #14252a77; font:900 .7rem/1 ui-sans-serif,system-ui,sans-serif; }.ferry-line { stroke-dasharray:8 8; }.map-note { margin:.65rem 0 0; color:#53666c; font-size:.82rem; }.plan { padding:4.5rem 0; border-top:1px solid var(--line); }.stops { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin:2rem 0 0; padding:1px; list-style:none; background:var(--ink); }.stops li { display:grid; grid-template-columns:2.5rem 1fr; gap:.7rem; min-height:14rem; padding:1.4rem; background:var(--white); }.stops span { color:var(--orange); font-size:.75rem; font-weight:900; }.stops h3 { margin:0 0 .5rem; font-family:ui-serif,Georgia,serif; font-size:1.6rem; line-height:1; letter-spacing:-.04em; }.stops p { margin:0 0 .8rem; font-size:.92rem; }.stops a { font-size:.8rem; font-weight:800; }.transit { padding:4.5rem 0; color:var(--white); background:var(--ink); }.transit .eyebrow { color:#e4b754; }.transit-grid,.practical-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:2rem; border:1px solid currentColor; background:currentColor; }.transit article { padding:1.4rem; color:var(--ink); background:#e2ebea; }.transit h3,.practical h3 { margin:0 0 .75rem; font-family:ui-serif,Georgia,serif; font-size:1.7rem; line-height:1; letter-spacing:-.04em; }.transit p,.practical p { margin:0 0 1rem; font-size:.92rem; }.transit a,.practical a { font-size:.8rem; font-weight:800; }.practical { padding:4.5rem 0; }.practical-grid { border-color:var(--line); background:var(--line); }.practical article { padding:1.4rem; background:var(--white); }.sources { padding:1.5rem 0 3rem; border-top:1px solid var(--line); color:#53666c; font-size:.78rem; }
@media (max-width:700px) { .wrap { width:min(100% - 1.5rem,72rem); }.hero,.hero .wrap { min-height:31rem; }.facts,.stops,.transit-grid,.practical-grid { grid-template-columns:1fr; }.facts p + p { border-top:1px solid var(--ink); border-left:0; }.section-head { display:block; }.section-head button { margin-top:1rem; }.stops li { min-height:0; }.hero-actions { display:grid; width:100%; }.button { justify-content:center; text-align:center; } }
.map-frame { position:relative; }.nearby-story { position:absolute; z-index:450; right:1rem; bottom:1rem; width:min(23rem,calc(100% - 2rem)); padding:1rem; border:1px solid #bfd1d3; background:rgba(255,253,248,.97); box-shadow:0 .7rem 2rem #14252a44; animation:story-arrival .3s ease-out; }.nearby-story[hidden] { display:none; }.nearby-story p { margin:.35rem 0; font-size:.82rem; }.nearby-story h2,.nearby-story h3 { margin:.1rem 0; font-family:ui-serif,Georgia,serif; font-size:1.45rem; line-height:1; }.nearby-story a { font-size:.78rem; font-weight:800; }.ride-bar { display:none; }@keyframes story-arrival { from { opacity:0; transform:translateY(1rem); } to { opacity:1; transform:translateY(0); } }
@media (max-width:700px) { .ride-bar { position:fixed; z-index:1200; top:0; right:0; left:0; display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:center; padding:.55rem .75rem; color:var(--white); background:#0d3f63; box-shadow:0 .2rem .8rem #14252a66; }.ride-bar button { min-height:2.45rem; border:1px solid #a7e1dc; padding:.45rem .65rem; color:var(--ink); background:#a7e1dc; font:800 .7rem/1 ui-sans-serif,system-ui,sans-serif; }.ride-bar p { margin:0; line-height:1.25; }.ride-bar p:first-child { font-size:.82rem; font-weight:850; }.ride-bar p:last-child { margin-top:.15rem; color:#c9e1e2; font-size:.68rem; }.hero { padding-top:3.65rem; }.nearby-story { right:.75rem; bottom:.75rem; width:calc(100% - 1.5rem); } }
.map-actions,.tour-drawer,.install-sheet { display:none; }
@media (max-width:700px) { html,body { width:100%; height:100%; overflow:hidden; } body { position:fixed; inset:0; display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom); }.ride-bar { position:relative; flex:0 0 auto; padding-top:calc(.55rem + env(safe-area-inset-top)); padding-right:calc(.75rem + env(safe-area-inset-right)); padding-left:calc(.75rem + env(safe-area-inset-left)); }.hero,.reality,.plan,.transit,.practical,.sources,.map-note,.section-head { display:none; } main { flex:1 1 auto; min-height:0; height:auto; }.map-section.wrap { width:100%; height:100%; padding:0; }.map-frame,#map { width:100%; height:100%; }.map-actions { position:absolute; z-index:600; top:.7rem; right:calc(.7rem + env(safe-area-inset-right)); display:grid; gap:.45rem; }.map-actions button { border:1px solid #bfd1d3; border-radius:.55rem; padding:.55rem .65rem; color:var(--ink); background:rgba(255,253,248,.96); box-shadow:0 .2rem .7rem #14252a33; font:800 .72rem/1 ui-sans-serif,system-ui,sans-serif; }.map-actions button:disabled { opacity:.55; }.map-actions button[hidden] { display:none; }.nearby-story { right:calc(.75rem + env(safe-area-inset-right)); bottom:calc(1rem + env(safe-area-inset-bottom)); max-height:42%; overflow:auto; }.tour-drawer,.install-sheet { position:absolute; z-index:700; right:0; bottom:0; left:0; display:block; max-height:72%; overflow:auto; padding:1rem calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left)); border-radius:1.1rem 1.1rem 0 0; color:var(--ink); background:rgba(255,253,248,.98); box-shadow:0 -.4rem 1.5rem #14252a44; }.tour-drawer[hidden],.install-sheet[hidden] { display:none; }.tour-drawer header,.install-sheet header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.tour-drawer header p,.install-sheet header p { margin:0; color:#e65731; font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.tour-drawer header button,.install-sheet header button { width:2rem; height:2rem; border:1px solid var(--line); border-radius:.5rem; background:var(--white); color:var(--ink); font-size:1.4rem; line-height:1; }.tour-drawer-intro { margin:.65rem 0 .9rem; color:#53666c; font-size:.76rem; }.tour-drawer ol { display:grid; gap:.45rem; margin:0; padding:0; list-style:none; }.tour-drawer li button { display:grid; grid-template-columns:2rem 1fr; width:100%; gap:.25rem .55rem; padding:.7rem; border:1px solid #d4ddd9; border-radius:.65rem; color:var(--ink); background:var(--white); text-align:left; }.tour-drawer li span { grid-row:span 2; color:var(--orange); font-size:.68rem; font-weight:900; }.tour-drawer li strong { font-size:.83rem; }.tour-drawer li small { color:#53666c; font-size:.7rem; line-height:1.35; }.install-sheet > p { margin:.75rem 0 .35rem; font-size:.85rem; }.install-sheet ol { margin:.45rem 0 .8rem; padding-left:1.4rem; }.install-sheet li { margin:.45rem 0; font-size:.85rem; }.install-sheet .install-note { margin:.8rem 0 0; padding:.7rem; border-radius:.65rem; color:#41565c; background:#e2ebea; font-size:.72rem; line-height:1.4; } }
@media (display-mode:standalone) { #install-app { display:none; } }
.watch-directions { display:inline-block; margin-top:.3rem; color:#fff; font-size:.68rem; font-weight:850; text-decoration-color:#a7e1dc; }.watch-directions[hidden] { display:none; }.watch-tip { display:grid; gap:.35rem; margin:.1rem 0 .9rem; padding:.7rem; border-radius:.65rem; background:#e2ebea; font-size:.72rem; line-height:1.35; }.watch-tip strong { color:#0d3f63; }.watch-tip span { color:#41565c; }.watch-tip a { color:#0d3f63; font-weight:800; }
.map-load-status { position:absolute; z-index:650; left:50%; bottom:1rem; transform:translateX(-50%); width:max-content; max-width:calc(100% - 2rem); margin:0; padding:.55rem .8rem; border:1px solid rgba(13,63,99,.18); border-radius:999px; background:rgba(255,255,255,.94); box-shadow:0 .25rem 1rem rgba(20,38,44,.16); color:#0d3f63; font-size:.72rem; font-weight:850; text-align:center; }.map-load-status[hidden] { display:none; }
.ride-rescue { display:flex; flex-wrap:wrap; gap:.15rem .4rem; align-items:center; margin-top:.25rem; color:#c9e1e2; font-size:.62rem; line-height:1.25; }.ride-rescue a { color:#fff; font-weight:850; }
.ride-instruction { display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:.55rem; align-items:center; min-width:0; }.maneuver-arrow { display:grid; width:2.5rem; height:2.5rem; place-items:center; transform:rotate(var(--nav-rotation,0deg)); transition:transform .25s ease; transform-origin:center; }.maneuver-arrow svg { display:block; width:100%; height:100%; overflow:visible; }.maneuver-arrow circle { fill:#0d3f63; stroke:#a7e1dc; stroke-width:2.5; }.maneuver-arrow path { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.ride-instruction > div { min-width:0; }