/*
 * NAROMX presentation — editorial + experimental, Arabic-first.
 *
 * The fleet's only dark brand alongside zad.tools, and the two read nothing
 * alike: zad.tools is an operations console, this is a creative publication.
 * The argument here is a near-black ground, Cairo at poster sizes, mint against
 * coral, hairline rules, and asymmetry — with the experimental weight kept on
 * releases and radio while every commerce surface stays plain and fast.
 *
 * Arabic is the primary script, so leading never drops below 1.22 and display
 * type carries no negative tracking; both would collide marks in Cairo.
 * Everything is logical-property based, so RTL needs no mirrored sheet.
 */

.nx-page,
.nx-fulfil,
.nx-deliver-single {
	--nx-ground: var(--brand-bg, #05100E);
	--nx-ink: var(--brand-fg, #EAF6F2);
	--nx-mint: var(--brand-accent, #2FE0BE);
	--nx-coral: var(--brand-accent-2, #E24A6A);
	--nx-muted: var(--brand-muted-ink, var(--brand-muted, #6E8983));
	--nx-rule: color-mix(in srgb, var(--nx-ink) 16%, transparent);
	--nx-raise: color-mix(in srgb, var(--nx-ink) 5%, transparent);
	--nx-sans: 'Cairo', system-ui, sans-serif;
	--nx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--nx-measure: 60ch;
	--nx-gap: clamp(3.5rem, 7vw, 7.5rem);
}

.nx-page {
	background: var(--nx-ground);
	color: var(--nx-ink);
	font-family: var(--nx-sans);
	line-height: 1.75;
}

.nx-wrap { inline-size: min(100% - 2.5rem, 78rem); margin-inline: auto; }
.nx-sec { padding-block: var(--nx-gap); border-block-start: 1px solid var(--nx-rule); }
.nx-sec:first-child { border-block-start: 0; }

/* ---------- type ---------- */

.nx-eyebrow {
	margin: 0 0 1.3rem;
	font-family: var(--nx-mono);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--nx-mint);
}
.nx-eyebrow a { color: inherit; }

.nx-hero-title, .nx-sec-title, .nx-track-title {
	font-family: var(--nx-sans);
	font-weight: 900;
	/* 1.22 floor: Cairo's marks collide below it. */
	line-height: 1.22;
	letter-spacing: 0;
	text-wrap: balance;
	margin: 0;
}
.nx-hero-title { font-size: clamp(2.7rem, 1.3rem + 6vw, 6rem); }
.nx-hero-title span { display: block; }
/* The second line carries the accent — one deliberate colour break, not a gradient. */
.nx-hero-title span:last-child { color: var(--nx-mint); }
.nx-sec-title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); max-inline-size: 20ch; }

.nx-hero-lead, .nx-sec-lead {
	max-inline-size: var(--nx-measure);
	margin: 1.5rem 0 0;
	font-size: 1.08rem;
	color: var(--nx-muted);
}

.nx-hero {
	padding-block: clamp(4rem, 9vw, 9rem) var(--nx-gap);
	position: relative;
	overflow: hidden;
}
/* The one ambient flourish: a soft mint bloom, CSS-only. It replaced a
   Three.js shader that cost ~600 KB and blocked the first paint. */
.nx-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -30%;
	inset-inline-end: -10%;
	inline-size: min(46rem, 70vw);
	aspect-ratio: 1;
	background: radial-gradient(circle, color-mix(in srgb, var(--nx-mint) 20%, transparent) 0%, transparent 62%);
	pointer-events: none;
	z-index: 0;
}
.nx-hero > .nx-wrap { position: relative; z-index: 1; }

/* ---------- actions ---------- */

.nx-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: 2.3rem; }
.nx-btn {
	display: inline-flex;
	align-items: center;
	min-block-size: 3rem;
	padding-inline: 1.7rem;
	border: 1px solid var(--nx-mint);
	border-radius: 999px;
	font-size: .95rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}
.nx-btn-primary { background: var(--nx-mint); color: #04120F; }
.nx-btn-primary:hover, .nx-btn-primary:focus-visible { background: var(--nx-coral); border-color: var(--nx-coral); color: #fff; }
.nx-btn-ghost { background: transparent; color: var(--nx-mint); }
.nx-btn-ghost:hover, .nx-btn-ghost:focus-visible { background: var(--nx-mint); color: #04120F; }
.nx-btn:focus-visible { outline: 2px solid var(--nx-coral); outline-offset: 3px; }

.nx-more {
	display: inline-block;
	margin-block-start: 2.2rem;
	font-family: var(--nx-mono);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nx-mint);
}

/* ---------- product grid: the commercial surface, kept plain ---------- */

.nx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin-block-start: 3rem;
}
/* One featured cell spans two columns — asymmetry without breaking scanning. */
.nx-card.is-featured { grid-column: span 2; }

.nx-card {
	display: flex;
	flex-direction: column;
	background: var(--nx-raise);
	border: 1px solid var(--nx-rule);
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: border-color .16s ease, transform .16s ease;
}
.nx-card:hover, .nx-card:focus-visible { border-color: var(--nx-mint); transform: translateY(-2px); }
.nx-card:focus-visible { outline: 2px solid var(--nx-mint); outline-offset: 2px; }

.nx-card-art { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--nx-ink) 8%, transparent); }
.nx-card.is-featured .nx-card-art { aspect-ratio: 16 / 9; }
.nx-card-art img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.nx-card-plate {
	display: grid;
	place-items: center;
	block-size: 100%;
	font-size: clamp(2rem, 6vw, 3.4rem);
	font-weight: 900;
	color: var(--nx-mint);
	background: linear-gradient(135deg, color-mix(in srgb, var(--nx-mint) 12%, transparent), transparent 70%);
}

.nx-card-body { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1; }
.nx-card-cat { font-family: var(--nx-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-muted); }
.nx-card-name { font-size: 1.12rem; font-weight: 700; line-height: 1.4; }
.nx-card.is-featured .nx-card-name { font-size: 1.5rem; }
.nx-card-desc { font-size: .9rem; color: var(--nx-muted); }
.nx-card-foot { margin-block-start: auto; padding-block-start: .8rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }

.nx-price, .woocommerce .nx-page .price { font-family: var(--nx-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; color: var(--nx-ink); }
.nx-price del { opacity: .5; }

/* Delivery is stated on the card, because "how do I get it" is the second
   question after price on a digital catalogue. */
.nx-deliver {
	font-family: var(--nx-mono);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .22rem .55rem;
	border-radius: 999px;
	border: 1px solid var(--nx-rule);
	color: var(--nx-muted);
}
.nx-deliver-download { color: var(--nx-mint); border-color: color-mix(in srgb, var(--nx-mint) 45%, transparent); }
.nx-deliver-single { display: inline-block; margin-block: .6rem 1rem; }

.nx-group-title { margin: 3.5rem 0 0; font-size: 1.3rem; font-weight: 900; color: var(--nx-ink); }
.nx-group-title + .nx-grid { margin-block-start: 1.4rem; }

/* ---------- studio steps ---------- */

.nx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.2rem 2.6rem; list-style: none; margin: 2.6rem 0 0; padding: 0; }
.nx-step-n { display: block; font-family: var(--nx-mono); font-size: .78rem; letter-spacing: .1em; color: var(--nx-coral); }
.nx-steps h3 { margin: .6rem 0 .4rem; font-size: 1.25rem; font-weight: 800; line-height: 1.35; }
.nx-steps p { margin: 0; color: var(--nx-muted); font-size: .95rem; }

/* ---------- release: where the experiment is allowed ---------- */

.nx-release-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: center; }
.nx-release-code { font-family: var(--nx-mono); font-size: .78rem; letter-spacing: .16em; color: var(--nx-coral); margin: 0 0 .8rem; }
.nx-release-sub { margin: .6rem 0 0; font-size: 1.2rem; color: var(--nx-mint); }
.nx-release-cover { margin: 0; position: relative; border: 1px solid var(--nx-rule); overflow: hidden; }
.nx-release-cover img { display: block; inline-size: 100%; block-size: auto; }
/* Duotone wash — the release artwork is the one place the brand gets loud. */
.nx-release-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(150deg, color-mix(in srgb, var(--nx-mint) 26%, transparent), color-mix(in srgb, var(--nx-coral) 22%, transparent));
	mix-blend-mode: overlay;
	pointer-events: none;
}

.nx-tracks { list-style: none; margin: 3rem 0 0; padding: 0; border-block-start: 1px solid var(--nx-rule); counter-reset: none; }
.nx-tracks li { border-block-end: 1px solid var(--nx-rule); }
.nx-tracks a {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr) auto auto;
	gap: 1.2rem;
	align-items: baseline;
	padding-block: 1.05rem;
	color: inherit;
	text-decoration: none;
	transition: color .15s ease, padding-inline-start .15s ease;
}
.nx-tracks a:hover, .nx-tracks a:focus-visible { color: var(--nx-mint); padding-inline-start: .5rem; }
.nx-tracks li.is-current a { color: var(--nx-mint); }
.nx-track-n { font-family: var(--nx-mono); font-size: .8rem; color: var(--nx-muted); font-variant-numeric: tabular-nums; }
.nx-tracks .nx-track-title { font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.nx-track-mix { font-size: .82rem; color: var(--nx-muted); }
.nx-track-len { font-family: var(--nx-mono); font-size: .82rem; color: var(--nx-muted); font-variant-numeric: tabular-nums; }

/* ---------- track page ---------- */

.nx-track-head { padding-block: clamp(3rem, 6vw, 5.5rem) 2.5rem; }
.nx-track-head .nx-track-title { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem); }
.nx-track-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; margin: 1rem 0 0; font-family: var(--nx-mono); font-size: .85rem; color: var(--nx-muted); }
.nx-track-mood { max-inline-size: var(--nx-measure); margin: 1.6rem 0 0; font-size: 1.05rem; color: var(--nx-muted); }
.nx-audio { inline-size: min(100%, 34rem); margin-block-start: 1.8rem; display: block; }

/* ---------- fulfilment on the product page ---------- */

.nx-fulfil { margin-block: 1.4rem; padding-block-start: 1.2rem; border-block-start: 1px solid var(--nx-rule, rgba(234,246,242,.16)); }
.nx-fulfil ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .6rem 0 0; padding: 0; counter-reset: nxf; }
.nx-fulfil li {
	counter-increment: nxf;
	font-size: .82rem;
	color: var(--nx-muted, #6E8983);
	padding: .3rem .7rem;
	border: 1px solid var(--nx-rule, rgba(234,246,242,.16));
	border-radius: 999px;
}
.nx-fulfil li::before { content: counter(nxf) " · "; font-family: var(--nx-mono); color: var(--nx-mint, #2FE0BE); }

/* ---------- cta ---------- */

.nx-cta h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); font-weight: 900; line-height: 1.22; margin: 0; max-inline-size: 18ch; }
.nx-cta p { max-inline-size: var(--nx-measure); margin: 1.1rem 0 0; color: var(--nx-muted); }

/* ---------- composed pages: the theme title would duplicate our hero ---------- */

.nx-composed .entry-header,
.nx-composed .page-title,
.nx-composed .ct-page-title,
.nx-composed .hero-section { display: none; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.nx-release-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.nx-card.is-featured { grid-column: span 1; }
}
@media (max-width: 700px) {
	.nx-tracks a { grid-template-columns: 2.2rem minmax(0, 1fr) auto; row-gap: .2rem; }
	.nx-track-mix { grid-column: 2 / -1; }
	.nx-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.nx-card, .nx-btn, .nx-tracks a { transition: none; }
	.nx-card:hover { transform: none; }
}

/* Product artwork is a set of small dark SVG plates (200x150). Stretching them
   to fill the card produced flat empty rectangles; containing them on a tinted
   ground reads as a deliberate cover instead. */
.nx-card-art {
	background:
		radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--nx-mint) 14%, transparent), transparent 60%),
		color-mix(in srgb, var(--nx-ink) 7%, transparent);
}
.nx-card-art img { object-fit: contain; padding: 12%; }

/* Latin runs inside the RTL page. */
bdi { unicode-bidi: isolate; }

/* ---------- audio proof on product pages ---------- */

.nx-proof { padding-block: clamp(2.5rem, 5vw, 4rem); border-block-start: 1px solid var(--nx-rule); }
.nx-proof .nx-sec-title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.nx-proof-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.4rem; max-inline-size: 44rem; }
.nx-proof-list li { border: 1px solid var(--nx-rule); border-radius: 4px; padding: 1rem 1.1rem; background: var(--nx-raise); }
.nx-proof-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; margin-block-end: .7rem; }
.nx-proof-title { font-weight: 700; font-size: 1.05rem; }
.nx-proof-mix { font-family: var(--nx-mono); font-size: .78rem; color: var(--nx-muted); }
.nx-proof .nx-audio { inline-size: 100%; margin: 0; }

/* ---------- product page: first-viewport comprehension (mobile) ----------
 *
 * The product artwork is a 200x150 SVG card. WooCommerce stretched it to
 * 327x436 — distorted, and tall enough to push the price to 840px and the buy
 * button to 1136px on a 812px screen. A cold visitor arriving from a Reel saw
 * a big blurred card and nothing else.
 *
 * Capping the height and containing the image brings the price into the first
 * viewport and the CTA within one short scroll. Desktop is untouched.
 */
@media (max-width: 782px) {
	.single-product .woocommerce-product-gallery { max-block-size: 200px; margin-block-end: 1rem; }
	.single-product .woocommerce-product-gallery__wrapper,
	.single-product .woocommerce-product-gallery__image { max-block-size: 200px; }
	.single-product .woocommerce-product-gallery img {
		max-block-size: 200px;
		inline-size: auto;
		margin-inline: auto;
		object-fit: contain;
	}
	/* The theme's breadcrumb block reserves more room than it needs above the
	   fold on a landing page. */
	.single-product .ct-container > .woocommerce-breadcrumb,
	.single-product .ct-breadcrumbs { margin-block: .4rem; }
	.single-product .product_title { font-size: clamp(1.6rem, 6vw, 2.1rem); }
}