/* ==========================================================================
   DŮKAZ O SÍDLIŠTI — front-end styles (also loaded into the block editor).
   Sizes that came from the legacy site keep its formulas (e.g. calc(26px + 1vw)).
   ========================================================================== */

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
	--dos-ink: #000;
	--dos-paper: #fff;
	--dos-accent: #e4ca08;
	--dos-concrete: #d8d8d8;
	--dos-font: Archivo2, "Helvetica Neue", Arial, sans-serif;
	--dos-shadow-text: 6px 6px 14px rgb(0 0 0 / 8%);
	--dos-shadow-label: drop-shadow(0 5px 18px #000);
	--dos-menu-size: calc(26px + 1vw);
	--dos-mark-size: calc(42px + 3vw);
	--dos-bar-peek: 48px;      /* visible part of the collapsed menu bar on inner pages */
	--dos-ease: cubic-bezier(.45, 0, .2, 1);
	--dos-screen: 100svh;
	/* Breakpoints (one set for everything): phone < 576, tablet 576–991, desktop ≥ 992. */      /* viewport heights: only svh / lvh, never vh / dvh (browsers misreport the dynamic viewport) */
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
	/* Overscroll (rubber band, Lenis bounce) reveals the concrete, never white. */
	background: var(--dos-concrete);
	overscroll-behavior: none;
	/* No layout ever reflows because a scrollbar appears or disappears (page transitions, short
	   pages, the homepage / lightbox scroll lock): the track is always there. scrollbar-gutter
	   alone isn't enough — Chromium ignores it on the root in several cases. Overlay scrollbars
	   (macOS trackpads, phones) show nothing either way. */
	overflow-y: scroll;
	scrollbar-gutter: stable;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100svh;
	background: transparent;
	color: var(--dos-ink);
	font-family: var(--dos-font);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.15; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
:where(p, li):last-child { margin-bottom: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:focus-visible { outline: 2px solid var(--dos-accent); outline-offset: 2px; }

/* Lenis (from lenis.css) */
html.lenis, html.lenis body { height: auto; }
/* Lenis hides the overflow while stopped; we keep the track (see html) — Lenis itself blocks the wheel/touch scroll. */
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow-y: scroll; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* Scrollbar as on the legacy site */
@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar { width: 10px; }
	::-webkit-scrollbar-track-piece { background: var(--dos-paper); }
	::-webkit-scrollbar-thumb { background: #cbcbcb; outline: 2px solid var(--dos-paper); outline-offset: -2px; border: .1px solid #b7b7b7; }
	::-webkit-scrollbar-thumb:hover { background: #909090; }
}

/* Content guard (app.js → guard) for visitors: no text selection, no image dragging, no iOS
   "save image" callout on a long press. Form fields stay usable. */
body:not(.logged-in) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body:not(.logged-in) :is(input, textarea, select, [contenteditable]) { -webkit-user-select: text; user-select: text; }
body:not(.logged-in) img { -webkit-user-drag: none; }

/* ── Surface: fixed full-screen background (page setting) ─────────────── */

.dos-surface {
	position: fixed;
	/* lvh: never resizes with the browser toolbars; the extra 10 % covers the overscroll bounce */
	top: -10lvh; left: 0; right: 0;
	height: 120lvh;
	z-index: -1;
	pointer-events: none;
	background: var(--dos-concrete);
}
.dos-surface__layer {
	position: absolute;
	inset: 0;
	background: var(--dos-layer, none) center / cover no-repeat;
	opacity: 0;
	transition: opacity .6s var(--dos-ease);
}
.dos-surface__layer.is-active { opacity: 1; }
.dos-surface__layer.is-instant { transition: none; } /* switched under a covering page (app.js) */

/* ── Preloader (first load only) ──────────────────────────────────────── */

.dos-preloader {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 100lvh;
	z-index: 2147483600;
	display: grid;
	place-items: center;
	background: #cecece;
	color: var(--dos-paper);
	transition: opacity .6s var(--dos-ease), visibility 0s .6s;
}
.dos-preloader svg { width: 200px; height: auto; animation: dos-pulse 1.4s ease-in-out infinite alternate; }
.dos-ready .dos-preloader { opacity: 0; visibility: hidden; pointer-events: none; }
.dos-ready .dos-preloader svg { animation: none; }
@keyframes dos-pulse { from { opacity: .55; } to { opacity: 1; } }

/* ── Cursor "+" (fine pointers only) ──────────────────────────────────── */

.dos-cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
	html.dos-has-cursor, html.dos-has-cursor * { cursor: none !important; }
	.dos-cursor {
		display: block;
		position: fixed;
		top: 0; left: 0;
		z-index: 2147483646;
		color: var(--dos-paper);
		font: 400 var(--dos-mark-size) / 1 var(--dos-font);
		text-shadow: var(--dos-shadow-text);
		pointer-events: none;
		opacity: 0;
		transform: translate3d(-200px, -200px, 0) translate(-50%, -50%);
		transition: opacity .3s;
		will-change: transform;
	}
	.dos-cursor.is-visible { opacity: 1; }
}

/* ── Menu bar (≥ 992 px) ─────────────────────────────────────────────── */

.dos-bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 9000;
	/* Symmetric columns: the ✕ sits in the middle 40 px column, on the chevron's axis; links
	   and icons keep to their halves and can never run into it. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
	padding-top: 14px;
	height: 118px;
	background: linear-gradient(to bottom, rgb(0 0 0 / 33%) 0%, rgb(0 0 0 / 17%) 30%, rgb(0 0 0 / 0%) 100%);
	transition: transform .6s ease-in-out;
	/* Menu font: the legacy calc(26px + 1vw), capped so all links (--dos-menu-em wide, each with a
	   17 px margin) fit their half of the bar. */
	--dos-menu-size: min(calc(26px + 1vw), (50vw - 5px - 20px - 20px - 11px - var(--dos-menu-n, 3) * 17px) / var(--dos-menu-em, 12));
}
.dos-bar__nav { grid-column: 1; justify-self: start; min-width: 0; margin-left: 11px; } /* first link at 28 px, as on live */
.dos-bar__social { grid-column: 3; justify-self: end; }
.dos-bar__links, .dos-bar__social { list-style: none; margin: 0; padding: 0; display: flex; }
.dos-bar .dos-bar__social { margin-right: 31px; } /* icons end where the legacy ones did */
/* The legacy menu spaced the letters around a colon ("DO S:SOJČÁK", letter-spacing 3 px). */
.dos-bar__links .dos-colon { letter-spacing: 3px; }
.dos-bar__links a {
	position: relative;
	display: inline-block;
	margin-left: 17px;
	color: var(--dos-paper);
	font: 700 var(--dos-menu-size) / 1.6 var(--dos-font);
	letter-spacing: -1.4px;
	text-decoration: none;
	text-transform: uppercase;
	filter: drop-shadow(1px 1px 20px rgb(100 100 100 / 47%));
}
.dos-bar__links a::after {
	content: "";
	position: absolute;
	/* In em: the line keeps its place under the letters as the font scales down on tablets
	   (11 px / 4 px at the desktop size of 40.4 px). */
	left: 0; right: 0; bottom: .272em;
	margin: auto;
	width: 0;
	height: max(2px, .099em);
	background: var(--dos-paper);
	transition: width .3s;
}
.dos-bar__links a:hover::after, .dos-bar__links a:focus-visible::after { width: 101%; }
.dos-bar__social { gap: 12px; padding-top: 3px; }
.dos-social { display: block; filter: drop-shadow(1px 1px 20px rgb(100 100 100 / 47%)); }
.dos-social img { width: 60px; height: 60px; transition: transform .2s; }
.dos-social:hover img { transform: scale(1.05); }
.dos-bar__home {
	position: relative;
	grid-column: 2;
	/* Same line box as the menu links (font-size + line-height 1.6), so the ✕ shares their row. */
	width: 40px; height: 1.6em;
	font-size: var(--dos-menu-size);
	filter: drop-shadow(1px 1px 20px rgb(100 100 100 / 47%));
	transition: transform .2s;
}
/* ✕ from two 3 px strokes, centred in the same 40 px column as the chevron. */
.dos-bar__home::before, .dos-bar__home::after {
	content: "";
	position: absolute;
	/* Optical centre: Archivo2's cap height sits 0.029 em above the line centre
	   ((ascent − descent − capHeight) / 2 / unitsPerEm = (1872 − 501 − 1490) / 4096). */
	top: calc(50% - .029em); left: 50%;
	width: 36px; height: 3px;
	margin: -1.5px 0 0 -18px;
	background: var(--dos-paper);
	transform: rotate(45deg);
}
.dos-bar__home::after { transform: rotate(-45deg); }
.dos-bar__home:hover, .dos-bar__home:focus-visible { transform: scale(1.12); }
.dos-bar__hint {
	position: absolute;
	left: 50%; bottom: 0;
	width: 40px; height: 34px;
	margin-left: -20px;
	background: var(--dos-paper);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	filter: drop-shadow(6px -3px 30px #222);
	transition: opacity .6s ease-in-out;
	pointer-events: none;
}
/* Front page: bar open, nothing to go back to. Inner pages: bar collapsed to its hint. */
.dos-is-front .dos-bar__home, .dos-is-front .dos-bar__hint { display: none; }
body:not(.dos-is-front) .dos-bar { transform: translateY(calc(-100% + var(--dos-bar-peek))); }
body:not(.dos-is-front) .dos-bar:is(:hover, :focus-within, .is-open) { transform: none; }
body:not(.dos-is-front) .dos-bar:is(:hover, :focus-within, .is-open) .dos-bar__hint { opacity: 0; }
body:not(.dos-is-front) .dos-bar:not(:hover, :focus-within, .is-open) > :not(.dos-bar__hint) { visibility: hidden; transition: visibility 0s .6s; }

/* ── Burger + full-screen menu (< 992 px) ─────────────────────────────── */

.dos-burger, .dos-drawer { display: none; }

/* Current page title: bottom right on desktop (top right on phones and tablets, below), level with the back arrow. */
.dos-label {
	position: fixed;
	right: 24px; bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 8000;
	max-width: 40vw;
	margin: 0;
	color: var(--dos-paper);
	font: 700 22px / 34px var(--dos-font);
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	filter: drop-shadow(2px 2px 6px rgb(0 0 0 / 58%));
	pointer-events: none;
	transition: opacity .3s;
}
.dos-label:empty { opacity: 0; }

@media (max-width: 991px) {
	.dos-bar { display: none; }

	/* Three bars that turn into ✕ in place — the close button is where the finger already is. */
	.dos-burger {
		display: block;
		position: fixed;
		top: calc(22px + env(safe-area-inset-top)); left: 16px;
		z-index: 9700;
		width: calc(38px + 1vw);
		height: 34px;
		filter: drop-shadow(2px 2px 6px rgb(0 0 0 / 58%));
	}
	.dos-burger span, .dos-burger::before, .dos-burger::after {
		content: "";
		position: absolute;
		left: 0; right: 0; top: 15px;
		height: 4px;
		background: var(--dos-paper);
		transition: transform .45s var(--dos-ease), opacity .25s;
	}
	.dos-burger::before { transform: translateY(-13px); }
	.dos-burger::after { transform: translateY(13px); }
	.dos-burger[aria-expanded="true"] { filter: none; }
	.dos-burger[aria-expanded="true"] span { opacity: 0; }
	.dos-burger[aria-expanded="true"]::before { transform: rotate(45deg) scaleX(.9); }
	.dos-burger[aria-expanded="true"]::after { transform: rotate(-45deg) scaleX(.9); }

	/* Current page title, top right. One size site-wide: the longest published title fills the
	   space between the burger and the right edge (--dos-title-em from inc/page-title.php). */
	.dos-label {
		display: block;
		position: fixed;
		top: calc(22px + env(safe-area-inset-top)); right: 16px; bottom: auto;
		z-index: 9500;
		max-width: none;
		text-overflow: clip;
		width: calc(100vw - 16px - (38px + 1vw) - 20px - 16px);
		height: 34px;
		margin: 0;
		color: var(--dos-paper);
		font: 700 min(22px, (100vw - 16px - (38px + 1vw) - 20px - 16px) / var(--dos-title-em, 20)) / 34px var(--dos-font);
		text-align: right;
		white-space: nowrap;
		overflow: hidden;
		filter: drop-shadow(2px 2px 6px rgb(0 0 0 / 58%));
		pointer-events: none;
		transition: opacity .3s;
	}
	.dos-label:empty, body:has(.dos-drawer.is-open) .dos-label { opacity: 0; }

	.dos-drawer {
		display: block;
		position: fixed;
		top: 0; left: 0; right: 0;
		height: 100lvh;
		z-index: 9600;
		background: rgb(10 10 10 / 88%);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s var(--dos-ease), visibility 0s .35s;
	}
	.dos-drawer.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--dos-ease); }
	/* Content sized to the small viewport: the footer never hides behind the browser toolbar. */
	.dos-drawer__inner {
		display: grid;
		grid-template-rows: 1fr auto;
		grid-template-columns: minmax(0, 1fr);
		height: 100svh;
		padding: calc(96px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
	}
	.dos-drawer__nav { align-self: center; }
	.dos-drawer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }
	.dos-drawer__links li {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity .4s var(--dos-ease), transform .5s var(--dos-ease);
	}
	.dos-drawer.is-open .dos-drawer__links li {
		opacity: 1;
		transform: none;
		transition-delay: calc(80ms + var(--i, 0) * 55ms);
	}
	.dos-drawer__links a {
		position: relative;
		display: inline-block;
		color: var(--dos-paper);
		font: 700 clamp(40px, 11vw, 76px) / 1.08 var(--dos-font);
		letter-spacing: -1.4px;
		text-decoration: none;
		text-transform: uppercase;
	}
	.dos-drawer__links a::after {
		content: "";
		position: absolute;
		left: 0; bottom: .06em;
		width: 0; height: 4px;
		background: var(--dos-paper);
		transition: width .3s;
	}
	.dos-drawer__links a:is(:hover, :focus-visible)::after { width: 100%; }
	/* The current page / section: one "+" (app.js places it) that glides to a chosen link. */
	.dos-drawer__nav { position: relative; }
	.dos-drawer__links a { transition: margin-left .25s var(--dos-ease); -webkit-tap-highlight-color: transparent; }
	.dos-drawer__links a[aria-current] { margin-left: .55em; }
	.dos-drawer__plus {
		position: absolute;
		top: 0; left: 0;
		color: var(--dos-paper);
		font: 400 clamp(40px, 11vw, 76px) / 1.08 var(--dos-font);
		pointer-events: none;
		opacity: 0;
		translate: 0 28px;
		/* Glides with transform; rises in with its item (translate + opacity, same timing as the items). */
		transition: transform .25s var(--dos-ease), opacity .4s var(--dos-ease), translate .5s var(--dos-ease);
	}
	.dos-drawer.is-open .dos-drawer__plus.is-on, .dos-drawer.is-home .dos-drawer__plus.is-on {
		opacity: 1;
		translate: none;
		transition-delay: 0s, calc(80ms + var(--i, 0) * 55ms), calc(80ms + var(--i, 0) * 55ms);
	}
	.dos-drawer:is(.is-open, .is-home) .dos-drawer__plus.is-on.is-gliding { transition-delay: 0s; }
	.dos-drawer:is(.is-open, .is-home) .dos-drawer__plus.is-instant { transition: opacity .15s; }
	body.dos-is-front .dos-drawer__plus { text-shadow: 3px 3px 12px rgb(0 0 0 / 22%); }
	.dos-drawer__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		opacity: 0;
		transition: opacity .4s .25s;
	}
	.dos-drawer.is-open .dos-drawer__foot { opacity: 1; }
	.dos-drawer__home { color: var(--dos-paper); }
	.dos-drawer__home svg { width: 92px; height: auto; }
	.dos-drawer__social { list-style: none; margin: 0; padding: 0; display: flex; }
	.dos-drawer .dos-social img { width: 54px; height: 54px; }
}

/* Phones and tablets (wherever the burger menu is used, < 992 px): the homepage is the menu — the
   drawer shown as the page on the concrete (a light veil), white type with the emblem's soft shadow,
   socials bottom right, a larger DOS logo bottom left. The burger, the title label and the emblem step
   aside. Arriving, the links rise in as when the menu opens; leaving, the next page rises over it. */
@media (max-width: 991px) {
	body.dos-is-front .dos-burger, body.dos-is-front .dos-label, :is(body.dos-is-front, html.dos-home-leaving body) .dos-uvod { display: none; }
	:is(body.dos-is-front, html.dos-home-leaving body) .dos-drawer{
		z-index: 50;
		background: rgb(0 0 0 / 12%); /* a light veil over the concrete */
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		opacity: 1;
		visibility: visible;
		transition: opacity .25s var(--dos-ease);
	}
	:is(body.dos-is-front, html.dos-home-leaving body) .dos-drawer__inner{ padding-top: calc(48px + env(safe-area-inset-top)); }
	:is(body.dos-is-front, html.dos-home-leaving body) .dos-drawer__links li{ opacity: 1; transform: none; transition-delay: calc(120ms + var(--i, 0) * 60ms); }
	@starting-style { body.dos-is-front .dos-drawer__links li { opacity: 0; transform: translateY(28px); } }
	:is(body.dos-is-front, html.dos-home-leaving body) .dos-drawer__foot{ opacity: 1; }
	:is(body.dos-is-front, html.dos-home-leaving body) .dos-drawer__links a{ text-shadow: 3px 3px 12px rgb(0 0 0 / 22%); }
	:is(body.dos-is-front, html.dos-home-leaving body) .dos-drawer__links a::after{ box-shadow: 3px 3px 12px rgb(0 0 0 / 15%); }
	:is(body.dos-is-front, html.dos-home-leaving body) .dos-drawer__home svg{ width: 132px; filter: drop-shadow(8px 8px 18px rgb(0 0 0 / 23%)); }
	:is(body.dos-is-front, html.dos-home-leaving body) .dos-drawer .dos-social img{ filter: drop-shadow(3px 3px 10px rgb(0 0 0 / 20%)); }
	/* Leaving the homepage (app.js: html.dos-home-leaving until the visit ends) it keeps its look and sinks
	   under the rising next page, like any previous page — no dark menu flashing over it. */
	html.dos-home-leaving body .dos-drawer { z-index: 0; }
	html.dos-home-leaving body .dos-drawer__plus.is-on { opacity: 1; translate: none; }
}

/* Switching a covered element off: no transitions for that frame (app.js). */
.dos-drawer.is-cut, .dos-drawer.is-cut * { transition: none !important; }

/* ── Back arrow ───────────────────────────────────────────────────────── */

.dos-back {
	/* A generous invisible hit area; the triangle is drawn inside (clip-path would clip the
	   clickable area too, and near misses would land on the photo underneath). */
	position: fixed;
	left: 4px; bottom: calc(4px + env(safe-area-inset-bottom));
	z-index: 8000;
	width: 60px; height: 60px;
	display: grid;
	place-items: center;
}
.dos-back::before {
	content: "";
	width: 32px; height: 38px;
	background: var(--dos-paper);
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
	filter: drop-shadow(6px -3px 30px #222);
	transition: transform .3s;
}
.dos-back:hover::before, .dos-back:focus-visible::before { transform: scale(1.15); }
.dos-is-front .dos-back { display: none; }

/* ── Page container ───────────────────────────────────────────────────── */

.dos-main { display: flow-root; min-height: var(--dos-screen); }
.dos-main > * { margin-top: 0; margin-bottom: 0; }

/* swup (parallel plugin): the chrome stays; the next page — content here, background in app.js →
   surface() — rises over the previous one, which stays as it was (pinned at its scroll position by
   app.js) until it is covered. A reveal from the bottom of the window up (clip-path; no transform or
   filter on .dos-main, they would re-anchor its fixed children: homepage emblem, random player). */
html.is-changing .dos-main { position: relative; z-index: 1; clip-path: inset(0); transition: clip-path .45s cubic-bezier(.6, 0, .2, 1); }
html.is-changing .dos-main.is-next-container { clip-path: inset(100svh 0 0 0); }
html.is-changing .dos-main.is-previous-container { z-index: 0; clip-path: none; pointer-events: none; }
/* While entering, the next page carries its own background — the same box as .dos-surface, so the
   switch under it at the end (app.js) is invisible. */
.dos-main.is-entering::before {
	content: "";
	position: fixed;
	top: -10lvh; left: 0; right: 0;
	height: 120lvh;
	z-index: -1;
	background: var(--dos-page-bg, none) center / cover no-repeat;
	background-color: var(--dos-concrete);
	pointer-events: none;
}

/* ── Homepage: dos/uvod ───────────────────────────────────────────────── */

.dos-uvod {
	/* One measure drives the whole emblem: the composition (mark · logo · mark) is --dos-emb wide;
	   logo, marks, gaps and leading keep the legacy proportions (logo 264 / mark 85 / leading 83
	   in a 448 px composition at 1440 px). */
	--dos-emb: min(86vw, 100svh);
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 100svh;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: 1fr auto auto auto 1fr;
	column-gap: .4em;
	align-items: center;
	color: var(--dos-paper);
	font: 400 calc(var(--dos-emb) * .19) / calc(var(--dos-emb) * .1857) var(--dos-font);
	text-shadow: var(--dos-shadow-text);
	pointer-events: none;
	user-select: none;
}
/* From 576 px the legacy page CSS verbatim: logo calc(120px + 10vw), marks calc(42px + 3vw) / calc(40px + 3vw).
   Phones keep the larger emblem (86 % of the width). */
@media (min-width: 576px) {
	.dos-uvod { --dos-emb: calc((120px + 10vw) / .589); font-size: calc(42px + 3vw); line-height: calc(40px + 3vw); }
}
.dos-uvod__mark { transition: opacity .6s; }
.dos-uvod__mark[data-n="1"] { grid-area: 2 / 3; justify-self: start; }
.dos-uvod__logo { grid-area: 3 / 2; width: calc(var(--dos-emb) * .589); filter: drop-shadow(12px 12px 25px rgb(0 0 0 / 23%)); transition: opacity .6s; }
.dos-uvod__logo svg { width: 100%; height: auto; }
.dos-uvod__mark[data-n="3"] { grid-area: 4 / 1; justify-self: end; }
.dos-uvod__mark[data-n="2"] { grid-area: 4 / 3; justify-self: start; }
.dos-uvod [data-n].is-gone { opacity: 0; }

/* ── Tiles: dos/dlazdice ──────────────────────────────────────────────── */

.dos-tiles { display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; }
.dos-tiles + .dos-tiles { margin-top: -1px; } /* rows overlap by a pixel: no seam between them */
.dos-tile {
	position: relative;
	grid-column: 1 / -1;
	aspect-ratio: var(--dos-ratio-m, 1);
	overflow: hidden;
	display: block;
	color: var(--dos-paper);
	text-decoration: none;
}
/* Seams: tile edges fall on sub-pixels; each tile reaches 1 px into its right/bottom neighbour
   (which paints over it), and images live on a permanent layer so hover never re-rasterises an edge. */
.dos-tile { width: calc(100% + 1px); margin-bottom: -1px; }
.dos-tile picture { display: contents; }
.dos-tile__img { width: 100%; height: 100%; object-fit: cover; opacity: .89; transform: translateZ(0); backface-visibility: hidden; will-change: transform; transition: transform .2s, opacity .2s; }
.dos-tile:hover .dos-tile__img { opacity: 1; transform: translateZ(0) scale(1.01); }
.dos-tiles--line-art .dos-tile__img { mix-blend-mode: screen; opacity: 1; }
.dos-tiles--line-art .dos-tile__label { letter-spacing: 1px; font-size: min(40px, 5vw); }
.dos-tile__label {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font: 700 40px / 1.15 var(--dos-font);
	letter-spacing: -1.4px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	filter: var(--dos-shadow-label);
	pointer-events: none;
}
@media (min-width: 992px) {
	.dos-tile { aspect-ratio: var(--dos-ratio); }
	.dos-tiles--cols-3 > .dos-tile { grid-column: span 2; }
	.dos-tiles--cols-2 > .dos-tile { grid-column: span 3; }
	.dos-tiles--cols-1 > .dos-tile { grid-column: span 6; }
}

/* ── Split rows: dos/pruh ─────────────────────────────────────────────── */

.dos-split { display: grid; grid-template-columns: 1fr 1fr; background: var(--dos-paper); }
.dos-split--reverse .dos-split__media { order: 2; }
.dos-split__media { position: relative; min-height: 100%; overflow: hidden; }
.dos-split__media > :where(figure, img, .dos-video, .dos-model, .dos-crossfade) { margin: 0; height: 100%; }
.dos-split__media img { width: 100%; height: 100%; object-fit: cover; }
.dos-split__media .wp-block-image { margin: 0; height: 100%; }
.dos-split__text {
	align-self: center;
	padding: 30px;
	text-align: center;
	font-size: 16px;
	line-height: 1.8;
}
.dos-split__text :where(h2, h3) { font-size: 17px; margin-bottom: .4em; }
.dos-split--dark { background: var(--dos-ink); color: var(--dos-paper); }
.dos-split--inset { background: transparent; color: var(--dos-paper); min-height: var(--dos-screen); align-items: center; padding: 80px 0; }
.dos-split--inset .dos-split__media { padding: 0 8% 0 16%; min-height: 0; }
.dos-split--inset .dos-split__media img { aspect-ratio: auto; height: auto; }
.dos-split--inset .dos-split__text { text-align: left; padding: 0 6%; }
@media (max-width: 991px) {
	.dos-split { grid-template-columns: 1fr; }
	.dos-split--reverse .dos-split__media { order: 0; }
	.dos-split--inset .dos-split__media { padding: 0 8%; }
	.dos-split--inset .dos-split__text { padding: 30px 8% 0; }
}

/* Link buttons ("ZOBRAZIT ČLÁNEK") */
.wp-block-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0 0 1em; }
.dos-split--inset .wp-block-buttons { justify-content: flex-start; }
.wp-block-button__link {
	display: inline-block;
	padding: 0;
	background: none;
	color: var(--dos-accent);
	font-size: 13px;
	text-decoration: none;
	transition: color .2s;
}
.wp-block-button__link:hover { color: #ffcc00; text-decoration: underline; }
.dos-split__text a:not(.wp-block-button__link) { color: var(--dos-accent); }

/* ── Sections: dos/sekce ──────────────────────────────────────────────── */

.dos-section { display: flex; flex-direction: column; }
.dos-section > * { margin-top: 0; margin-bottom: 0; }
.dos-section--screen { min-height: var(--dos-screen); }
.dos-section--center { justify-content: center; }
.dos-section--text-center { text-align: center; align-items: center; }
.dos-section--pad { padding: 80px 20px; }
.dos-section--light { color: var(--dos-paper); }
.dos-section--dark { color: var(--dos-ink); }
.dos-section[style*="--dos-shade"] { background: rgb(0 0 0 / var(--dos-shade)); }
.dos-section--screen > .dos-model:only-child { flex: 1; width: 100%; }
.dos-section:not(.dos-section--pad) > .dos-tiles { width: 100%; }
.dos-section .wp-block-buttons { justify-content: inherit; }

/* Text styles for big statements (Kontakt, 404) */
.is-style-velky { font-size: calc(22px + .8vw); line-height: 1.3; }
.is-style-velky a { color: inherit; text-decoration: none; }
.is-style-nadpis { font: 400 calc(50px + 2vw) / 1 var(--dos-font); text-transform: uppercase; }
h1.is-style-obri, h2.is-style-obri, .is-style-obri { font: 400 calc(80px + 3.2vw) / 1 var(--dos-font); margin: 0; }
.dos-snow { position: fixed; top: 0; left: 0; right: 0; height: 100lvh; z-index: 1; pointer-events: none; overflow: hidden; }
.dos-snow span { position: absolute; top: 0; left: 0; color: var(--dos-paper); font: 400 40px / 1 var(--dos-font); will-change: transform; }

/* ── Gallery: dos/galerie ─────────────────────────────────────────────── */

.dos-gallery { display: grid; grid-template-columns: 1fr; overflow: hidden; }
/* Tiles: 2 then 3 per row; a short last row still fills the width at the same row height
   (wider items, wider aspect ratio). Base ratio 1 : .8 per column. */
@media (min-width: 576px) and (max-width: 991px) {
	.dos-gallery--dlazdice { grid-template-columns: repeat(2, 1fr); }
	.dos-gallery--dlazdice .dos-gallery__item:nth-child(2n+1):last-child { grid-column: span 2; aspect-ratio: 2 / .8; }
}
@media (min-width: 992px) {
	.dos-gallery--dlazdice { grid-template-columns: repeat(6, 1fr); }
	.dos-gallery--dlazdice .dos-gallery__item { grid-column: span 2; }
	.dos-gallery--dlazdice .dos-gallery__item:nth-child(3n+1):last-child { grid-column: span 6; aspect-ratio: 3 / .8; }
	.dos-gallery--dlazdice .dos-gallery__item:nth-child(3n+1):nth-last-child(2),
	.dos-gallery--dlazdice .dos-gallery__item:nth-child(3n+2):last-child { grid-column: span 3; aspect-ratio: 1.5 / .8; }
}
.dos-gallery__item { display: block; overflow: hidden; width: calc(100% + 1px); margin-bottom: -1px; } /* seams, see .dos-tile */
.dos-gallery img { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); backface-visibility: hidden; transition: opacity .3s, transform .6s var(--dos-ease); }
/* Subtle zoom inside the frame (legacy: scale 1.04, now softer). */
.dos-gallery__item:hover img { opacity: .9; transform: translateZ(0) scale(1.02); }
@media (prefers-reduced-motion: reduce) { .dos-gallery__item:hover img { transform: translateZ(0); } }
.dos-gallery--dlazdice .dos-gallery__item { aspect-ratio: 1 / .8; }
.dos-gallery--mrizka img { height: auto; }

/* PhotoSwipe backdrop (opacity: pswpFit.bgOpacity in app.js) */
.pswp { --pswp-bg: #000; --pswp-placeholder-bg: transparent; }
/* Caption (map lightbox): a band at the bottom the image keeps free (paddingFn in modules.js). */
.pswp__dos-caption {
	position: absolute; right: 0; bottom: 0; left: 0;
	display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
	padding: 0 20px 6px;
	color: var(--dos-paper);
	font: 400 15px / 1.3 var(--dos-font);
	text-align: center;
	pointer-events: none;
	transition: opacity .2s;
}
.pswp__dos-caption p { margin: 0; max-width: 900px; }
.pswp__dos-caption strong { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.pswp__dos-caption small { font-size: 12px; opacity: .65; }
.pswp--ui-visible .pswp__dos-caption { opacity: 1; }
.pswp:not(.pswp--ui-visible) .pswp__dos-caption { opacity: 0; }
@media (max-width: 575px) { .pswp__dos-caption { font-size: 14px; padding: 0 16px 10px; } }

/* ── Video: dos/video ─────────────────────────────────────────────────── */

.dos-video { position: relative; margin: 0; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.dos-video__play { position: absolute; inset: 0; width: 100%; }
.dos-video__play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.dos-video__hover { opacity: 0; transition: opacity .2s; }
.dos-video__play:hover .dos-video__hover, .dos-video__play:focus-visible .dos-video__hover { opacity: 1; }
.dos-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dos-split__media .dos-video { height: 100%; min-height: 100%; }

/* ── 3D model: dos/model ──────────────────────────────────────────────── */

.dos-model { position: relative; display: grid; place-items: center; min-height: 450px; color: var(--dos-paper); background: #000; overflow: hidden; }
.dos-model__poster { max-height: 450px; width: auto; object-fit: contain; }
.dos-model canvas, .dos-model > div { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
.dos-model__load { position: relative; z-index: 1; padding: 10px 18px; border: 2px solid var(--dos-accent); color: var(--dos-accent); font-size: 14px; text-transform: uppercase; }

/* ── Cross-fade: dos/prolinani ────────────────────────────────────────── */

.dos-crossfade { position: relative; height: 100%; min-height: 300px; }
.dos-crossfade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.dos-crossfade img.is-active { opacity: 1; }
.dos-crossfade--screen { position: fixed; top: 0; left: 0; right: 0; height: 100lvh; min-height: 0; z-index: 0; }

/* ── Playlist: dos/playlist ───────────────────────────────────────────── */

.dos-playlist { color: var(--dos-paper); text-align: left; }
.dos-playlist__title { margin: 0 0 6px; color: var(--dos-accent); font-weight: 700; font-size: 18px; }
.dos-playlist__tracks { list-style: none; margin: 0 0 1.2em; padding: 0; }
.dos-track { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-align: left; line-height: 1.2; }
.dos-track__icon { display: grid; place-items: center; width: 38px; height: 26px; margin-left: 4px; background: rgb(199 199 199 / 55%); color: var(--dos-paper); }
.dos-track__icon svg { width: 18px; height: 18px; }
.dos-track__icon svg + svg, .dos-track.is-playing .dos-track__icon svg:first-child { display: none; }
.dos-track.is-playing .dos-track__icon svg + svg { display: block; }
.dos-track__name { font-size: 18px; font-weight: 700; }
.dos-track__artist { font-size: 12px; font-weight: 700; }
.dos-track:hover .dos-track__name, .dos-track.is-playing .dos-track__name { color: #ffcc00; }
.dos-playlist--random { color: var(--dos-ink); white-space: nowrap; position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 50; }
.dos-playlist--random li { display: none; }
.dos-playlist--random li.is-chosen, .dos-playlist--random:not(.is-ready) li:first-child { display: block; }

/* ── Flipbook: dos/flipbook ───────────────────────────────────────────── */

.dos-flipbook { position: relative; width: min(92vw - 140px, 1200px); }
/* The whole page swipes the book (horizontal gestures are ours, vertical ones stay the browser's). */
.dos-section:has(.dos-flipbook) { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.dos-flipbook__stage { display: flex; justify-content: center; align-items: center; height: min(calc(var(--dos-screen) * .7), 640px); }
.dos-flipbook__cover { max-height: 100%; width: auto; }
.dos-flipbook__stage canvas { max-width: none; }
/* Arrows sit in the margin, clear of the book; phones and tablets swipe instead. */
.dos-flipbook__nav {
	position: absolute;
	top: 50%;
	width: 24px; height: 48px;
	margin-top: -24px;
	border: solid var(--dos-paper);
	border-width: 0 2px 2px 0;
	transform: rotate(-45deg) scale(.7);
	filter: drop-shadow(0 0 6px rgb(0 0 0 / 30%));
}
.dos-flipbook__nav--prev { left: -64px; transform: rotate(135deg) scale(.7); }
.dos-flipbook__nav--next { right: -64px; }
.dos-flipbook__nav[hidden] { display: none; }
@media (max-width: 991px) {
	.dos-flipbook { width: min(92vw, 1200px); }
	.dos-flipbook__nav { display: none; }
	.dos-flipbook__stage { overflow: hidden; }
}

.dos-book {
	position: relative;
	display: flex;
	perspective: 2600px;
	transform: translateX(var(--shift, 0%));
	/* One shadow for the whole book, cast by whatever is visible (pages + the turning leaf):
	   shadows never stack, so nothing pops when the leaf lands. */
	filter: drop-shadow(0 6px 18px rgb(0 0 0 / 22%));
}
.dos-book__slot { position: relative; width: var(--pw); height: var(--ph); will-change: transform; } /* own layers: removing the leaf repaints nothing */
.dos-book__slot canvas, .dos-book__face canvas { display: block; }
/* The turning leaf: hinged on the spine; JS sets its rotation and --shade from the turn's progress. */
.dos-book__leaf {
	position: absolute;
	top: 0;
	width: var(--pw); height: var(--ph);
	transform-style: preserve-3d;
	will-change: transform;
	z-index: 2;
}
.dos-book__leaf--fwd { left: var(--pw); transform-origin: left center; }
.dos-book__leaf--back { left: 0; transform-origin: right center; }
.dos-book__face { position: absolute; inset: 0; backface-visibility: hidden; background: #fff; }
.dos-book__face:empty { background: none; }
.dos-book__face--back { transform: rotateY(180deg); }
/* Shading while the leaf turns: darkest at the vertical (--shade = sin of the progress). */
.dos-book__face::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: var(--shade, 0);
	background: linear-gradient(to right, rgb(0 0 0 / 28%), rgb(0 0 0 / 0%) 70%);
}
.dos-book__leaf--fwd .dos-book__face--back::after, .dos-book__leaf--back .dos-book__face:not(.dos-book__face--back)::after {
	background: linear-gradient(to left, rgb(0 0 0 / 28%), rgb(0 0 0 / 0%) 70%);
}
/* Single page: the next page waits beside the current one and slides in with the finger. */
.dos-book--single .dos-flipbook__page { will-change: transform; }
.dos-book--single .is-incoming { position: absolute; top: 0; left: 0; }

/* ── Map: dos/mapa ────────────────────────────────────────────────────── */

.dos-map { position: relative; height: var(--dos-screen); background: var(--dos-concrete); }
.dos-map__list { columns: 3 200px; margin: 0; padding: 100px 40px; list-style: none; color: var(--dos-ink); }
.dos-map.is-ready .dos-map__list { display: none; }
.dos-map .leaflet-container { height: 100%; background: var(--dos-concrete); font-family: var(--dos-font); }
/* Grey tiles: the filter on each tile. Every tile is its own GPU layer (translate3d), filtered once
   when it loads and only scaled during a zoom. (On the pane or a tile container the whole layer is
   re-filtered on every frame / every tile load = lag.) */
.dos-map .leaflet-tile { filter: grayscale(1) contrast(.9) brightness(1.04); }
/* Markers: the site's yellow with a black edge (reads on the grey map); a place with several photos
   shows the count; an area group is larger with a halo and the total of its photos. */
.dos-map .leaflet-control-attribution { padding: 0 4px; background: none; color: rgb(0 0 0 / 45%); font: 9px / 1.4 var(--dos-font); }
.dos-map .leaflet-control-attribution a { color: inherit; text-decoration: none; }
.dos-map__pin { cursor: pointer; } /* Leaflet positions this element by transform: style the disc inside */
.dos-map__pin > span {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 2px solid var(--dos-ink);
	border-radius: 50%;
	background: var(--dos-accent);
	color: var(--dos-ink);
	font: 700 12px / 1 var(--dos-font);
	box-shadow: 0 1px 6px rgb(0 0 0 / 35%);
	transition: transform .2s var(--dos-ease);
}
.dos-map__pin--group > span { font-size: 14px; box-shadow: 0 0 0 5px rgb(228 202 8 / 45%), 0 1px 8px rgb(0 0 0 / 35%); }
.dos-map__pin:hover > span { transform: scale(1.18); }
.dos-map__pin:hover { z-index: 1000 !important; }
.dos-map__pin:focus-visible { outline: none; }
.dos-map__pin:focus-visible > span { box-shadow: 0 0 0 3px var(--dos-paper), 0 0 0 5px var(--dos-ink); }
.dos-map .leaflet-tooltip { border: 0; border-radius: 0; background: var(--dos-ink); color: var(--dos-paper); font: 700 13px / 1.3 var(--dos-font); text-transform: uppercase; box-shadow: none; }
.dos-map .leaflet-tooltip::before { display: none; }
.dos-map__pin.is-lit > span { transform: scale(1.3); box-shadow: 0 0 0 4px var(--dos-paper), 0 1px 8px rgb(0 0 0 / 35%); }
.dos-map__pin.is-lit { z-index: 1000 !important; }

/* Side panel (desktop): the places in view with their photos. */
.dos-map__panel { display: none; }
@media (min-width: 992px) {
	.dos-map { --dos-panel-w: 360px; }
	/* Right column, bottom up: the tiles' credit in the very corner, the page title, the zoom buttons,
	   then the panel down to just above them. */
	.dos-map .leaflet-bottom.leaflet-right .leaflet-control-zoom { position: absolute; right: 16px; bottom: 60px; margin: 0; }
	.dos-map__panel {
		position: absolute;
		top: 64px; right: 16px; bottom: 140px; /* clear of the menu bar above, the zoom buttons below */
		z-index: 800;
		display: flex;
		flex-direction: column;
		width: var(--dos-panel-w);
		background: rgb(0 0 0 / 78%);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		color: var(--dos-paper);
		font-family: var(--dos-font);
		cursor: auto;
		transition: transform .45s var(--dos-ease), opacity .35s;
	}
	.dos-map.is-folded .dos-map__panel { transform: translateX(calc(100% + 16px)); }
	.dos-map__panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgb(255 255 255 / 14%); }
	.dos-map__panel-count { flex: 1; margin: 0; font: 700 14px / 1.3 var(--dos-font); text-transform: uppercase; letter-spacing: .02em; }
	.dos-map__panel-btn { padding: 6px 10px; border: 1px solid rgb(255 255 255 / 45%); background: none; color: inherit; font: 700 12px / 1 var(--dos-font); text-transform: uppercase; cursor: pointer; }
	.dos-map__panel-btn:hover, .dos-map__panel-btn:focus-visible { background: var(--dos-accent); border-color: var(--dos-accent); color: var(--dos-ink); outline: none; }
	/* The fold tab sticks out on the left of the panel and stays visible when it is folded away. */
	.dos-map__panel-fold {
		position: absolute; top: 12px; left: -32px;
		width: 32px; height: 44px;
		border: 0; background: rgb(0 0 0 / 78%); color: var(--dos-paper);
		cursor: pointer;
	}
	.dos-map__panel-fold::before { content: ""; display: block; width: 10px; height: 10px; margin: auto; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateX(-2px) rotate(45deg); transition: transform .3s; }
	.dos-map.is-folded .dos-map__panel-fold::before { transform: translateX(2px) rotate(-135deg); }
	.dos-map__panel-fold:hover, .dos-map__panel-fold:focus-visible { color: var(--dos-accent); outline: none; }
	.dos-map__places { position: relative; flex: 1; min-height: 0; margin: 0; padding: 4px 0 12px; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 30%) transparent; }
	.dos-map__place { padding: 10px 16px; transition: background-color .2s; }
	.dos-map__place.is-lit { background: rgb(255 255 255 / 8%); }
	.dos-map__place.is-leaving { pointer-events: none; }
	.dos-map__place-name { display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
	.dos-map__place-name strong { font: 700 15px / 1.25 var(--dos-font); text-transform: uppercase; }
	.dos-map__place-name span { flex: none; margin-left: auto; font-size: 12px; opacity: .6; }
	.dos-map__place-name:hover strong, .dos-map__place-name:focus-visible strong { color: var(--dos-accent); }
	.dos-map__place-name:focus-visible { outline: none; }
	.dos-map__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
	.dos-map__thumb { display: block; aspect-ratio: 1; padding: 0; overflow: hidden; border: 0; background: rgb(255 255 255 / 8%); cursor: zoom-in; }
	.dos-map__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--dos-ease), opacity .3s; }
	.dos-map__thumb:hover img, .dos-map__thumb:focus-visible img { transform: scale(1.06); }
	.dos-map__thumb:focus-visible { outline: 2px solid var(--dos-accent); outline-offset: -2px; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}