/* routes.css — «Места · Маршруты»: the catalogue (routes.html) and one page for every route (routes/_entry.html).
   The idea: a route is a day by the hour, not a list of places — the page lives the day. Its line runs through the
   whole page, the ground goes from morning paper to dusk, and a day that ends at the sea ends in the sun.
   Phone first, then 700 / 900 / 1200px. Colours and type are styles.css's; the shared parts (.nt-kick, .nt-btn,
   .nt-chip, .nt-fav, .nt-note) are nature.css's. Lines are drawn from one place: the line's x (--lx) is the time
   column, the gap and half the dot, so a stop, a way and the line between two parts of the day always meet. */

.rt { --dusk: #1A1730; --dusk-txt: #F1EEF7; --dusk-mut: rgba(241, 240, 247, .72); --dusk-line: rgba(241, 238, 247, .16);
  --sun: #FFB46A; --sea: #16303A; --paper2: #EDE6D9; --plum: #8C7C99; --night: #3A3256;
  --tc: 42px; --dc: 20px; --cg: 10px; --lw: 4px; --lx: calc(var(--tc) + var(--cg) + var(--dc) / 2 - var(--lw) / 2);
  --pad: 64px; --sm: 40px; --wp: 18px; }
:root.dark .rt { --paper2: #1C1A22; --plum: #2B2540; --night: #1E1A33; --dusk: #120F22; }
.rt [hidden] { display: none !important; }
.rt .nt-kick a { color: inherit; text-decoration: underline; text-decoration-color: rgba(var(--ink), .25); text-underline-offset: 3px; }
.rt .nt-kick a:hover { color: var(--txt); }

/* A route's own shape, drawn from its stops' coordinates: dots on foot, a solid line by tram, train or boat. */
.rg .w, .rg .t { fill: none; stroke: var(--txt); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rg .w { stroke-dasharray: 0 5.4; }
.rg .a { fill: var(--s1); stroke: var(--txt); stroke-width: 2.2; }
.rg .z { fill: var(--txt); }

/* ═══════════════ The catalogue · 1 — the host's question, and the programme under it ═══════════════ */
.rs-hero { padding-top: 40px; }
.rs-hero h1 { max-width: 1250px; margin-top: 16px; font-size: clamp(34px, 7.4vw, 76px); font-weight: 500; line-height: 1.12; letter-spacing: -.045em; text-wrap: pretty; }
/* A word of the phrase is a real select under its own words: the system menu on a phone, the keyboard everywhere. */
.rs-nb { white-space: nowrap; }
.rs-pick { position: relative; display: inline-block; color: var(--acc); text-decoration: underline; text-decoration-thickness: .055em; text-decoration-color: rgba(var(--accr), .3); text-underline-offset: .16em; cursor: pointer; white-space: nowrap; transition: text-decoration-color .2s; }
.rs-pick svg { display: inline-block; width: .4em; height: .4em; margin-left: .06em; vertical-align: .12em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rs-pick select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 16px; -webkit-appearance: none; appearance: none; }
.rs-pick:hover { text-decoration-color: var(--acc); }
.rs-pick:has(select:focus-visible) { outline: 2px solid rgba(var(--accr), .5); outline-offset: 4px; border-radius: 4px; }
.rs-lead { max-width: 680px; margin-top: 22px; font-size: clamp(16px, 2vw, 19px); line-height: 1.5; color: var(--txt2); }
.rs-prog { display: grid; margin-top: 32px; border-radius: 24px; background: var(--s1); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -48px rgba(0, 0, 0, .5); overflow: hidden; }
.rs-day { display: flex; flex-direction: column; padding: 22px 20px 24px; border-top: 1px dashed rgba(var(--ink), .18); color: var(--txt); transition: background .2s; }
.rs-day:first-child { border-top: 0; }
.rs-day:hover { background: rgba(var(--ink), .025); }
.rs-day .nt-kick { font-size: 11px; }
.rs-day .nt-kick b { font-weight: 500; color: var(--txt); }
.rs-day svg { width: 100%; height: 132px; margin-top: 14px; border-radius: 16px; background: var(--s3); }
.rs-day h3 { margin-top: 16px; font-size: 24px; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; transition: color .2s; }
.rs-day > p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--txt2); }
.rs-day:hover h3 { color: var(--acc); }
.rs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.rs-tags span { min-height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 14px; border: 1px solid var(--line); font-size: 13px; color: var(--txt2); }
.rs-why { margin-top: auto; padding-top: 16px; font-size: 14px; line-height: 1.5; color: var(--mut); }
.rs-why b { display: block; margin-bottom: 2px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt); }
.rs-day.is-two { background: linear-gradient(90deg, transparent, rgba(var(--accr), .04)); }
.rs-stub { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 22px; border-top: 2px dashed rgba(var(--ink), .22); background: var(--s3); }
.rs-stub b { font: 500 56px/1 var(--mono); letter-spacing: -.07em; }
.rs-stub p { margin-bottom: 6px; font-size: 15px; line-height: 1.45; color: var(--txt2); }
.rs-stub .nt-btn { width: 100%; }
.rs-said { min-height: 1.5em; font-size: 14px; color: var(--ok); }

/* 2 · The guide's menu: two kinds of guest, two columns */
.rs-menu { display: grid; gap: 72px; padding-top: 96px; }
.rs-col h2 { margin-top: 10px; font-size: clamp(38px, 6vw, 56px); font-weight: 500; line-height: 1; letter-spacing: -.045em; }
.rs-col > p:not(.nt-kick) { max-width: 460px; margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--txt2); }
.rs-list { margin-top: 26px; border-top: 1px solid rgba(var(--ink), .3); }
.rs-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--txt); }
.rs-row svg { width: 64px; height: 64px; border-radius: 14px; background: var(--s1); box-shadow: 0 0 0 1px var(--line); }
.rs-row svg .w, .rs-row svg .t { stroke-width: 3.6; } .rs-row svg .w { stroke-dasharray: 0 7.4; }
.rs-row b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; transition: color .2s; }
.rs-row em { display: block; margin-top: 4px; font-style: normal; font-size: 15px; line-height: 1.45; color: var(--txt2); }
.rs-row .rs-dur { display: grid; justify-items: end; gap: 3px; font: 500 13px var(--mono); color: var(--txt); white-space: nowrap; }
.rs-row .rs-dur small { font-size: 12px; color: var(--mut); }
.rs-row:hover { color: var(--txt) !important; }
.rs-row:hover b { color: var(--acc); }
.rs-row .rs-off { display: none; }
.rs-row.is-season { opacity: .5; }
.rs-row.is-season .rs-on { display: none; }
.rs-row.is-season .rs-off { display: block; }

/* 3 · What a guide knows: the one dark pause of the page */
.rs-know { margin-top: 104px; padding: 64px 0 72px; background: var(--dusk); color: var(--dusk-txt); }
.rs-know .nt-kick { color: var(--dusk-mut); }
.rs-know-row { display: grid; gap: 40px; margin-top: 32px; }
.rs-know b { display: block; font: 500 clamp(72px, 10vw, 104px)/0.9 var(--mono); letter-spacing: -.07em; color: var(--sun); }
.rs-know-row p { max-width: 380px; margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--dusk-txt); }
.rs-know-row p span { color: var(--dusk-mut); }

/* 4 · Where from: the shared map of the country, the home town picked */
.rs-from { display: grid; gap: 40px; padding-top: 96px; }
.rs-from .nl-map { --nl-dot: var(--txt); max-width: 600px; }
.rs-from .nl-pt b small { font: 500 11px var(--mono); color: var(--mut); }
.rs-from .nl-pt.is-base i { width: 16px; height: 16px; left: -8px; top: -8px; background: var(--acc); box-shadow: 0 0 0 7px rgba(var(--accr), .18); }
.rs-from .nl-pt.is-base b { color: var(--acc); font-weight: 600; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.rs-near { margin-top: 26px; border-top: 1px solid rgba(var(--ink), .3); }
.rs-near li a { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--txt); }
.rs-near li a:hover { color: var(--acc) !important; }
.rs-near li span { font: 500 14px var(--mono); color: var(--mut); white-space: nowrap; }

/* ═══════════════ One route · 1 — the words, and the day as one line ═══════════════ */
.rt-hero { display: grid; gap: 28px; padding-top: 12px; }
.rt-hero h1 { margin-top: 14px; max-width: 9em; font-size: clamp(46px, 11vw, 116px); font-weight: 500; line-height: .92; letter-spacing: -.058em; text-wrap: balance; }
.rt-lead { max-width: 560px; margin-top: 22px; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--txt2); }
.rt-facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 22px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.rt-facts span { display: grid; gap: 4px; font-size: 13px; line-height: 1.3; color: var(--mut); }
.rt-facts b { font: 500 clamp(20px, 3vw, 26px) var(--mono); letter-spacing: -.04em; color: var(--txt); white-space: nowrap; }
.rt-who { max-width: 540px; margin-top: 20px; font-size: 16px; line-height: 1.5; color: var(--txt2); }
.rt-who b { font-weight: 500; color: var(--txt); }
.rt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.rt-acts .nt-fav { width: 48px; height: 48px; border-radius: 24px; }
@media (min-width: 700px) { .rt-acts .nt-fav { width: auto; } }
.rt-said { flex-basis: 100%; min-height: 1.4em; font-size: 14px; color: var(--ok); }

/* The scheme: real directions, lengths eased so a town's stops do not crowd into one dot — «схема, не в масштабе». */
.rt-map { position: relative; border-radius: 24px; overflow: hidden; background: var(--s1); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -44px rgba(0, 0, 0, .45); }
.rt-map > svg { display: block; width: 100%; height: auto; }
.rt-map .sea { fill: var(--sea); }
.rt-map .glow { fill: var(--sun); fill-opacity: .14; }
.rt-map .sun { fill: var(--sun); }
.rt-map .tram, .rt-map .walk { fill: none; stroke: var(--txt); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.rt-map .walk { stroke-dasharray: 0 13; }
.rt-map .note { font: 500 11px var(--mono); letter-spacing: .08em; fill: var(--faint); }
/* The stops on it are the day's own list, placed by their X and Y in the scheme's 640 × 760. */
.rt-mpts { position: absolute; inset: 0; }
.rt-map { --h: 760; }
.rt-mp { position: absolute; left: calc(var(--x) / 640 * 100%); top: calc(var(--y) / var(--h) * 100%); width: 0; height: 0; }
.rt-mp i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--s1); border: 3px solid var(--txt); }
.rt-mp.is-big i { left: -8.5px; top: -8.5px; width: 17px; height: 17px; }
.rt-mp.on-sea i { background: var(--sea); border-color: #FFF; }
.rt-mp span { position: absolute; top: 0; left: 14px; transform: translateY(-50%); display: grid; white-space: nowrap; font: 500 clamp(11px, 1.5vw, 17px)/1.15 Geologica, system-ui, sans-serif; color: var(--txt); text-shadow: 0 0 3px var(--s1), 0 0 4px var(--s1); }
.rt-mp span small { font: 500 clamp(10px, 1.2vw, 13px) var(--mono); color: var(--mut); }
.rt-mp[data-side="l"] span { left: auto; right: 14px; text-align: right; }
.rt-mp[data-side="t"] span { left: 0; top: -12px; transform: translate(-50%, -100%); text-align: center; }
.rt-mp[data-side="b"] span { left: 0; top: 12px; transform: translate(-50%, 0); text-align: center; }
.rt-mp[data-side="tl"] span { left: auto; right: -8px; top: -12px; transform: translateY(-100%); text-align: right; }
.rt-mp[data-side="tr"] span { left: -8px; top: -12px; transform: translateY(-100%); }
.rt-mp[data-side="bl"] span { left: auto; right: -8px; top: 12px; transform: none; text-align: right; }
.rt-mp[data-side="br"] span { left: -8px; top: 12px; transform: none; }
.rt-mp.on-sea span { color: #FFF; text-shadow: 0 0 3px var(--sea), 0 0 4px var(--sea); }
.rt-mp.on-sea span small { color: rgba(255, 255, 255, .7); }
.rt-mp.is-pill i { left: -11px; top: -11px; width: 22px; height: 22px; display: grid; place-items: center; border: 2px solid var(--s1); background: var(--acc); color: #FFF; font: 600 12px/1 Geologica, system-ui, sans-serif; font-style: normal; }
.rt-mp.is-town i, .rt-mp.is-seg i { display: none; }
.rt-mp.is-town span { left: 0; }
.rt-mp.is-town span { font: 500 clamp(9px, 1vw, 12px) var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); text-shadow: none; }
.rt-mp.is-town.on-sea span { color: rgba(255, 255, 255, .5); }
.rt-mp.is-seg span { font: 500 clamp(9px, 1.05vw, 13px) var(--mono); color: var(--mut); }
.rt-mp.on-sea.is-seg span, .rt-mp.on-sea.is-pill span { color: rgba(255, 255, 255, .78); text-shadow: 0 0 3px var(--sea), 0 0 4px var(--sea); }
.rt-sunt { position: absolute; left: calc(var(--x) / 640 * 100%); top: calc((var(--y) + 96) / var(--h) * 100%); transform: translate(-50%, 0); white-space: nowrap; font: 500 clamp(10px, 1.2vw, 15px) var(--mono); color: var(--sun); }

/* 2 · Before you go: one ticket */
.rt-ticket { display: grid; margin-top: 40px; border-radius: 22px; background: var(--s1); box-shadow: 0 0 0 1px var(--line); }
.rt-cell { padding: 20px 20px 22px; border-top: 1px dashed rgba(var(--ink), .18); }
.rt-cell:first-child { border-top: 0; }
.rt-cell .nt-kick { font-size: 11px; }
.rt-cell b { display: block; margin-top: 10px; font-size: 22px; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.rt-cell b.is-num { font: 500 28px var(--mono); letter-spacing: -.05em; }
.rt-cell p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--txt2); }
.rt-cell .is-ok { color: var(--ok); }
.rt-cell .is-warn { color: var(--bad); }

/* 3 · The day as a bar: morning, afternoon, evening */
.rt-bar { margin-top: 56px; }
.rt-hours { display: flex; justify-content: space-between; font: 500 12px var(--mono); color: var(--mut); }
.rt-bar-line { position: relative; height: 10px; margin-top: 12px; border-radius: 5px; background: linear-gradient(90deg, #E9E3D3 0%, #E4D9C2 40%, #CDBBC9 62%, #4A3F6B 80%, #1A1730 92%, #FFB46A 100%); }
.rt-bar-line.is-day { background: linear-gradient(90deg, #E9E3D3 0%, #E4D9C2 55%, #CDBBC9 100%); }
:root.dark .rt-bar-line.is-day { background: linear-gradient(90deg, #3A3832 0%, #4A4338 55%, #5A4D5E 100%); }
.rt-bar-line i { position: absolute; top: -5px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--s1); border: 4px solid var(--txt); }
.rt-bar-line i.is-small { top: -1px; width: 12px; height: 12px; margin-left: -6px; border-width: 3px; }
.rt-phases { display: grid; gap: 14px; margin-top: 18px; }
.rt-phases span { font-size: 15px; color: var(--txt2); }
.rt-phases b { display: block; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--txt); }

/* «Сейчас»: the one card a guest needs in the middle of the day — after «Я здесь» */
.rt-now { position: sticky; top: 72px; z-index: 5; margin: 28px 0 0; padding: 16px 18px; border-radius: 22px; background: var(--txt); color: var(--bg); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .6); }
.rt-now .nt-kick { color: var(--bg); opacity: .65; font-size: 11px; }
.rt-now b { display: block; margin-top: 6px; font-size: 26px; font-weight: 500; letter-spacing: -.035em; }
.rt-steps { display: flex; gap: 4px; margin-top: 12px; }
.rt-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--bg); opacity: .22; }
.rt-steps i.is-done { opacity: 1; }
.rt-steps i.is-here { opacity: 1; background: var(--acc); }
.rt-next { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.rt-next span { opacity: .7; }
.rt-now-btns { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 14px; }
.rt-now-btns a, .rt-now-btns button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 24px; border: 0; font: 500 15px Geologica, system-ui, sans-serif; cursor: pointer; }
.rt-go-btn { background: var(--bg); color: var(--txt); }
.rt-go-btn:hover { color: var(--acc) !important; }
.rt-here-btn { background: none; border: 1.5px solid rgba(242, 240, 235, .35) !important; color: var(--bg); }
.rt-here-btn:hover { border-color: var(--bg) !important; }
.rt-stop-btn { width: 48px; padding: 0 !important; background: none; color: var(--bg); opacity: .7; }
.rt-stop-btn:hover { opacity: 1; }
:root.dark .rt-here-btn { border-color: rgba(15, 15, 16, .35) !important; }
.rt-now svg, .rt-here svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 4 · The day itself: stops along one line; the ground goes from morning to evening */
.rt-part { position: relative; padding: var(--pad) 0 24px; }
.rt-part.is-noon { background: linear-gradient(180deg, var(--bg) 0%, var(--paper2) 100%); }
.rt-part.is-dusk { padding-bottom: 0; color: var(--dusk-txt); background: linear-gradient(180deg, var(--paper2) 0%, var(--plum) 9%, var(--night) 22%, var(--dusk) 46%); }
.rt-part-in { position: relative; }
/* The line runs on from one part of the day into the next: the page itself is the route. */
.rt-part + .rt-part .rt-part-head::before { content: ""; position: absolute; left: var(--lx); top: calc(-1 * var(--pad)); bottom: calc(-1 * var(--sm) - 14px); width: var(--lw); border-radius: 2px; background: var(--txt); }
.rt-part.is-dusk .rt-part-head::before { background: linear-gradient(180deg, var(--txt) 0%, var(--dusk-txt) 70%); }
.rt-stops { position: relative; }
.rt-part:has(+ .rt-part) .rt-stops::after { content: ""; position: absolute; left: var(--lx); bottom: -24px; width: var(--lw); height: 24px; background: var(--txt); }
.rt-part-head { position: relative; padding-left: calc(var(--tc) + var(--cg) + var(--dc) + var(--cg)); }
.rt-part-head h2 { margin-top: 12px; font-size: clamp(34px, 6vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.rt-part.is-dusk .nt-kick { color: var(--dusk-mut); }
.rt-stops { margin-top: var(--sm); }
.rt-stops > li { position: relative; display: grid; grid-template-columns: var(--tc) var(--dc) minmax(0, 1fr); column-gap: var(--cg); }
/* Every row draws its own piece of the line in the dot's column — dots on foot, a solid line by tram. */
.rt-stops > li::before { content: ""; position: absolute; left: var(--lx); top: 0; bottom: 0; width: var(--lw); }
.rt-stops > li.is-walk::before, .rt-stops > li.then-walk::before { background: radial-gradient(circle, var(--txt) calc(var(--lw) / 2 - .5px), transparent calc(var(--lw) / 2)) 0 0 / var(--lw) calc(var(--lw) * 2.3) repeat-y; }
.rt-stops > li.is-tram::before, .rt-stops > li.then-tram::before { background: var(--txt); border-radius: 3px; }
.rt-stops > li.then-walk::before, .rt-stops > li.then-tram::before { top: 18px; }
.rt-stops > li.is-last::before { display: none; }
.rt-part.is-dusk .rt-stops > li.is-walk::before, .rt-part.is-dusk .rt-stops > li.then-walk::before { background-image: radial-gradient(circle, var(--dusk-txt) calc(var(--lw) / 2 - .5px), transparent calc(var(--lw) / 2)); }
.rt-part.is-dusk .rt-stops > li.is-tram::before, .rt-part.is-dusk .rt-stops > li.then-tram::before { background: var(--dusk-txt); }
.rt-time { padding-top: 3px; font: 500 13px var(--mono); letter-spacing: -.03em; text-align: right; font-variant-numeric: tabular-nums; }
.rt-time s { display: block; font-size: .7em; opacity: .5; }
.rt-dot { position: relative; z-index: 1; justify-self: center; width: var(--dc); height: var(--dc); margin-top: 3px; border-radius: 50%; background: var(--s1); border: calc(var(--dc) / 4.4) solid var(--txt); }
.rt-part.is-dusk .rt-dot { background: var(--dusk); border-color: var(--dusk-txt); }
.rt-body { display: grid; gap: 18px; padding-bottom: 32px; }
.rt-body h3 { font-size: clamp(22px, 3vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; }
.rt-nl { display: block; margin-top: 5px; font: 500 12px var(--mono); color: var(--mut); }
.rt-what { max-width: 600px; margin-top: 12px; font-size: clamp(16px, 1.8vw, 18px); line-height: 1.55; color: var(--txt2); }
.rt-say { max-width: 600px; margin-top: 14px; }
.rt-say dt { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.rt-say dd { margin: 4px 0 12px; font-size: 16px; line-height: 1.55; color: var(--txt); }
.rt-say dd.is-secret { color: var(--acc); }
.rt-part.is-dusk .rt-what, .rt-part.is-dusk .rt-nl, .rt-part.is-dusk .rt-say dt { color: var(--dusk-mut); }
.rt-part.is-dusk .rt-say dd { color: var(--dusk-txt); }
.rt-part.is-dusk .rt-say dd.is-secret { color: var(--sun); }
.rt-opt { display: inline-flex; align-items: center; min-height: 26px; margin-left: 10px; padding: 0 10px; border-radius: 13px; border: 1px solid rgba(var(--ink), .22); font: 500 12px Geologica, system-ui, sans-serif; letter-spacing: 0; color: var(--txt2); vertical-align: middle; transform: translateY(-3px); }
.rt-part.is-dusk .rt-opt { border-color: var(--dusk-line); color: var(--dusk-mut); }
/* «Я здесь» on every stop: the day starts from where the guest stands. */
.rt-here { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 14px; padding: 0 16px 0 12px; border-radius: 20px; border: 1px solid rgba(var(--ink), .18); background: none; font: 500 14px Geologica, system-ui, sans-serif; color: var(--txt2); cursor: pointer; transition: border-color .2s, color .2s; }
.rt-here:hover { border-color: var(--txt); color: var(--txt); }
@media (min-width: 1100px) and (hover: hover) { .rt-here { display: none !important; } }
.rt-part.is-dusk .rt-here { border-color: var(--dusk-line); color: var(--dusk-mut); }
.rt-part.is-dusk .rt-here:hover { border-color: var(--dusk-txt); color: var(--dusk-txt); }
/* The going between two stops */
.rt-go { min-height: 60px; }
.rt-go > span:last-child { grid-column: 3; align-self: center; display: flex; align-items: center; gap: 10px; padding: 8px 0; font: 500 12.5px/1.45 var(--mono); color: var(--mut); }
.rt-no { width: 24px; height: 24px; display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--acc); color: #FFF; font: 600 12px Geologica, system-ui, sans-serif; font-style: normal; }
.rt-part.is-dusk .rt-go > span:last-child { color: var(--dusk-mut); }
/* What sits beside a stop: a museum, park or beach from our pages, a label like a museum's, or one big number */
.rt-side:empty { display: none; }
.rt-place { display: block; border-radius: 18px; overflow: hidden; background: var(--s1); box-shadow: 0 0 0 1px var(--line); color: var(--txt); }
.rt-place img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--s2); }
.rt-place > span { display: grid; gap: 4px; padding: 14px 18px 16px; }
.rt-place b { font-size: 17px; font-weight: 600; letter-spacing: -.015em; transition: color .2s; }
.rt-place em { font-style: normal; font-size: 14px; line-height: 1.45; color: var(--txt2); }
.rt-place i { font: 500 13px var(--mono); font-style: normal; color: var(--ok); }
.rt-place i.is-shut { color: var(--bad); }
.rt-place:hover { color: var(--txt) !important; }
.rt-place:hover b { color: var(--acc); }
.rt-part.is-dusk .rt-place { background: #241F3C; box-shadow: 0 0 0 1px var(--dusk-line); color: var(--dusk-txt); }
.rt-part.is-dusk .rt-place em { color: var(--dusk-mut); }
.rt-part.is-dusk .rt-place i { color: #9FD8B4; }
.rt-label { align-self: start; padding: 22px 24px 24px; border-radius: 4px; background: var(--s1); color: var(--txt); box-shadow: 0 1px 0 rgba(var(--ink), .06), 0 18px 40px -30px rgba(0, 0, 0, .5); }
.rt-label b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.rt-label small { display: block; margin-top: 4px; color: var(--mut); }
.rt-label p { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--txt2); }
.rt-label a { display: inline-flex; margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--acc); }
.rt-label a:hover { color: var(--acc) !important; text-decoration: underline; text-underline-offset: 4px; }
.rt-big { align-self: start; display: grid; gap: 6px; }
.rt-big b { font: 500 clamp(64px, 9vw, 112px)/0.9 var(--mono); letter-spacing: -.08em; }
.rt-big span { max-width: 340px; font-size: 15px; line-height: 1.5; color: var(--mut); }
.rt-part.is-dusk .rt-big span { color: var(--dusk-mut); }

/* A stop behind the guest, after «Я здесь»: one quiet line with a tick. */
.rt-stops > li.is-past .rt-what, .rt-stops > li.is-past .rt-say, .rt-stops > li.is-past .rt-side, .rt-stops > li.is-past .rt-here, .rt-stops > li.is-past .rt-nl { display: none; }
.rt-stops > li.is-past .rt-body { padding-bottom: 14px; }
.rt-stops > li.is-past .rt-body h3 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--mut); }
.rt-stops > li.is-past .rt-dot { background: var(--txt); }
.rt-stops > li.rt-go.is-past { min-height: 0; }
.rt-stops > li.rt-go.is-past > span:last-child { padding: 2px 0; font-size: 11.5px; opacity: .6; }
.rt-stops > li.is-here .rt-dot { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 0 6px rgba(var(--accr), .2); }

/* 5 · The sunset: the one moment the page is only the sea */
.rt-sun-sec { padding-top: 8px; }
.rt-sunset { position: relative; height: 360px; overflow: hidden; }
.rt-sunset::before { content: ""; position: absolute; left: -24px; top: 112px; width: 220px; height: 220px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 40px rgba(255, 180, 106, .1), 0 0 0 100px rgba(255, 180, 106, .05); }
.rt-sunset::after { content: ""; position: absolute; left: 0; right: 0; top: 222px; bottom: 0; background: linear-gradient(180deg, #1F3A45 0%, #10222A 100%); }
.rt-sunline { position: absolute; top: -40px; height: 152px; width: var(--lw); background: radial-gradient(circle, var(--dusk-txt) calc(var(--lw) / 2 - .5px), transparent calc(var(--lw) / 2)) 0 0 / var(--lw) calc(var(--lw) * 2.3) repeat-y; }
.rt-sunset-in { position: relative; z-index: 1; height: 100%; }
/* On a phone the scheme names its stops only; the times are in the day below. */
@media (max-width: 699px) { .rt-mp span small { display: none; } .rt-mp span { font-size: 10.5px; } }
/* On a phone the scheme shrinks and its labels do not: «19:01 · закат» sits under the sun there, clear of the last stop's name. */
@media (min-width: 700px) { .rt-sunt { top: calc(var(--y) / var(--h) * 100%); transform: translate(-50%, -100%); } }
.rt-sunset-in > div { position: absolute; right: 0; bottom: 28px; left: 42%; }
.rt-sunset b { display: block; font: 500 clamp(56px, 12vw, 160px)/0.85 var(--mono); letter-spacing: -.08em; color: var(--dusk-txt); }
.rt-sunset p { max-width: 460px; margin-top: 10px; font-size: clamp(14px, 1.8vw, 19px); line-height: 1.5; color: var(--dusk-txt); }
.rt-sunset p span { display: block; margin-top: 10px; font-size: .82em; color: var(--dusk-mut); }
.rt-sun-sec { background: var(--dusk); color: var(--dusk-txt); }
.rt-home { padding-top: 36px; padding-bottom: 64px; color: var(--dusk-mut); font-size: 16px; line-height: 1.5; }
.rt-home b { color: var(--dusk-txt); font-weight: 500; }
.rt-home-day { padding-top: 8px; padding-bottom: 0; color: var(--txt2); }
.rt-home-day b { color: var(--txt); }

/* 6 · Plan B, as quiet rows */
.rt-planb { display: grid; gap: 28px; padding-top: 88px; }
.rt-planb dl { border-top: 1px solid rgba(var(--ink), .3); }
.rt-planb dl > div { display: grid; gap: 6px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.rt-planb dt { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.rt-planb dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--txt2); }
.rt-planb dd a { color: var(--acc); }
.rt-planb dd a:hover { color: var(--acc) !important; text-decoration: underline; text-underline-offset: 4px; }

/* 7 · More routes: each one by the shape of its own line */
.rt-more { padding-top: 88px; }
.rt-more-row { display: grid; gap: 16px; margin-top: 28px; }
.rt-card { display: grid; grid-template-rows: auto 1fr; border-radius: 22px; background: var(--s1); box-shadow: 0 0 0 1px var(--line); overflow: hidden; color: var(--txt); }
.rt-card svg { display: block; width: 100%; height: 170px; background: var(--s3); }
.rt-card svg .a { fill: var(--s3); }
.rt-card > span { display: flex; flex-direction: column; padding: 18px 20px 20px; }
.rt-card .nt-kick { font-size: 11px; }
.rt-card b { margin-top: 10px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; transition: color .2s; }
.rt-card em { margin-top: 8px; font-style: normal; font-size: 15px; line-height: 1.5; color: var(--txt2); }
.rt-card:hover { color: var(--txt) !important; }
.rt-card:hover b { color: var(--acc); }

/* The sheet for guests: on screen it is not there; printed («Лист для гостей»), it is all there is. */
.rt-sheet { display: none; }

/* ═══════════════ Wider ═══════════════ */
@media (min-width: 700px) {
  .rt { --tc: 72px; --dc: 28px; --cg: 18px; --lw: 5px; --pad: 80px; }
  .rs-prog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-day { border-top: 0; border-left: 1px dashed rgba(var(--ink), .18); }
  .rs-day:nth-child(odd) { border-left: 0; }
  .rs-day:nth-child(n+3) { border-top: 1px dashed rgba(var(--ink), .18); }
  .rs-stub { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; border-top: 2px dashed rgba(var(--ink), .22); }
  .rs-stub p { margin: 0; }
  .rs-stub .nt-btn { width: auto; }
  .rs-stub .rs-said { grid-column: 1 / -1; }
  .rs-row { grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 20px; padding: 16px 0; }
  .rs-row svg { width: 76px; height: 76px; border-radius: 16px; }
  .rs-row b { font-size: 21px; }
  .rs-know-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .rt-time { font-size: 20px; }
  .rt-ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-cell { border-top: 1px dashed rgba(var(--ink), .18); }
  .rt-cell:nth-child(-n+2) { border-top: 0; }
  .rt-cell:nth-child(even) { border-left: 1px dashed rgba(var(--ink), .18); }
  .rt-cell:first-child { grid-column: 1 / -1; border-left: 0; }
  .rt-cell:first-child + .rt-cell { border-top: 1px dashed rgba(var(--ink), .18); border-left: 0; }
  .rt-cell:nth-child(3) { border-left: 1px dashed rgba(var(--ink), .18); border-top: 1px dashed rgba(var(--ink), .18); }
  .rt-cell:nth-child(4) { border-left: 0; }
  .rt-cell:nth-child(5) { border-left: 1px dashed rgba(var(--ink), .18); }
  .rt-phases { grid-template-columns: var(--phases, 1fr 1fr 1fr); gap: 0; }
  .rt-phases span { padding-right: 24px; }
  .rt-more-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rt-sunset { height: 460px; }
  .rt-sunset::before { left: 20px; top: 132px; width: 260px; height: 260px; }
  .rt-sunset::after { top: 262px; }
  .rt-planb dl > div { grid-template-columns: 180px 1fr; column-gap: 24px; }
}
@media (min-width: 900px) {
  .rt { --tc: 112px; --dc: 30px; --cg: 32px; --lw: 6px; --pad: 96px; --sm: 56px; --wp: 40px; }
  .rs-hero { padding-top: 72px; }
  .rs-prog { grid-template-columns: repeat(var(--days, 3), minmax(0, 1fr)) 250px; }
  .rs-day, .rs-day:nth-child(odd), .rs-day:nth-child(n+3) { border-top: 0; border-left: 1px dashed rgba(var(--ink), .18); }
  .rs-day:first-child { border-left: 0; }
  .rs-day { padding: 26px 28px 28px; }
  .rs-day svg { height: 150px; }
  .rs-day h3 { font-size: 26px; }
  .rs-prog.is-long { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rs-prog.is-long .rs-day:nth-child(4n+1) { border-left: 0; }
  .rs-prog.is-long .rs-day:nth-child(n+5) { border-top: 1px dashed rgba(var(--ink), .18); }
  .rs-stub { grid-column: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 26px 24px 24px; border-top: 0; border-left: 2px dashed rgba(var(--ink), .22); }
  .rs-prog.is-long .rs-stub { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; border-left: 0; border-top: 2px dashed rgba(var(--ink), .22); }
  .rs-stub b { font-size: 64px; }
  .rs-stub p { margin-bottom: auto; }
  .rs-stub .nt-btn { width: 100%; }
  .rs-prog.is-long .rs-stub .nt-btn { width: auto; }
  .rs-menu { grid-template-columns: 1fr 1fr; column-gap: 72px; padding-top: 128px; }
  .rs-know { margin-top: 128px; padding: 80px 0 88px; }
  .rs-know-row { column-gap: 56px; }
  .rs-from { grid-template-columns: minmax(0, 600px) 1fr; column-gap: 88px; align-items: center; padding-top: 112px; }
  .rt-hero { grid-template-columns: minmax(0, 610px) minmax(0, 1fr); column-gap: 64px; align-items: start; padding-top: 36px; }
  .rt-hero-txt { padding-top: 48px; }
  .rt-facts { gap: 36px; }
  .rt-ticket { grid-template-columns: 1.15fr 1.1fr 1.1fr 1fr .9fr; margin-top: 56px; border-radius: 24px; }
  .rt-cell, .rt-cell:first-child, .rt-cell:nth-child(n) { grid-column: auto; padding: 26px 28px 28px; border-top: 0; border-left: 1px dashed rgba(var(--ink), .18); }
  .rt-cell:first-child { border-left: 0; }
  .rt-cell b { font-size: 24px; }
  .rt-cell b.is-num { font-size: 30px; }
  .rt-bar { margin-top: 72px; }
  .rt-phases b { font-size: 20px; }
  .rt-time { padding-top: 6px; font-size: 30px; letter-spacing: -.05em; }
  .rt-dot { margin-top: 7px; }
  .rt-stops > li.then-walk::before, .rt-stops > li.then-tram::before { top: 22px; }
  .rt-body { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 56px; padding-bottom: 40px; }
  .rt-body[data-has=""] { grid-template-columns: minmax(0, 640px); }
  .rt-side[data-place]:not([data-place=""]):empty { display: block; min-height: 300px; }
  .rt-go { min-height: 76px; }
  .rt-go > span:last-child { font-size: 13px; }
  .rt-no { width: 26px; height: 26px; font-size: 13px; }
  .rt-label { padding: 26px 28px 28px; }
  .rt-label b { font-size: 21px; }
  .rt-big span { font-size: 15px; }
  .rt-now { max-width: 520px; margin-left: calc(var(--tc) + var(--cg) + var(--dc) + var(--cg)); }
  .rt-sun-sec { padding-top: 24px; }
  .rt-sunset { height: 560px; }
  .rt-sunset::before { left: calc(max(0px, (100vw - 1600px) / 2) + var(--wp) + var(--lx) - 150px); top: 168px; width: 300px; height: 300px; box-shadow: 0 0 0 60px rgba(255, 180, 106, .1), 0 0 0 150px rgba(255, 180, 106, .05); }
  .rt-sunset::after { top: 318px; }
  .rt-sunline { top: -48px; height: 216px; }
  .rt-sunset-in > div { bottom: 64px; left: auto; right: 0; width: min(62%, 860px); display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 56px; }
  .rt-sunset p { justify-self: end; }
  .rt-planb { grid-template-columns: 5fr 7fr; column-gap: 64px; padding-top: 112px; }
  .rt-planb dl > div { grid-template-columns: 200px 1fr; padding: 24px 0 26px; }
  .rt-planb dt { font-size: 21px; }
  .rt-more { padding-top: 112px; }
  .rt-more-row { gap: 20px; margin-top: 32px; }
  .rt-card svg { height: 190px; }
  .rt-card b { font-size: 22px; }
}
@media (min-width: 1200px) {
  .rt-body { grid-template-columns: minmax(0, 1fr) 440px; column-gap: 64px; }
}
/* The sun line stands on the day's line, wherever the wrap is on a wide screen. */
.rt-sunset .wrap { position: relative; height: 100%; }
.rt-sunline { left: calc(var(--wp) + var(--lx)); }

@media (prefers-reduced-motion: reduce) {
  .rs-day, .rs-day h3, .rs-row b, .rt-place b, .rt-card b, .rt-here { transition: none !important; }
}

/* ═══════════════ Printed: the sheet for guests, black line on white, one A4 ═══════════════ */
@media print {
  @page { size: A4; margin: 12mm 12mm 10mm; }
  html, body { background: #FFF !important; }
  body > *:not(main), .rt > *:not(.rt-sheet) { display: none !important; }
  .rt-sheet { display: grid !important; grid-template-columns: 1fr 62mm; column-gap: 9mm; color: #121211; font-family: Geologica, system-ui, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rt-sheet * { box-sizing: border-box; }
  .rs-sheet { grid-template-columns: 1fr; }
  .sh-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 3.5mm; border-bottom: 2px solid #121211; }
  .sh-logo { font-size: 18px; font-weight: 600; letter-spacing: -.04em; }
  .sh-mono { font: 500 9.5px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #6B6862; }
  .rt-sheet h1 { grid-column: 1 / -1; margin: 6mm 0 0; font-size: 44px; font-weight: 500; line-height: .95; letter-spacing: -.05em; }
  .sh-when { grid-column: 1 / -1; margin-top: 2.5mm; font-size: 14px; color: #3A3936; }
  .sh-day { margin-top: 6mm; border-top: 1px solid #121211; }
  .sh-day li { display: grid; grid-template-columns: 12mm 1fr; column-gap: 3mm; padding: 1.7mm 0 1.9mm; border-bottom: 1px solid #DAD7D0; break-inside: avoid; }
  .sh-day li:last-child { border-bottom: 0; }
  .sh-day time { font: 500 12.5px "JetBrains Mono", monospace; letter-spacing: -.02em; }
  .sh-day b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
  .sh-day span { display: block; margin-top: .3mm; font: 500 10.5px "JetBrains Mono", monospace; color: #3A3936; }
  .sh-day em { display: block; margin-top: .4mm; font-style: normal; font-size: 11px; color: #6B6862; }
  .sh-day li.is-way b::before { content: attr(data-no); display: inline-grid; place-items: center; min-width: 4.4mm; height: 4.4mm; margin-right: 1.5mm; padding: 0 .8mm; border-radius: 2.2mm; border: 1.5px solid #121211; font-size: 9.5px; font-weight: 600; vertical-align: 1px; }
  .sh-day li.is-way[data-no=""] b::before { display: none; }
  .sh-side { margin-top: 6mm; display: flex; flex-direction: column; gap: 4.5mm; }
  .sh-side svg { display: block; width: 100%; height: auto; }
  .sh-side svg .sea { fill: none; stroke: #121211; stroke-width: 2; stroke-dasharray: 3 7; }
  .sh-side svg .walk, .sh-side svg .tram { fill: none; stroke: #121211; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
  .sh-side svg .walk { stroke-dasharray: 0 22; }
  .sh-box { padding-top: 2.5mm; border-top: 1px solid #121211; }
  .sh-box b { display: block; margin-top: 1.5mm; font-size: 13.5px; font-weight: 600; }
  .sh-box p { margin: 1mm 0 0; font-size: 11.5px; line-height: 1.45; color: #3A3936; }
  .sh-phone { margin-top: 4mm; height: 1px; background: #121211; }
  .sh-sos { display: flex; align-items: baseline; gap: 2.5mm; margin-top: 2mm; }
  .sh-sos strong { font: 500 28px/1 "JetBrains Mono", monospace; letter-spacing: -.05em; }
  .sh-say li { margin-top: 1.8mm; font-size: 11.5px; line-height: 1.35; }
  .sh-say li i { display: block; font-style: normal; font-weight: 600; }
  .sh-qr { display: grid; grid-template-columns: 20mm 1fr; column-gap: 3mm; align-items: center; }
  .sh-qr img { width: 20mm; height: 20mm; }
  .sh-qr p { margin: 0; font-size: 11px; line-height: 1.4; color: #3A3936; }
  .sh-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 5mm; padding-top: 2.5mm; border-top: 1px solid #DAD7D0; }
  .rt-sheet ol, .rt-sheet ul { margin: 0; padding: 0; list-style: none; }
  .rt-sheet p { margin: 0; }
}