/* ==========================================================================
   Base — tokens, reset, typography, utilities
   ========================================================================== */

:root {
	/* Ink & bone. The site is dark end to end so imagery carries the page. */
	--nsn-ink:        #0F0F0E;
	--nsn-bone:       #F0ECE4;
	--nsn-bone-72:    rgba(240, 236, 228, 0.72);
	--nsn-bone-46:    rgba(240, 236, 228, 0.46);
	--nsn-bone-38:    rgba(240, 236, 228, 0.38);
	--nsn-bone-28:    rgba(240, 236, 228, 0.28);
	--nsn-bone-14:    rgba(240, 236, 228, 0.14);
	--nsn-bone-08:    rgba(240, 236, 228, 0.08);
	--nsn-rule:       rgba(240, 236, 228, 0.14);

	/* One font stack, defined once. */
	--nsn-font: 'MG12', 'MG12 Fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/* Fluid type scale. */
	--nsn-step-xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.78125rem);
	--nsn-step-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
	--nsn-step-md: clamp(0.9375rem, 0.89rem + 0.24vw, 1.125rem);
	--nsn-step-lg: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
	--nsn-step-xl: clamp(2rem, 1.2rem + 4vw, 4.5rem);
	--nsn-step-2xl: clamp(2.75rem, 1rem + 8vw, 8rem);

	/* Spacing. */
	--nsn-gutter: clamp(20px, 5vw, 72px);
	--nsn-space-2: 1rem;
	--nsn-space-3: 1.75rem;
	--nsn-space-4: 3rem;
	--nsn-space-5: clamp(3.5rem, 8vw, 7rem);

	--nsn-header-h: clamp(64px, 9vw, 92px);
	--nsn-maxw: 1680px;

	/* Motion. */
	--nsn-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--nsn-dur-fast: 0.28s;
	--nsn-dur: 0.5s;

	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* Never allow a wide element to scroll the document sideways. */
	overflow-x: hidden;
}

body {
	margin: 0;
	background-color: var(--nsn-ink);
	color: var(--nsn-bone);
	font-family: var(--nsn-font);
	font-size: var(--nsn-step-md);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ol, ul, dl, dd {
	margin: 0;
}

ol, ul {
	padding: 0;
	list-style: none;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Focus. Visible, high contrast, and never removed.
   -------------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--nsn-bone);
	outline-offset: 4px;
	border-radius: 1px;
}

/* Only hide the ring where a bespoke focus treatment replaces it. */
.nsn-list__link:focus-visible,
.nsn-filter:focus-visible {
	outline: 2px solid var(--nsn-bone);
	outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.nsn-skip-link:focus,
.nsn-skip-link:focus-visible {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	background: var(--nsn-bone);
	color: var(--nsn-ink);
	font-size: var(--nsn-step-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

[hidden] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Generic page / prose templates (About, Journal, Contact, single posts)
   -------------------------------------------------------------------------- */
.nsn-page {
	padding: calc(var(--nsn-header-h) + var(--nsn-space-5)) var(--nsn-gutter) var(--nsn-space-5);
}

.nsn-page__inner {
	max-width: 72ch;
	margin: 0 auto;
}

.nsn-page__head {
	margin-bottom: var(--nsn-space-4);
	padding-bottom: var(--nsn-space-3);
	border-bottom: 1px solid var(--nsn-rule);
}

.nsn-page__title {
	font-size: var(--nsn-step-xl);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.nsn-page__empty {
	color: var(--nsn-bone-46);
}

.nsn-prose > * + * {
	margin-top: var(--nsn-space-2);
}

.nsn-prose a {
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--nsn-bone-28);
}

.nsn-prose a:hover {
	text-decoration-color: var(--nsn-bone);
}

.nsn-entries {
	display: grid;
	gap: var(--nsn-space-4);
}

.nsn-entry__date {
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nsn-bone-46);
	margin-bottom: 0.5rem;
}

.nsn-entry__title {
	font-size: var(--nsn-step-lg);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.nsn-entry__excerpt {
	margin-top: 0.75rem;
	color: var(--nsn-bone-72);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.nsn-footer {
	border-top: 1px solid var(--nsn-rule);
	padding: var(--nsn-space-4) var(--nsn-gutter);
}

.nsn-footer__inner {
	max-width: var(--nsn-maxw);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--nsn-space-3);
	justify-content: space-between;
}

.nsn-footer__mark {
	font-size: var(--nsn-step-lg);
	letter-spacing: -0.02em;
}

.nsn-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsn-space-3);
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nsn-bone-46);
}

.nsn-footer__list a:hover {
	color: var(--nsn-bone);
}

.nsn-footer__legal {
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nsn-bone-28);
}

/*
 * The Work index paints a fixed, full-viewport image stage between the page
 * background and the normal flow. The footer is a static element in that flow,
 * so on this route alone it has to be lifted above the stage and given the ink
 * it is already sitting on everywhere else - otherwise it renders underneath
 * the project photograph. Nothing about the footer itself changes: same markup,
 * same type, same spacing, same links.
 */
.nsn-is-work .nsn-footer {
	position: relative;
	z-index: 1;
	background-color: var(--nsn-ink);
}