/* Pétale Nocturne — full-width fragrance portrait. */

.petale-frag-data {
	--pfd-cream: #f9f4ec;
	--pfd-copper: #c79473;
	--pfd-dark: #171215;
	--pfd-faded: rgba( 255, 250, 244, 0.64 );
	--pfd-line: rgba( 255, 250, 244, 0.15 );
	background: radial-gradient( circle at 9% 4%, rgba( 202, 63, 114, 0.13 ), transparent 31rem ), radial-gradient( circle at 93% 88%, rgba( 170, 118, 88, 0.16 ), transparent 34rem ), var( --pfd-dark );
	color: var( --pfd-cream );
	margin: clamp( 48px, 7vw, 96px ) 0 clamp( 38px, 6vw, 78px );
	overflow: hidden;
	position: relative;
	width: 100%;
}

.petale-frag-data::before {
	border: 1px solid rgba( 255, 250, 244, 0.05 );
	content: "";
	inset: 9px;
	pointer-events: none;
	position: absolute;
}

.petale-frag-data .pfd-shell {
	margin: 0 auto;
	max-width: 1380px;
	padding: clamp( 42px, 6vw, 88px ) clamp( 20px, 5vw, 76px ) clamp( 34px, 5vw, 72px );
	position: relative;
}

.petale-frag-data .pfd-sr-only {
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.petale-frag-data .pfd-header {
	align-items: end;
	border-bottom: 1px solid var( --pfd-line );
	display: grid;
	gap: clamp( 28px, 5vw, 80px );
	grid-template-columns: minmax( 0, 1fr ) auto;
	padding-bottom: clamp( 30px, 4vw, 54px );
}

.petale-frag-data .pfd-heading { max-width: 740px; }

.petale-frag-data .pfd-kicker,
.petale-frag-data .pfd-section-number {
	color: var( --pfd-copper );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	line-height: 1;
	margin: 0 0 17px;
	text-transform: uppercase;
}

.petale-frag-data .pfd-heading h2 {
	color: #fffaf4;
	font-family: var( --petale-serif, Georgia, serif );
	font-size: clamp( 44px, 5.1vw, 78px );
	font-weight: 400;
	letter-spacing: -0.055em;
	line-height: 0.96;
	margin: 0;
}

.petale-frag-data .pfd-intro {
	color: var( --pfd-faded );
	font-size: clamp( 14px, 1.2vw, 16px );
	line-height: 1.65;
	margin: 22px 0 0;
	max-width: 560px;
}

.petale-frag-data .pfd-rating {
	display: grid;
	grid-template-columns: auto auto;
	min-width: 210px;
}

.petale-frag-data .pfd-rating-caption,
.petale-frag-data .pfd-rating-track { grid-column: 1 / -1; }

.petale-frag-data .pfd-rating-caption {
	color: var( --pfd-faded );
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-bottom: 7px;
	text-transform: uppercase;
}

.petale-frag-data .pfd-rating-score {
	color: #fffaf4;
	font-family: var( --petale-serif, Georgia, serif );
	font-size: 40px;
	letter-spacing: -0.04em;
	line-height: 1;
}

.petale-frag-data .pfd-rating-score small {
	color: var( --pfd-faded );
	font-family: var( --petale-sans, sans-serif );
	font-size: 12px;
	letter-spacing: 0;
	margin-left: 6px;
}

.petale-frag-data .pfd-rating-votes {
	align-self: end;
	color: var( --pfd-faded );
	font-size: 11px;
	padding-bottom: 3px;
	text-align: right;
}

.petale-frag-data .pfd-rating-track {
	background: rgba( 255, 255, 255, 0.1 );
	height: 2px;
	margin-top: 13px;
	overflow: hidden;
}

.petale-frag-data .pfd-rating-track span {
	background: linear-gradient( 90deg, var( --petale-pink, #ca3f72 ), var( --pfd-copper ) );
	display: block;
	height: 100%;
	width: var( --pfd-rating );
}

.petale-frag-data .pfd-profile-grid {
	display: grid;
	grid-template-columns: minmax( 280px, 0.78fr ) minmax( 480px, 1.22fr );
}

.petale-frag-data .pfd-panel {
	min-width: 0;
	padding: clamp( 36px, 5vw, 68px ) 0;
}

.petale-frag-data .pfd-panel + .pfd-panel {
	border-left: 1px solid var( --pfd-line );
	margin-left: clamp( 32px, 5vw, 72px );
	padding-left: clamp( 32px, 5vw, 72px );
}

.petale-frag-data .pfd-card-title,
.petale-frag-data .pfd-character-heading h3 {
	color: #fffaf4;
	font-family: var( --petale-serif, Georgia, serif );
	font-size: clamp( 25px, 2.2vw, 34px );
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin: 0;
}

.petale-frag-data .pfd-accord-list {
	display: grid;
	gap: 13px;
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.petale-frag-data .pfd-accord-list li {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns: 22px minmax( 100px, 0.65fr ) minmax( 90px, 1.35fr );
}

.petale-frag-data .pfd-accord-rank {
	color: rgba( 255, 250, 244, 0.36 );
	font-family: var( --petale-serif, Georgia, serif );
	font-size: 11px;
}

.petale-frag-data .pfd-accord-label {
	color: #fffaf4;
	font-size: 13px;
	line-height: 1.25;
}

.petale-frag-data .pfd-accord-track {
	background: rgba( 255, 255, 255, 0.08 );
	height: 5px;
	overflow: hidden;
}

.petale-frag-data .pfd-accord-track span {
	background: linear-gradient( 90deg, var( --pfd-accord ), color-mix( in srgb, var( --pfd-accord ) 70%, white ) );
	display: block;
	height: 100%;
	width: var( --pfd-strength );
}

@supports not ( color: color-mix( in srgb, black, white ) ) {
	.petale-frag-data .pfd-accord-track span { background: var( --pfd-accord ); }
}

.petale-frag-data .pfd-pyramid-levels {
	display: grid;
	margin-top: 24px;
}

.petale-frag-data .pfd-pyramid-level {
	border-top: 1px solid var( --pfd-line );
	display: grid;
	gap: 24px;
	grid-template-columns: minmax( 155px, 0.72fr ) minmax( 220px, 1.28fr );
	padding: 22px 0;
}

.petale-frag-data .pfd-pyramid-level:last-child { padding-bottom: 0; }

.petale-frag-data .pfd-level-heading {
	align-items: flex-start;
	display: flex;
	gap: 14px;
}

.petale-frag-data .pfd-level-heading > span {
	color: var( --pfd-copper );
	font-family: var( --petale-serif, Georgia, serif );
	font-size: 12px;
	padding-top: 3px;
}

.petale-frag-data .pfd-level-heading h4 {
	color: #fffaf4;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.25;
	margin: 0;
	text-transform: uppercase;
}

.petale-frag-data .pfd-level-heading p {
	color: var( --pfd-faded );
	font-size: 11px;
	line-height: 1.4;
	margin: 5px 0 0;
}

.petale-frag-data .pfd-note-list {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petale-frag-data .pfd-note-list li {
	background: rgba( 255, 250, 244, 0.055 );
	border: 1px solid var( --pfd-line );
	color: rgba( 255, 250, 244, 0.86 );
	font-size: 12px;
	line-height: 1.25;
	padding: 7px 10px;
}

.petale-frag-data .pfd-character {
	border-top: 1px solid var( --pfd-line );
	display: grid;
	gap: clamp( 30px, 5vw, 72px );
	grid-template-columns: minmax( 190px, 0.55fr ) minmax( 360px, 1.2fr ) minmax( 250px, 0.75fr );
	padding: clamp( 38px, 5vw, 62px ) 0;
}

.petale-frag-data .pfd-character-heading > p:last-child {
	color: var( --pfd-faded );
	font-size: 12px;
	line-height: 1.55;
	margin: 14px 0 0;
}

.petale-frag-data .pfd-performance-grid {
	display: grid;
	gap: clamp( 24px, 3vw, 40px );
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.petale-frag-data .pfd-performance-card .pfd-card-title,
.petale-frag-data .pfd-moments > .pfd-card-title {
	font-family: var( --petale-sans, sans-serif );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.petale-frag-data .pfd-distribution {
	display: grid;
	gap: 10px;
	margin: 22px 0 0;
}

.petale-frag-data .pfd-distribution-row {
	display: grid;
	gap: 8px;
}

.petale-frag-data .pfd-distribution-row dt {
	color: var( --pfd-faded );
	font-size: 10px;
	line-height: 1.25;
}

.petale-frag-data .pfd-distribution-row dd {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 31px;
	margin: 0;
}

.petale-frag-data .pfd-scale {
	background: rgba( 255, 255, 255, 0.08 );
	height: 3px;
	overflow: hidden;
}

.petale-frag-data .pfd-scale span {
	background: linear-gradient( 90deg, var( --petale-pink, #ca3f72 ), var( --pfd-copper ) );
	display: block;
	height: 100%;
	width: var( --pfd-value );
}

.petale-frag-data .pfd-value {
	color: rgba( 255, 250, 244, 0.48 );
	font-size: 9px;
	text-align: right;
}

.petale-frag-data .pfd-moment-group h4 {
	color: var( --pfd-faded );
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.08em;
	margin: 18px 0 8px;
	text-transform: uppercase;
}

.petale-frag-data .pfd-moment-group ul {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.petale-frag-data .pfd-moment-group li {
	align-items: center;
	background: linear-gradient( 90deg, rgba( 202, 63, 114, 0.16 ) var( --pfd-intensity ), rgba( 255, 250, 244, 0.045 ) var( --pfd-intensity ) );
	border: 1px solid var( --pfd-line );
	color: rgba( 255, 250, 244, 0.83 );
	display: inline-flex;
	font-size: 10px;
	gap: 6px;
	min-height: 31px;
	padding: 5px 9px;
}

.petale-frag-data .pfd-moment-symbol {
	color: var( --pfd-copper );
	font-size: 12px;
}

.petale-frag-data .pfd-meta {
	border-top: 1px solid var( --pfd-line );
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	margin: 0;
}

.petale-frag-data .pfd-meta > div {
	padding: 25px clamp( 18px, 3vw, 38px );
	text-align: center;
}

.petale-frag-data .pfd-meta > div + div { border-left: 1px solid var( --pfd-line ); }

.petale-frag-data .pfd-meta dt {
	color: var( --pfd-copper );
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.petale-frag-data .pfd-meta dd {
	color: #fffaf4;
	font-family: var( --petale-serif, Georgia, serif );
	font-size: clamp( 16px, 1.5vw, 21px );
	line-height: 1.25;
	margin: 0;
}

.petale-frag-data .pfd-disclaimer {
	color: rgba( 255, 250, 244, 0.36 );
	font-size: 9px;
	letter-spacing: 0.04em;
	margin: 20px 0 0;
	text-align: right;
}

@media ( max-width: 1050px ) {
	.petale-frag-data .pfd-profile-grid {
		grid-template-columns: minmax( 240px, 0.75fr ) minmax( 390px, 1.25fr );
	}

	.petale-frag-data .pfd-pyramid-level { grid-template-columns: 1fr; }

	.petale-frag-data .pfd-character { grid-template-columns: 0.65fr 1.35fr; }

	.petale-frag-data .pfd-moments { grid-column: 1 / -1; }
}

@media ( max-width: 768px ) {
	.petale-frag-data { margin: 42px 0 54px; }

	.petale-frag-data .pfd-shell { padding: 48px clamp( 18px, 5vw, 34px ) 34px; }

	.petale-frag-data .pfd-header,
	.petale-frag-data .pfd-profile-grid,
	.petale-frag-data .pfd-character { grid-template-columns: 1fr; }

	.petale-frag-data .pfd-rating {
		max-width: 240px;
		min-width: 0;
	}

	.petale-frag-data .pfd-panel + .pfd-panel {
		border-left: 0;
		border-top: 1px solid var( --pfd-line );
		margin: 0;
		padding-left: 0;
	}

	.petale-frag-data .pfd-character { gap: 34px; }

	.petale-frag-data .pfd-moments { grid-column: auto; }
}

@media ( max-width: 480px ) {
	.petale-frag-data::before { inset: 6px; }

	.petale-frag-data .pfd-heading h2 { font-size: clamp( 38px, 12vw, 50px ); }

	.petale-frag-data .pfd-accord-list li {
		gap: 8px;
		grid-template-columns: 18px minmax( 94px, 0.9fr ) minmax( 72px, 1.1fr );
	}

	.petale-frag-data .pfd-performance-grid,
	.petale-frag-data .pfd-meta { grid-template-columns: 1fr; }

	.petale-frag-data .pfd-meta > div { padding: 18px 8px; }

	.petale-frag-data .pfd-meta > div + div {
		border-left: 0;
		border-top: 1px solid var( --pfd-line );
	}

	.petale-frag-data .pfd-disclaimer {
		line-height: 1.4;
		text-align: left;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.petale-frag-data *,
	.petale-frag-data *::before,
	.petale-frag-data *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}