/* ==========================================================================
   SPLASH PAGE
   Loaded on the front page only.

   The palette inverts here — white ink on black paper — by swapping the two
   tokens the whole design resolves from. Nothing else changes colour by hand.
   ========================================================================== */

html,
body {
	height: 100%;
}

body.nj-splash {
	--ink: #fff;
	--paper: #000;
	--hairline: rgba(255, 255, 255, .14);

	overflow-x: hidden;
}

/* Thin frame that nods to a label or swing tag. */
.frame {
	position: fixed;
	inset: clamp(12px, 2.2vw, 22px);
	border: var(--rule) solid var(--ink);
	pointer-events: none;
	z-index: 1;
}

.nj-splash main {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6rem 1.5rem;
	position: relative;
	z-index: 1;
}

.logo {
	width: min(46vw, 360px);
	height: auto;
	opacity: 0;
	transform: translateY(14px);
	animation: nj-rise 1.1s cubic-bezier(.2, .7, .2, 1) forwards .15s;
}

.tagline {
	margin-top: 2.2rem;
	font-size: .74rem;
	letter-spacing: .42em;
	text-transform: uppercase;
	opacity: 0;
	animation: nj-fade 1s ease forwards .7s;
}

.cta {
	--pad: 1.05rem;

	display: inline-block;
	margin-top: clamp(2.6rem, 6vw, 3.6rem);
	font-family: 'Anton', sans-serif;
	font-size: clamp(1.05rem, 2.6vw, 1.4rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--paper);
	background: var(--ink);
	padding: var(--pad) clamp(2.2rem, 6vw, 3.4rem);
	border: var(--rule) solid var(--ink);
	position: relative;
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px);
	animation: nj-rise 1s cubic-bezier(.2, .7, .2, 1) forwards 1s;
	transition: color .45s ease;
	z-index: 0;
}

.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--paper);
	transform: translateY(101%);
	transition: transform .45s cubic-bezier(.7, 0, .2, 1);
	z-index: -1;
}

.cta:hover {
	color: var(--ink);
}

.cta:hover::before {
	transform: translateY(0);
}

.cta:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}

@keyframes nj-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes nj-fade {
	to {
		opacity: 1;
	}
}

@media (max-width: 600px) {
	.logo {
		width: 64vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nj-splash *,
	.nj-splash *::before,
	.nj-splash *::after {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ==========================================================================
   SIDE MENU
   The navigation the client asked for on the home page. Sits inside the
   frame so it reads as part of the tag, not stuck on top of it.
   ========================================================================== */

.menu-toggle {
	position: fixed;
	top: clamp(20px, 3vw, 34px);
	left: clamp(22px, 3.4vw, 40px);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: .7rem;
	background: none;
	border: none;
	padding: .4rem;
	margin: -.4rem;
	cursor: pointer;
	color: var(--ink);
	font-family: 'Archivo', sans-serif;
	font-size: .7rem;
	letter-spacing: .32em;
	text-transform: uppercase;
	opacity: 0;
	animation: nj-fade 1s ease forwards .9s;
}

.menu-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 22px;
}

.menu-toggle__bars span {
	display: block;
	height: 1.5px;
	background: var(--ink);
	transition: transform .3s ease;
}

.menu-toggle:hover .menu-toggle__bars span:first-child {
	transform: translateX(4px);
}

.menu-toggle:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}

.side-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.side-menu[hidden] {
	display: none;
}

.side-menu__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	transition: opacity .35s ease;
}

.side-menu.is-open .side-menu__scrim {
	opacity: 1;
}

.side-menu__panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(100%, 340px);
	background: var(--paper);
	border-right: var(--rule) solid var(--ink);
	padding: clamp(4.5rem, 10vw, 6rem) clamp(1.8rem, 5vw, 2.6rem) 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	transform: translateX(-100%);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
	overflow-y: auto;
}

.side-menu.is-open .side-menu__panel {
	transform: translateX(0);
}

.side-menu__close {
	position: absolute;
	top: clamp(1.2rem, 4vw, 1.8rem);
	right: clamp(1.2rem, 4vw, 1.8rem);
	width: 2.2rem;
	height: 2.2rem;
	display: grid;
	place-items: center;
	background: none;
	border: var(--rule) solid var(--ink);
	color: var(--ink);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background .3s ease, color .3s ease;
}

.side-menu__close:hover {
	background: var(--ink);
	color: var(--paper);
}

.side-menu__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--hairline);
}

.side-menu__list li {
	border-bottom: 1px solid var(--hairline);
}

.side-menu__list a {
	display: block;
	padding: 1.1rem 0;
	font-family: 'Anton', sans-serif;
	font-size: 1.5rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	color: var(--ink);
	transition: padding-left .3s cubic-bezier(.2, .7, .2, 1);
}

.side-menu__list a:hover {
	padding-left: .6rem;
}

/* Wrapper introduced when Facebook was added alongside Instagram. It inherits
   the positioning the single link used to carry, so the first link sits in
   exactly the place it always did and the second one appears beside it. */
.side-menu__socials {
	margin-top: auto;
	align-self: flex-start;
	display: flex;
	align-items: baseline;
	gap: 1.6rem;
}

.side-menu__social {
	font-size: .66rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	opacity: .6;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: opacity .3s ease, border-color .3s ease;
}

.side-menu__social:hover {
	opacity: 1;
	border-color: var(--ink);
}

body.nj-menu-open {
	overflow: hidden;
}

/* The panel is a white sheet over the black splash, so its contents need the
   normal ink-on-paper palette rather than the inverted one. */
.side-menu__panel {
	--ink: #000;
	--paper: #fff;
	--hairline: rgba(0, 0, 0, .14);
}

@media (max-width: 600px) {
	.menu-toggle__label {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.side-menu__panel,
	.side-menu__scrim {
		transition: none !important;
	}
}