@charset "UTF-8"; /* ==================================================
 * Snapic Just640px Theme Focus Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2025-04-20
 * CC BY-NC-SA
 * -------------------------------------------------------------------
 *
 * # root
 * # main
 * # focus(Default)
 * # focus(Fullscreen)
 * # focus(Classical)
 * # focus(Widescreen)
 * # focus(Phi)
 * # media
 *	## min-width: 960px
 *	## max-width: 640px
 *	## max-width: 480px
 *
 * -------------------------------------------------------------- root */

:root {
	--body-width: 1170px !important;
}

/* -------------------------------------------------------------- main */

body {
	margin: 0 auto;
	min-height: 100vh;
	font-size: 62.5%;
}

/* ---------------------------------------------------- focus(Default) */

lopwon#Default {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5em;
	position: absolute;
	top: 50%;
	left: calc(50% - 5em);
	margin: 0 5em;
	width: calc(100% - 10em);
	height: 100%;
	max-width: 960px;
	font-size: 1.2em;
	color: var(--color-3);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

lopwon#Default > * {
	display: block;
	position: initial;
	margin: 0;
	padding: 0;
}

lopwon#Default header {
	margin-left: calc(38.2% + 5em);
	font-size: 1.4em;
}

lopwon#Default .article.focus {
	display: flex;
	align-items: center;
	gap: 7em;
}

lopwon#Default .image {
	flex: 0 0 38.2%;
	position: relative;
	padding-top: calc(38.2% * (2 / 3));
	border-radius: 2em;
	background-color: var(--wrap-grey);
	overflow: hidden;
}

lopwon#Default .image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 2em;
	object-fit: cover;
	object-position: top;
	-webkit-transition: object-position 5s ease;
	transition: object-position 5s ease;
}

lopwon#Default .article.focus .image:hover img {
	object-position: bottom;
}

lopwon#Default .noPic {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--color-c);
	border-radius: 2em;
}

lopwon#Default .content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: 0.5em 0;
}

lopwon#Default .title {
	font-size: 1.8em;
	color: var(--color-3);
	font-weight: bold;
	text-align: left;
}

lopwon#Default .title a {
	color: var(--color-3);
}

lopwon#Default .title a:hover {
	color: var(--color-link);
}

lopwon#Default .date {
	font-size: 1em;
	color: var(--color-c);
}

lopwon#Default .desc {
	margin-top: 2em;
	font-size: 1.2em;
	font-style: italic;
	color: var(--color-3);
	line-height: 1.5;
}

lopwon#Default footer {
	font-size: 1.4em;
}

/* ------------------------------------------------- focus(Fullscreen) */

lopwon#Fullscreen {
	display: block;
	position: relative;
	width: 100vw;
	height: 100vh;
	font-size: 1.2em;
	color: var(--color-f);
}

lopwon#Fullscreen > * {
	display: block;
	position: initial;
	margin: 0;
	padding: 0;
}

lopwon#Fullscreen header {
	position: absolute;
	left: 30px;
	top: 1em;
	font-size: 3em;
	z-index: 1;
}

lopwon#Fullscreen .image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 100vw;
	max-height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

lopwon#Fullscreen .image a::before,
lopwon#Fullscreen .image a::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 1;
}

lopwon#Fullscreen .image a::before {
	top: 0;
	height: 16.66667%;
	background: -webkit-linear-gradient(to top,
		rgb(0 0 0 / 0%) 0%,
		rgb(0 0 0 / 10%) 10%,
		rgb(0 0 0 / 20%) 20%,
		rgb(0 0 0 / 30%) 30%,
		rgb(0 0 0 / 40%) 40%,
		rgb(0 0 0 / 50%) 50%,
		rgb(0 0 0 / 60%) 60%,
		rgb(0 0 0 / 70%) 70%,
		rgb(0 0 0 / 80%) 80%,
		rgb(0 0 0 / 90%) 90%,
		rgb(0 0 0  / 100%) 100%
	);
	background: linear-gradient(to top,
		rgb(0 0 0 / 0%) 0%,
		rgb(0 0 0 / 10%) 10%,
		rgb(0 0 0 / 20%) 20%,
		rgb(0 0 0 / 30%) 30%,
		rgb(0 0 0 / 40%) 40%,
		rgb(0 0 0 / 50%) 50%,
		rgb(0 0 0 / 60%) 60%,
		rgb(0 0 0 / 70%) 70%,
		rgb(0 0 0 / 80%) 80%,
		rgb(0 0 0 / 90%) 90%,
		rgb(0 0 0  / 100%) 100%
	);
	opacity: 0.3;
}

lopwon#Fullscreen .image a::after {
	bottom: 0;
	height: 33.33333%;
	background: -webkit-linear-gradient(to bottom,
		rgb(0 0 0 / 0%) 0%,
		rgb(0 0 0 / 10%) 10%,
		rgb(0 0 0 / 20%) 20%,
		rgb(0 0 0 / 30%) 30%,
		rgb(0 0 0 / 40%) 40%,
		rgb(0 0 0 / 50%) 50%,
		rgb(0 0 0 / 60%) 60%,
		rgb(0 0 0 / 70%) 70%,
		rgb(0 0 0 / 80%) 80%,
		rgb(0 0 0 / 90%) 90%,
		rgb(0 0 0  / 100%) 100%
	);
	background: linear-gradient(to bottom,
		rgb(0 0 0 / 0%) 0%,
		rgb(0 0 0 / 10%) 10%,
		rgb(0 0 0 / 20%) 20%,
		rgb(0 0 0 / 30%) 30%,
		rgb(0 0 0 / 40%) 40%,
		rgb(0 0 0 / 50%) 50%,
		rgb(0 0 0 / 60%) 60%,
		rgb(0 0 0 / 70%) 70%,
		rgb(0 0 0 / 80%) 80%,
		rgb(0 0 0 / 90%) 90%,
		rgb(0 0 0  / 100%) 100%
	);
	opacity: 0.7;
}

lopwon#Fullscreen .image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	-webkit-transition: object-position 5s ease;
	transition: object-position 5s ease;
}

lopwon#Fullscreen .article.focus .image:hover img {
	object-position: bottom;
}

lopwon#Fullscreen .noPic {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--color-c);
	border-radius: 2em;
}

lopwon#Fullscreen .content {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.5em;
	position: absolute;
	left: 30px;
	bottom: 2em;
	max-width: calc(61.8vw - 30px);
	color: var(--color-f);
	z-index: 1;
}

lopwon#Fullscreen .title {
	font-size: 3.8em;
	color: var(--color-f);
	font-weight: bold;
	text-align: left;
	-webkit-line-clamp: 2;
}

lopwon#Fullscreen .title a {
	color: var(--color-f);
}

lopwon#Fullscreen .title a:hover {
	color: var(--color-f);
}

lopwon#Fullscreen .content .desc a:hover {
	color: var(--color-c);
}

lopwon#Fullscreen .date {
	font-size: 1em;
	color: var(--color-f);
}

lopwon#Fullscreen .desc {
	display: none;
	margin-top: 2em;
	font-size: 1em;
	font-style: italic;
	color: var(--color-c);
}

lopwon#Fullscreen footer {
	position: absolute;
	left: 30px;
	right: auto;
	top: 5em;
	bottom: auto;
	font-size: 1.4em;
	color: var(--color-f);
	z-index: 1;
}

/* -------------------------------------------------- focus(Classical) */

lopwon#Classical {
	display: block;
	position: relative;
	width: 100vw;
	height: 100vh;
	font-size: 1.2em;
	color: var(--color-f);
}

lopwon#Classical > * {
	display: block;
	position: initial;
	margin: 0;
	padding: 0;
}

lopwon#Classical header {
	position: absolute;
	top: 2.75em;
	right: 2em;
	font-size: 1.4em;
	writing-mode: vertical-rl;
	letter-spacing: 0.15em;
	z-index: 1;
}

lopwon#Classical .article.focus {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	gap: 7em;
}

lopwon#Classical .image {
	flex: 0 0 61.8%;
	position: relative;
	border-radius: 0;
	background-color: var(--wrap-grey);
	overflow: hidden;
}

lopwon#Classical .image a::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 61.8%;
	height: 100%;
	background: -webkit-linear-gradient(to right,
		rgb(0 0 0 / 0%) 0%,
		rgb(0 0 0 / 10%) 10%,
		rgb(0 0 0 / 20%) 20%,
		rgb(0 0 0 / 30%) 30%,
		rgb(0 0 0 / 40%) 40%,
		rgb(0 0 0 / 50%) 50%,
		rgb(0 0 0 / 60%) 60%,
		rgb(0 0 0 / 70%) 70%,
		rgb(0 0 0 / 80%) 80%,
		rgb(0 0 0 / 90%) 90%,
		rgb(0 0 0  / 100%) 100%
	);
	background: linear-gradient(to right,
		rgb(0 0 0 / 0%) 0%,
		rgb(0 0 0 / 10%) 10%,
		rgb(0 0 0 / 20%) 20%,
		rgb(0 0 0 / 30%) 30%,
		rgb(0 0 0 / 40%) 40%,
		rgb(0 0 0 / 50%) 50%,
		rgb(0 0 0 / 60%) 60%,
		rgb(0 0 0 / 70%) 70%,
		rgb(0 0 0 / 80%) 80%,
		rgb(0 0 0 / 90%) 90%,
		rgb(0 0 0  / 100%) 100%
	);
	opacity: 0.7;
	z-index: 0;
}

lopwon#Classical .image img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: left;
	border-radius: 0;
	-webkit-transition: object-position 5s ease;
	transition: object-position 5s ease;
}

lopwon#Classical .article.focus .image:hover img {
	object-position: right;
}

lopwon#Classical .noPic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	color: var(--color-c);
}

lopwon#Classical .content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin: 2em 0;
	width: 100%;
	height: calc(100vh - 4em);
	writing-mode: vertical-rl;
	text-orientation: upright;
}

lopwon#Classical .title {
	font-size: 2.8em;
	color: var(--color-3);
	font-weight: bold;
	text-align: left;
	-webkit-line-clamp: 2;
}

lopwon#Classical .title a {
	color: var(--color-3);
}

lopwon#Classical .title a:hover {
	color: var(--color-link);
}

lopwon#Classical .date {
	font-size: 1em;
	color: var(--color-c);
}

lopwon#Classical .desc {
	margin-right: 2em;
	font-size: 1.2em;
	font-style: italic;
	color: var(--color-3);
	line-height: 1.5;
}

lopwon#Classical footer {
	position: absolute;
	left: 2em;
	right: auto;
	bottom: 2.75em;
	font-size: 1.4em;
	color: var(--color-3);
	writing-mode: vertical-rl;
	letter-spacing: 0.15em;
}

/* ---------------------------------------------------- focus(Widescreen) */

lopwon#Widescreen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1em;
	position: absolute;
	top: 50%;
	left: calc(50% - 5em);
	margin: 0 5em;
	width: calc(100% - 10em);
	height: 100%;
	max-width: 960px;
	font-size: 1.2em;
	color: var(--color-3);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

lopwon#Widescreen > * {
	display: block;
	position: initial;
	margin: 0;
	padding: 0;
}

lopwon#Widescreen header {
	font-size: 1.4em;
}

lopwon#Widescreen .article.focus {
	display: flex;
	flex-direction: column-reverse;
	gap: 1em;
	position: relative;
}

lopwon#Widescreen .image {
	position: relative;
	width: 100%;
	padding-top: calc(100% * (1 / 2.35));
	border-radius: 0;
	background-color: var(--wrap-grey);
	overflow: hidden;
}

lopwon#Widescreen .image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	object-position: top;
	-webkit-transition: object-position 5s ease;
	transition: object-position 5s ease;
}

lopwon#Widescreen .article.focus .image:hover img {
	object-position: bottom;
}

lopwon#Widescreen .noPic {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--color-c);
}

lopwon#Widescreen .content {
	display: flex;
	flex-direction: column;
	gap: 2em;
}

lopwon#Widescreen .title {
	font-size: 2.8em;
	color: var(--color-3);
	font-weight: bold;
	text-align: left;
	-webkit-line-clamp: 2;
}

lopwon#Widescreen .title a {
	color: var(--color-3);
}

lopwon#Widescreen .title a:hover {
	color: var(--color-link);
}

lopwon#Widescreen .date {
	font-size: 1em;
	color: var(--color-c);
}

lopwon#Widescreen .desc {
	display: none;
	font-size: 1em;
	font-style: italic;
	color: var(--color-3);
}

lopwon#Widescreen footer {
	font-size: 1.4em;
}

/* ----------------------------------------------------------- focus(Phi) */

lopwon#Phi {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top: calc(50% - 5em);
	left: 50%;
	margin: 5em 0;
	width: 100%;
	height: calc(100vh - 10em);
	max-width: 960px;
	font-size: 1.2em;
	color: var(--color-3);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

lopwon#Phi > * {
	display: block;
	position: initial;
	margin: 0;
	padding: 0;
}

lopwon#Phi header {
	position: absolute;
	top: 1em;
	left: calc(61.8% + 1.5em);
	font-size: 1.4em;
	writing-mode: vertical-rl;
	letter-spacing: 0.15em;
}

lopwon#Phi .article.focus {
	display: flex;
	align-items: flex-end;
	gap: 2em;
}

lopwon#Phi .image {
	flex: 0 0 61.8%;
	border-radius: 2em;
	background-color: var(--wrap-grey);
	overflow: hidden;
}

lopwon#Phi .image img {
	width: 100%;
	height: calc(100vh - 10em);
	border-radius: 2em;
	object-fit: cover;
	object-position: left;
	-webkit-transition: object-position 5s ease;
	transition: object-position 5s ease;
}

lopwon#Phi .article.focus .image:hover img {
	object-position: right;
}

lopwon#Phi .noPic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(100vh - 10em);
	color: var(--color-c);
}

lopwon#Phi .content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-right: 3em;
	margin-bottom: 5em;
}

lopwon#Phi .title {
	font-size: 1.8em;
	color: var(--color-3);
	font-weight: bold;
	text-align: left;
	-webkit-line-clamp: 2;
}

lopwon#Phi .title a {
	color: var(--color-3);
}

lopwon#Phi .title a:hover {
	color: var(--color-link);
}

lopwon#Phi .date {
	font-size: 1em;
	color: var(--color-c);
}

lopwon#Phi .desc {
	display: none;
	margin-top: 2em;
	font-size: 1.2em;
	font-style: italic;
	color: var(--color-3);
	line-height: 1.5;
}

lopwon#Phi footer {
	position: absolute;
	bottom: 1em;
	left: calc(61.8% + 1.5em);
	font-size: 1.4em;
}

/* ------------------------------------------------------------- media */

@media (max-width: 960px) {

	lopwon#Default .image {
		padding-top: calc(38.2% * (3 / 4));
	}

	lopwon#Phi .image {
		border-radius: 0 2em 2em 0;
	}

	lopwon#Phi .image img {
		border-radius: 0 2em 2em 0;
	}

	lopwon#Phi .title {
		-webkit-line-clamp: 3;
	}

}

@media (max-width: 768px) {

	lopwon#Default .article.focus {
		gap: 5em;
	}

	lopwon#Default .image {
		padding-top: calc(38.2% * (1 / 1));
	}

	lopwon#Classical .image {
		flex: 0 0 38.2%;
	}

}

@media (max-width: 640px) {

	lopwon#Default {
		top: calc(50% - 2em);
		left: calc(50% - 2em);
		margin: 2em;
		width: calc(100% - 4em);
		height: calc(100vh - 4em - 65px);
		max-height: 95vh;
	}

	lopwon#Default header {
		margin-left: auto;
	}

	lopwon#Default .article.focus {
		flex-direction: column;
		gap: 3em;
	}

	lopwon#Default .title {
		-webkit-line-clamp: 2;
	}

	lopwon#Default .image {
		padding-top: calc(100% * (2 / 3));
		width: 100%;
	}

	lopwon#Default .desc {
		margin-top: 1em;
	}

	lopwon#Fullscreen header,
	lopwon#Fullscreen footer {
		left: 15px;
	}

	lopwon#Fullscreen .title {
		font-size: 1.8em;
	}

	lopwon#Fullscreen .content {
		left: 15px;
		bottom: calc(2em + 55px);
		max-width: calc(100vw - 30px);
	}

	lopwon#Classical .content {
		padding-bottom: 55px;
	}

	lopwon#Classical .title {
		font-size: 1.8em;
	}

	lopwon#Classical footer {
		bottom: calc(2.75em + 55px);
	}

	lopwon#Widescreen {
		left: calc(50% - 2em);
		margin: 0 2em;
		width: calc(100% - 4em);
	}

	lopwon#Widescreen .title {
		font-size: 1.8em;
	}

	lopwon#Widescreen .image {
		padding-top: calc(100% * (2 / 3));
	}

	lopwon#Phi {
		top: calc(50% - 5em - 55px / 2);
		height: calc(100vh - 10em - 55px);
		margin-bottom: calc(5em + 55px);
	}

	lopwon#Phi .image img {
		height: calc(100vh - 10em - 55px);
	}

	lopwon#Phi .noPic {
		height: calc(100vh - 10em - 55px);
	}

	lopwon#Phi .content {
		margin-right: 1em;
	}

	lopwon#Phi .title {
		-webkit-line-clamp: 5;
	}

}

@media (max-width: 480px) {

	lopwon#Classical .article.focus {
		gap: 3em;
	}

	lopwon#Classical .desc {
		margin-right: 1em;
	}

}