@charset "UTF-8"; /* ==================================================
 * Snapic Plus for grid.mobile Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

@media screen and (max-width: 400px) { 
    :root { --font-size-s: 0.8em; --font-size-m: 1.0em; --font-size-l: 1.2em; --font-size-xl: 1.4em; --font-size-xxl: 1.6em; --font-size-xxxl: 1.8em; } 
    .grid .grid__item, .grid .grid__sizer, .grid .grid__cover { width: calc((100% / 2) - 10px); margin: 5px; } 
    .masonry .grid-cover, .masonry .grid-item a, .album .grid-item a {
	display: block;
	position: relative;
	
}
#logo {
		display: flex;
	}

.snapic-grid-description, .snapic-grid-poster { padding: 0 0.75em; } .snapic-grid-top-left { top: calc(1em - 0.15em); } .snapic-exif-info { padding: 0.25em 1em; width: calc(100% - 2em + 2px); height: calc(100% - 0.5em + 2px); font-size: var(--font-size-m); } .snapic-exif-info span { margin: 0.15em 0; } .snapic-grid-meta { font-size: var(--font-size-m); } .snapic-grid-by { margin-right: 0.5em; width: 3em; height: 3em; } .snapic-grid-avatar { width: 2.5em; height: 2.5em; } .snapic-grid-avatar img { width: 2.5em; height: 2.5em; } .snapic-grid-title { font-size: var(--font-size-xl); line-height: 1.6; } .snapic-grid-excerpt, .snapic-grid-about, .snapic-grid-keyword, .snapic-grid-poster { font-size: var(--font-size-l); line-height: 1.4; } .snapic-grid-about, .snapic-grid-keyword { padding: 0 1.25em; width: calc(100% - 2.5em); } .grid__item:hover .snapic-grid-about-avatar img { top: -1em; right: 1.25em; width: 64px; height: 64px; } .grid__item:hover .snapic-grid-keyword-avatar a, .grid__item:hover .snapic-grid-keyword-icon { left: 0.25em; width: 56px; height: 56px; background-size: 56px; } .grid__item:hover .snapic-grid-keyword-meta { left: calc(56px + 2.5em); } .page-navigator li { margin: 0 0.15em; } .page-navigator a { padding: 0.15em; min-width: 2em; height: 2em; } .snapic-grid-about-meta div::before, .snapic-grid-about-meta div::after { display: block; } 
    }
    

@media (max-width: 1920px) {

	nav {
		max-width: 25vw;
	}

	#post .music,
	#gotop {
		right: calc(2em * 2 - 5em / 2);
	}

}

@media (max-width: 1440px) {

	#header .leadstory .title {
		font-size: var(--size-125);
	}

	article #target-article {
		padding: 0 1.75em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #passage,
	#target-article #filing {
		padding: 0 1.75em;
	}

	#target-article #extend .child > * {
		width: calc(25% - 0.25em * 2);
	}

	nav {
		max-width: 20vw;
	}

	#nav {
		padding: 0 1.75em;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 1.75em;
		width: calc(100% / 3 - 1.75em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 1.75em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 5.25em;
	}

	img.lazy.grid-img,
	.grid-thumb,
	.grid-mark > span,
	.masonry .grid-item:not(.pagenav) a::before,
	.album .grid-item a::before,
	.grid-soundstory {
		border-radius: 1em;
	}

	.pagenav {
		margin: calc(5em * 3.75) 1.75em 0 1.75em !important;
	}


	#comments {
		margin-bottom: calc(5em * 5 - 1.75em);
	}

	.album {
		margin-top: calc(5em * 5 - 1.75em);
	}

	#seek .close {
		right: 3.5em;
	}

	#seek > div:not(.control) {
		padding: 0 1.75em;
	}

	#post .music,
	#gotop {
		right: calc(1.75em * 2 - 5em / 2);
	}

}

@media (max-width: 960px) {

	#header .leadstory .title {
		font-size: var(--size-125);
	}

	#header .leadstory sup {
		font-size: var(--size-125);
	}

	article #target-article {
		padding: 0 1.5em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #passage,
	#target-article #filing {
		padding: 0 1.5em;
	}

	#target-article #post .head {
		margin-top: 5em;
	}

	#target-article #post .content {
		margin: 3em 0;
	}

	#post .music {
		bottom: calc(3em + (5em + 1em) * 2);
	}

	#target-article #passage {
		margin-bottom: 1em;
	}

	#target-article #filing {
		pointer-events: none;
	}

	#logo {
		display: flex;
	}

	nav {
		width: 0;
		max-width: calc(33.33333vw - 1.5em / 3);
		-webkit-transition: transform 0.3s ease;
		transition: transform 0.3s ease;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		visibility: hidden;
		overflow-x: hidden;
	}

	#nav {
		padding: 0 1.5em;
		text-align: center;
	}

	#nav > div {
		width: 100%;
	}

	#nav .blog {
		margin-bottom: 5em;
	}

	#nav .menu ul {
		gap: 2em;
	}

	#nav .menu ul li a:not(.history a) {
		font-size: var(--size-175);
	}

	#so .search-icon {
		margin: 0 auto;
		background-position: 50% 50%;
	}

	#nav .menu {
		margin-top: 0;
		margin-bottom: auto;
		visibility: visible;
		opacity: 1;
	}

	#nav .info {
		align-items: center;
		margin-bottom: calc(3em + var(--mobile-bottom));
	}

	#menu {
		display: flex;
	}

	.masonry {
		margin: 0.5em auto 3em auto;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 1.5em;
		width: calc(100% / 3 - 1.5em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 1.5em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 2em;
	}

	img.lazy.grid-img,
	.grid-thumb,
	.grid-mark > span,
	.masonry .grid-item:not(.pagenav) a::before,
	.album .grid-item a::before,
	.grid-soundstory {
		border-radius: 0.75em;
	}

	.thumb-icon,
	.music-icon,
	.video-icon {
		width: 1.5em;
		height: 1.5em;
	}

	.pagenav {
		margin: calc(5em * 2) 1.5em 0 1.5em !important;
	}

	#comments {
		margin-top: calc(5em * 2.5);
		margin-bottom: calc(5em * 2.5 - 1.5em);
	}

	.album {
		margin-top: calc(5em * 2.5 - 1.5em);
	}

	#seek > div:not(.control) {
		padding: 0 1.5em;
	}

	#post .music,
	#gotop {
		right: calc(1.5em * 2 - 5em / 2);
	}

}

@media (max-width: 768px) {

	#header .leadstory .title {
		font-size: var(--size-100);
	}

	article #target-article {
		padding: 0 1.25em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #passage,
	#target-article #filing {
		padding: 0 1.25em;
	}

	#target-article #extend .place > span {
		width: calc(100% / 3 - 0.5em * 2);
	}

	#target-article #extend .child > * {
		width: calc(33.33333% - 0.25em * 2);
	}

	nav {
		max-width: calc(50vw - 1.25em);
	}

	#nav {
		padding: 0 1.25em;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 1.25em;
		width: calc(100% / 2 - 1.25em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 1.25em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 2.75em;
	}

	.pagenav {
		margin: calc(5em * 2) 1.25em 0 1.25em !important;
	}

	#comments {
		margin-bottom: calc(5em * 2.5 - 1.25em);
	}

	#comment-form .form-item {
		width: calc(50% - 0.5em);
		text-align: center;
	}

	.album {
		margin-top: calc(5em * 2.5 - 1.25em);
	}

	#logo {
		left: calc(1.25em * 3 - 4em / 2);
	}

	#seek > div:not(.control) {
		padding: 0 1.25em;
	}

	#menu,
	#post .music,
	#gotop {
		right: calc(1.25em * 2);
	}

}

@media (max-width: 640px) {

	[id*="header-"] {
		height: calc(100vh - var(--mobile-bottom));
		min-height: 480px;
		max-height: 1200px;
	}

	#header .leadstory .title {
		font-size: var(--size-875);
	}

	article #target-article {
		padding: 0 1em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #passage,
	#target-article #filing {
		padding: 0 1em;
	}

	#target-article #extend .donate,
	#target-article #extend .friend,
	#target-article #extend .exchange {
		flex-direction: column;
		gap: 0;
	}

	#target-article #extend .parent {
		flex-direction: row;
	}

	nav {
		max-width: calc(50vw - 1em);
	}

	#nav {
		padding: 0 1em;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 1em;
		width: calc(100% / 2 - 1em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 1em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 3.25em;
	}

	.pagenav {
		margin: calc(5em * 2) 1em 0 1em !important;
	}

	#comments {
		margin-bottom: calc(5em * 2.5 - 1em);
	}

	.album {
		margin-top: calc(5em * 2.5 - 1em);
	}

	#logo {
		left: calc(1em * 3 - 4em / 2);
	}

	#seek .parent {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	#seek > div:not(.control) {
		padding: 0 1em;
	}

	#menu,
	#post .music,
	#gotop {
		right: calc(1em * 2);
	}

	[id^="gallery-"] [id^="grid-"] {
		border-radius: 1em;
	}

}

@media (max-width: 480px) {

	#header .leadstory .title {
		font-size: var(--size-625);
	}

	article #target-article {
		padding: 0 0.75em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #passage,
	#target-article #filing {
		padding: 0 0.75em;
	}

	#target-article #extend .child > * {
		width: calc(50% - 0.25em * 2);
	}

	nav {
		max-width: calc(50vw - 0.75em);
	}

	#nav {
		padding: 0 0.75em;
	}

	.masonry {
		margin: 1em auto 3em auto;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 0.75em;
		width: calc(100% / 2 - 0.75em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 0.75em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 3.75em;
	}

	.pagenav {
		margin: calc(5em * 2) 0.75em 0 0.75em !important;
	}

	#comments {
		margin-bottom: calc(5em * 2.5 - 0.75em);
	}

	#comment-form .form-item {
		width: 100%;
	}

	.album {
		margin-top: calc(5em * 2.5 - 0.75em);
	}

	#logo {
		left: calc(0.75em * 3);
	}

	#seek > div:not(.control) {
		padding: 0 0.75em;
	}

	#menu,
	#post .music,
	#gotop {
		right: calc(0.75em * 2);
	}

}

@media (max-width: 400px) {

	#header .leadstory .title {
		font-size: var(--size-625);
	}

	article #target-article {
		padding: 0 0.5em;
	}

	#target-article #post,
	#target-article #extend,
	#target-article #comments,
	#target-article #passage,
	#target-article #filing {
		padding: 0 0.5em;
	}

	nav {
		max-width: calc(50vw - 0.5em);
	}

	#nav {
		padding: 0 0.5em;
	}

	.masonry {
		margin: 0.5em auto 3em auto;
	}

	.masonry .grid-sizer,
	.masonry .grid-item,
	.album .grid-sizer,
	.album .grid-item {
		margin: 0.5em;
		width: calc(100% / 2 - 0.5em * 2);
	}

	.masonry #grid-note-head {
		width: calc(100% - 0.5em * 2);
	}

	.masonry #grid-note-head .meta {
		margin-bottom: 4em;
	}

	.pagenav {
		margin: calc(5em * 2) 0.5em 0 0.5em !important;
	}

	#comments {
		margin-bottom: calc(5em * 2.5 - 0.5em);
	}

	.album {
		margin-top: calc(5em * 2.5 - 0.5em);
	}

	#logo {
		left: calc(0.5em * 3);
	}

	#seek > div:not(.control) {
		padding: 0 0.5em;
	}

	[id^="gallery-"] [id^="grid-"]:not(:first-child) {
		flex: 1 1 calc((100% - 1em) / 2); /* 在小屏幕上每行最多两个元素 */
		padding-top: calc((100% - 1em) / 2); /* 创建 1:1 的宽高比 */
	}

	#menu,
	#post .music,
	#gotop {
		right: calc(0.5em * 2);
	}

}