/* ==========================================================================
   Parxion — fine jewellery for men
   Brand tokens come from theme.json (--wp--preset--color--*).
   ========================================================================== */
:root {
	--px-ivory: var(--wp--preset--color--base, #F4EBE1);
	--px-ink: var(--wp--preset--color--contrast, #0B0A09);
	--px-sand: var(--wp--preset--color--accent-1, #D8BBA3);
	--px-clay: var(--wp--preset--color--accent-2, #C4A084);
	--px-bronze: var(--wp--preset--color--accent-3, #8A5A3B);
	--px-espresso: var(--wp--preset--color--accent-4, #2A1A10);
	--px-bone: var(--wp--preset--color--accent-5, #EADBCD);
	--px-serif: var(--wp--preset--font-family--display);
	--px-sans: var(--wp--preset--font-family--body);
	--px-gutter: clamp(1.25rem, 4vw, 4rem);
	--px-ease: cubic-bezier(.19, 1, .22, 1);
	--px-admin: var(--wp-admin--admin-bar--height, 0px);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--px-ink); color: var(--px-sand); }
em { font-style: italic; }

/* ---------- Header ---------- */
header.wp-block-template-part {
	position: sticky;
	top: var(--px-admin);
	z-index: 50;
	margin: 0;
	background: color-mix(in srgb, var(--px-ivory) 92%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid color-mix(in srgb, var(--px-ink) 10%, transparent);
	transition: background .6s var(--px-ease), border-color .6s var(--px-ease), transform .6s var(--px-ease);
}
body.home header.wp-block-template-part {
	position: fixed;
	left: 0; right: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}
body.home header.wp-block-template-part.is-scrolled {
	background: color-mix(in srgb, var(--px-ivory) 88%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: color-mix(in srgb, var(--px-ink) 10%, transparent);
}
header.wp-block-template-part.is-hidden { transform: translateY(-100%); }

.px-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem var(--px-gutter);
	transition: padding .6s var(--px-ease);
}
.is-scrolled .px-header { padding-block: .8rem; }
.px-header__nav { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; gap: 2.2rem; }
.px-header__nav .wp-block-navigation-item__content { position: relative; padding-block: .3rem; }
.px-header__nav .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: right;
	transition: transform .5s var(--px-ease);
}
.px-header__nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); transform-origin: left; }
.px-header__nav .wp-block-navigation-item__content:hover { color: inherit; }
.px-logo { display: block; line-height: 0; }
.px-logo__img { width: clamp(118px, 12vw, 168px); height: auto; transition: width .6s var(--px-ease); }
.is-scrolled .px-logo__img { width: clamp(104px, 9vw, 132px); }
.px-header__tools { gap: 1.1rem; }
.px-header__tools .wc-block-mini-cart__button { padding: .4rem; }

/* ---------- Front page shell ---------- */
.wp-site-blocks > main.px-front,
.px-front > * { margin-block: 0 !important; }
.px-front + footer, main.px-front + .wp-block-template-part { margin-top: 0 !important; }

.px-label {
	font-size: .7rem;
	letter-spacing: .32em;
	text-transform: uppercase;
	display: flex; align-items: center; gap: 1rem;
	margin: 0 0 2.5rem;
}
.px-label span { font-family: var(--px-serif); font-style: italic; font-size: 1rem; letter-spacing: 0; }
.px-label::after { content: ""; flex: 0 0 4rem; height: 1px; background: currentColor; opacity: .45; }
.px-kicker { font-size: .72rem; letter-spacing: .34em; text-transform: uppercase; margin: 0 0 2rem; }

/* Buttons */
.px-btn .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; transition: color .6s var(--px-ease), border-color .6s var(--px-ease); }
.px-btn .wp-block-button__link::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--px-bronze);
	transform: translateY(101%);
	transition: transform .6s var(--px-ease);
}
.px-btn .wp-block-button__link:hover::before { transform: translateY(0); }
.px-btn .wp-block-button__link:hover { background: var(--px-ink); }
.px-btn--ghost .wp-block-button__link { background: transparent; color: var(--px-ink); border: 1px solid var(--px-ink); }
.px-btn--ghost .wp-block-button__link:hover { background: transparent; color: var(--px-ivory); border-color: var(--px-bronze); }
.px-btn--light .wp-block-button__link { background: transparent; color: var(--px-ivory); border: 1px solid color-mix(in srgb, var(--px-ivory) 60%, transparent); }
.px-btn--light .wp-block-button__link::before { background: var(--px-sand); }
.px-btn--light .wp-block-button__link:hover { background: transparent; color: var(--px-ink); border-color: var(--px-sand); }

/* ---------- Hero ---------- */
.px-hero {
	position: relative;
	min-height: 100svh;
	display: flex; align-items: center;
	padding: calc(8rem + var(--px-admin)) var(--px-gutter) 6rem;
	background: var(--px-sand);
	overflow: hidden;
	isolation: isolate;
}
.px-hero__media { position: absolute; inset: 0; z-index: -1; }
.px-hero__art {
	position: absolute; inset: -12% 0 -12% 38%;
	background-size: cover; background-position: center 70%;
	mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
	animation: px-breathe 22s ease-in-out infinite alternate;
	will-change: transform;
}
.px-hero__sheen {
	position: absolute; inset: 0;
	background: radial-gradient(600px circle at var(--mx, 70%) var(--my, 40%), rgba(255, 244, 230, .45), transparent 60%);
	mix-blend-mode: soft-light;
	transition: background .2s linear;
}
.px-grain {
	position: absolute; inset: -50%;
	opacity: .12; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: px-grain 1.2s steps(6) infinite;
}
.px-hero__inner { position: relative; max-width: 62rem; }
.px-hero__title {
	font-size: clamp(3.6rem, 1rem + 10vw, 11.5rem);
	line-height: .9;
	letter-spacing: -.035em;
	margin: 0 0 3rem;
}
.px-hero__title em { color: var(--px-bronze); padding-right: .06em; }
.px-line { display: block; overflow: hidden; padding-bottom: .06em; }
.px-line > span { display: inline-block; transform: translateY(110%); transition: transform 1.6s var(--px-ease); }
.px-line:nth-child(2) > span { transition-delay: .14s; margin-left: .9em; }
.is-loaded .px-line > span { transform: none; }
.px-hero__lede { max-width: 26rem; font-size: 1.05rem; margin: 0 0 2.6rem; }
.px-load { opacity: 0; transform: translateY(18px); transition: opacity 1.2s var(--px-ease) .7s, transform 1.2s var(--px-ease) .7s; }
.px-kicker.px-load { transition-delay: .2s; }
.wp-block-buttons.px-load { transition-delay: .9s; gap: 1rem; }
.is-loaded .px-load { opacity: 1; transform: none; }

.px-badge {
	position: absolute; right: var(--px-gutter); bottom: 3rem;
	width: clamp(110px, 11vw, 160px); height: auto;
	fill: var(--px-ink);
}
.px-badge__ring { transform-box: view-box; transform-origin: 50% 50%; animation: px-spin 28s linear infinite; }
.px-badge text { font-family: var(--px-sans); font-size: 12.5px; letter-spacing: 3.6px; }
.px-badge .px-badge__p { font-family: var(--px-serif); font-size: 52px; letter-spacing: 0; fill: var(--px-bronze); }
.px-scroll {
	position: absolute; left: var(--px-gutter); bottom: 2.4rem;
	display: flex; align-items: center; gap: .9rem;
	font-size: .66rem; letter-spacing: .32em; text-transform: uppercase;
}
.px-scroll i { position: relative; width: 4.5rem; height: 1px; background: color-mix(in srgb, var(--px-ink) 25%, transparent); overflow: hidden; }
.px-scroll i::after { content: ""; position: absolute; inset: 0; background: var(--px-ink); animation: px-sweep 2.4s var(--px-ease) infinite; }

/* ---------- Marquee ---------- */
.px-marquee { background: var(--px-ink); color: var(--px-sand); overflow: hidden; padding: 1.4rem 0; }
.px-marquee__track { display: flex; width: max-content; align-items: center; animation: px-marquee 40s linear infinite; }
.px-marquee span { font-family: var(--px-serif); font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); padding: 0 2.2rem; white-space: nowrap; }
.px-marquee b { font-weight: 400; font-size: .9rem; color: var(--px-bronze); }
.px-marquee:hover .px-marquee__track { animation-play-state: paused; }

/* ---------- House statement ---------- */
.px-house { padding: clamp(6rem, 14vw, 13rem) var(--px-gutter); background: var(--px-ivory); }
.px-statement {
	font-family: var(--px-serif);
	font-size: clamp(2.8rem, 1rem + 6vw, 7.5rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	max-width: 1180px;
	font-variation-settings: "opsz" 36;
	margin: 0;
}
.px-statement em { color: var(--px-bronze); }
.px-statement .px-w { opacity: .14; transition: opacity .5s ease; }
.px-statement .px-w.is-on { opacity: 1; }
.px-house__sign { display: flex; justify-content: flex-start; align-items: center; gap: 1.5rem; margin-top: 4rem; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; }
.px-house__sign img { width: 110px; height: auto; }

/* ---------- Collections ---------- */
.px-collections { padding: clamp(5rem, 10vw, 9rem) var(--px-gutter); background: var(--px-bone); }
.px-collections__head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1rem 3rem; margin-bottom: 3.5rem; }
.px-collections__head .px-label { margin: 0; }
.px-h2 { font-size: clamp(2.6rem, 1rem + 5vw, 6.2rem); margin: 0; letter-spacing: -.03em; }
.px-h2 em { color: var(--px-bronze); }
.px-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.8rem, 1.4vw, 1.4rem); }
.px-card {
	position: relative;
	display: flex; flex-direction: column; justify-content: space-between;
	aspect-ratio: 4 / 4.4;
	padding: 1.6rem;
	background: var(--px-sand);
	color: var(--px-ink);
	overflow: hidden;
	isolation: isolate;
	transition: transform 1s var(--px-ease), color .6s var(--px-ease);
}
.px-card:nth-child(2) { background: var(--px-clay); transition-delay: .08s; }
.px-card:nth-child(3) { background: #CFB097; transition-delay: .16s; }
.px-card:nth-child(4) { background: #BF9A7E; transition-delay: .24s; }
.px-card::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--px-espresso);
	clip-path: inset(100% 0 0 0);
	transition: clip-path .9s var(--px-ease);
}
.px-card:hover { color: var(--px-sand); }
.px-card:hover::before { clip-path: inset(0 0 0 0); }
.px-card__no { font-family: var(--px-serif); font-style: italic; font-size: 1.1rem; }
.px-card__art {
	width: 46%; margin: auto; overflow: visible;
	fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round;
	transition: transform 1.2s var(--px-ease);
}
.px-card__art * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--px-ease) .3s; }
.px-card.is-in .px-card__art * { stroke-dashoffset: 0; }
.px-card:hover .px-card__art { transform: scale(1.08) rotate(-4deg); }
.px-card__title { font-family: var(--px-serif); font-size: clamp(1.5rem, 1rem + 1vw, 2.1rem); line-height: 1.05; }
.px-card__cta { margin-top: .9rem; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; display: flex; align-items: center; gap: .7rem; }
.px-card__cta::after { content: ""; width: 1.6rem; height: 1px; background: currentColor; transition: width .6s var(--px-ease); }
.px-card:hover .px-card__cta::after { width: 3.4rem; }

/* ---------- Feature: Collection I ---------- */
.px-feature {
	position: relative;
	display: grid; grid-template-columns: 1.1fr 1fr;
	min-height: 100svh;
	background: var(--px-espresso);
	color: var(--px-ivory);
	overflow: hidden;
}
.px-feature__media { position: relative; overflow: hidden; }
.px-feature__art {
	position: absolute; inset: -15% 0;
	background-size: cover; background-position: center;
	filter: sepia(.35) contrast(1.05) brightness(.82);
	transform: scale(1.05);
}
.px-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--px-espresso)); }
.px-feature__body { align-self: center; padding: 6rem var(--px-gutter); max-width: 38rem; }
.px-feature__body .px-label { color: var(--px-sand); }
.px-feature__title { font-size: clamp(4rem, 1rem + 9vw, 10rem); margin: 0 0 2rem; color: var(--px-sand); letter-spacing: -.04em; line-height: .9; }
.px-feature__body p:not(.px-label) { font-size: 1.1rem; max-width: 30rem; margin: 0 0 2.6rem; color: color-mix(in srgb, var(--px-ivory) 82%, transparent); }

/* ---------- Codes ---------- */
.px-codes { padding: clamp(6rem, 12vw, 11rem) var(--px-gutter); background: var(--px-ivory); }
.px-codes__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid color-mix(in srgb, var(--px-ink) 18%, transparent); }
.px-code { padding: 2.6rem 2.2rem 1rem 0; }
.px-code + .px-code { padding-left: 2.2rem; border-left: 1px solid color-mix(in srgb, var(--px-ink) 18%, transparent); }
.px-code__word { display: block; margin-bottom: 0 !important; font-variation-settings: "opsz" 48; font-family: var(--px-serif); font-size: clamp(2.2rem, 1rem + 2.6vw, 3.8rem); line-height: 1; margin-bottom: 1.4rem; transition: color .5s, transform .8s var(--px-ease); }
.px-code:hover .px-code__word { color: var(--px-bronze); transform: translateX(.4rem); font-style: italic; }
.px-code p { max-width: 20rem; margin: 0; }

/* ---------- Follow ---------- */
.px-follow { padding: clamp(6rem, 12vw, 10rem) var(--px-gutter); background: var(--px-sand); text-align: center; }
.px-follow .px-label { justify-content: center; }
.px-follow .px-label::after { display: none; }
.px-follow__title { font-size: clamp(3.4rem, 1rem + 9vw, 10.5rem); margin: 0 0 1.4rem; letter-spacing: -.04em; }
.px-follow__title a { background: linear-gradient(currentColor, currentColor) 0 92% / 0 1px no-repeat; transition: background-size .8s var(--px-ease), color .5s; }
.px-follow__title a:hover { background-size: 100% 1px; color: var(--px-bronze); }
.px-follow p:last-child { margin: 0; }

/* ---------- Footer ---------- */
footer.wp-block-template-part { margin-top: 0; }
.px-footer { background: var(--px-ink); color: color-mix(in srgb, var(--px-ivory) 78%, transparent); padding: 5rem var(--px-gutter) 2rem; font-size: .92rem; }
.px-footer a { color: inherit; transition: color .3s; }
.px-footer a:hover { color: var(--px-sand); }
.px-footer__top { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 2rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(244, 235, 225, .14); }
.px-footer__logo img { width: clamp(180px, 22vw, 320px); height: auto; display: block; }
.px-footer__tag { font-family: var(--px-serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; margin: 0; color: var(--px-sand); text-align: right; }
.px-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 3.5rem 0; }
.px-footer__cols h6 { color: var(--px-sand); font-size: .66rem; margin: 0 0 1.3rem; }
.px-footer__cols ul { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.px-footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid rgba(244, 235, 225, .14); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }

/* ---------- Scroll reveal ---------- */
.px-reveal { opacity: 0; transform: translateY(36px); transition: opacity 1.3s var(--px-ease), transform 1.3s var(--px-ease); }
.px-reveal.is-in { opacity: 1; transform: none; }
.no-js .px-reveal, .no-js .px-load { opacity: 1; transform: none; }
.no-js .px-line > span { transform: none; }

/* ---------- Keyframes ---------- */
@keyframes px-breathe { from { scale: 1; } to { scale: 1.07; } }
@keyframes px-spin { to { transform: rotate(360deg); } }
@keyframes px-marquee { to { transform: translateX(-50%); } }
@keyframes px-sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes px-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(4%, -8%); } 60% { transform: translate(-10%, 6%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.px-feature { grid-template-columns: 1fr; }
	.px-feature__media { min-height: 60vh; }
	.px-feature__media::after { background: linear-gradient(180deg, transparent 50%, var(--px-espresso)); }
}
@media (max-width: 781px) {
	.px-header { grid-template-columns: auto 1fr auto; }
	.px-header .px-logo { justify-self: center; }
	.px-hero { align-items: flex-end; padding-bottom: 9rem; }
	.px-hero__art { inset: -10% -30% 20% 0; mask-image: linear-gradient(180deg, #000 30%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 85%); opacity: .75; }
	.px-line:nth-child(2) > span { margin-left: 0; }
	.px-badge { top: calc(6rem + var(--px-admin)); bottom: auto; width: 96px; }
	.px-cards { grid-template-columns: 1fr; }
	.px-codes__grid { grid-template-columns: 1fr; }
	.px-code + .px-code { padding-left: 0; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--px-ink) 18%, transparent); }
	.px-footer__tag { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	.px-reveal, .px-load { opacity: 1; transform: none; }
	.px-line > span { transform: none; }
	.px-card__art * { stroke-dashoffset: 0; }
	.px-statement .px-w { opacity: 1; }
}