/**
 * Original single-post presentation for RE:STORY.
 * Cocoon owns the markup; every override is gated by the body class below.
 */

.tn-article-design {
	--tn-article-accent: #506f61;
	--tn-article-paper: #f7f3e9;
	--tn-article-paper-deep: #eee8da;
	--tn-article-surface: #fffdf8;
	--tn-article-ink: #24352f;
	--tn-article-muted: #5f6e67;
	--tn-article-accent-dark: #39584c;
	--tn-article-accent-soft: #edf4ef;
	--tn-article-secondary: #79556f;
	--tn-article-highlight: #a45132;
	--tn-article-highlight-soft: #fae8dc;
	--tn-article-rule: rgba(36, 53, 47, 0.24);
	--tn-article-radius: 16px;
	--tn-article-display-font: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
	background-color: var(--tn-article-paper);
	background-image:
		linear-gradient(rgba(80, 111, 97, 0.032) 1px, transparent 1px),
		radial-gradient(circle at 7% 3%, var(--tn-article-highlight-soft), transparent 23rem),
		radial-gradient(circle at 95% 18%, var(--tn-article-accent-soft), transparent 26rem);
	background-size: 100% 30px, auto, auto;
	color: var(--tn-article-ink);
}

.tn-article-design.tn-corners-square { --tn-article-radius: 3px; }
.tn-article-design.tn-corners-round { --tn-article-radius: 25px; }

.tn-article-design.tn-font-mincho {
	--tn-article-display-font: "Yu Mincho", "Hiragino Mincho ProN", "BIZ UDPMincho", Georgia, serif;
}

.tn-article-design.tn-font-mincho .article {
	font-family: "Yu Mincho", "Hiragino Mincho ProN", "BIZ UDPMincho", Georgia, serif;
}

.tn-article-design.tn-font-gothic {
	--tn-article-display-font: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

.tn-article-design.tn-font-gothic .article {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* Compact site identity for single posts. Cocoon keeps the semantic header. */
.tn-article-design #header {
	position: relative;
	display: grid;
	min-height: 190px;
	place-items: center;
	padding: 22px;
	background-color: var(--tn-article-paper-deep);
	background-image: var(--tn-article-site-header-image);
	background-position: center;
	background-size: cover;
}

.tn-article-design #header-in {
	display: flex;
	width: min(1120px, 100%);
	min-height: 0;
	align-items: flex-start;
	justify-content: flex-end;
	flex-direction: column;
	gap: 8px;
	padding: 24px clamp(28px, 6vw, 74px) 28px;
}

.tn-article-design #header .tagline {
	margin: 0;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-shadow: 0 1px 2px rgba(25, 31, 29, 0.94), 0 2px 8px rgba(25, 31, 29, 0.72);
}

.tn-article-design #header .logo-header {
	width: auto;
	max-width: min(720px, 76vw);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-align: left;
}

.tn-article-design #header .logo-header::after {
	content: "";
	display: block;
	width: 64px;
	height: 2px;
	margin-top: 11px;
	background: rgba(255, 255, 255, 0.86);
}

.tn-article-design #header .site-name-text-link {
	display: block;
	color: #fff;
	text-decoration: none;
}

.tn-article-design #header .site-name-text {
	color: inherit;
	font-family: var(--tn-article-display-font);
	font-size: clamp(27px, 3.1vw, 38px);
	font-weight: 750;
	letter-spacing: 0.025em;
	line-height: 1.28;
	-webkit-text-stroke: 0.2px rgba(25, 31, 29, 0.62);
	text-shadow:
		0 1px 2px rgba(25, 31, 29, 0.82),
		0 3px 12px rgba(25, 31, 29, 0.46);
	text-wrap: balance;
}

.tn-article-design.tn-article-site-header-plain #header {
	min-height: 130px;
	background-image:
		radial-gradient(circle at 16% 32%, var(--tn-article-highlight-soft), transparent 17rem),
		linear-gradient(115deg, var(--tn-article-accent-soft), var(--tn-article-paper-deep));
}

.tn-article-design.tn-article-site-header-plain #header .tagline,
.tn-article-design.tn-article-site-header-plain #header .site-name-text-link {
	color: var(--tn-article-ink);
}

.tn-article-design.tn-article-site-header-plain #header .site-name-text {
	-webkit-text-stroke: 0;
	text-shadow: none;
}
.tn-article-design.tn-article-site-header-plain #header .logo-header::after { background: var(--tn-article-accent); }

.tn-article-design.tn-article-site-header-hidden #header { display: none; }

.tn-article-design #navi {
	border-bottom: 1px solid var(--tn-article-rule);
	background: var(--tn-article-surface);
}

.tn-article-design #content {
	position: relative;
	z-index: 2;
}

.tn-article-design .content-in {
	align-items: flex-start;
	gap: clamp(24px, 4vw, 44px);
	padding-inline: clamp(12px, 2vw, 24px);
}

.tn-article-design .main,
.tn-article-design .sidebar,
.tn-article-design .article,
.tn-article-design .widget { box-sizing: border-box; }

.tn-article-design .main {
	margin-top: -42px;
	margin-bottom: 42px;
	padding: clamp(22px, 4.8vw, 58px);
	overflow: visible;
	border: 1px solid var(--tn-article-rule);
	border-left: 5px solid var(--tn-article-accent);
	border-radius: 6px calc(var(--tn-article-radius) + 10px) calc(var(--tn-article-radius) + 10px) calc(var(--tn-article-radius) + 10px);
	background: var(--tn-article-surface);
	box-shadow: 0 24px 64px rgba(36, 53, 47, 0.14);
}

.tn-article-design .article-header {
	position: relative;
	margin: calc(clamp(22px, 4.8vw, 58px) * -1) calc(clamp(22px, 4.8vw, 58px) * -1) 44px;
	padding: clamp(34px, 5vw, 54px) clamp(22px, 5vw, 62px) clamp(26px, 4vw, 38px);
	overflow: hidden;
	border-radius: 2px calc(var(--tn-article-radius) + 9px) 0 0;
	border-bottom: 1px solid var(--tn-article-rule);
	background:
		linear-gradient(115deg, var(--tn-article-accent-soft), transparent 70%),
		var(--tn-article-surface);
}

.tn-article-design .article-header::before {
	content: "STORY & NOTE";
	display: inline-flex;
	min-height: 28px;
	align-items: center;
	margin-bottom: 16px;
	padding: 2px 11px;
	border: 1px solid var(--tn-article-accent);
	border-radius: 999px;
	color: var(--tn-article-accent-dark);
	font-family: system-ui, sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.tn-article-design .article-header::after {
	content: "";
	position: absolute;
	top: -72px;
	right: -36px;
	width: 210px;
	aspect-ratio: 1;
	transform: rotate(13deg);
	border: 1px solid var(--tn-article-rule);
	background: repeating-linear-gradient(0deg, transparent 0 18px, var(--tn-article-rule) 19px 20px);
	opacity: 0.24;
	pointer-events: none;
}

.tn-article-design .entry-title {
	position: relative;
	z-index: 1;
	max-width: 820px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tn-article-ink);
	font-family: var(--tn-article-display-font);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 750;
	letter-spacing: 0.02em;
	line-height: 1.42;
	text-wrap: pretty;
}

.tn-article-design .date-tags,
.tn-article-design .post-date,
.tn-article-design .post-update,
.tn-article-design .entry-category,
.tn-article-design .entry-categories-tags {
	position: relative;
	z-index: 1;
	color: var(--tn-article-muted);
	font-size: 13px;
}

.tn-article-design .eye-catch-wrap {
	margin: 0 0 clamp(34px, 5vw, 56px);
	padding: 9px;
	transform: rotate(-0.35deg);
	border: 1px solid var(--tn-article-rule);
	border-radius: calc(var(--tn-article-radius) + 2px) calc(var(--tn-article-radius) + 2px) 6px calc(var(--tn-article-radius) + 2px);
	background: #fff;
	box-shadow: 0 16px 34px rgba(36, 53, 47, 0.1);
}

.tn-article-design .eye-catch-wrap img {
	display: block;
	width: 100%;
	border-radius: max(2px, calc(var(--tn-article-radius) - 4px));
}

.tn-article-design .entry-content {
	max-width: 760px;
	margin-inline: auto;
	color: var(--tn-article-ink);
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 2;
	overflow-wrap: anywhere;
}

.tn-article-design .entry-content > * + * { margin-top: 1.45em; }

.tn-article-design .entry-content h2 {
	position: relative;
	margin-top: clamp(58px, 8vw, 88px);
	padding: 20px 22px 18px 25px;
	border: 0;
	border-left: 7px solid var(--tn-article-accent);
	border-radius: 3px var(--tn-article-radius) var(--tn-article-radius) 3px;
	background: var(--tn-article-accent-soft);
	color: var(--tn-article-ink);
	font-size: clamp(23px, 3vw, 31px);
	line-height: 1.55;
}

.tn-article-design .entry-content h2::after {
	content: "";
	position: absolute;
	right: 18px;
	bottom: -7px;
	width: 72px;
	height: 14px;
	transform: rotate(-2deg);
	background: var(--tn-article-highlight-soft);
	opacity: 0.9;
}

.tn-article-design .entry-content h3 {
	margin-top: 2.5em;
	padding: 8px 4px 10px 17px;
	border: 0;
	border-left: 4px solid var(--tn-article-secondary);
	border-bottom: 1px dashed var(--tn-article-rule);
	background: transparent;
	color: var(--tn-article-ink);
	font-size: clamp(20px, 2.5vw, 25px);
}

.tn-article-design .entry-content h4 {
	margin-top: 2.2em;
	padding-bottom: 7px;
	border: 0;
	border-bottom: 3px double var(--tn-article-rule);
	color: var(--tn-article-accent-dark);
}

.tn-article-design .entry-content a {
	color: var(--tn-article-accent-dark);
	text-decoration-color: var(--tn-article-highlight);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.tn-article-design .entry-content a:hover { color: var(--tn-article-highlight); }

.tn-article-design .entry-content .tn-cta a,
.tn-article-design .entry-content .tn-cta .wp-block-button__link {
	color: #fff;
	text-decoration: none;
}

.tn-article-design .entry-content .tn-cta a:hover,
.tn-article-design .entry-content .tn-cta .wp-block-button__link:hover {
	color: #fff;
}

.tn-article-design :focus-visible {
	outline: 3px solid var(--tn-article-secondary);
	outline-offset: 4px;
}

.tn-article-design .entry-content blockquote {
	position: relative;
	margin: 2em 0;
	padding: 26px 28px 22px 56px;
	border: 1px solid var(--tn-article-rule);
	border-radius: var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius) 5px;
	background: var(--tn-article-paper);
	color: var(--tn-article-muted);
}

.tn-article-design .entry-content blockquote::before {
	content: "“";
	position: absolute;
	top: 3px;
	left: 18px;
	color: var(--tn-article-accent);
	font-family: Georgia, serif;
	font-size: 54px;
	line-height: 1;
}

.tn-article-design .entry-content > ul:not([class]),
.tn-article-design .entry-content > ol:not([class]) {
	padding: 24px 28px 24px 48px;
	border: 1px solid #dce3df;
	border-radius: min(8px, var(--tn-article-radius));
	background: #fff;
	box-shadow: 0 4px 14px rgba(36, 53, 47, 0.035);
}

.tn-article-design .entry-content > ul:not([class]) > li::marker,
.tn-article-design .entry-content > ol:not([class]) > li::marker {
	color: var(--tn-inner-accent, var(--tn-article-accent, #506f61));
}

.tn-article-design .entry-content li + li { margin-top: 0.65em; }

.tn-article-design .toc {
	position: relative;
	max-width: 680px;
	margin: clamp(36px, 5vw, 54px) auto;
	padding: 28px clamp(20px, 4vw, 36px);
	transform: rotate(-0.18deg);
	border: 1px solid var(--tn-article-rule);
	border-radius: 4px var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius);
	background: repeating-linear-gradient(0deg, transparent 0 29px, rgba(80, 111, 97, 0.09) 30px), var(--tn-article-surface);
	box-shadow: 8px 10px 0 var(--tn-article-paper-deep);
}

.tn-article-design .toc::before {
	content: "INDEX";
	position: absolute;
	top: -14px;
	right: 22px;
	padding: 4px 13px;
	transform: rotate(2deg);
	background: var(--tn-article-highlight-soft);
	color: var(--tn-article-highlight);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.15em;
}

.tn-article-design .toc-title {
	color: var(--tn-article-ink);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.tn-article-design .entry-content table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--tn-article-rule);
	border-radius: 12px;
	background: var(--tn-article-surface);
}

.tn-article-design .entry-content th {
	background: var(--tn-article-accent-soft);
	color: var(--tn-article-accent-dark);
}

.tn-article-design .entry-content th,
.tn-article-design .entry-content td {
	padding: 13px 15px;
	border-color: var(--tn-article-rule);
}

.tn-article-design .information-box,
.tn-article-design .question-box,
.tn-article-design .alert-box,
.tn-article-design .memo-box,
.tn-article-design .comment-box,
.tn-article-design .common-icon-box,
.tn-article-design .blank-box,
.tn-article-design .caption-box {
	border-width: 1px;
	border-radius: var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius) 5px;
	box-shadow: none;
}

.tn-article-design .sns-share,
.tn-article-design .sns-follow,
.tn-article-design .related-entry-heading,
.tn-article-design .author-box {
	max-width: 760px;
	margin-right: auto;
	margin-left: auto;
}

.tn-article-design .sns-share {
	margin-top: 58px;
	padding-top: 28px;
	border-top: 1px dashed var(--tn-article-rule);
}

.tn-article-design .article-header > .sns-share {
	margin-top: 34px;
	padding-top: 22px;
}

.tn-article-design .sns-share-message,
.tn-article-design .sns-follow-message {
	color: var(--tn-article-muted);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.tn-article-design .sns-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.tn-article-design .sns-buttons a,
.tn-article-design .sns-share-buttons a,
.tn-article-design .sns-follow-buttons a {
	min-width: 46px;
	min-height: 46px;
	border: 1px solid var(--tn-article-rule);
	border-radius: 999px;
	box-shadow: none;
	filter: saturate(0.68);
	transition: transform 160ms ease, filter 160ms ease;
}

.tn-article-design .sns-buttons a:hover,
.tn-article-design .sns-share-buttons a:hover,
.tn-article-design .sns-follow-buttons a:hover {
	transform: translateY(-2px);
	filter: saturate(0.95);
}

.tn-article-design .author-box {
	padding: clamp(22px, 4vw, 34px);
	border: 1px solid var(--tn-article-rule);
	border-radius: var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius) 5px;
	background: linear-gradient(135deg, var(--tn-article-accent-soft), var(--tn-article-surface));
	box-shadow: 8px 9px 0 var(--tn-article-paper-deep);
}

.tn-article-design .author-thumb img { border: 4px solid var(--tn-article-surface); }

.tn-article-design .related-entry-heading,
.tn-article-design .comment-title {
	padding: 12px 0;
	border: 0;
	border-bottom: 3px double var(--tn-article-rule);
	background: none;
	color: var(--tn-article-ink);
}

.tn-article-design .related-entry-card-wrap { border-bottom: 1px dashed var(--tn-article-rule); }

.tn-article-design .related-entry-card {
	padding: 15px;
	border-radius: 12px;
	transition: background-color 160ms ease, transform 160ms ease;
}

.tn-article-design .related-entry-card:hover {
	transform: translateX(3px);
	background: var(--tn-article-accent-soft);
}

.tn-article-design .sidebar .widget {
	padding: 22px;
	border: 1px solid var(--tn-article-rule);
	border-radius: 4px var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius);
	background: var(--tn-article-surface);
	box-shadow: 0 12px 34px rgba(36, 53, 47, 0.07);
}

.tn-article-design .sidebar .widget-title {
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid var(--tn-article-accent);
	background: none;
	color: var(--tn-article-ink);
	font-size: 17px;
	letter-spacing: 0.06em;
}

.tn-article-design .breadcrumb {
	color: var(--tn-article-muted);
	font-size: 12px;
}

@media (max-width: 1023px) {
	.tn-article-design .content-in { display: block; }
	.tn-article-design .sidebar { margin-top: 34px; }
}

@media (max-width: 640px) {
	.tn-article-design #header {
		min-height: 118px;
		padding: 0;
	}

	.tn-article-design #header-in {
		width: 100%;
		padding: 18px 22px 20px;
	}

	.tn-article-design #header .logo-header {
		max-width: calc(100vw - 34px);
	}

	.tn-article-design #header .site-name-text {
		font-size: clamp(21px, 6.2vw, 26px);
		letter-spacing: 0.02em;
	}

	.tn-article-design.tn-article-site-header-plain #header { min-height: 96px; }

	.tn-article-design .main {
		margin-top: -18px;
		margin-bottom: 18px;
		padding: 20px 17px 30px;
		border-right: 0;
		border-left: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.tn-article-design .article-header {
		margin: -20px -17px 30px;
		padding: 32px 19px 24px;
		border-radius: 0;
	}

	.tn-article-design .article-header::after { width: 116px; opacity: 0.2; }
	.tn-article-design .entry-title { font-size: clamp(25px, 8vw, 34px); }
	.tn-article-design .article-header > .sns-share { margin-top: 28px; padding-top: 20px; }

	.tn-article-design .eye-catch-wrap {
		margin-inline: -5px;
		padding: 6px;
	}

	.tn-article-design .entry-content { font-size: 16px; line-height: 1.9; }

	.tn-article-design .entry-content h2 {
		margin-top: 52px;
		padding: 17px 15px 15px 17px;
		font-size: 23px;
	}

	.tn-article-design .entry-content h3 { font-size: 20px; }
	.tn-article-design .entry-content blockquote { padding: 22px 18px 18px 43px; }

	.tn-article-design .entry-content > ul:not([class]),
	.tn-article-design .entry-content > ol:not([class]) { padding: 20px 18px 20px 40px; }

	.tn-article-design .toc {
		margin-right: 5px;
		margin-left: 0;
		padding: 24px 18px;
	}

	.tn-article-design .sns-buttons a,
	.tn-article-design .sns-share-buttons a,
	.tn-article-design .sns-follow-buttons a {
		min-width: 44px;
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tn-article-design .sns-buttons a,
	.tn-article-design .sns-share-buttons a,
	.tn-article-design .sns-follow-buttons a,
	.tn-article-design .related-entry-card { transition: none; }
}