/* Романов на Волге — «Как было, только лучше», вариант «Синие ленты»: кирпич и Волга. */

@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dela-gothic-one-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Dela Gothic One';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dela-gothic-one-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Jost';font-style:normal;font-weight:400 500;font-display:swap;src:url('../fonts/jost-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 500;font-display:swap;src:url('../fonts/jost-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/pt-sans-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/pt-sans-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/pt-sans-700-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/pt-sans-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
	--paper:#f4f5f3;
	--paper-2:#e6eae8;
	--ink:#1f2326;
	--soft:#5c6268;
	--faint:#a5abaf;
	--hair:#d6dad8;
	--brick:#9b3a26;
	--blue:#2b5f8e;
	--footer:#1d2b38;
	--footer-ink:#e9eef2;
	--footer-hover:#9cc4e8;
	--display:"Jost",system-ui,sans-serif;
	--poster:"Dela Gothic One","Jost",sans-serif;
	--text:"PT Sans",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--hair) var(--paper)}
html{background:var(--footer)}
body{margin:0;background:var(--footer);color:var(--ink);font:17px/1.65 var(--text);-webkit-font-smoothing:antialiased;text-align:center}
main{background:var(--paper)}
::selection{background:var(--brick);color:#fff}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--brick)}
:focus-visible{outline:1.5px solid var(--brick);outline-offset:4px}
img{max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
h2{font:500 clamp(30px,3.6vw,44px)/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--brick);margin-bottom:clamp(28px,4vw,48px);text-wrap:balance}
/* front-page section headings: angled Volga-blue tape */
main section h2,.tape{display:inline-block;background:var(--blue);color:var(--paper);font:400 clamp(24px,3.6vw,44px)/1 var(--poster);letter-spacing:.01em;padding:.24em .5em .16em;transform:rotate(-1.6deg)}
main section:nth-of-type(even) h2{transform:rotate(1.3deg)}
h3{font:500 21px/1.3 var(--display);text-wrap:balance}
h3 a{text-decoration:none}
h3 a:hover{text-decoration:underline}
[hidden]{display:none!important}
.is-off{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:10}
.skip:focus{left:8px}
.skip:hover{color:var(--footer-hover)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.col{max-width:760px;margin:0 auto;padding:0 20px}
.wide{max-width:1120px;margin:0 auto;padding:0 20px}
.divider{height:1px;max-width:640px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--hair) 20%,var(--hair) 80%,transparent)}
main section{padding:clamp(64px,9vw,120px) 0}
.note{font-size:14px;color:var(--soft);margin-top:20px}

/* text tabs / filters */
.textnav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;font-size:16px}
.textnav a{text-decoration:none;color:var(--soft)}
.textnav a:hover{color:var(--brick)}
.textnav button{all:unset;cursor:pointer;color:var(--soft);border-bottom:1px solid transparent;padding-bottom:1px}
.textnav button:hover{color:var(--ink)}
.textnav button[aria-pressed=true]{color:var(--ink);border-color:var(--brick)}
.textnav button:focus-visible{outline:1.5px solid var(--brick);outline-offset:4px}

/* hero */
.hero{position:relative;min-height:min(74svh,640px);padding:72px 0 92px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(180deg,#dfe6ea,#d3dcdc 70%,#c9d2cd)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-text{position:relative;z-index:1;padding:0 20px}
/* With a photo, a soft shade sits behind the words only (no panel), so title, subline and next departure stay legible. */
.hero:not(.hero--empty)::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 90% 42% at 50% 50%,rgba(16,22,26,.52),rgba(16,22,26,.18) 60%,transparent 85%)}
.hero--dark:not(.hero--empty)::after{background:radial-gradient(ellipse 90% 42% at 50% 50%,rgba(244,245,243,.82),rgba(244,245,243,.35) 60%,transparent 85%)}
.hero .down{z-index:1}
.hero-credit{position:absolute;right:16px;bottom:14px;z-index:1;margin:0;font-size:12px;opacity:.75;text-shadow:0 1px 2px rgba(0,0,0,.45)}
@media (max-width:600px){.hero-credit{bottom:auto;top:12px}} /* clear of the down arrow */
.hero h1{font:400 clamp(30px,5.8vw,88px)/1.02 var(--poster);letter-spacing:0}
.hero h1 i{font-style:normal;color:var(--blue)}
.hero--light h1 i{color:var(--footer-hover)}
.hero p{margin-top:16px;font-size:clamp(15px,1.4vw,18px)}
.hero--light{color:#fff}
.hero--light .hero-text{text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero--light .hero-text p{text-shadow:0 1px 2px rgba(0,0,0,.45),0 0 22px rgba(0,0,0,.45)}
.hero .down{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:block;line-height:0;padding:6px;color:inherit}

/* reasons */
#zachem .wide{max-width:1180px}
.programme{list-style:none;margin:0;padding:0}
.programme li{padding:14px 0}
.programme .big{display:block;font:400 clamp(28px,5vw,64px)/1 var(--poster);text-transform:uppercase;text-wrap:balance}
.programme li:nth-child(3n+1) .big{color:var(--brick)}
.programme li:nth-child(3n+2) .big{color:transparent;-webkit-text-stroke:1.4px var(--blue)}
.programme .sm{display:block;color:var(--soft);font-size:16px;margin-top:6px}
.programme .sm a{color:var(--blue);white-space:nowrap}
/* sizes are deliberately unrelated: set per item by rnv_programme_size() */
.programme .big{font-size:clamp(var(--min),var(--fluid),var(--max))}

/* events: front page = a row of big dates (Плакат) */
/* events: archive and lists */
.events{list-style:none;margin:32px 0 0;padding:0}
.events li{padding:18px 0;border-bottom:1px solid var(--hair)}
.events li:first-child{border-top:1px solid var(--hair)}
.when{font:500 15px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--brick)}
.events h3{margin-top:4px}
.where{color:var(--soft);font-size:15px}

/* transport */

/* map */
#karta .textnav{margin-bottom:32px}
.rnv-pin{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:500 13px/1 var(--display);color:var(--paper);background:var(--ink);border:2px solid var(--paper);box-shadow:0 1px 3px rgba(31,35,38,.3);cursor:pointer}
.rnv-pin--eat{background:var(--brick)}
.rnv-pin--stay{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.rnv-pin.is-on{transform:scale(1.25)}
.map{position:relative;z-index:0}
.map.leaflet-container{font-family:var(--text);background:var(--paper-2)}
.rnv-pin-wrap{background:none;border:0}
/* tiles arrive greyed to the paper tone (inc/tiles.php); only raw ones from a server without GD get tinted here */
.map img.is-raw{filter:grayscale(1) contrast(.88) brightness(1.06)}
/* Leaflet 1.9 blends tiles with plus-lighter; over our light background that shows white seams */
.map.leaflet-container img.leaflet-tile{mix-blend-mode:normal}
.map .leaflet-control-attribution{font:11px/1.4 var(--text);background:rgba(244,245,243,.88);color:var(--soft)}
.map .leaflet-control-attribution a{color:var(--soft)}
.map .leaflet-bar a{color:var(--ink);border-color:var(--hair)}
.map .leaflet-bar{border:1px solid var(--hair);box-shadow:none}
@media (max-width:600px){.map{height:380px}}

/* stay / eat / see */
.item-links{font-size:15px;color:var(--soft)}

/* front page content: anything editors write on the front page (its gallery becomes the strip) */
.front-content{padding:clamp(48px,8vw,96px) 0}
.front-content>*{max-width:760px;margin-left:auto;margin-right:auto;padding:0 20px}
.front-content figcaption{font-size:13px}

/* Photos on the front page: a film strip of the first eight. One photo at a time on a phone
   with the next peeking in, a thin progress line and a count; tap opens it full screen (site.js). */
.photos{padding:clamp(48px,8vw,96px) 0}
.photo-strip{display:flex;gap:10px;padding:0 20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.photo-strip::-webkit-scrollbar{display:none}
.photo-strip figure{flex:0 0 82%;margin:0;scroll-snap-align:start;aspect-ratio:4/3;background:var(--paper-2);cursor:zoom-in}
.photo-strip img{width:100%;height:100%;object-fit:cover;display:block}
.strip-meta{display:flex;align-items:center;gap:16px;padding:14px 20px 0;font:500 13px var(--display);letter-spacing:.1em;color:var(--soft)}
.strip-bar{flex:1;height:1px;background:var(--hair);position:relative;overflow:hidden}
.strip-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
.strip-nav{display:none;gap:4px}
.strip-nav button{background:none;border:0;padding:11px;color:var(--ink);cursor:pointer;line-height:0}
.strip-nav button:disabled{color:var(--faint);cursor:default}
.strip-all{margin:18px 20px 0;text-align:right;font-size:16px}
.strip-all a{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap)}
/* with JS the link joins the count row as a blue action */
.strip-meta .strip-all{margin:0;padding:0;max-width:none;flex:none;font:400 16px var(--text);letter-spacing:0}
.strip-meta .strip-all a{color:var(--blue)}
.strip-meta .strip-all a:hover{color:var(--brick)}
@media (min-width:900px){
	/* desktop: the strip scrolls inside a centred frame instead of running off the right edge */
	.photo-strip{width:min(1200px,100% - 40px);margin:0 auto;padding:0;scroll-padding:0;gap:14px}
	.photo-strip figure{flex:0 0 auto;height:340px;aspect-ratio:auto}
	.photo-strip img{width:auto}
	.strip-meta{width:min(1200px,100% - 40px);margin:0 auto;padding:14px 0 0}
	.strip-all{max-width:1200px;margin-left:auto;margin-right:auto;padding:0 20px}
	.strip-nav{display:flex}
}

/* The «Галерея» page: columns that keep every photo whole (posters are never cropped) */
.photos-page .tape{margin:0 0 clamp(28px,4vw,48px);text-transform:uppercase}
.photos-intro{max-width:640px;margin:0 auto 32px}
.photo-grid{columns:2;column-gap:8px;text-align:left}
.photo-grid figure{margin:0 0 8px;break-inside:avoid;background:var(--paper-2);cursor:zoom-in}
.photo-grid img{display:block;width:100%;height:auto}
.photo-grid figcaption{padding:6px 2px 4px;font-size:13px;color:var(--soft);background:var(--paper)}
@media (min-width:700px){.photo-grid{columns:3;column-gap:12px}.photo-grid figure{margin-bottom:12px}}
@media (min-width:1100px){.photo-grid{columns:4;column-gap:14px}.photo-grid figure{margin-bottom:14px}}

/* Full-screen viewer: the same strip, one photo per screen, swipe or arrows */
.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#101417;color:#e9eef2}
.viewer::backdrop{background:#101417}
.viewer-strip{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.viewer-strip::-webkit-scrollbar{display:none}
.viewer-strip figure{flex:0 0 100%;margin:0;display:grid;place-items:center;scroll-snap-align:center;padding:56px 0 64px}
.viewer-strip img{max-width:100%;max-height:100%;object-fit:contain}
.viewer-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 12px 0 20px;font:500 13px var(--display);letter-spacing:.1em}
.viewer-top button{background:none;border:0;color:inherit;min-width:var(--tap);min-height:var(--tap);display:grid;place-items:center;padding:0;cursor:pointer}
.viewer-top button svg{display:block}
.viewer-nav{position:absolute;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:28px}
.viewer-nav button{background:none;border:0;color:inherit;min-width:var(--tap);min-height:var(--tap);display:grid;place-items:center;cursor:pointer}
.viewer-nav button:disabled{opacity:.3;cursor:default}

/* кофешт@б */
.shtab p{color:var(--ink);margin:14px auto 0;max-width:32em}
.shtab-ph{margin:0 auto 26px;max-width:760px}
.shtab-ph img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.shtab .site{margin-top:36px}
.btn{display:inline-block;background:var(--blue);color:var(--paper);font:400 clamp(18px,2vw,22px)/1 var(--poster);text-transform:uppercase;letter-spacing:.02em;padding:.78em 1.3em .66em;text-decoration:none;transform:rotate(-1.6deg);box-shadow:0 16px 26px -16px rgba(31,35,38,.55);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.btn:hover{color:var(--paper);transform:rotate(0) translateY(-2px);box-shadow:0 20px 30px -16px rgba(31,35,38,.6)}
.btn:active{transform:rotate(0)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* footer */
.site-footer{background:var(--footer);color:var(--footer-ink);padding:64px 20px}
.footer-title{font:500 22px var(--display);letter-spacing:.08em;text-transform:none;color:inherit;margin:0}
.site-footer p{margin-top:12px}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
.footer-links a{min-height:var(--tap);display:inline-flex;align-items:center}
a[href^="tel:"]{padding:10px 0}
.site-footer a:hover{color:var(--footer-hover)}
.site-footer :focus-visible{outline-color:var(--footer-hover)}

/* inner pages */
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 24px;border-bottom:1px solid var(--hair);text-align:left}
.bar-name{font:500 15px var(--display);letter-spacing:.16em;text-decoration:none}
.page{padding:clamp(48px,8vw,96px) 0}
.page-title{font:500 clamp(30px,4vw,46px)/1.1 var(--display);letter-spacing:.04em;margin:8px 0 24px;text-wrap:balance}
.entry .where{margin-bottom:24px}
.entry-img{margin:0 0 32px}
.entry-content{text-align:left;font-size:18px}
.entry-content>*+*{margin-top:1em}
.entry-content h2{font-size:26px;text-transform:none;letter-spacing:.02em;margin:1.6em 0 .4em}
.entry--short{padding:20px 0;border-bottom:1px solid var(--hair)}
.entry-title{font:500 22px var(--display);margin:0}
.entry-title a{text-decoration:none}
.page .item-links{margin-top:28px}
.back{margin-top:48px;font-size:15px}
.back a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--soft)}
.back a:hover{color:var(--brick)}
.nav-links{display:flex;justify-content:center;gap:20px;margin-top:32px}

@media (max-width:600px){.hero h1{font-size:clamp(30px,11.2vw,44px);line-height:1.05}}
/* the narrowest phones (320–380px): tapes and the map legend tighten so nothing touches the edge */
@media (max-width:380px){main section h2,.tape{font-size:clamp(19px,6.2vw,24px)}#karta .textnav{gap:0 10px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* ─────────────── Phone-first layout ───────────────
   The phone is the main design; ≥900px adapts it. Tap targets ≥44px,
   iPhone safe areas respected, no boxes: rows, hairlines and text actions. */
:root{--tap:44px}
html.no-scroll{overflow:hidden}
main section{padding:52px 0 56px}
@media (min-width:900px){main section{padding:clamp(72px,9vw,120px) 0}.hero{min-height:100svh}}

/* hero: the next departure right under the title */

/* text tabs and filters: full-height tap targets */
.textnav{gap:0 18px;flex-wrap:nowrap;overflow-x:auto;justify-content:safe center;margin:0 -20px;padding:0 20px;scrollbar-width:none}
.textnav::-webkit-scrollbar{display:none}
.textnav button{flex:none;white-space:nowrap}
@media (min-width:900px){.textnav{flex-wrap:wrap;overflow:visible;margin:0;padding:0}}
.textnav button{min-height:var(--tap);display:inline-flex;align-items:center;padding:0 2px}

/* «Ради чего ехать»: the poster, tighter on a phone */
.programme li{padding:10px 0}
.programme .sm{font-size:15px;margin:4px auto 0;max-width:34ch}

/* actions: plain text links, each a full tap target */
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;font-size:15px}
.acts a,.acts button{all:unset;cursor:pointer;min-height:var(--tap);display:inline-flex;align-items:center;color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.acts a:hover,.acts button:hover{color:var(--brick)}
.acts a:focus-visible,.acts button:focus-visible{outline:1.5px solid var(--brick);outline-offset:2px}
.acts--center{justify-content:center}

/* Афиша: dates you swipe sideways on a phone, a row of four on desktop */
.col--bleed{max-width:none;padding:0}
.col--bleed>.note,.col--bleed>.more{padding:0 20px}
.col--bleed>.textnav{margin:0}
.bill{list-style:none;margin:20px 0 0;padding:0 20px 6px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,78%);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 20px;text-align:left;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bill::-webkit-scrollbar{display:none}
.bill li{scroll-snap-align:start;display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:14px}
.bill .d{display:block;font:400 72px/1 var(--poster);color:var(--blue)}
.bill .m{display:block;font:500 13px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:10px 0 8px}
.bill b{display:block;font:500 19px/1.25 var(--display)}
.bill b a{text-decoration:none}
.bill b a:hover{text-decoration:underline}
.bill .w{color:var(--soft);font-size:15px;margin-top:2px}
.bill .acts{margin-top:16px;gap:0 18px}
.more{margin-top:18px;font-size:16px}
.more a{color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap)}
.more a:hover{color:var(--brick)}
.more .arrow{margin-left:8px}
@media (min-width:900px){
	.col--bleed{max-width:1080px;padding:0 20px}
	.col--bleed>.textnav,.col--bleed>.note,.col--bleed>.more{padding:0}
	.bill{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;padding:0;gap:28px}
	.bill .d{font-size:clamp(60px,7vw,96px)}
}

/* Как доехать: one row per way of travelling, opened by tap */
#doehat .col{max-width:640px}
.leg{text-align:left;border-top:1px solid var(--hair)}
[data-pane]>.leg:last-child{border-bottom:1px solid var(--hair)}
.leg summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;cursor:pointer}
.leg summary::-webkit-details-marker{display:none}
.leg summary:focus-visible{outline:1.5px solid var(--brick);outline-offset:2px}
.leg-name{font:500 20px var(--display)}
.leg-next{display:flex;align-items:center;gap:12px;color:var(--blue);font:500 16px var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.leg-next::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .25s}
.leg[open] .leg-next::after{transform:translateY(2px) rotate(-135deg)}
.leg.is-closing .leg-next::after{transform:translateY(-3px) rotate(45deg)}
.leg>p{color:var(--soft);margin:0 0 14px;max-width:60ch}
.leg>p.acts{color:inherit;margin-top:-6px}
.times{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;margin:0 -20px 10px;padding:0 20px 4px;scroll-snap-type:x proximity;scrollbar-width:none;font-size:18px;font-variant-numeric:tabular-nums}
.times::-webkit-scrollbar{display:none}
@media (max-width:899px){.times{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}}
.times .t{flex:none;min-width:64px;min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-bottom:2px solid var(--hair);scroll-snap-align:start}
.times .past{color:var(--soft);text-decoration:line-through 1px var(--faint)}
.times .next{color:var(--blue);font-weight:700;border-bottom-color:var(--blue)}
@media (min-width:900px){.times{flex-wrap:wrap;margin:0 0 10px;padding:0}}

/* Места: map strip + one list (phone); map left, list right (desktop) */
.places{display:grid;margin-top:16px}
.map-wrap{position:relative;margin:0 -20px}
.map{height:46svh;min-height:260px;max-height:440px}
.map-toggle{all:unset;cursor:pointer;position:absolute;top:12px;right:12px;z-index:500;min-height:var(--tap);padding:0 14px;display:inline-flex;align-items:center;background:var(--paper);color:var(--ink);font:500 14px var(--display);box-shadow:0 2px 8px rgba(31,35,38,.18)}
.map-toggle:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
.map-hint{position:absolute;left:12px;bottom:12px;z-index:500;margin:0;padding:4px 8px;font-size:12px;color:var(--soft);background:rgba(244,245,243,.92);pointer-events:none}
@media (pointer:fine){.map-hint{display:none}}
.map-wrap.is-full{position:fixed;inset:0;margin:0;z-index:1000;background:var(--paper)}
.map-wrap.is-full .map{height:100%;max-height:none}
.map-wrap.is-full .map-toggle{top:calc(12px + env(safe-area-inset-top))}
.map-wrap.is-full .map-hint{display:none}
.map-card{padding:16px 20px 6px;text-align:left;border-bottom:1px solid var(--hair)}
.map-wrap.is-full .leaflet-bottom.leaflet-right{bottom:auto;top:calc(64px + env(safe-area-inset-top))}
.map-card:empty{display:none}
.map-card h3{display:flex;align-items:center;gap:10px}
.map-card p{color:var(--soft);margin-top:4px}
.map-card p.acts{color:inherit}
.n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;font:500 13px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--paper);background:var(--ink)}
.n--eat{background:var(--brick)}
.n--stay{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.rnv-pin{width:30px;height:30px;font-size:13px}
@media (min-width:900px){
	.map-wrap{grid-column:1;margin:0;position:sticky;top:76px}
	.map{height:min(70vh,600px);max-height:none}
	.map-toggle,.map-hint{display:none}
	.map-card{padding:16px 0 6px}
}

/* Кофешт@б */
.shtab .acts{margin-top:6px}

@media (prefers-reduced-motion:reduce){.leg-next::after{transition:none}}

.hero .down{padding:12px}

/* ── front page, round 11 ("Течение"): notes from the mockups v7–v11 ── */
/* ── v7 draft base ── */
/* The theme's inner-page rule `.page{padding:…}
` also matched <body class="page"> on a static
   front page: that was the strip above the photo and the white strip under the footer. */
body.page{padding:0}
.site-footer{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
.made-by{margin-top:26px;font-size:14px;opacity:.75}
.karta .textnav{margin-bottom:22px}
/* map filters wrap rather than clip, and double as the pin legend */
#karta .textnav{flex-wrap:wrap;overflow:visible;margin:0 0 22px;padding:0;gap:0 18px;justify-content:center}
[data-mapfilter]:not([data-mapfilter=all])::before{content:"";width:10px;height:10px;border-radius:50%;margin-right:7px;flex:none;background:var(--ink)}
[data-mapfilter=stay]:not([data-mapfilter=all])::before{background:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
[data-mapfilter=eat]:not([data-mapfilter=all])::before{background:var(--brick)}
.mf-short{display:none}
@media (max-width:599px){.mf-long{display:none}.mf-short{display:inline}#karta .textnav{gap:0 14px}}
.karta .map-wrap{max-width:1000px;margin-left:auto;margin-right:auto;position:relative;top:auto}
.karta .map-card{position:relative;max-width:640px;margin:40px auto 0;padding:18px 44px 10px 20px;text-align:left;border-bottom:1px solid var(--hair)}
.karta .map-card[hidden]{display:none}
.karta .map-card:not([hidden])+.map-note{display:none}
.map-note{margin-top:14px;font-size:14px;color:var(--soft)}
.card-close{all:unset;cursor:pointer;position:absolute;top:8px;right:4px;width:44px;height:44px;display:grid;place-items:center;font:400 26px/1 var(--display);color:var(--soft)}
.card-close svg{display:block}
.card-close:hover{color:var(--brick)}
.card-close:focus-visible{outline:1.5px solid var(--brick)}
/* crowded map, zoomed out: small dots instead of numbered pins (variant «точки») */
.map.is-far .rnv-pin{width:14px;height:14px;font-size:0;border-width:2px;transform:translate(8px,8px)}
.map.is-far .rnv-pin.is-on{width:30px;height:30px;font-size:13px;transform:none}
/* nearby places merged into one counted circle (variant «группы») */
.rnv-cluster{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:500 14px/1 var(--display);color:var(--paper);background:var(--blue);border:3px solid var(--paper);box-shadow:0 1px 4px rgba(31,35,38,.35);cursor:pointer}
@media (min-width:900px){.karta .map{height:min(64vh,560px);max-height:none}
}
html,body{overflow-x:clip}
.place-ph{margin:0;position:relative;overflow:hidden;background:var(--paper-2)}
.place-text h3{font-size:20px;display:flex;align-items:center;gap:10px}
.place h3 .n{width:26px;height:26px;font-size:12px}
/* with a photo, the number sits on the photo's corner (like a pin) */
.place-ph .n{position:absolute;left:6px;top:6px;z-index:1;box-shadow:0 0 0 2px var(--paper)}
.place-ph .n--stay{background:var(--paper)}
.place-text p{color:var(--soft);margin-top:4px}
.place-text p.acts{color:inherit}
.place{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;text-align:left;padding:18px 0;border-top:1px solid var(--hair)}
.place-list{margin-top:8px;border-bottom:1px solid var(--hair)}
/* a place without a photo yet is just its text, full width */
.place.place--text{grid-template-columns:minmax(0,1fr)}
.place-ph{aspect-ratio:1}
.place .acts{justify-content:flex-start}
@media (min-width:900px){.place{grid-template-columns:140px minmax(0,1fr);gap:24px}
}
/* text simply appears; photos are shown as they are */
html.anim [data-anim] .place-text,html.anim section h2,html.anim .programme li,html.anim .bill,html.anim .leg,html.anim .karta .map-wrap{opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 70ms)}
html.anim [data-anim] .place-text{transition-delay:.2s}
html.anim .in .place-text,html.anim .in{opacity:1!important}
html.anim .now,html.anim .now *{transition:none!important}
@media (prefers-reduced-motion:reduce){html.anim *{transition:none!important;animation:none!important}
html.anim [data-anim] .place-text,html.anim section h2,html.anim .programme li,html.anim .bill,html.anim .leg,html.anim .karta .map-wrap{opacity:1!important}
}
.hero{position:sticky;top:0;z-index:0}
main>*:not(.hero){position:relative;z-index:1;background:var(--paper)}
.site-footer{position:relative;z-index:1}
main>.hero+*{box-shadow:0 -24px 40px -28px rgba(16,22,26,.45)}
.hero-shade{position:absolute;inset:0;background:#10161a;opacity:0;pointer-events:none;z-index:1}
html.anim .hero-img{animation:rnv-push 14s cubic-bezier(.16,1,.3,1) both}
@keyframes rnv-push{from{transform:scale(1.08)}
to{transform:scale(1)}
}
/* Афиша dates: each digit rolls up a 0–9,0–9 strip to its value (site.js); the hidden <i> keeps the digit's own width */
.bill .roll{white-space:nowrap}
.bill .rc{position:relative;display:inline-block;vertical-align:top;height:1em;clip-path:inset(0 -.5em)}
.bill .rc>i{font-style:normal;visibility:hidden}
.bill .rs{position:absolute;left:50%;top:0;width:max-content;line-height:1;text-align:center;transform:translate(-50%,0);transition:transform 1.5s cubic-bezier(.22,1,.36,1) var(--s,0ms);will-change:transform}
.bill.rolled .rs{transform:translate(-50%,calc((10 + var(--v)) * -5%))}
html.anim .programme li{opacity:1!important}
.programme .big{will-change:transform}
html.anim [data-anim] .place-text,html.anim section h2,html.anim .bill,html.anim .leg,html.anim .karta .map-wrap{opacity:0;transform:translateY(10px);transition:opacity 1.2s cubic-bezier(.33,1,.68,1),transform 1.4s cubic-bezier(.33,1,.68,1);transition-delay:calc(var(--i,0) * 90ms)}
html.anim section h2{transform:translateY(10px) rotate(-1.6deg)}
html.anim main section:nth-of-type(even) h2{transform:translateY(10px) rotate(1.3deg)}
html.anim [data-anim] .place-text{transition-delay:.18s}
html.anim .in .place-text,html.anim .in:not(h2){opacity:1!important;transform:none!important}
html.anim section h2.in{opacity:1!important;transform:rotate(-1.6deg)!important}
html.anim main section:nth-of-type(even) h2.in{transform:rotate(1.3deg)!important}

/* Hero stickiness is shared by phones and desktop. Mobile keeps the image
   unscaled so Safari does not repaint a transformed photograph during scroll. */
@media (prefers-reduced-motion:reduce){.hero{position:relative}.hero-shade{display:none}}

/* places: photo thumbnails from the featured image, a gradient when there is none */
.place-ph img{position:relative;display:block;width:100%;height:100%;object-fit:cover}


/* wide desktop: same sections, spread to fill the screen instead of a narrow phone column */
@media (min-width:1100px){
	.divider{max-width:min(1100px,100% - 40px)}
	#doehat .col{max-width:860px}
	.col--bleed{max-width:1200px}
	.places-sec .col{max-width:1200px}
	.place-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
	#karta .wide{max-width:1240px}
	.karta .map-wrap{max-width:1200px}
	.karta .map-card{max-width:860px}
	.shtab p{max-width:40em}
	.shtab-ph{max-width:960px}
}

/* Mobile reading: larger poster words, with no decorative motion or layer promotion. */
@media (max-width:899px),(pointer:coarse){
 .programme .big{font-size:clamp(calc(var(--min) * 1.16),calc(var(--fluid) * 1.16),calc(var(--max) * 1.16));line-height:1.08;will-change:auto}
 .hero-img{animation:none!important;transform:none!important;will-change:auto}
}

/* Centre reading text and related actions within their own content columns. */
.hero-text,.programme,.shtab,.site-footer{ text-align:center }
main section>.col,main section>.wide{ text-align:center }
.programme .sm,.shtab p{ margin-inline:auto }
.place-text{ text-align:center }
.place-text h3,.place .acts{ justify-content:center }
.leg>p{ text-align:center;margin-inline:auto }
.leg>p.acts{ justify-content:center }
.karta .map-card{ text-align:center;padding-inline:44px }
.map-card h3,.map-card .acts{ justify-content:center }
.strip-all{ text-align:center }

/* The text box stays symmetric; oversized unbroken words are fitted to this width. */
.programme .big{width:100%;max-width:100%;min-width:0;margin-inline:auto;text-align:center}

/* A missing hero photograph uses the high-contrast text palette. */
.hero--empty.hero--light{color:var(--ink)}
.hero--empty.hero--light h1 i{color:var(--blue)}
.hero--empty.hero--light .hero-text,.hero--empty.hero--light .hero-text p{text-shadow:none}
.map-status{max-width:60ch;margin:0 auto 18px;padding:0 20px;text-align:center;color:var(--soft)}

/* Mobile hero scrolls naturally with the page. */
@media(max-width:899px),(pointer:coarse){.hero{position:relative}.hero-shade{display:none}}