#basic-css {
	/* SeznamBot sometimes ignores first CSS */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

html, body {
	height: 100%;
	width: 100%;
	background: #08352a;

	font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size: 1em;
	color: #444;

	/* Safari on iPhone enlarges the text in landscape, but not in tables, so the sizes fall apart. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/*
Spacing follows book typesetting: vertical distances are multiples of the text line,
a heading sits closer to its own text than to the text above,
and the page keeps a wider margin at the bottom than at the top.
*/
:root {
	--line: 1.55rem; /* line-height 1.55 of the 16px body text */
}

h1, .title {
	font-size: 1.618em; /* golden ratio to the body text */
	font-family: Georgia,serif;
	color: #4E443C;
	font-variant: small-caps;
	text-transform: none;
	font-weight: normal;
	line-height: calc(var(--line) * 1.5);
	margin-bottom: calc(var(--line) * 0.5);
}

.subtitle {
	font-family: "Lucida Grande", Tahoma;
	font-size: 0.85em;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	color: #6b5a45;
	margin-top: 10px;
	text-align: center!important;
	letter-spacing: 0.3em;
}

h2 {
	font-family: "Lucida Grande", Tahoma;
	font-size: 1.1em;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	color: #2e616c;
	line-height: var(--line);
	margin-top: calc(var(--line) * 2);
	margin-bottom: calc(var(--line) * 0.5 - 6px); /* the accent below takes 6px */
	letter-spacing: 0.12em;
}

/*
Page titles in letters of one height, like the section headings; the markup keeps the capitals.
Plain capitals rather than small caps: Georgia has none, and Safari synthesizes them much smaller.
*/
h1 {
	font-size: 1.4em; /* the longest title, on the home page, still fits one line on desktop */
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* A section heading right under the page title belongs to it, one line is enough. */
h1 + h2 {
	margin-top: var(--line);
}

/* Short gold accent under the heading. */
h2::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 4px;
	background: #b39959;
}

h3 {
	font-family: "Lucida Grande", Tahoma;
	font-size: 0.9em;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #4E443C;
	margin-top: 0.5em;
}

p, table, ul {
	margin-bottom: var(--line);
	line-height: 1.55;
}

p {
	text-align: left;
}

ul {
	padding-left: 1em;
}

li {
	margin-left: 1em;
}

a {
	color: #2e616c;
	text-decoration: none;
	border-bottom: 1px dotted;
	border-color: #2e616c;
}

li a {
	padding: 0;
	border-radius: 0;
}

a:hover {
	border-bottom: 1px solid;
	border-color: #2e616c;
}

#content a.img {
	border: none;
	padding: 0;
}

#content a.img:hover {
	border: none;
	border-radius: 0;
}

#content a.img img {
	border: 1px solid #d0d0d0;
}

#content img {
	width: 100%;
	border-radius: 6px;
	margin-bottom: var(--line);
}

/*
Photos across the column share one landscape format close to the golden rectangle,
with a height of whole text lines so the text below stays on the line grid.
The inline object-position of each photo picks the part kept by the crop.
*/
#content img.photo, #content .map-link img {
	height: calc(var(--line) * 14);
	object-fit: cover;
}

/* The 16:9 aerial map is one line lower, so the full column width shows it whole. */
#content .map-link img {
	height: calc(var(--line) * 13);
}

/* Photos lie on the paper like pasted prints, a faint shadow under each.
   The home page badge is one print together with its caption strip. */
#portrait img, .main-badge, .small-badge, #content img.photo, #content .map-link img {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

#page {
	padding-top: 4em;
	padding-bottom: 6em;
	width: 740px;
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	background: #162e2f;
	background-image: url('img/bgr.c6980c.webp');
	background-repeat: repeat;
	box-shadow: 10px 0 15px #08352a inset, -10px 0 15px #08352a inset;
}

/*
Map photo (inc/adresa.php): an aerial photo covered by two links, only one of
them active. Where the window has room to show the photo clearly larger, the
first click enlarges it, elsewhere it opens the interactive map directly.
The hint of each link says what the click does. It floats half a line off the
bottom right corner, clear of the labels in the photo.
*/
#content .map-link {
	position: relative;
	margin-bottom: var(--line);
}

#content .map-link img {
	display: block;
	margin-bottom: 0;
	border: 1px solid #d0d0d0;
}

.map-link-open, .map-link-zoom {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.map-link-zoom {
	display: none;
	cursor: zoom-in;
}

/* The enlarged photo would be at least a quarter larger than the one in the column. */
@media screen and ( min-width: 560px ) and ( min-height: 430px ) {
	.map-link-open {
		display: none;
	}

	.map-link-zoom {
		display: block;
	}
}

/* The enlarged photo, shown while the address points at it; any click beside it leads back. */
.map-zoom {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.75);
	align-items: center;
	justify-content: center;
}

.map-zoom:target {
	display: flex;
}

.map-zoom-close {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	cursor: default;
}

#content a.map-zoom-link {
	display: block;
	position: relative;
}

/* As large as the photo allows, kept inside the window either way round. */
#content .map-zoom img {
	display: block;
	width: min(1280px, 95vw, calc(95vh * 16 / 9));
	height: auto;
	margin: 0;
	border: none;
}

.map-zoom .map-link-hint {
	font-size: 1em;
}

.map-link-hint {
	position: absolute;
	right: calc(var(--line) * 0.5);
	bottom: calc(var(--line) * 0.5);
	padding: 0.3em 0.8em;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 6px;
	color: #333;
	font-size: 0.8em;
	line-height: 1.4;
	text-align: center;
	pointer-events: none;
}

/* Warm off-white like rice paper, lifted off the brocade by a soft neutral shadow. */
#wrap {
	background: #fbf8f1;
	border: 1px solid #144d60;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 680px;
	z-index: 1;
}

.stamp {
	width: 65px;
	height: 65px;
	margin-top: 20px;
	padding: 2px 2px 2px 2px;
}

.banner {
	clear: both;
	padding-left: 30px;
	padding-bottom: 1em;
	border-top: 1px solid #b39959;
	border-bottom: 1px solid #b39959;
	background-color: #f3ead8;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15), 70px 0 40px rgba(179, 153, 89, 0.15) inset;
	margin-top: 1.5em;
}

.banner .stamp {
	margin-top: 10px;
	margin-left: -5px;
	margin-right: 10px;
	float: left;
}

/* Title and subtitle start right of the stamp even when the title wraps.
   The block is only as wide as the title, so the subtitle ends under its last word. */
.banner-text {
	width: -moz-fit-content;
	width: fit-content;
	margin-left: 70px;
}

.banner .title {
	line-height: normal;
	margin-bottom: 0;
	padding-top: 10px;
	font-size: 2.0em;
	font-weight: normal;
	font-family: "Cinzel", serif;
}

/* Narrower screens swap the one-line title for the two-line wording, see the media blocks.
   Phones shorten its second line. */
.banner .title .narrow, .banner .title .phone {
	display: none;
}

/* Reads as the end of the title. */
.banner .subtitle {
	text-align: right!important;
	margin-top: 0;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 1.05em;
	text-transform: none;
	letter-spacing: 0.05em;
}

.banner.bottom {
	display: none;
}

/* Wind chime (inc/wind-chime.php): hangs from the bottom edge of the header
   into the empty right margin of the content. */
.banner.top {
	position: relative;
}

/* The top menu overlaps the header and must stay above it now that the header is positioned. */
.menu.top {
	position: relative;
	z-index: 1;
}

.wind-chime {
	position: absolute;
	top: 100%;
	right: 9px;
	width: 32px;
	height: 90px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.wind-chime svg {
	display: block;
	overflow: visible;
	fill: none;
	stroke: #8c6a3f;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wind-chime .shape {
	fill: rgba(231, 211, 161, 0.6);
}

.wind-chime .solid {
	fill: #8c6a3f;
}

/* Red cord and tassel, as on traditional Chinese chimes. */
.wind-chime .cord {
	stroke: #b3302a;
}

.wind-chime .cord.solid {
	fill: #b3302a;
}

/* Top, side and bottom margins in the 3 : 4 : 6 proportion of the book canon. */
#content {
	padding-top: calc(var(--line) * 1.5);
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: calc(var(--line) * 3);
}

#content.full {
	float: none;
	width: 100%;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 1em;
}

#content strong {
	color: #000;
}

#portrait {
	float: left;
	margin-top: 1.0em;
	margin-bottom: 25px;
	margin-right: 25px;
}

#portrait img {
	border-radius: 6px;
	width: 200px;
	height: 249px;
}

#portrait.main {
	margin-top: 1em;
	margin-bottom: 1em;
	margin-right: 2em;
}

.float-left {
	float: left;
}

.main-image {
	background: url('img/katerina.f781cf.webp') 0 0;
	width: 200px;
	height: 267px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	padding: 0;
	margin: 0;
	border-bottom: 0;
}

.main-badge {
	border-radius: 6px;
	float: left;
	margin-bottom: var(--line);
	margin-right: 40px;
}

.main-text {
	float: left;
	width: 330px;
}

.main-kontakt {
	width: 200px;
	background-color: #e7d3a1;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	/* One line of padding split by the golden ratio - the text sits at the optical centre, the strip stays on the line grid. */
	padding: calc(var(--line) * 0.382) 0 calc(var(--line) * 0.618);
	margin: 0;
}

/* Fixed line height so the larger phone number does not stretch its line off the grid. */
.main-kontakt p {
	margin: 0;
	line-height: var(--line);
}

.main-kontakt b {
	line-height: 1;
}

/* Highlighted box; the optional photo sits in its top left corner and the text flows around it at every width. */
.small-text {
	display: flow-root; /* contain the floated photo */
	background-color: #f3ead8;
	border-left: 3px solid #b39959;
	line-height: 1.55;
	color: #000;
	border-radius: 6px;
	padding: calc(var(--line) * 0.5) 1em;
	margin: var(--line) 0;
}

.small-badge {
	background: url('img/katerina120x160.a5e4d0.webp');
	width: 120px;
	height: 160px;
	border-radius: 6px;
	float: left;
	margin-right: 1em;
	margin-bottom: 0.3em;
}

.small-text p {
	margin: 0;
	padding: 0;
	text-align: left;
}

.small-text p + p {
	margin-top: calc(var(--line) * 0.5);
}

/* Price list (cenik.php): service and its duration on the left, the price right-aligned. */
.price-table {
	width: 100%;
	border-collapse: collapse;
}

.price-table td {
	padding: calc(var(--line) * 0.25) 0 calc(var(--line) * 0.25) 1em;
	border-bottom: 1px solid #e8e0cc;
	text-align: right;
	white-space: nowrap;
}

.price-table td:first-child {
	padding-left: 0;
	text-align: left;
	white-space: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.price-table td:nth-child(2) {
	font-weight: bold;
	color: #000;
}

.price-table .duration {
	color: #6b5a45;
	white-space: nowrap;
}

/* Office hours (ordinace.php): a time range never breaks, the narrowest phones swap the day names for their abbreviations. */
.hours td {
	white-space: nowrap;
}

.hours .day-short {
	display: none;
}

/* The reduced prices, one short line under the table, aligned with the prices it refers to. */
.price-note {
	color: #6b5a45;
	text-align: right;
}

.tcenter {
	text-align: center;
}

.emphasize {
	color: #000;
}

.menu a {
	font-family: "Lucida Grande", Tahoma;
	font-size: 0.85em;
	border-color: #d0d0d0;
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-weight: normal;
	font-variant: normal;
	text-transform: uppercase;
	color: #666666;
	background-color: #fbf8f1;
}

.menu.top a {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	border: 1px solid #d8d8d8;
	border-radius: 0;
	padding-top: 2px;
	padding-bottom: 2px;
}

.menu.top a:hover {
	border: 1px solid #2e616c;
}

.menu img.stamp {
	padding: 0;
	margin: 0;
	width: 1em;
	height: 1em;
}

.menu.top {
	text-align: right;
	margin-right: 1em;
	margin-top: 1.0em;
	margin-bottom: -2.0em;
}

.menu.middle {
	border-bottom: 1px solid #e8e8e8;
	text-align: center;
	margin-top: 0.5em;
	padding-bottom: 0.7em;
	display: none;
}

.menu.bottom {
	border-top: 1px solid #e8e8e8;
	text-align: center;
	margin-top: 1.0em;
	padding-top: 0.5em;
	display: none;
}

#footer {
	margin-top: 1em;
	height: 18px;
	padding-top: 2px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 0.75em;
	background-color: #2e616c;
	color: #fff;
}

#footer a {
	color: inherit;
	border: 0;
	padding: 0;
}

#footer a:hover {
	border: none;
}

#footer .copyright {
	float: left;
	padding-left: 2px;
}

#footer .languages {
	float: right;
}

#mark img {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
}

div.clear-both {
	clear: both;
}

@media screen and ( max-width: 739px ) {
	/* The full title does not fit beside the stamp. */
	.banner .title .wide {
		display: none;
	}

	.banner .title .narrow {
		display: inline;
	}

	.banner .title {
		line-height: 1.1;
	}

	/* Same photo format in the narrower column. */
	#content img.photo {
		height: calc(var(--line) * 10);
	}

	#content .map-link img {
		height: calc(var(--line) * 9);
	}

	#page {
		width: 560px;
	}

	#wrap {
		width: 520px;
	}

	#content {
		width: 100%;
		padding-left: 50px;
		padding-right: 50px;
	}

	#content.full {
		padding-left: 50px;
		padding-right: 50px;
	}

	.main-text {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.main-badge {
		float: none;
		width: 200px;
		margin-bottom: 1.0em;
		margin-left: auto;
		margin-right: auto;
	}
}

/*
Accomodation for lores width devices -
remove top menu and keep only bottom,
the menu is naturally reached after reading page.
The paper spans the full width, a fixed column would leave too little for text.
*/
@media screen and ( max-width: 559px ) {
	.menu.top {
		display: none;
	}

	.menu.middle {
		display: block;
		padding-bottom: 0.4em;
	}

	/* Spans the paper like the middle menu, the text column is too narrow for one row. */
	.menu.bottom {
		display: block;
		margin-left: -18px;
		margin-right: -18px;
	}

	/* Small caps at the desktop size are too small to read and tap here.
	   The side padding, and on the narrowest screens the font, shrink with the width
	   so all four items stay on one row. */
	.menu a {
		display: inline-block;
		font-size: min(0.9em, calc(6.5vw - 5px));
		color: #2e616c;
		padding: 8px clamp(4px, calc(12.5vw - 33px), 10px);
		margin: 2px 1px;
		border-radius: 4px;
	}

	.banner {
		margin-top: 1.5em;
		padding-left: 18px;
	}

	/* The top menu is gone and the title is short, so the chime fits inside the header;
	   below the header it would cover the middle menu. */
	.wind-chime {
		top: 4px;
		right: 14px;
	}

	.banner .title .medium {
		display: none;
	}

	.banner .title .phone {
		display: inline;
	}

	/* The two-line title makes the header tall, a larger stamp matches its height. */
	.banner .stamp {
		width: 75px;
		height: 75px;
		margin-top: 14px;
	}

	.banner-text {
		margin-left: 80px;
	}

	/* The largest size that keeps the longer line between the stamp and the chime. */
	.banner .title {
		font-size: clamp(1rem, calc(14.5vw - 26px), 2rem);
		padding-top: 12px;
	}

	#content img.photo {
		height: calc(var(--line) * 8);
	}

	/* The column width varies here, a fixed height would crop the labels at the photo edges. */
	#content .map-link img {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* Both sentences wrap here anyway, as one paragraph they take fewer lines. */
	.payment-note br {
		display: none;
	}

	#page {
		width: 100%;
		box-shadow: none;
		padding-top: 22px;
		padding-bottom: 22px;
	}

	/* Little room beside the paper here, a shorter shadow is enough. */
	#wrap {
		width: calc(100% - 24px);
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
	}

	#content {
		width: 100%;
		padding-left: 18px;
		padding-right: 18px;
		padding-bottom: 0;
	}

	#content.full {
		padding-left: 30px;
		padding-right: 30px;
	}

	.gradient {
		padding-right: 30px;
	}

	p {
		/* Justify looks terrible in narrow collumn. */
		text-align: left;
	}

	#index-address {
		/* Make the address fit the single line. */
		font-size: 0.95em;
	}

	#portrait {
		/* Can't fit any text to the left. */
		float: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		text-align: center;
	}
}

/* The narrowest phones drop the stamp and the chime, the title keeps its full size in their room. */
@media screen and ( max-width: 359px ) {
	.banner .stamp, .wind-chime {
		display: none;
	}

	.banner-text {
		margin-left: 0;
	}

	.banner .title {
		font-size: clamp(1rem, calc(14vw - 8px), 2rem);
	}

	.hours .day-long {
		display: none;
	}

	.hours .day-short {
		display: inline;
	}
}

/*
Old phones with little screen estate (about 480 x 320 in landscape, like the first iPhones):
the header would fill half the screen, so the top banner gives way to a copy at the end of the page.
The width limit keeps it off today's phones in landscape, which are low but wide.
*/
@media screen and ( max-height: 320px ) and ( max-width: 480px ) {
	.menu.top {
		display: none;
	}

	.menu.middle {
		display: block;
	}

	.menu.bottom {
		display: block;
	}

	.banner.top {
		display: none;
	}

	.banner.bottom {
		display: block;
		margin-top: 1em;
	}

	#content {
		padding-bottom: 0;
		padding-top: 1em;
	}

	#page {
		padding-top: 15px;
		padding-bottom: 10px;
	}
}

/* vim: set ts=4 sw=4: */