/* 1. Barvy a rozmery */
:root {
	--paper:#f5eddc;
	--ink:#343a31;
	--muted:#736451;
	--line:#d9cdb9;
	--green:#405449;
	--accent:#765039;
	--card-bg:#edddce;
	--card-border:#dfc5af;
	--quote-accent:#a56a4d;
	--content-offset:24vw;
	--art-width:27vw;
	--art-overlap:max(0px,calc(var(--art-width) - var(--content-offset)));
	--column-padding:max(3.5vw,calc(var(--art-overlap) + 12px));
	--anchor-offset:220px;
}
/* 2. Zaklad */
* {
	box-sizing:border-box;
}
html {
	scroll-behavior:smooth;
	scroll-padding-top:var(--anchor-offset);
}
body {
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font:18px/1.8 system-ui,-apple-system,"Segoe UI",sans-serif;
}
a {
	color:var(--accent);
	text-underline-offset:5px;
}
a:hover {
	text-decoration-thickness:2px;
}
a:focus-visible,summary:focus-visible {
	outline:3px solid #865127;
	outline-offset:5px;
}
h1,h2 {
	font-family:Georgia,serif;
	font-weight:400;
	line-height:1.08;
	letter-spacing:-.035em;
}
h1 {
	font-size:clamp(40px,4.4vw,67px);
	margin:15px 0 25px;
}
h2 {
	font-size:clamp(31px,3.4vw,46px);
	margin:0 0 30px;
}
h3 {
	font-size:18px;
	line-height:1.4;
	margin:30px 0 15px;
}
h4 {
	font-size:18px;
	line-height:1.5;
	margin:0 0 14px;
	font-weight:600;
}
p {
	margin:0 0 23px;
}
img {
	display:block;
	max-width:100%;
}
.eyebrow {
	text-transform:uppercase;
	letter-spacing:.15em;
	font-size:11px;
	font-weight:650;
	line-height:1.7;
	color:var(--muted);
}
.lead {
	font-size:18px;
	line-height:1.7;
}
.small {
	font-size:13px;
	color:var(--muted);
	margin-top:18px;
}
.button {
	display:inline-flex;
	align-items:center;
	gap:15px;
	padding:12px 20px;
	border-radius:4px;
	background:var(--green);
	color:#fff7e8;
	text-decoration:none;
	font-size:15px;
	line-height:1.5;
}
.button:hover,.site-nav .nav-contact:hover {
	background:#304338;
}
.skip-link {
	position:fixed;
	top:-100px;
	left:10px;
	z-index:100;
	padding:10px;
	background:var(--paper);
}
.skip-link:focus {
	top:10px;
}
/* 3. Srdce a hlavni sloupec */
.heart-rail {
	position:fixed;
	inset:0 auto 0 0;
	width:var(--art-width);
	height:100vh;
	overflow:hidden;
	pointer-events:none;
}
.heart-rail img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:48% center;
}
.heart-rail::after {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(245,237,220,0) 36%,rgba(245,237,220,.07) 49%,rgba(245,237,220,.34) 66%,rgba(245,237,220,.76) 83%,var(--paper) 100%);
}
.site {
	position:relative;
	width:calc(100% - var(--content-offset));
	margin-left:var(--content-offset);
}
.site>main,.site>.site-footer {
	clip-path:inset(0 0 0 var(--art-overlap));
}
/* 4. Menu a brand: spolecny radek, pokud se vejdou;
jinak zalomeni */
.site-header {
	position:sticky;
	top:0;
	z-index:50;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
	gap:14px 32px;
	padding:16px var(--column-padding);
	background:linear-gradient(to right,transparent 0,transparent var(--art-overlap),var(--paper) var(--art-overlap),var(--paper) 100%);
}
.site-header::after {
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	left:var(--art-overlap);
	height:1px;
	background:var(--line);
	pointer-events:none;
}
.brand {
	flex:0 0 auto;
	max-width:100%;
	color:var(--ink);
	font-size:20px;
	line-height:1.5;
	text-decoration:none;
	white-space:nowrap;
}
.brand span {
	display:block;
	font-size:10px;
	letter-spacing:.15em;
	text-transform:uppercase;
}
.site-nav {
	display:flex;
	flex:1 1 auto;
	flex-direction:row;
	align-items:center;
	justify-content:flex-end;
	flex-wrap:wrap;
	gap:8px 19px;
	width:max-content;
	max-width:100%;
	min-width:0;
	margin-left:auto;
	font-size:12px;
	line-height:1.5;
	overflow:visible;
}
.site-nav a {
	flex:0 0 auto;
	color:inherit;
	text-decoration:none;
	white-space:nowrap;
	padding:5px 0;
}
.site-nav .nav-contact {
	padding:7px 13px;
	border:1px solid var(--green);
	border-radius:4px;
	background:var(--green);
	color:#fff7e8;
	line-height:1.3;
}
/* 5. Uvod: desktop ma portret vpravo */
.hero {
	position:relative;
	isolation:isolate;
	max-width:1100px;
	margin:auto;
	padding:32px var(--column-padding) 60px;
}
.hero-copy {
	display:grid;
	grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
	align-items:center;
	column-gap:clamp(25px,3vw,48px);
	row-gap:0;
}
.hero-copy>.eyebrow {
	grid-column:1;
	grid-row:1;
	margin-bottom:0;
}
.hero-copy>h1 {
	grid-column:1;
	grid-row:2;
}
.hero-intro {
	display:contents;
}
.hero-intro>.lead {
	grid-column:1;
	grid-row:3;
	min-width:0;
}
.hero-heart {
	display:none;
}
.portrait-frame {
	grid-column:2;
	grid-row:1/span 4;
	align-self:center;
	width:100%;
	max-width:360px;
	margin:0;
	justify-self:end;
}
.portrait {
	width:100%;
	height:auto;
	aspect-ratio:.86;
	object-fit:cover;
	object-position:50% 40%;
	border-radius:9px;
}
.hero-actions {
	grid-column:1;
	grid-row:4;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px 20px;
}
.text-link {
	display:inline-block;
	font-size:14px;
	margin:12px 0;
}
/* 6. Textove sekce */
.content {
	max-width:840px;
	margin:auto;
	padding:0 max(42px,calc(var(--art-overlap) + 12px));
}
.content>section {
	padding:32px 0;
	border-bottom:1px solid var(--line);
}
.subsection {
	margin-top:40px;
	padding:22px 0 0;
	border-top:1px solid var(--line);
}
.subsection>h3 {
	font-family:Georgia,serif;
	font-weight:400;
	font-size:30px;
	line-height:1.2;
	letter-spacing:-.02em;
	margin:0 0 24px;
}
.opening-quote {
	margin:0;
	padding:28px 0;
	border-bottom:1px solid var(--line);
	color:#78614a;
	font:24px/1.6 Georgia,serif;
	text-align: center;
}
.opening-quote cite {
	display:block;
	margin-top:10px;
	font:normal 12px system-ui;
	letter-spacing:.12em;
}
details {
	padding:20px 0;
	border-top:1px solid var(--line);
}
summary {
	cursor:pointer;
	font-size:17px;
	font-weight:600;
	line-height:1.5;
}
.detail-body {
	padding-top:20px;
}
.detail-body>:last-child {
	margin-bottom:0;
}
/* 7. Kompaktni seznam otazek */
.worry-list {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px 24px;
	list-style:none;
	margin:0 0 28px;
	padding:0;
}
.worry-list li {
	margin:0;
	padding:3px 0 3px 13px;
	border-left:2px solid var(--card-border);
	font-size:15px;
	line-height:1.65;
	font-style:italic;
	color:#654936;
}
/* 8. Terakotove karty */
.card-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
	margin:30px 0;
}
.card {
	min-width:0;
	padding:24px;
	background:var(--card-bg);
	border:1px solid var(--card-border);
	border-radius:6px;
}
.card h3 {
	font-size:18px;
	line-height:1.4;
	margin:0 0 14px;
}
.card p {
	font-size:16px;
	line-height:1.75;
}
.card>:last-child {
	margin-bottom:0;
}
.card-quote {
	margin:17px 0 0;
	padding:0 0 0 15px;
	border-left:2px solid var(--quote-accent);
	font-family:inherit;
	font-size:16px;
	font-style:italic;
	line-height:1.75;
	color:#654936;
}
.card-quote:first-child {
	margin-top:0;
}
.places {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:15px;
	margin:35px 0;
}
.places .card {
	padding:20px;
}
.places p {
	font-size:15px;
}
/* 9. Ceny a kontakty */
.prices {
	margin:30px 0;
}
.prices>div {
	display:flex;
	justify-content:space-between;
	gap:24px;
	padding:20px 0;
	border-bottom:1px solid var(--line);
}
.price-value {
	white-space:nowrap;
	font-weight:400;
}
.other {
	margin-top:45px;
	background:#eae0cb;
	padding:27px;
}
.other h3 {
	margin-top:0;
}
.other p {
	margin-bottom:0;
	font-size:16px;
}
.site-footer {
	padding:35px;
	text-align:center;
	font-size:12px;
	color:var(--muted);
}
/* 10. Uzsi desktop */
@media(max-width:1100px) and (min-width:761px) {
	.hero-copy {
		column-gap:22px;
	}
	.hero .button {
		font-size:13px;
		padding:11px 15px;
	}
	.lead {
		font-size:17px;
	}
	.places {
		grid-template-columns:1fr;
	}
	.worry-list {
		grid-template-columns:1fr;
	}
}
/* 11. Mobil: zalamovane menu, uvodni text s portretem vpravo */
@media(max-width:760px) {
	:root {
		--anchor-offset:190px;
	}
	body {
		font-size:17px;
	}
	.heart-rail {
		display:none;
	}
	.site {
		width:100%;
		margin-left:0;
	}
	.site>main,.site>.site-footer {
		clip-path:none;
	}
	.site-header {
		gap:12px 24px;
		padding:12px 18px;
		background:var(--paper);
	}
	.site-header::after {
		left:0;
		right:0;
	}
	.brand {
		font-size:19px;
		line-height:1.4;
	}
	.brand span {
		display:block;
		font-size:9px;
		letter-spacing:.08em;
	}
	.site-nav {
		flex-wrap:wrap;
		justify-content:flex-end;
		gap:8px 15px;
		max-width:100%;
		padding:0;
		font-size:12px;
		overflow:visible;
	}
	.site-nav a {
		white-space:nowrap;
	}
	.site-nav .nav-contact {
		padding:7px 11px;
	}
	.hero {
		width:100%;
		max-width:none;
		min-height:0;
		margin:0;
		padding:0 24px 42px;
		overflow:visible;
	}
	.hero-heart {
		display:block;
		position:relative;
		inset:auto;
		z-index:auto;
		width:calc(100% + 48px);
		max-width:none;
		height:auto;
		aspect-ratio:1.8;
		margin:0 -24px 24px;
		object-fit:cover;
		object-position:center;
		border-radius:0;
		-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%);
		mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 100%);
	}
	.hero-copy {
		display:block;
		width:100%;
		min-width:0;
	}
	.hero-copy>.eyebrow {
		margin-bottom:14px;
		font-size:11px;
		letter-spacing:.1em;
	}
	.hero-copy>h1 {
		margin:0 0 24px;
		font-size:clamp(40px,10vw,56px);
		line-height:1.08;
	}
	.hero-intro {
		display:flow-root;
		margin-bottom:20px;
	}
	.hero-intro>.lead {
		margin:0;
		font-size:17px;
		line-height:1.75;
	}
	.portrait-frame {
		float:right;
		width:clamp(100px,29vw,145px);
		max-width:none;
		margin:0 0 10px 16px;
		padding:0;
		border:0;
		box-shadow:none;
	}
	.portrait {
		width:100%;
		height:auto;
		aspect-ratio:.9;
		object-fit:cover;
		object-position:50% 38%;
		border-radius:9px;
	}
	.hero-actions {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		align-items:center;
		gap:10px 20px;
	}
	.hero .button {
		gap:12px;
		padding:12px 17px;
		font-size:14px;
	}
	.hero .text-link {
		margin:10px 0;
		font-size:14px;
	}
	.content {
		padding:0 24px;
	}
	.content>section {
		padding:32px 0;
	}
	h2 {
		font-size:33px;
	}
	.card-grid,.places {
		grid-template-columns:1fr;
		gap:16px;
	}
	.card,.places .card {
		padding:22px;
	}
	.prices>div {
		flex-direction:column;
		gap:4px;
	}
	.opening-quote {
		padding:30px 0;
		font-size:22px;
	}
	.subsection>h3 {
		font-size:28px;
	}
	.worry-list {
		grid-template-columns:1fr;
		gap:8px;
	}
	.worry-list li {
		font-size:15px;
	}
}
@media(max-width:380px) {
	.site-header {
		padding-inline:14px;
	}
	.hero {
		padding-inline:20px;
	}
	.hero-heart {
		width:calc(100% + 40px);
		margin-inline:-20px;
	}
	.portrait-frame {
		margin-left:13px;
	}
	.content {
		padding-inline:20px;
	}
}
@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior:auto;
	}
}