/*
 * Nail Guide Journal — single post
 * Scoped to the standard-post template so archives and other content types
 * retain their existing presentation.
 */

body.single-post .ng-journal-article {
	--ng-article-width: 700px;
	--ng-article-wide: 1120px;
	--ng-article-paper: #fffdf9;
	--ng-article-soft: #f1ece6;
	padding-top: var(--ng-header-height);
	overflow-x: clip;
	background: var(--ng-ivory);
	color: var(--ng-charcoal);
}

/* Header */
body.single-post .ng-journal-article__header {
	padding: 78px 20px 54px;
	background: #e9e3dc;
}

body.single-post .ng-journal-article__header-inner {
	width: min(100%, 860px);
	margin-inline: auto;
	text-align: center;
}

body.single-post .ng-journal-category {
	margin: 0 0 20px;
	color: var(--ng-rose);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
}

body.single-post .ng-journal-article__header h1 {
	max-width: 680px;
	margin: 0 auto;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Kaku Gothic ProN", serif;
	font-size: clamp(26px, 7vw, 30px);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.42;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	text-wrap: pretty;
}

body.single-post .ng-journal-article__meta {
	margin-top: 26px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	color: var(--ng-muted);
	font-size: 10px;
	letter-spacing: .1em;
}

/* Featured image */
body.single-post .ng-journal-article__cover {
	width: min(calc(100% - 32px), 980px);
	margin: 38px auto 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ng-greige);
	/* Keep every article hero in one consistent frame.
	 * This also prevents tall/compound source images from exposing an
	 * unintended lower strip below the intended thumbnail crop. */
	aspect-ratio: 16 / 9;
}

body.single-post .ng-journal-article__cover img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center top;
}

/* Reading column */
body.single-post .ng-journal-article__layout {
	width: min(calc(100% - 40px), var(--ng-article-width));
	margin-inline: auto;
	padding-block: 52px 88px;
}

body.single-post .ng-journal-article__body {
	min-width: 0;
}

body.single-post .ng-journal-article__body > section {
	scroll-margin-top: 100px;
	margin-bottom: 64px;
}

body.single-post .ng-journal-section-label,
body.single-post .ng-journal-toc > p {
	margin: 0 0 12px;
	color: var(--ng-rose);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .2em;
}

/* Lead */
body.single-post .ng-journal-lead {
	padding-bottom: 42px;
	border-bottom: 1px solid var(--ng-border);
}

body.single-post .ng-journal-lead > p:last-child {
	margin: 0;
	color: #494541;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 17px;
	line-height: 2;
}

/* Key points */
body.single-post .ng-journal-points {
	width: 100%;
	padding: 32px 24px;
	border: 1px solid rgba(185, 134, 139, .58);
	border-radius: 8px;
	background: #f3eee8;
}

body.single-post .ng-journal-points h2 {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	font-size: 24px;
	font-weight: 500;
}

body.single-post .ng-journal-points ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

body.single-post .ng-journal-points li {
	padding: 14px 0;
	display: flex;
	gap: 14px;
	border-top: 1px solid rgba(39, 37, 34, .08);
	color: #504b47;
	font-size: 15.5px;
	line-height: 1.75;
}

body.single-post .ng-journal-points li span {
	flex: 0 0 auto;
	color: var(--ng-rose);
	font-size: 12px;
}

/* Table of contents */
body.single-post .ng-journal-toc {
	position: static;
	width: 100%;
	margin: 0 0 68px;
	padding: 30px 24px 20px;
	border: 1px solid rgba(185, 134, 139, .3);
	border-radius: 8px;
	background: #fdfaf6;
}

body.single-post .ng-journal-toc h2 {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-size: 22px;
}

body.single-post .ng-journal-toc ol {
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(185, 134, 139, .28);
	list-style: none;
	counter-reset: journal-toc;
}

body.single-post .ng-journal-toc li {
	counter-increment: journal-toc;
	border-bottom: 1px solid rgba(185, 134, 139, .22);
}

body.single-post .ng-journal-toc a {
	min-height: 54px;
	padding: 12px 2px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: #58524d;
	font-size: 14px;
	line-height: 1.6;
	text-decoration: none;
}

body.single-post .ng-journal-toc a::before {
	content: counter(journal-toc, decimal-leading-zero);
	color: var(--ng-rose);
	font-family: Georgia, serif;
	font-size: 11px;
	font-style: italic;
}

body.single-post .ng-journal-toc a:hover,
body.single-post .ng-journal-toc a:focus-visible {
	color: var(--ng-rose);
}

/* Article typography */
body.single-post .ng-journal-article__body h2,
body.single-post .ng-journal-prose h1,
body.single-post .ng-journal-prose h2 {
	position: relative;
	margin: 64px 0 24px;
	padding-left: 16px;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(22px, 5.9vw, 25px);
	font-weight: 400;
	letter-spacing: -.025em;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

body.single-post .ng-journal-article__body h2::before,
body.single-post .ng-journal-prose h1::before,
body.single-post .ng-journal-prose h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .22em;
	width: 2px;
	height: 1.18em;
	background: var(--ng-rose);
}

body.single-post .ng-journal-article__body h3,
body.single-post .ng-journal-prose h3 {
	position: relative;
	margin: 46px 0 18px;
	padding-left: 15px;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(18px, 4.8vw, 20px);
	font-weight: 500;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

body.single-post .ng-journal-article__body h3::before,
body.single-post .ng-journal-prose h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ng-rose);
}

/* Gutenberg/Markdown paste safety: the post title is already the page H1.
 * Hide a duplicated first heading in the article body and render any later H1
 * with the same visual hierarchy as H2 so pasted Markdown cannot break the layout. */
body.single-post .ng-journal-prose > h1:first-child,
body.single-post .ng-journal-prose > h2:first-child {
	display: none;
}

body.single-post .ng-journal-prose h4 {
	margin: 38px 0 14px;
	font-size: 17px;
	line-height: 1.6;
}

body.single-post .ng-journal-prose p,
body.single-post .ng-journal-prose li,
body.single-post .ng-journal-summary p,
body.single-post .ng-journal-conclusion p {
	color: #504b47;
	font-size: 15.75px;
	line-height: 1.92;
}

body.single-post .ng-journal-prose p {
	margin-block: 0 1.55em;
}

body.single-post .ng-journal-prose ul,
body.single-post .ng-journal-prose ol {
	margin: 26px 0 34px;
	padding-left: 1.4em;
}

body.single-post .ng-journal-prose li {
	margin-bottom: .65em;
	padding-left: .2em;
}

body.single-post .ng-journal-prose a {
	color: #9d686e;
	text-decoration: none;
	border-bottom: 1px solid rgba(157, 104, 110, .35);
}

body.single-post .ng-journal-prose a:hover,
body.single-post .ng-journal-prose a:focus-visible {
	color: var(--ng-charcoal);
	border-bottom-color: currentColor;
}

body.single-post .ng-journal-prose img {
	width: auto;
	max-width: 100%;
	height: auto;
	margin-block: 34px;
	border-radius: 8px;
}

body.single-post .ng-journal-prose blockquote {
	margin: 38px 0;
	padding: 24px 22px;
	border: 0;
	border-left: 3px solid var(--ng-rose);
	background: var(--ng-article-soft);
}

body.single-post .ng-journal-prose blockquote p {
	margin: 0;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: 17px;
	line-height: 1.9;
}

/* Summary and conclusion */
body.single-post .ng-journal-summary,
body.single-post .ng-journal-conclusion {
	position: relative;
	padding: 30px 22px;
	border-radius: 8px;
	background: #ece6df;
}

body.single-post .ng-journal-summary h2,
body.single-post .ng-journal-conclusion h2 {
	margin-top: 0;
	font-size: 24px;
}

body.single-post .ng-journal-summary div > :last-child,
body.single-post .ng-journal-conclusion div > :last-child {
	margin-bottom: 0;
}

body.single-post .ng-journal-conclusion {
	border-left: 3px solid var(--ng-rose);
	background: var(--ng-article-paper);
}

/* Optional structured lists */
body.single-post .ng-journal-list-section ol {
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: article-list;
	border-top: 1px solid var(--ng-border);
}

body.single-post .ng-journal-list-section li {
	min-height: 76px;
	padding: 20px 2px;
	display: grid;
	grid-template-columns: 38px 1fr;
	align-items: center;
	gap: 12px;
	border-bottom: 1px solid var(--ng-border);
	counter-increment: article-list;
	color: #504b47;
	font-size: 15.5px;
	line-height: 1.8;
}

body.single-post .ng-journal-list-section li::before {
	content: counter(article-list, decimal-leading-zero);
	color: var(--ng-rose);
	font-family: Georgia, serif;
	font-size: 12px;
	font-style: italic;
}

body.single-post .ng-journal-recommended {
	padding: 30px 22px;
	border-radius: 8px;
	background: var(--ng-charcoal);
	color: #fff;
}

body.single-post .ng-journal-recommended h2 {
	margin-top: 0;
	color: #fff;
}

body.single-post .ng-journal-recommended ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

body.single-post .ng-journal-recommended li {
	padding: 14px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	line-height: 1.7;
}

body.single-post .ng-journal-recommended li::before {
	content: "✓";
	margin-right: 10px;
	color: var(--ng-rose);
}

/* Core tables */
body.single-post .ng-journal-prose .wp-block-table {
	max-width: 100%;
	margin: 38px 0 44px;
	overflow-x: auto;
	border: 1px solid var(--ng-border);
	border-radius: 8px;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

body.single-post .ng-journal-prose .wp-block-table table {
	width: 100%;
	min-width: 620px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: auto;
}

body.single-post .ng-journal-prose .wp-block-table th,
body.single-post .ng-journal-prose .wp-block-table td {
	min-width: 120px;
	padding: 14px 16px;
	border: 0;
	border-right: 1px solid var(--ng-border);
	border-bottom: 1px solid var(--ng-border);
	color: #504b47;
	font-size: 13.5px;
	line-height: 1.65;
	text-align: left;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: normal;
}

body.single-post .ng-journal-prose .wp-block-table th {
	background: #eadfde;
	color: var(--ng-charcoal);
	font-weight: 600;
}

body.single-post .ng-journal-prose .wp-block-table tr:last-child td {
	border-bottom: 0;
}

body.single-post .ng-journal-prose .wp-block-table th:last-child,
body.single-post .ng-journal-prose .wp-block-table td:last-child {
	border-right: 0;
}

/* FAQ blocks written with core headings */
body.single-post .ng-journal-prose h2:has(+ h3) {
	margin-bottom: 22px;
}

body.single-post .ng-journal-prose h2:has(+ h3) ~ h3 {
	margin: 14px 0 0;
	padding: 20px 20px 10px 50px;
	border: 1px solid var(--ng-border);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
}

body.single-post .ng-journal-prose h2:has(+ h3) ~ h3::before {
	content: "Q";
	left: 20px;
	top: 19px;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--ng-rose);
	font-family: Georgia, serif;
	font-size: 17px;
}

body.single-post .ng-journal-prose h2:has(+ h3) ~ h3 + p {
	position: relative;
	margin: 0 0 14px;
	padding: 8px 20px 20px 50px;
	border: 1px solid var(--ng-border);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	background: #fff;
}

body.single-post .ng-journal-prose h2:has(+ h3) ~ h3 + p::before {
	content: "A";
	position: absolute;
	left: 20px;
	top: 8px;
	color: var(--ng-charcoal);
	font-family: Georgia, serif;
	font-weight: 600;
}

/* ACF FAQ fallback */
body.single-post .ng-journal-faq details {
	margin-bottom: 14px;
	border: 1px solid var(--ng-border);
	border-radius: 8px;
	background: #fff;
}

body.single-post .ng-journal-faq summary {
	position: relative;
	padding: 20px 20px 12px 50px;
	cursor: default;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.7;
	list-style: none;
}

body.single-post .ng-journal-faq summary::before {
	content: "Q";
	position: absolute;
	left: 20px;
	color: var(--ng-rose);
	font-family: Georgia, serif;
	font-size: 17px;
}

body.single-post .ng-journal-faq summary::-webkit-details-marker {
	display: none;
}

body.single-post .ng-journal-faq details > div {
	position: relative;
	padding: 4px 20px 20px 50px;
}

body.single-post .ng-journal-faq details > div::before {
	content: "A";
	position: absolute;
	left: 20px;
	color: var(--ng-charcoal);
	font-family: Georgia, serif;
	font-weight: 600;
}

/* Editorial note */
body.single-post .ng-journal-comment {
	margin-top: 54px;
	padding: 24px 0;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 16px;
	border-top: 1px solid var(--ng-border);
	border-bottom: 1px solid var(--ng-border);
}

body.single-post .ng-journal-comment > span {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ng-charcoal);
	color: #fff;
	font-family: Georgia, serif;
	font-size: 13px;
}

body.single-post .ng-journal-comment p,
body.single-post .ng-journal-editor-note p {
	margin: 0;
	color: var(--ng-muted);
	font-size: 12.5px;
	line-height: 1.85;
}

body.single-post .ng-journal-comment div > p:first-child {
	margin-bottom: 5px;
	color: var(--ng-rose);
	font-size: 10px;
	letter-spacing: .1em;
}

body.single-post .ng-journal-editor-note {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--ng-border);
}

body.single-post .ng-journal-editor-note .ng-journal-editor-note__name {
	margin-bottom: 6px;
	color: var(--ng-charcoal);
	font-size: 14px;
	font-weight: 600;
}

body.single-post .ng-journal-editor-note .ng-journal-editor-note__date {
	margin-bottom: 12px;
	font-size: 11px;
	letter-spacing: .04em;
}

/* Related stories */
body.single-post .ng-journal-related {
	padding: 76px 20px;
	background: var(--ng-article-paper);
}

body.single-post .ng-journal-related > * {
	width: min(100%, var(--ng-article-wide));
	margin-inline: auto;
}

body.single-post .ng-journal-related .ng-journal-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

body.single-post .ng-journal-related .ng-journal-card {
	height: 100%;
}

/* Salon CTA */
body.single-post .ng-journal-salon-slot {
	width: min(calc(100% - 40px), 840px);
	margin: 72px auto;
	padding: 48px 22px;
	border: 1px solid var(--ng-border);
	border-radius: 8px;
	background: #e9e3dc;
	text-align: center;
}

body.single-post .ng-journal-salon-slot h2 {
	margin: 0 0 16px;
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-size: clamp(26px, 7vw, 34px);
	font-weight: 400;
	line-height: 1.5;
}

body.single-post .ng-journal-salon-slot > p:not(.ng-component-label) {
	max-width: 520px;
	margin: 0 auto;
	color: var(--ng-muted);
	font-size: 14px;
	line-height: 1.9;
}

body.single-post .ng-journal-salon-slot .ng-global-button {
	margin-top: 26px;
}

body.single-post .ng-article-back {
	padding: 0 20px 88px;
	text-align: center;
}

/* Never let the long-form body depend on reveal JavaScript. */
body.single-post .ng-journal-details,
body.single-post .ng-journal-prose,
body.single-post .ng-journal-editor-note {
	opacity: 1 !important;
	transform: none !important;
}

@media (min-width: 761px) {
	body.single-post .ng-journal-article {
		--ng-article-width: 800px;
	}

	body.single-post .ng-journal-article__header {
		padding: 104px 24px 72px;
	}

	body.single-post .ng-journal-article__header-inner {
		width: min(100%, 920px);
	}

	body.single-post .ng-journal-article__header h1 {
		max-width: 860px;
		font-size: clamp(34px, 2.7vw, 40px);
		line-height: 1.4;
	}

	body.single-post .ng-journal-article__cover {
		width: min(calc(100% - 48px), 1000px);
		margin-top: 50px;
	}

	body.single-post .ng-journal-article__layout {
		padding-block: 76px 118px;
	}

	body.single-post .ng-journal-article__body > section {
		margin-bottom: 78px;
	}

	body.single-post .ng-journal-lead > p:last-child {
		font-size: 19px;
	}

	body.single-post .ng-journal-points,
	body.single-post .ng-journal-summary,
	body.single-post .ng-journal-conclusion,
	body.single-post .ng-journal-recommended {
		padding: 42px 44px;
	}

	body.single-post .ng-journal-toc {
		padding: 36px 40px 26px;
	}

	body.single-post .ng-journal-article__body h2,
	body.single-post .ng-journal-prose h1,
	body.single-post .ng-journal-prose h2 {
		margin-top: 72px;
		font-size: clamp(27px, 2.2vw, 30px);
	}

	body.single-post .ng-journal-article__body h3,
	body.single-post .ng-journal-prose h3 {
		margin-top: 52px;
		font-size: clamp(20px, 1.6vw, 22px);
	}

	body.single-post .ng-journal-prose p,
	body.single-post .ng-journal-prose li,
	body.single-post .ng-journal-summary p,
	body.single-post .ng-journal-conclusion p {
		font-size: 16.5px;
	}

	body.single-post .ng-journal-prose .wp-block-table th,
	body.single-post .ng-journal-prose .wp-block-table td {
		padding: 17px 20px;
		font-size: 14.5px;
	}

	body.single-post .ng-journal-related {
		padding-block: 104px;
	}

	body.single-post .ng-journal-related .ng-journal-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	body.single-post .ng-journal-salon-slot {
		width: min(calc(100% - 48px), var(--ng-article-width));
		margin-block: 104px;
		padding: 66px 48px;
	}
}

@media (max-width: 380px) {
	body.single-post .ng-journal-article__header,
	body.single-post .ng-journal-article__layout,
	body.single-post .ng-journal-related,
	body.single-post .ng-journal-salon-slot {
		--ng-mobile-gutter: 20px;
	}

	body.single-post .ng-journal-toc a {
		font-size: 13.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.single-post .ng-journal-article *,
	body.single-post .ng-journal-article *::before,
	body.single-post .ng-journal-article *::after {
		scroll-behavior: auto !important;
		animation: none !important;
		transition: none !important;
	}

	body.single-post .ng-journal-article .ng-global-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* v1.2.4 — Related story thumbnail fix
 * Keep related cards to a single, consistent thumbnail crop. This prevents
 * compound/tall source images from revealing an unintended lower strip. */
body.single-post .ng-journal-related .ng-journal-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
	background: var(--ng-greige);
}

body.single-post .ng-journal-related .ng-journal-card__image img,
body.single-post .ng-journal-related .ng-journal-card__image .wp-post-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center top;
}

/* v1.2.7 — Related story thumbnails use the full editorial artwork.
 * These images contain text, so cover-cropping must not be used. */
body.single-post .ng-journal-related .ng-journal-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 40 / 21 !important; /* 1200 / 630 */
	height: auto !important;
	overflow: hidden;
	background: #fbf7f4;
}
body.single-post .ng-journal-related .ng-journal-card__image img,
body.single-post .ng-journal-related .ng-journal-card__image .wp-post-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	margin: 0;
	object-fit: contain !important;
	object-position: center center !important;
}