html, body {
	position:absolute;
	top:0; left:0;
    width:100vw; height:100%;
    background:#d9d9da url(/img/bodybg.png);
    overflow:hidden;
    font-size:100%;
    font-weight:400;
	color:rgba(0, 0, 0, .87);
}

*, :before, :after {
	list-style:none; margin:0; padding:0; border:0; outline:0; box-sizing:border-box;
	font-family:'Libre Franklin', sans-serif;
	line-height:1.3;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transform:translate3d(0, 0, 0) scale3d(1, 1, 1); transform:translate3d(0, 0, 0) scale3d(1, 1, 1);
	-webkit-overflow-scrolling:auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

select {font-weight:inherit; font-size:inherit; background:transparent}

article a {text-decoration:underline}
a, h1 a {cursor:pointer; color:inherit; font-weight:inherit; font-size:inherit; text-decoration:none}

h1, h2, h3, b, strong {font-weight:900}

input, textarea, select {
    -webkit-user-select:text; user-select:text;
	-webkit-appearance:none;
	padding:.75em 1em;
	border:solid 1px rgba(0, 0, 0, .54); border-radius:.2rem;
	font-weight:inherit; font-size:inherit;
	background:transparent;
}

input[type="radio"] {-webkit-appearance:radio}
input[type="checkbox"] {-webkit-appearance:checkbox}

input[type="email"] {padding:.75em 1em .75em 3em !important; background:url(/img/ico/email.svg) no-repeat .7em 50% / auto 60%}
input[type="password"] {padding:.75em 1em .75em 3em !important; background:url(/img/ico/pass.svg) no-repeat .7em 50% / auto 60%}

::-webkit-input-placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}
:-ms-input-placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}
::-moz-placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}
:-moz-placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}
::placeholder {font-style:italic; color:rgba(0, 0, 0, .54)}

:active {outline:0}


hr {display:block; flex-basis:100%; margin: 1rem 0; border:solid 1px rgba(0, 0, 0, .24); border-width:1px 0 0}

#hello {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	-webkit-justify-content:flex-start; justify-content:flex-start;
	-webkit-align-items:center; align-items:center;
	position:absolute; z-index:9;
	width:100vw; height:100%;
	overflow:auto;
	padding:6.2rem 0 0;
	background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .8));
	background-color: rgba(0, 0, 0, .3);
}
#hello > * {-webkit-flex:0 1 auto; flex:0 1 auto; width:20rem; padding:1rem; background:#fff}
#hello h1 {padding:1rem 1rem 0; text-align:center; font-size:1.5rem; border-radius:.24rem .24rem 0 0}
#hello > div {text-align:center; margin:-1px 0 0}

#hello .yn {padding:0 1rem .5rem; border-top:solid 1px rgba(0, 0, 0, .36)}
	#hello .yn button {width:auto; margin:1rem 1rem .5rem; font-size:.9rem}

#hello > div:last-child {border-radius:0 0 .24rem .24rem}


#hello ul li {display:block; padding:1rem; list-style:disc}
#hello ul li b.icon-deal {margin-right:1rem}
#hello ul li a {text-decoration:underline; transition:all .3s}
#hello ul li a:hover {color:#fb0}


#hello ~ *, #logreg:not(.hidden) ~ *, .blur {-webkit-filter:blur(3px); filter:blur(3px)}

.hidden {
	position:absolute !important;
	top:-200vh !important;
	left:-200vw !important;
	bottom:auto !important;
}

.hint {font-size:.75rem !important; color:inherit; opacity:.54}

.stars {
	font:normal 400 1.5rem/1 'ico';
	text-decoration: none;
	text-transform: none;
	display:inline-block !important;
	position:relative;
	color:rgba(0, 0, 0, .2);
	letter-spacing:2px;
	margin:0 0 .5em;
	white-space:nowrap;
}
.stars .gold {
	font:inherit;
	position:absolute;
	top:0; left:0;
	width:100%; height:1.3em;
	overflow:hidden;
	color:#fb0
}

.badge {
	position:absolute; z-index:1; top:5%; left:10%;
	padding:.2em .5em;
	border:solid 1px rgba(255, 255, 255, .24); border-radius:.2em;
	font-size:.8em;
	white-space:nowrap;
	color:#fff;
}

.badge.culture {background:#282}
.badge.drinks-eats {background:#d68824}
.badge.history {background:#a22}
.badge.health-beauty {background:#639}
.badge.enjoyment {background:#06f}
.badge.profile {background:#227}
.badge.reviews {background:#0bb}
.badge.slides {background:#00f}
.badge.misc {background:#9acd32}
.badge.opinions {background:#9acd32}
.badge.tea-in-art {background:#ff6347}
.badge.travel {background:#06f}

.badge.error {background:#f81025}

body button, body .button {
	position:relative;
	display:inline-block;
	min-width:5em;
	padding:0 1em;
	border:solid 1px rgba(0, 0, 0, .54); border-radius:2.5em;
	color:rgba(0, 0, 0, .75);
	line-height:2.5;
	font-size:1rem; font-weight:700;
	text-align:center;
	text-decoration:none;
	cursor:pointer;
	transition:all .3s;
}
body button:not(.flat), body .button:not(.flat) {box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.24)}
body button:not(.flat):hover, body .button:not(.flat):hover {box-shadow:5px 5px 10px -3px rgba(0, 0, 0, 0.38)}
body button:not(.flat):active, body .button:not(.flat):active {box-shadow:1px 1px 1px 1px rgba(0, 0, 0, 0.24)}

body button.short, body .button.short {min-width:auto; padding:0 .5em; line-height:inherit; text-transform:lowercase}

body button.gold, body .button.gold {border:0; background:#ffd05c; color:rgba(0, 0, 0, .87) !important}
body button.silver, body .button.silver {border:0; background:#999; color:#fff !important}
body button.orange, body .button.orange {border:0; background:#d68824; color:#fff !important}
body button.green, body .button.green {border:0; background:#9f9835; color:#fff !important}
body button.red, body .button.red {border:0; background:#ea4d4d; color:#fff !important}
body button.orange-o, body .button.orange-o {border-color:#d68824; background:rgba(214, 136, 36, .1); color:#d68824 !important}
body button.green-o, body .button.green-o {border-color:#9f9835; background:rgba(159, 152, 53, .1); color:#9f9835 !important}

body button.disabled, body .button.disabled {pointer-events:none; opacity:.5; box-shadow:none}

.img {display:block; overflow:hidden; border-radius:.24em 0 0 .24em; background:rgba(255, 255, 255, .4) 50% 50% / cover}
.img img {width:100%}

div[class*="icon-"] {align-items:center; white-space:normal; font-style:italic}
div[class*="icon-"]:before {font-size:4.5em; color:#989f35; opacity:.3; margin-right:2rem}
	div.icon-attention {background:rgba(255, 140, 40, .2)}
	div.icon-like {background:rgba(140, 160, 50, .3)}


header {
	display:-webkit-flex; display:flex;
	-webkit-align-items:stretch; align-items:stretch;
	position:absolute; top:0; left:0; right:0; z-index:7;
	min-width:320px; height:5.2rem;
	background:#0e170b;
}

header, header a, footer a, footer span, .badge {color:rgba(255, 255, 255, .87); text-decoration:none}

#logo {-webkit-flex:0 1 auto; flex:0 1 auto; position:relative; font-size:1.3rem; margin:0 2rem .6rem 5vw}
#logo:before {position:relative; top:.2em; font-size:2.2em; color:#ffd05c}
#logo > a {display:inline-block; padding:0 0 0 .2em; font-size:1.7em; font-weight:400; line-height:1}
#logo > span {position:absolute; right:0; bottom:0; font-size:1.72em; font-weight:400; color:#fff; opacity:.75; -webkit-transform:scale(.25); transform:scale(.25); -webkit-transform-origin:100% 90%; transform-origin:100% 90%}
#logo > span a {display:inline-block; font-size:1.3em}
#logo > span a:before {font-size:1.3em}


header > div {
	-webkit-flex:1 1 auto; flex:1 1 auto;
	display:-webkit-flex; display:flex;
	-webkit-justify-content:flex-end; justify-content:flex-end;
	-webkit-align-items:stretch; align-items:stretch;
	/* position:absolute; top:0; right:5vw */
}

header > div > * {
	display:-webkit-inline-flex; display:inline-flex;
	-webkit-align-items:center; align-items:center;
	padding:1.8em 1.4vw 2em;
	transition:all .3s
}

header [for="srchinp"] {display:none}

#search {-webkit-flex:1 1 auto; flex:1 1 auto; position:relative; max-width:25rem; /* width:25rem; min-width:25rem */}
	#search input {
		width:100%; height:2.5rem;
		padding:.75em 5.4em .75em 3em;
		border:solid 1px; border-radius:2.5em;
		color:#fff;
		background:url(/img/ico/search_white.svg) no-repeat .75em 50% / auto 70%
	}
	#search input::-webkit-input-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#search input:-ms-input-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#search input::-moz-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#search input:-moz-placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}
	#search input::placeholder {font-style:italic; color:rgba(255, 255, 255, .75)}

	#search button {position:absolute; right:1.4vw; z-index:1}

header > div > span[action="subscribe"]:before {font-size:1.6em; margin-right:.3em; cursor:pointer}
header > div > span[action="subscribe"]:after {content:'Subscribe to newsletter'; width:auto}
header > div > span[action="subscribe"]:hover {background:rgba(255, 255, 255, .1)}



main {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	-webkit-align-items:stretch; align-items:stretch;
	position:absolute; z-index:0; top:0; left:0;
	width:110vw; height:100vh; padding:5rem 10vw 0 0;
	overflow-y:auto; overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	-webkit-perspective:1px; perspective:1px;
	-webkit-perspective-origin:0 0; perspective-origin:0 0;
	-webkit-transform-style:preserve-3d; transform-style:preserve-3d;
}

#bg {
	position:absolute; z-index:0; top:0; left:0;
	width:100.5vw; height:30vw; min-height:42rem;
	-webkit-transform-origin:0 0 0; transform-origin:0 0 0;
	-webkit-transform-style:preserve-3d; transform-style:preserve-3d;

	-webkit-transform:translate3d(0, -5rem, -1.5px) scale3d(2.5, 2.5, 2.5);
	transform:translate3d(0, -5rem, -1.5px) scale3d(2.5, 2.5, 2.5);

	box-sizing:content-box;
	overflow:hidden;
}

#bg:before {
	content:'';
	position:absolute; top:-.25rem; right:-.25rem; bottom:-.25rem; left:-.25rem;
	box-shadow:inset 0 0 100vw #110;
	background:url(/img/b_bg.jpg) 50% 50% / cover no-repeat #240;
	-webkit-filter:blur(2px); filter:blur(2px);
	/*animation:movie 60s infinite alternate;*/
}

#bg img {position: absolute; top:-101vh; left:-101vw; opacity:0.01}

#cbase, #content {-webkit-flex:1 0 auto; flex:1 0 auto; width:100vw; padding:0 5vw}



@media all /* Carousel */
{
#cbase, #content {
	display:-webkit-flex; display:flex;
	position:relative;
}
#cbase {
	-webkit-flex:1 0 auto; flex:1 0 auto;
	-webkit-align-items:center; align-items:center;
	max-height:30vw; min-height:15rem;
	margin:1rem 0;
	overflow:hidden;
}

#cbase > span {
	position:absolute; z-index:1; top:25%; left:0;
	padding:1rem;
	border-radius:100%;
	font-size:3rem; line-height:1;
	background:rgba(0, 0, 0, .5);
	color:#fff;
	opacity:.4;
	cursor:default;
	transition:opacity .3s;
}
	#cbase > span:before, #cbase > span:after {line-height:1}

#cbase > span:last-child {left:auto; right:0}
#cbase:hover > span {opacity:.87; cursor:default}

#carousel {
	-webkit-flex:100 0 auto; flex:100 0 auto;
	display:-webkit-flex; display:flex;
	-webkit-align-items:flex-start; align-items:flex-start;
	position:relative;
	text-shadow:1px 1px rgba(0, 0, 0, .38)
}
#carousel figure, #carousel > a {
	-webkit-flex:0 1 auto; flex:0 1 auto;
	position:relative;
	width:16vw; min-width:12rem; max-width:17rem;
	margin:1vw;
	text-align:center;
}
#carousel * {-khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; user-select:none; transition:all .3s}

#carousel .img, #carousel > a:before {
	width:12vw; height:12vw;
	min-width:10rem; min-height:10rem;
	max-width:15rem; max-height:15rem;
	margin:0 auto;
	border:solid 1px rgba(0, 0, 0, .24); border-radius:100%;
	transition:all .3s
}

#carousel figcaption {margin:1vw 0 0}
#carousel figcaption a, #carousel figcaption time {font-weight:700; color:#fff; opacity:.75}
#carousel figcaption a {display:block; white-space:nowrap; text-transform:capitalize; overflow:hidden; text-overflow:ellipsis}
#carousel figcaption time {font-weight:300}

#carousel figure:hover .img, #carousel > a:hover:before {box-shadow:0 0 20px #fec}
#carousel figure:hover a {opacity:1}

#carousel > a {
	padding: 0;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	transition: all .3s
}

#carousel > a:before {
	display:-webkit-flex; display:flex;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:center; align-items:center;
	background: rgba(255, 255, 255, .2);
	border: solid 3px;
	font-size:calc(3rem + 3vw);
	margin-bottom: 1rem;
}

#carousel > a:hover {color:#fb0}

#cbase.fold {max-height:0}

}


@media all /* Forms */
{
.popupform {text-align:center}

.popupform textarea, .popupform input {display:block; width:100%; height:10rem}
.popupform input {height:auto; margin:1rem 0}
.popupform fieldset {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row nowrap; flex-flow:row nowrap;
	-webkit-justify-content:space-around; justify-content:space-around;
	max-width:280px;
	margin:auto
}
.popupform fieldset input {-webkit-flex:0 1 auto; flex:0 1 auto; min-width:auto; max-width:7rem}

.popupform [name='code'] {width:280px; margin:1rem auto 0; text-align:center}

.popupform .or {display:block; width:2rem; height:2rem; margin:0 auto 1rem; line-height:2rem; background:rgba(0, 0, 0, .54); color:#fff; border-radius:100%; text-align:center; font-size:.8rem; font-weight:900}

		p.badge_exm {
			display:-webkit-flex; display:flex;
			-webkit-flex-flow:row wrap; flex-flow:row wrap;
			-webkit-justify-content:center; justify-content:center;
			margin:0 0 1rem;
			text-align:left;
		}
		p.badge_exm > span {-webkit-flex:1 1; flex:1 1; min-width:280px}
		p.badge_exm:before {content:''; -webkit-flex:0 1 121px; flex:0 1 121px; height:72px; margin:.25rem 1rem; background:url(/img/badge_exm.png) no-repeat 0 0 / auto 72px}
		p.badge_exm.both:before {-webkit-flex:0 1 256px; flex:0 1 256px}

.popupform p.left {margin:0 .5rem 1rem; text-align:left}
}





#content {
	-webkit-flex:100 0 auto; flex:100 0 auto;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:stretch; align-items:stretch;
	min-width:320px; min-height:auto;
	padding-bottom:5rem;
}

article {
	-webkit-flex:1 1 auto; flex:1 1 auto;
	display:-webkit-flex; display:flex;
	-webkit-align-items:stretch; align-items:stretch;
	width:39vw; max-width:39vw;
	margin:1rem;
	border-radius:.2rem;
	box-shadow:5px 5px 10px -3px rgba(0, 0, 0, 0.38);
	line-height:1.5;
	transition:all .5s;
}
article:last-child {margin-bottom:4rem; /* / -webkit-align-self:flex-start; align-self:flex-start /* */}


article > figure {
	-webkit-flex:1 0 36%; flex:1 0 36%;
	max-width:36%;
	position:relative;
	z-index:1
}
article .badge {font-size:1em; top:.5em; left:-.5em; text-shadow:1px 1px rgba(0, 0, 0, .24)}
article a.img {position:absolute; top:0; right:0; bottom:0; left:0; text-align:center}
article a.img[name] {cursor:default}

article a.img:before {font-size:10vw; line-height:15vw; color:#989f35}

article section {
	-webkit-flex:1 0 64%;  flex:1 0 64%;
	display:block;
	position:relative;
	max-width:64%;
	padding:1em 1.5em;
	overflow:hidden;
	border-radius:0 .2em .2em 0;
	background:#f9f7ef;
}
article hgroup {
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row wrap; flex-flow:row wrap;
	-webkit-justify-content:space-between; justify-content:space-between;
	margin:0 0 .5rem;
}

article h1 {
	-webkit-flex:1 0 100%; flex:1 0 100%;
	margin:0 0 .5rem;
	font-size:1em;
	text-transform:uppercase;
}
article a.author, article time, article a.more {font-size:.8em; opacity:.54}
article a.author {margin:0 1.5em 0 0 }
article a.author:before {content:'by '}
article p {font-size:.9em}
article a.more {float:right; margin:.5em 0 0; color:#d68824; opacity:.75; transition:opacity .3s}
article a.more:hover {opacity:1}


article.full {
	-webkit-flex:1 1 auto; flex:1 1 auto;
	-webkit-flex-flow:column nowrap; flex-flow:column nowrap;
	position:relative; z-index:999;
	width:auto; min-width:80vw; max-width:none; height:auto;
	padding:1rem 7vw;
	background:#d9d9da url(/img/bodybg.png);
}

article.full:before {
	content:'';
	position:absolute; z-index:-1; top:0; right:0; bottom:0; left:0;
	border-radius:.2rem;
	background:#ffe;
	opacity:.6
}
article.full > * {-webkit-flex:0 1 auto; flex:0 1 auto}
article.full > nav {
	display:-webkit-flex; display:flex;
	-webkit-justify-content:space-between; justify-content:space-between;
	-webkit-align-items:center; align-items:center;
	padding:0 0 .75rem; margin:0 1rem 1rem;
	border-bottom:solid 1px #aaa;
	font-size:.8rem}
article.full > nav:last-of-type {border-top:solid 1px #aaa; padding:.75rem 0; margin:1rem}

article.full > nav:last-of-type .badge {position:relative; top:.5em; left:0}
article.full > nav:last-of-type .badge::before {content:'more in'; position:absolute; top:-1.5em; right:0; left:0; text-align:center; color:rgba(0, 0, 0, 0.87); font-variant:small-caps; text-shadow:none}

article.full > nav > * {font-weight:700; text-decoration:none; opacity:.38; transition:opacity .3s}
article.full > nav > b {opacity:0}
article.full > nav > a:hover {opacity:1}

article.full > hgroup {-webkit-justify-content:center; justify-content:center}
article.full .badge {position:static}
article.full > hgroup h1 {-webkit-flex:1 0 100%; flex:1 0 100%; font-size:2rem; margin:.5rem auto; padding:0 15%; text-align:center}
article.full > hgroup > time {margin-right:2em}

article.full section {max-width:none; padding:1rem 0; background:none}

article.full section.intro {max-width:70%; text-align:center; font-weight:700}



article.full section.body {
	-moz-columns:210px 3; -webkit-columns:210px 3; columns:210px 3;
	-moz-column-gap:2rem; -webkit-column-gap:2rem; column-gap:2rem
}

article.full section p {text-align:justify}

article.full section p {margin-bottom:1rem}
article.full section p:last-child {margin:0}
article.full section p.intro {font-size:1.1rem; font-weight:700}

article.full section figure {float:left; clear:left; position:relative; z-index:1; width:24vw; margin:0 2rem 1rem 0}
article.full a.img {position:static; width:24vw; height:32vw; border-radius:.2rem}

article.full figcaption {font-size:.8rem; color:#9f9835}

article.full .author-block {width:auto; height:auto; padding:1.5rem; text-align:center; border:solid 1px #aaa}
article.full .author-block a {display:inline-block; max-width:12rem; font-size:1rem; color:rgba(0, 0, 0, .54)}
article.full .author-block .img {position:static; display:block; width:7rem; height:7rem; border-radius:100%; margin:0 auto 1em}
article.full .author-block span {display:block; text-transform:uppercase; font-size:.8rem}

article.full section.cut {margin:1rem 0; border-radius:.2rem; background:url() 50% 50% / cover}
article.full section.cut p {width:28%; min-width:14rem; padding:1em 1.5em; margin:4rem 2rem; border-radius:.2rem; background:#f1f3e8}

article.full section ul {margin-bottom:1rem; padding:1rem; background:#fff; border-radius:.2rem}
article.full section ul li {list-style:initial; margin-left:1rem; font-style:italic}

article.full section.deck {border-radius:.2rem; background:#fff; margin:1rem 0; padding:3rem 3.5rem}
article.full section.deck h2 {margin:-.5rem 0 .5em}
article.full section.deck ul {display:inline-block; max-width:40vw; padding:1rem 0}

#content.load:after {
	content: '';
	-webkit-flex:0 1 3rem; flex:0 1 3rem;
	width:3rem; height:3rem;
	margin:-2rem 30vw 2rem;
	border-radius:.2rem;
	box-shadow:5px 5px 10px -3px rgba(0, 0, 0, 0.38);
	background:#f9f7ef;
	-webkit-animation: bounce 1s linear both infinite; animation: bounce 1s linear both infinite;
}

article.full aside {text-align:center}
.fb_iframe_widget {margin:0 auto; width:70vw}
.fb-like, .fb-share-button {width:auto; margin:1rem .2rem 0}


footer {
	-webkit-flex:1 0 auto; flex:1 0 auto;
	display:-webkit-flex; display:flex;
	-webkit-flex-flow:row-reverse wrap; flex-flow:row-reverse wrap;
	-webkit-justify-content:center; justify-content:center;
	-webkit-align-items:center; align-items:center;
	position:absolute; z-index:1; bottom:0; left:0;
	width:100%; min-width:320px;
	padding:1rem 10vw 1rem 7vw;
	font-size:.8rem;
	background:#0e170b;
}
footer > * {-webkit-flex:0 1 auto; flex:0 1 auto; text-align:center}
footer nav {margin:1rem 2em}
footer #menu {-webkit-order:unset; order:unset; min-width:100%; margin:0}
	footer #menu a {background:no-repeat 0 50% / auto 80%; padding-left:1.5em}

footer a, footer span {display:inline-block; margin:0 1rem; opacity:.75; white-space:nowrap; cursor:pointer; transition:all .3s}
footer a:hover, footer span:hover {opacity:1}
#social a {margin:0 .25rem}


@media all and (max-width: 1000px) {
	article {width:auto; max-width:none; min-width:80vw; margin:1rem 0}
	article > figure {-webkit-flex:0 0 25%; flex:0 0 25%; max-width:25%}
	article section {-webkit-flex:0 0 75%; flex:0 0 75%; max-width:75%}
}

@media all and (max-width: 840px) {
	header > div > span[action="subscribe"]:after {content:'Subscribe'}
}

@media all and (max-width: 719px) {

	#bg {min-height:50%}
	#logo {margin-left:4vw}
	#content {padding:1rem 2vw 7rem}
}

@media all and (max-width: 600px) {
	h2 {text-align:center}

html, body {min-width:320px}

header {height:3.2rem}

#logo {margin:-.2em 4vw; font-size:.9rem}
#logo > span {-webkit-transform-origin:100% 75%; transform-origin:100% 75%}

header > div > * {padding:.6em 2vw}

header [for="srchinp"] {display:block; font-size:1.4rem; line-height:1}

#search {
	position:absolute;
	top:100%; right:120vw; z-index:2;
	width:100vw; max-width:none; height:3.2em;
	overflow:hidden;
	background:#0e170b;
	transition:.3s;
}

#search.open {right:0}

header > div > span[action="subscribe"]:after {content:''}


main {padding-top:3.2rem}

	#content {padding:1rem 5vw 5rem 2vw}
	#cbase {min-height:0; max-height:0}


	article.full section {padding-top:0}
	article.full .author {padding:0; margin:0 0 1rem; text-align:right; float:none; border:0}
	article.full .author a {display:inline-block; max-width:none; font-style:italic}
	article.full .author a:before {content:'by'; padding-right:.3em}
	article.full .author .img, article.full .author span {display:none}

	article.full section ul {max-width:none}
	article.full section figure {float:none; width:auto; margin:0 0 1.5rem}
	article.full section figure .img {width:100%; height:auto}

	article.full section.deck {padding:1rem}

	footer {padding:1rem 0}

}

@media all and (max-width: 480px) {
	article .badge {top: -1em; left: 1em}

	footer a, footer span {margin:0 .25rem; opacity:1}
	#menu a {width:1em; overflow:hidden; font-size:.9rem}

}