*, *:before, *:after {box-sizing: border-box; -webkit-tap-highlight-color:rgba(0, 0, 0, .30)}
html {font-size:100%}
html, body {position:relative; width:100vw; height:100%; min-height:100%; margin:0; padding:0; overflow:hidden; -webkit-overflow-scrolling:auto; background:#fff; opacity:unset}
body, header, form {
	display:flex;
	flex-flow:column nowrap;
	min-width:280px;
	font:400 calc(.6em + .5vw + .5vh)/1.3 'Montserrat', sans-serif;
}

hr {border-width:1px 0 0; opacity:.54}

blockquote {background:#fefefe11; transform-origin:50% 50%}
blockquote::before {content:"\201c"; font: 900 2em/1em serif}
blockquote:nth-of-type(2n+1) {transform: rotateZ(.25deg)}
blockquote:nth-of-type(2n) {transform: rotateZ(-.25deg)}

h1, h2, h3, h4, nav a {font-family:inherit; text-transform:uppercase; white-space:nowrap}

header h4 {margin:0; font-weight:400}

a {color:inherit}

input[type='checkbox'], input[id='more']:not(:checked) + * > .more
{display:none}

input[id='more'] ~ label {display:block; width:4em; margin:-1em 0 1em auto; opacity:.7; font-size:.9em; white-space:nowrap; cursor:pointer}
[lang='en'] input[id='more'] ~ label[for='more']:before {content:'... more'}
[lang='en'] input[id='more']:checked ~ label[for='more']:before {content:'... less'}
[lang='ru'] input[id='more'] ~ label[for='more']:before {content:'... дальше'}
[lang='ru'] input[id='more']:checked ~ label[for='more']:before {content:'... свернуть'}

header {flex:0 1 auto; align-items:flex-start; padding:0 2em 1em}
	header h1 {margin:.5em 0 0; font-weight:400; text-transform:none}

nav {
	flex:0 0 auto;
	margin:-3.67em 0 0;
	padding:.5em 1em;
	font-size:.8em;
	text-align:right;
}
	nav a {display:inline-block; margin:.125em .25em; padding:.125em .5em; background:#fff; font-weight:700; text-align:center; text-decoration:none; text-transform:uppercase}
	nav > span {display:inline-block; white-space:nowrap}
	nav > a:last-of-type {position:absolute; top:1em; right:1em; width:2.2em; height:1.5em; line-height:1.5em; margin:0; padding:0; color:inherit; text-align:center; opacity:.5}
	nav a:hover, nav a.at {filter:invert()}

main {
	display:flex; flex-wrap: wrap;
	flex:1 1 100%;
	width:100%; height:auto; overflow-y:auto; overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	margin:0 0 1em; padding:1em 2em;
}
		main > div {flex:1 0; max-width:50%; margin:0 3em}
		main h1 {font-size:1.3em}
		main h2 {font-size:1em}
		main h3, main blockquote, main p {margin:1em 0; padding:0; font-size:.9em; hyphens:auto}
		main p q {display:block; margin:1em 0 0}

		figure {position:relative; flex:0 1; min-width:250px; padding:0; margin:0 auto}
			figure img {display:block; max-width:100%; margin:3em auto 0}
			figure figcaption {opacity:.5; font-size:.8em; text-align:right}

		main ul {
			padding:0;
			margin:0 -1em 0 0;
		}
		main ul li {margin-bottom:.5em; list-style:square inside}
		main ul li a {margin-left:1.3em; color:inherit; opacity:.7}
		main ul li a:hover {opacity:1}

		main figure {max-width:25%}
		main figure img {max-height:75%; min-height:250px}

		#book section {
			flex:unset; max-width:40%;
			display:flex; flex-flow:column nowrap;
			align-items: center;
			padding:0;
		}
			main#book > section > * {max-width:69%; margin:0 auto;}
            main#book > section picture {
                display: block;
                position: relative;
                margin: 3em auto 0;
                overflow:hidden;
                border-radius:.15em;
				box-shadow: .2em .3em .6em -.1em #2307;
            }
            main#book > section picture:before {
                content: '';
                position: absolute; inset: 0;
                background: linear-gradient(90deg, #2300 .15em, #fff7 .2em, #0000 .32em), radial-gradient(at bottom right, #2305, #fff1);
                box-shadow: inset .1em -.1em .4em -.1em #2307, inset -.1em .1em .5em #fff7;
				mix-blend-mode: luminosity;
            }
			main#book > section picture img {margin-top:0}

			main#book > section > div {margin-bottom: auto;}

		#book h4, #writing h4 {color:inherit}
		#writing h4 {font-size:.8em; word-spacing:1em; opacity:.36}
		#writing div {width:100%; max-width:none}

		form {flex-flow:row wrap; justify-content:space-around; max-width:480px}
			input, textarea, button {
				-moz-appearance:none; -webkit-appearance:none; appearance:none;
				flex:1 0 100%;
				width: 100%; margin:.5em 0 0; padding:.5em 1em;
				border:solid 2px; border-radius:.25em;
				font:400 1em/1.3 'Montserrat', sans-serif
			}
			textarea {height: 7em; resize:vertical}
			button {flex:0 1; width:auto; background:#ccc}
			button[type='reset'] {border:0; background:none}

footer {position:fixed; top:0; left:0; transform-origin:0 100%; transform:rotateZ(90deg); padding:0 2em .25em; font-size:8px; white-space:nowrap; opacity:.54}

@media (orientation: portrait) {
	header, nav {text-align:center}
	nav {order:1; margin:0; padding:1em 0 3em; border-top:solid 1px #ccc; background:#eeea}
	nav a {background:inherit}

	main {flex-flow:column nowrap}
	#book section {flex:0 0 auto; flex-flow:row wrap; justify-content:space-around; max-width:none}
		#book section div ul {margin:1em}
	main figure {flex:0 1; margin:auto}
	main div {margin:0 auto; padding:0 2em}
	main > div {max-width:none}
}

@media (max-width:640px) {
	h1 {font-size:1.8em}
	main > div {max-width:none; min-width:250px; padding:0}

	#book section {flex-flow:column nowrap; max-width:none}
	#book section div {width:100%}
	#book ul {background-size:auto 33%}

	main ul li b + a {display:block}
	main ul li a {margin:0}
	#contact div {margin:0 0 2em -.75em; padding:0}
}