/* =================================================================
 * Single article styles
 * ================================================================= */

.jlv-single {
	background: var(--jla-paper);
}

/* ----------------------------------------------------------------
 * Single head
 * ---------------------------------------------------------------- */
.jlv-single__head {
	max-width: 760px;
	margin: 0 auto 40px;
}

.jlv-single__metaline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jla-meta);
	margin-bottom: 24px;
}
.jlv-single__cat {
	color: var(--jla-accent);
	font-family: var(--jla-serif);
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0.05em;
}
.jlv-single__cat:hover { color: var(--jlv-accent-dark); }

.jlv-single__title {
	font-family: var(--jla-serif);
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.4;
	margin: 0 0 22px;
	letter-spacing: 0.01em;
}

.jlv-single__lead {
	font-family: var(--jla-serif);
	font-size: 19px;
	line-height: 1.85;
	color: var(--jla-ink-soft);
	margin: 0 0 28px;
	max-width: 60ch;
}

.jlv-single__byline {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 12px;
	color: var(--jla-meta);
	padding: 14px 0;
	border-top: 1px solid var(--jla-line);
	border-bottom: 1px solid var(--jla-line);
	letter-spacing: 0.04em;
}
.jlv-single__date,
.jlv-single__region,
.jlv-single__author,
.jlv-single__reading {
	position: relative;
}
.jlv-single__byline > *:not(:last-child)::after {
	content: "・";
	margin-left: 16px;
	color: var(--jla-line);
}
.jlv-single__byline-label {
	font-size: 10px;
	color: var(--jla-accent);
	letter-spacing: 0.15em;
	margin-left: 4px;
}

.jlv-single__hero {
	margin: 36px 0 0;
}
.jlv-single__hero img {
	width: 100%;
	height: auto;
}
.jlv-single__hero-caption {
	font-size: 12px;
	color: var(--jla-meta);
	margin-top: 8px;
	letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------
 * Body content
 * ---------------------------------------------------------------- */

.jlv-single__body {
	max-width: 720px;
	margin: 48px auto 0;
	font-size: 17px;
	line-height: 1.95;
	color: var(--jla-ink);
}

.jlv-single__body > * + * { margin-top: 1.4em; }

.jlv-single__body p {
	margin: 0 0 1.4em;
}

.jlv-single__body h2 {
	font-family: var(--jla-serif);
	font-size: 24px;
	margin: 2.4em 0 0.8em;
	padding-left: 14px;
	border-left: 4px solid var(--jla-accent);
	line-height: 1.4;
}

.jlv-single__body h3 {
	font-family: var(--jla-serif);
	font-size: 19px;
	margin: 2em 0 0.6em;
	color: var(--jla-ink);
}

.jlv-single__body h4 {
	font-size: 16px;
	margin: 1.6em 0 0.5em;
	letter-spacing: 0.04em;
}

.jlv-single__body blockquote {
	margin: 2em 0;
	padding: 18px 24px;
	background: var(--jla-paper-soft);
	border-left: 4px solid var(--jla-accent);
	font-family: var(--jla-serif);
	font-size: 17px;
	color: var(--jla-ink-soft);
	font-style: normal;
}
.jlv-single__body blockquote p:last-child { margin-bottom: 0; }
.jlv-single__body blockquote cite {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-size: 13px;
	color: var(--jla-meta);
	font-family: var(--jla-sans);
	letter-spacing: 0.04em;
}

.jlv-single__body ul,
.jlv-single__body ol {
	margin: 1.4em 0;
	padding-left: 1.6em;
}
.jlv-single__body li {
	margin-bottom: 0.5em;
}

.jlv-single__body figure {
	margin: 2em 0;
}
.jlv-single__body figcaption {
	font-size: 13px;
	color: var(--jla-meta);
	margin-top: 8px;
	letter-spacing: 0.04em;
	text-align: center;
}

.jlv-single__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: 14px;
}
.jlv-single__body table th,
.jlv-single__body table td {
	padding: 12px 14px;
	border: 1px solid var(--jla-line);
	text-align: left;
	vertical-align: top;
}
.jlv-single__body table th {
	background: var(--jla-paper-soft);
	font-weight: 700;
	font-family: var(--jla-serif);
}

.jlv-single__body code {
	background: var(--jla-paper-soft);
	padding: 2px 6px;
	font-size: 14px;
	border: 1px solid var(--jla-line);
}

.jlv-single__body a {
	color: var(--jla-accent);
	border-bottom: 1px solid var(--jla-line);
	transition: border-color .15s;
}
.jlv-single__body a:hover {
	border-bottom-color: var(--jla-accent);
}

.jlv-single__body hr {
	border: 0;
	height: 1px;
	background: var(--jla-line);
	margin: 3em 0;
}

/* drop cap on first paragraph */
.jlv-single__body > p:first-of-type::first-letter {
	font-family: var(--jla-serif);
	font-size: 3.4em;
	float: left;
	line-height: 0.9;
	margin: 0.05em 0.1em 0 0;
	color: var(--jla-accent);
	font-weight: 900;
}

/* ----------------------------------------------------------------
 * Single foot
 * ---------------------------------------------------------------- */

.jlv-single__foot {
	max-width: 760px;
	margin: 56px auto 0;
}

.jlv-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 20px 0;
	border-top: 1px solid var(--jla-line);
	border-bottom: 1px solid var(--jla-line);
	margin-bottom: 48px;
}
.jlv-tag {
	font-size: 12px;
	padding: 6px 12px;
	background: var(--jla-paper-soft);
	border: 1px solid var(--jla-line);
	color: var(--jla-ink-soft);
	letter-spacing: 0.04em;
}
.jlv-tag:hover {
	border-color: var(--jla-accent);
	color: var(--jla-accent);
}

.jlv-single__pagination {
	font-size: 13px;
	color: var(--jla-meta);
	margin: 32px 0;
	padding: 14px 0;
	border-top: 1px dashed var(--jla-line);
	border-bottom: 1px dashed var(--jla-line);
}

/* ----------------------------------------------------------------
 * Related
 * ---------------------------------------------------------------- */

.jlv-related {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 2px solid var(--jla-line);
}
.jlv-related__title {
	font-family: var(--jla-serif);
	font-size: 22px;
	margin: 0 0 32px;
	letter-spacing: 0.05em;
	text-align: center;
}
.jlv-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 720px) {
	.jlv-related__grid { grid-template-columns: 1fr; }
}
.jlv-related__item {
	background: var(--jla-paper);
	border: 1px solid var(--jla-line);
	transition: border-color .2s, transform .2s, box-shadow .2s;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.jlv-related__item:hover {
	border-color: var(--jla-accent);

}
.jlv-related__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--jla-paper-soft);
}
.jlv-related__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
.jlv-related__item:hover .jlv-related__media img { transform: scale(1.04); }
.jlv-related__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.jlv-related__cat {
	display: inline-block;
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--jla-accent);
	text-transform: uppercase;
	margin-bottom: 8px;
}
.jlv-related__title-inner {
	font-family: var(--jla-serif);
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 12px;
}
.jlv-related__title-inner a { color: var(--jla-ink); }
.jlv-related__title-inner a:hover { color: var(--jla-accent); }
.jlv-related__meta {
	font-size: 11px;
	color: var(--jla-meta);
	letter-spacing: 0.04em;
	margin-top: auto;
}

/* ----------------------------------------------------------------
 * Comments
 * ---------------------------------------------------------------- */
.jlv-comments {
	max-width: 760px;
	margin: 64px auto 0;
	padding-top: 48px;
	border-top: 2px solid var(--jla-line);
}
.jlv-comments__title {
	font-family: var(--jla-serif);
	font-size: 22px;
	margin: 0 0 28px;
}
.jlv-comments__list,
.jlv-comments__list ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jlv-comments__list .comment {
	padding: 20px 0;
	border-bottom: 1px solid var(--jla-line-soft);
}
.jlv-comments__list .comment:last-child { border-bottom: 0; }
.jlv-comments__list .children {
	margin-left: 32px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--jla-line-soft);
}
.jlv-comment-form {
	margin-top: 32px;
	padding: 28px;
	background: var(--jla-paper-soft);
	border: 1px solid var(--jla-line);
}
.jlv-comment-form input[type="text"],
.jlv-comment-form input[type="email"],
.jlv-comment-form input[type="url"],
.jlv-comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	font: inherit;
	color: var(--jla-ink);
	background: var(--jla-paper);
	border: 1px solid var(--jla-line);
	margin-top: 6px;
}
.jlv-comment-form input:focus,
.jlv-comment-form textarea:focus {
	outline: none;
	border-color: var(--jla-accent);
}
.jlv-comment-form .submit {
	background: var(--jla-ink);
	color: var(--jla-paper);
	padding: 12px 28px;
	border: 1px solid var(--jla-ink);
	font-weight: 500;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: all .15s;
}
.jlv-comment-form .submit:hover {
	background: var(--jla-paper);
	color: var(--jla-ink);
}

/* ----------------------------------------------------------------
 * Page (static page) tweaks
 * ---------------------------------------------------------------- */
.jlv-page {
	max-width: 760px;
	margin: 0 auto;
}
.jlv-page__head {
	margin-bottom: 36px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--jla-line);
}
.jlv-page__title {
	font-family: var(--jla-serif);
	font-size: clamp(28px, 4vw, 38px);
	margin: 0;
}
.jlv-page__body {
	font-size: 16px;
	line-height: 1.95;
}
.jlv-page__body h2 {
	font-family: var(--jla-serif);
	font-size: 22px;
	margin: 2em 0 0.8em;
}
.jlv-page__body p { margin: 0 0 1.2em; }
.jlv-page__body ul,
.jlv-page__body ol {
	margin: 1em 0;
	padding-left: 1.6em;
}