/**
 * Nexza brand layer: tokens, dark base and nx- utility classes.
 * Brand colours, type and spacing tokens for the whole site.
 * Fonts are declared in theme.json.
 */

/* Tokens */
:root {
	/* Copper gradient shown in image frames until an image is set. */
	--nx-placeholder:
		radial-gradient(110% 80% at 12% 0%, rgba(255, 143, 92, .26), transparent 55%),
		radial-gradient(85% 75% at 100% 100%, rgba(212, 64, 12, .55), transparent 60%),
		linear-gradient(160deg, #26190F, #0E0B09);

	color-scheme: dark;

	--nx-ink: #0B0907;
	--nx-copper: #FF5A1F;
	--nx-ember: #FF8F5C;
	--nx-rust: #D4400C;
	--nx-taupe: #A0938A;
	--nx-sand: #FBF8F4;

	--nx-muted-dark: #C8BEB5;
	--nx-muted-light: #6B625C;
	--nx-card: #141110;
	--nx-card-2: #1B1714;
	--nx-line: #231D19;
	--nx-line-2: #302823;

	--nx-font: 'Instrument Sans', Arial, Helvetica, sans-serif;
	--nx-giant: clamp(46px, 8.6vw, 148px);
	--nx-big: clamp(34px, 5.2vw, 84px);
	--nx-mid: clamp(24px, 2.6vw, 40px);
	--nx-body: 17px;
	--nx-label: 13px;

	--nx-max: 1440px;
	--nx-gutter: max(24px, 5vw);
	--nx-section: clamp(64px, 9vw, 140px);
	--nx-radius-card: 22px;
	--nx-radius-sm: 12px;
	--nx-radius-pill: 999px;

	--nx-ease: cubic-bezier(.2, .8, .2, 1);
	--nx-ease-io: cubic-bezier(.77, 0, .18, 1);
}

/* Base */
html {
	background: var(--nx-ink);
	scrollbar-color: var(--nx-line-2) var(--nx-ink);
}

body {
	margin: 0;
	background: var(--nx-ink);
	color: var(--nx-sand);
	font-family: var(--nx-font);
	font-size: var(--nx-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

p {
	margin: 0 0 1em;
	color: var(--nx-muted-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--nx-font);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: .95;
	color: var(--nx-sand);
}

a {
	color: inherit;
	text-decoration: none;
}

::selection {
	background: var(--nx-copper);
	color: var(--nx-ink);
}

:focus-visible {
	outline: 2px solid var(--nx-ember);
	outline-offset: 3px;
}

/* Layout */
.nx-wrap {
	padding-left: max(var(--nx-gutter), env(safe-area-inset-left));
	padding-right: max(var(--nx-gutter), env(safe-area-inset-right));
}

.nx-sec {
	padding-top: var(--nx-section);
	padding-bottom: var(--nx-section);
}

.nx-band {
	background: var(--nx-card);
}

/* Type */
.nx-giant {
	font-size: var(--nx-giant);
}

.nx-big {
	font-size: var(--nx-big);
}

.nx-mid {
	font-size: var(--nx-mid);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.nx-copper {
	color: var(--nx-copper);
}

.nx-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--nx-label);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nx-ember);
}

.nx-eyebrow::before {
	content: "";
	width: 48px;
	height: 1px;
	background: var(--nx-copper);
}

.nx-label {
	font-size: var(--nx-label);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nx-taupe);
}

.nx-lead {
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.6;
	color: var(--nx-muted-dark);
	max-width: 60ch;
}

/* Buttons */
.nx-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 8px 0 26px;
	border: 0;
	border-radius: var(--nx-radius-pill);
	background: var(--nx-copper);
	color: var(--nx-ink);
	font-family: var(--nx-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s, border-color .3s, color .3s;
}

.nx-btn:hover,
.nx-btn:focus-visible {
	background: var(--nx-ember);
	color: var(--nx-ink);
}

.nx-btn .nx-ar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--nx-ink);
	color: var(--nx-copper);
}

.nx-btn-ghost {
	background: transparent;
	color: var(--nx-sand);
	border: 1px solid var(--nx-line-2);
}

.nx-btn-ghost:hover,
.nx-btn-ghost:focus-visible {
	background: var(--nx-copper);
	border-color: var(--nx-copper);
	color: var(--nx-ink);
}

.nx-btn-ghost .nx-ar {
	background: var(--nx-copper);
	color: var(--nx-ink);
}

/* Round arrow link */
.nx-arc {
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border: 1px solid var(--nx-line-2);
	border-radius: 50%;
	color: var(--nx-sand);
	transition: transform .3s var(--nx-ease), background-color .3s, border-color .3s, color .3s;
}

a:hover > .nx-arc,
.nx-arc:hover {
	background: var(--nx-copper);
	border-color: var(--nx-copper);
	color: var(--nx-ink);
	transform: rotate(-45deg);
}

/* Section spacing (widgets with a "Section spacing" control) */
.nx-space-both {
	padding-top: var(--nx-section);
	padding-bottom: var(--nx-section);
}

.nx-space-top {
	padding-top: var(--nx-section);
}

.nx-space-bottom {
	padding-bottom: var(--nx-section);
}

/* Outlined display text. Instrument Sans letters overlap, so the stroke is
   painted under a fill in the background colour (set --nx-outline-bg). */
.nx-outline {
	color: var(--nx-outline-bg, var(--nx-ink));
	-webkit-text-stroke: 3px var(--nx-sand);
	paint-order: stroke fill;
}

/* Image frame: rounded, with a Copper gradient placeholder until an image is set. */
.nx-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--nx-radius-card);
	background: var(--nx-placeholder);
}

.nx-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nx-ratio-1-1 { aspect-ratio: 1; }
.nx-ratio-3-4 { aspect-ratio: 3 / 4; }
.nx-ratio-4-3 { aspect-ratio: 4 / 3; }
.nx-ratio-4-5 { aspect-ratio: 4 / 5; }
.nx-ratio-16-9 { aspect-ratio: 16 / 9; }
.nx-ratio-21-9 { aspect-ratio: 21 / 9; }
.nx-ratio-21-8 { aspect-ratio: 21 / 8; }

/* Section head: label on the left, heading and text on the right. */
.nx-shead {
	display: grid;
	grid-template-columns: 27% 1fr;
	gap: 4vw;
	align-items: start;
	margin-bottom: clamp(36px, 4vw, 56px);
}

.nx-shead > * {
	min-width: 0;
}

.nx-shead h2 {
	margin: 0;
	overflow-wrap: break-word;
}

.nx-shead .nx-lead {
	margin: 28px 0 0;
}

/* Number boxes: big Copper number + caption (Story Split, Title + Numbers). */
.nx-numboxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 2vw, 24px);
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.nx-numboxes li {
	min-width: 0;
	padding: 28px;
	border: 1px solid var(--nx-line-2);
	border-radius: var(--nx-radius-card);
	background: var(--nx-ink);
	color: var(--nx-muted-dark);
}

.nx-numboxes b {
	display: block;
	margin-bottom: 8px;
	font-size: clamp(36px, 3.6vw, 56px);
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--nx-copper);
}

/* Rating stars (★★★★★). */
.nx-stars {
	letter-spacing: 4px;
	color: var(--nx-copper);
}

/* Small rounded tag (project category, year…). */
.nx-chip {
	flex: none;
	padding: 8px 14px;
	border: 1px solid var(--nx-line-2);
	border-radius: var(--nx-radius-pill);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--nx-muted-dark);
}

/* Unfilled [placeholder] text, so it is easy to spot what still needs writing. */
.nx-bracket {
	color: var(--nx-ember);
}

/* Small screens: more room between sections. */
@media (max-width: 860px) {
	.nx-shead {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	:root {
		--nx-section: clamp(80px, 22vw, 112px);
	}
}

@media (max-width: 480px) {
	.nx-numboxes {
		grid-template-columns: 1fr;
	}
}