@charset "UTF-8";
/*
 * NINA NOIR — design system
 * ============================================================================
 *
 * One stylesheet, one system. Every page on the site is composed from the
 * primitives declared here rather than from per-page rules, so the homepage,
 * an archive and a 3,000-word essay share the same rhythm.
 *
 * The palette is white-dominant rather than the warm beige the previous site
 * used. Nina's photographs carry strong colour — oxblood, burgundy, olive,
 * charcoal — and a tinted ground competed with them. White lets them sit.
 *
 * Type is declared through three custom properties and nothing else, so the
 * faces can be replaced in one place. The stacks below are ordered so the
 * best available face on each platform wins: Didot and Bodoni give the
 * high-contrast fashion masthead where they exist, Iowan and Charter give a
 * genuinely readable text serif, and Georgia is the floor everywhere.
 *
 * Contents
 *   1  Tokens
 *   2  Reset and base
 *   3  Typography
 *   4  Layout primitives
 *   5  Rules, eyebrows, meta
 *   6  Links and buttons
 *   7  Media
 *   8  Header and navigation
 *   9  Footer
 *  10  Home compositions
 *  11  Archive and journal
 *  12  Article
 *  13  Pages — about, contact, search, 404
 *  14  Motion and focus
 */

/* ========================================================== 1  TOKENS === */

:root {
	/* --- Type: the single swap point. ---------------------------------- */
	--n-display: 'Didot', 'Bodoni MT', 'Playfair Display', 'Hoefler Text',
		'Times New Roman', Times, serif;
	--n-text: 'Iowan Old Style', 'Charter', 'Palatino Linotype', Palatino,
		Georgia, Cambria, 'Times New Roman', serif;
	--n-util: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;

	/* --- Palette ------------------------------------------------------- */
	--n-paper: #fff;
	--n-paper-warm: #f8f6f3;
	--n-paper-deep: #f2efea;
	--n-ink: #12100e;
	--n-ink-soft: #55504a;
	--n-ink-mute: #837c73;
	--n-rule: #e4e0d9;
	--n-rule-firm: #c9c3b8;
	--n-wine: #6f2733;
	--n-wine-lift: #8d3543;
	--n-dark: #14120f;
	--n-dark-ink: #f4f1ec;
	--n-dark-mute: #a49c91;

	/* --- Fluid type scale ---------------------------------------------- */
	--t-masthead: clamp(2.6rem, 1.5rem + 4.4vw, 5.6rem);
	--t-hero: clamp(2rem, 1rem + 4.6vw, 4.75rem);
	--t-h1: clamp(1.95rem, 1.1rem + 3.6vw, 3.9rem);
	--t-h2: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	--t-h3: clamp(1.22rem, 0.95rem + 1.05vw, 1.7rem);
	--t-lead: clamp(1.08rem, 0.98rem + 0.5vw, 1.4rem);
	--t-body: clamp(1.125rem, 1.04rem + 0.34vw, 1.28rem);
	--t-small: clamp(0.86rem, 0.83rem + 0.13vw, 0.94rem);
	--t-micro: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);

	/* --- Fluid spacing ------------------------------------------------- */
	--s-1: clamp(0.25rem, 0.24rem + 0.06vw, 0.3rem);
	--s-2: clamp(0.5rem, 0.47rem + 0.12vw, 0.6rem);
	--s-3: clamp(0.75rem, 0.7rem + 0.24vw, 0.95rem);
	--s-4: clamp(1rem, 0.92rem + 0.36vw, 1.3rem);
	--s-5: clamp(1.5rem, 1.35rem + 0.7vw, 2.1rem);
	--s-6: clamp(2rem, 1.7rem + 1.4vw, 3.2rem);
	--s-7: clamp(3rem, 2.4rem + 2.8vw, 5.5rem);
	--s-8: clamp(4.25rem, 3.2rem + 4.6vw, 8.5rem);
	--s-9: clamp(6rem, 4.2rem + 7vw, 12rem);

	/* --- Grid ---------------------------------------------------------- */
	--canvas: 88rem;
	--canvas-wide: 104rem;
	--measure: 38rem;
	--gutter: clamp(1.15rem, 0.6rem + 2.6vw, 4rem);

	--hairline: 1px solid var(--n-rule);
}

/* ================================================ 2  RESET AND BASE === */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/*
	 * No overflow clamp here. overflow-x:hidden on the body would make the
	 * body a scroll container and change what position:sticky sticks to;
	 * overflow-x:clip on the root stops the document scrolling altogether.
	 * The layout is built so nothing exceeds the viewport in the first place,
	 * which is verified at every breakpoint rather than masked.
	 */
}

body.nina {
	margin: 0;
	background: var(--n-paper);
	color: var(--n-ink);
	font-family: var(--n-text);
	font-size: var(--t-body);
	line-height: 1.62;
	font-kerning: normal;
	font-variant-ligatures: common-ligatures;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.nina img,
.nina picture { display: block; max-width: 100%; }

.nina figure { margin: 0; }

.nina-sr {
	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;
}

.nina-skip {
	position: absolute;
	left: var(--s-4);
	top: -4rem;
	z-index: 200;
	background: var(--n-ink);
	color: var(--n-paper);
	padding: var(--s-3) var(--s-4);
	font-family: var(--n-util);
	font-size: var(--t-small);
	text-decoration: none;
	transition: top .18s ease;
}
.nina-skip:focus { top: var(--s-4); }

/* =============================================== 3  TYPOGRAPHY === */

.nina h1, .nina h2, .nina h3, .nina h4 {
	font-family: var(--n-display);
	font-weight: 400;
	line-height: 1.045;
	letter-spacing: -0.016em;
	margin: 0;
	text-wrap: balance;
}

.nina p { margin: 0 0 1.15em; }
.nina p:last-child { margin-bottom: 0; }

.n-eyebrow {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--n-ink-mute);
	margin: 0;
	line-height: 1.3;
}

.n-lead {
	font-family: var(--n-text);
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--n-ink-soft);
	text-wrap: pretty;
}

.n-meta {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .075em;
	color: var(--n-ink-mute);
	text-transform: uppercase;
}

.n-caption {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	line-height: 1.45;
	color: var(--n-ink-mute);
	margin-top: var(--s-3);
	max-width: 32rem;
}

/* ========================================== 4  LAYOUT PRIMITIVES === */

.n-wrap {
	width: min(100% - (var(--gutter) * 2), var(--canvas));
	margin-inline: auto;
}
.n-wrap--wide { width: min(100% - (var(--gutter) * 2), var(--canvas-wide)); }
.n-wrap--read { width: min(100% - (var(--gutter) * 2), var(--measure)); }

.n-band { padding-block: var(--s-8); }
.n-band--tight { padding-block: var(--s-7); }
.n-band--warm { background: var(--n-paper-warm); }
.n-band--dark { background: var(--n-dark); color: var(--n-dark-ink); }
.n-band--dark .n-eyebrow,
.n-band--dark .n-meta { color: var(--n-dark-mute); }

.n-grid { display: grid; gap: var(--s-6) var(--gutter); }

@media (min-width: 48rem) {
	.n-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.n-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ======================================= 5  RULES, EYEBROWS, META === */

.n-rule-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	border-top: 1px solid var(--n-ink);
	padding-top: var(--s-3);
	margin-bottom: var(--s-6);
}

.n-rule-head h2 {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: .19em;
	text-transform: uppercase;
	line-height: 1.2;
}

.n-rule-head a {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--n-ink-mute);
	text-decoration: none;
	white-space: nowrap;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.n-rule-head a:hover { color: var(--n-ink); }

/* ============================================ 6  LINKS AND BUTTONS === */

.nina a { color: inherit; }

.n-title-link {
	text-decoration: none;
	background-image: linear-gradient(var(--n-ink), var(--n-ink));
	background-size: 0% 1px;
	background-position: 0 88%;
	background-repeat: no-repeat;
	transition: background-size .34s cubic-bezier(.2,.7,.3,1);
}
.n-title-link:hover { background-size: 100% 1px; }

.n-inline {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--n-rule-firm);
	transition: border-color .2s ease, color .2s ease;
}
.n-inline:hover { border-color: var(--n-wine); color: var(--n-wine); }

.n-action {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	font-family: var(--n-util);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--n-ink);
	border-bottom: 1px solid var(--n-ink);
	padding-bottom: .4em;
	min-height: 44px;
	transition: gap .24s ease, color .2s ease, border-color .2s ease;
}
.n-action:hover { gap: 1em; color: var(--n-wine); border-color: var(--n-wine); }
.n-band--dark .n-action { color: var(--n-dark-ink); border-color: var(--n-dark-ink); }
.n-band--dark .n-action:hover { color: var(--n-paper); border-color: var(--n-paper); }

/* ================================================== 7  MEDIA === */

.n-media {
	position: relative;
	overflow: hidden;
	background: var(--n-paper-deep);
}

.n-media img,
.nina-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
}

/* A restrained response: the frame holds, the image breathes. */
@media (hover: hover) {
	.n-media--hover img { transition: transform .9s cubic-bezier(.2,.7,.25,1); }
	a:hover .n-media--hover img { transform: scale(1.028); }
}

/* ================================= 8  HEADER AND NAVIGATION === */

.n-head {
	position: sticky;
	top: 0;
	z-index: 90;
	background: color-mix(in srgb, var(--n-paper) 92%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: var(--hairline);
	transition: transform .34s ease;
}

/* The masthead is the page's opening statement, so it is given its own
   register on the homepage and compresses into the sticky bar elsewhere. */
.n-head__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--s-4);
	padding-block: var(--s-3);
}

.n-wordmark {
	grid-column: 2;
	justify-self: center;
	font-family: var(--n-display);
	/*
	 * A didone's hairlines disappear at small sizes, so the mark is set a
	 * little larger and a little heavier than a normal nav item, and the
	 * tracking is carried by the direction stylesheet so each family gets
	 * the spacing it actually needs.
	 */
	font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2.15rem);
	font-weight: 500;
	letter-spacing: var(--n-mark-track, .3em);
	text-indent: var(--n-mark-track, .3em);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--n-ink);
	white-space: nowrap;
	/* The mark is short; the hit area should not be. */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.n-head__nav { grid-column: 1; display: none; }
.n-head__tools { grid-column: 3; display: flex; justify-content: flex-end; gap: var(--s-2); }

.n-navlist {
	display: flex;
	align-items: center;
	gap: clamp(.9rem, .2rem + 1.4vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.n-navlist a {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .15em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--n-ink);
	padding-block: .9em;
	display: inline-block;
	position: relative;
}
.n-navlist a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: .5em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.n-navlist a:hover::after,
.n-navlist a[aria-current]::after { transform: scaleX(1); }

.n-iconbtn {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--n-ink);
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: 0 var(--s-2);
}
.n-iconbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }

@media (min-width: 62rem) {
	.n-head__nav { display: block; }
	.n-burger { display: none; }
}

/* --- Mobile menu: a designed surface, not a drawer ------------------- */
.n-menu {
	position: fixed;
	inset: 0;
	z-index: 120;
	background: var(--n-paper);
	display: flex;
	flex-direction: column;
	padding: var(--s-4) var(--gutter) var(--s-7);
	transform: translateY(-100%);
	transition: transform .46s cubic-bezier(.35,.8,.25,1);
	overflow-y: auto;
}
.n-menu[data-open='true'] { transform: translateY(0); }

.n-menu__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--s-7);
}

.n-menu__list { list-style: none; margin: 0; padding: 0; }
.n-menu__list a {
	display: block;
	font-family: var(--n-display);
	font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3rem);
	line-height: 1.16;
	letter-spacing: -.015em;
	text-decoration: none;
	padding-block: var(--s-2);
}
.n-menu__sub {
	list-style: none;
	margin: var(--s-6) 0 0;
	padding: var(--s-5) 0 0;
	border-top: var(--hairline);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-3) var(--s-4);
}
.n-menu__sub a {
	font-family: var(--n-util);
	font-size: var(--t-small);
	letter-spacing: .06em;
	text-decoration: none;
	color: var(--n-ink-soft);
	min-height: 44px;
	display: flex;
	align-items: center;
}
.n-menu__foot {
	margin-top: auto;
	padding-top: var(--s-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
}
.n-menu__foot a {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--n-ink-mute);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* --- Search overlay -------------------------------------------------- */
.n-search {
	position: fixed;
	inset: 0;
	z-index: 130;
	background: var(--n-paper);
	padding: var(--s-6) var(--gutter);
	display: none;
}
.n-search[data-open='true'] { display: block; }
.n-search__form {
	width: min(100%, 46rem);
	margin: clamp(3rem, 12vh, 9rem) auto 0;
	border-bottom: 2px solid var(--n-ink);
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.n-search__field {
	flex: 1;
	appearance: none;
	border: 0;
	background: none;
	font-family: var(--n-display);
	font-size: clamp(1.6rem, 1rem + 3vw, 3rem);
	line-height: 1.2;
	padding: var(--s-3) 0;
	color: var(--n-ink);
}
.n-search__field:focus { outline: none; }
.n-search__field::placeholder { color: var(--n-rule-firm); }
.n-search__hint {
	width: min(100%, 46rem);
	margin: var(--s-4) auto 0;
	color: var(--n-ink-mute);
	font-family: var(--n-util);
	font-size: var(--t-small);
}

/* ==================================================== 9  FOOTER === */

.n-foot {
	border-top: 1px solid var(--n-ink);
	padding-block: var(--s-7) var(--s-6);
	margin-top: var(--s-8);
}
.n-foot__grid {
	display: grid;
	gap: var(--s-6) var(--gutter);
	grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
	.n-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.n-foot__mark {
	min-height: 44px;
	align-items: center;
	font-weight: 500;
	font-family: var(--n-display);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
	letter-spacing: var(--n-mark-track, .26em);
	text-indent: var(--n-mark-track, .26em);
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	display: inline-flex;
	margin-bottom: var(--s-4);
}
.n-foot__note { color: var(--n-ink-soft); max-width: 26rem; font-size: var(--t-small); }
/* The 44px min-height on each link already sets the rhythm; an extra gap on
   top of it stretches the footer down the page on a phone. */
.n-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.n-foot li a {
	font-family: var(--n-util);
	font-size: var(--t-small);
	text-decoration: none;
	color: var(--n-ink-soft);
	min-height: 44px;
	/* Short words such as "Life" are only ~21px wide; the trailing padding
	   brings the hit area up without changing how the list looks. */
	min-width: 3rem;
	padding-inline-end: var(--s-2);
	display: inline-flex;
	align-items: center;
}
.n-foot li a:hover { color: var(--n-ink); }
.n-foot__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-4);
	margin-top: var(--s-7);
	padding-top: var(--s-4);
	border-top: var(--hairline);
	font-family: var(--n-util);
	font-size: var(--t-micro);
	color: var(--n-ink-mute);
}

/* ========================================= 10  HOME COMPOSITIONS === */

/*
 * The homepage is built from distinct compositions rather than a repeated
 * card, so the page changes shape as it is read: a full-bleed opening, a
 * dominant feature, an asymmetric pair, a text-led index, a horizontal
 * archive strip, a portrait profile. Each one is its own block below.
 */

/* --- A. Opening ------------------------------------------------------ */
.n-open {
	display: grid;
	gap: var(--s-5);
	align-items: center;
	padding-top: var(--s-5);
}
.n-open__media { grid-area: media; }

/*
 * The opening frame is capped against the viewport, not only by ratio. A 4:5
 * portrait at half of a wide screen is taller than the screen itself, which
 * pushed the masthead below the fold and left the first view as a photograph
 * and nothing else. The cap keeps the whole composition — name, line and
 * picture — inside the first screen at every size.
 */
.n-open__media .n-media {
	aspect-ratio: 4 / 5;
	max-height: min(76vh, 40rem);
}
.n-open__body { grid-area: body; }

.n-open__mark {
	font-family: var(--n-display);
	font-size: var(--t-masthead);
	line-height: .92;
	font-weight: 500;
	letter-spacing: .085em;
	/*
	 * No text-indent here. It exists to cancel the trailing letter-space on a
	 * centred mark; on a left-aligned one it simply pushes the first letter
	 * off the margin the copy beneath it is aligned to.
	 */
	text-transform: uppercase;
	margin: 0 0 var(--s-4);
}
.n-open__line {
	font-family: var(--n-text);
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--n-ink-soft);
	max-width: 26rem;
	margin: 0;
	text-wrap: pretty;
}

.n-open { grid-template-areas: 'media' 'body'; }

@media (min-width: 48rem) {
	.n-open__media .n-media { aspect-ratio: 3 / 2; }
}
@media (min-width: 62rem) {
	.n-open {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		grid-template-areas: 'body media';
		gap: var(--s-7);
		padding-top: var(--s-6);
		min-height: min(82vh, 46rem);
	}
	/*
	 * On a wide screen the frame is driven by height rather than ratio, so it
	 * fills its column instead of leaving a gutter beside it. object-fit
	 * crops rather than distorts, and the focal point is set on the element.
	 */
	.n-open__media .n-media {
		aspect-ratio: auto;
		height: min(78vh, 42rem);
		max-height: none;
		width: 100%;
	}
}

/* --- B. Lead story --------------------------------------------------- */
.n-lead-story { display: grid; gap: var(--s-5); }
.n-lead-story .n-media { aspect-ratio: 3 / 2; }
.n-lead-story__title {
	font-size: var(--t-h1);
	margin-block: var(--s-3) var(--s-4);
}
@media (min-width: 62rem) {
	.n-lead-story {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		gap: var(--s-7);
		align-items: center;
	}
	.n-lead-story .n-media { aspect-ratio: 5 / 4; }
}

/* --- C. Asymmetric pair ---------------------------------------------- */
.n-pair { display: grid; gap: var(--s-7) var(--gutter); }
@media (min-width: 48rem) {
	.n-pair { grid-template-columns: 1.25fr 1fr; align-items: start; }
	/* The second story sits lower, so the pair reads as a composition
	   rather than as two equal columns. */
	.n-pair > :nth-child(2) { margin-top: var(--s-8); }
}
.n-pair .n-media { aspect-ratio: 4 / 5; }
.n-pair > :nth-child(2) .n-media { aspect-ratio: 1 / 1; }

/* --- Story: the one repeated unit, deliberately plain ---------------- */
.n-story { display: block; text-decoration: none; }
.n-story__title {
	font-family: var(--n-display);
	font-size: var(--t-h3);
	line-height: 1.1;
	letter-spacing: -.012em;
	margin: var(--s-3) 0 var(--s-2);
	text-wrap: balance;
}
.n-story--lg .n-story__title { font-size: var(--t-h2); }
.n-story__dek {
	color: var(--n-ink-soft);
	font-size: var(--t-small);
	line-height: 1.55;
	margin: 0 0 var(--s-3);
	text-wrap: pretty;
}
.n-story__foot { display: flex; align-items: center; gap: var(--s-3); }

/* --- D. Subject index: text-led, no images --------------------------- */
.n-index { display: grid; gap: 0; }
.n-index a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-4);
	border-bottom: var(--hairline);
	text-decoration: none;
	transition: padding-inline-start .3s cubic-bezier(.2,.7,.3,1);
}
.n-index a:first-child { border-top: var(--hairline); }
.n-index a:hover { padding-inline-start: var(--s-3); }
.n-index__name {
	font-family: var(--n-display);
	font-size: clamp(1.35rem, 1rem + 1.7vw, 2.15rem);
	line-height: 1.1;
}
.n-index__count {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .1em;
	color: var(--n-ink-mute);
	white-space: nowrap;
}

/* --- E. Archive strip: horizontal, older work ------------------------ */
.n-strip { display: grid; gap: var(--s-6) var(--gutter); }
@media (min-width: 48rem) { .n-strip { grid-template-columns: repeat(3, 1fr); } }
.n-strip .n-media { aspect-ratio: 3 / 4; }
.n-strip .n-story__title { font-size: var(--t-h3); }

/* --- F. Profile module ------------------------------------------------ */
.n-profile { display: grid; gap: var(--s-6); align-items: center; }
.n-profile .n-media { aspect-ratio: 4 / 5; }
@media (min-width: 55rem) {
	.n-profile { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: var(--s-7); }
}
.n-profile__body p { max-width: 34rem; }
.n-profile__title { font-size: var(--t-h2); margin-bottom: var(--s-4); }

/* --- G. Support: understated, once ----------------------------------- */
.n-support {
	display: grid;
	gap: var(--s-4);
	max-width: 34rem;
}
.n-support p { color: var(--n-ink-soft); font-size: var(--t-small); }

/* --- H. Social ------------------------------------------------------- */
.n-social { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.n-social a {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-block: .5em;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	transition: border-color .2s ease;
}
.n-social a:hover { border-bottom-color: currentColor; }

/* ====================================== 11  ARCHIVE AND JOURNAL === */

.n-page-head { padding-block: var(--s-7) var(--s-6); }
.n-page-head__title { font-size: var(--t-hero); margin-block: var(--s-3) var(--s-4); }
.n-page-head__intro { max-width: 34rem; color: var(--n-ink-soft); font-size: var(--t-lead); }

.n-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2) var(--s-4);
	padding-block: var(--s-4);
	border-block: var(--hairline);
	margin-bottom: var(--s-7);
}
.n-filters a {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .13em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--n-ink-mute);
	min-height: 40px;
	display: inline-flex;
	align-items: center;
}
.n-filters a:hover { color: var(--n-ink); }
.n-filters a[aria-current] { color: var(--n-ink); border-bottom: 1px solid var(--n-ink); }

/* The archive alternates image scale so a long run of posts keeps rhythm. */
.n-archive { display: grid; gap: var(--s-7) var(--gutter); }
@media (min-width: 48rem) { .n-archive { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .n-archive { grid-template-columns: repeat(3, 1fr); } }
.n-archive .n-media { aspect-ratio: 4 / 5; }
.n-archive > :nth-child(6n+1) .n-media { aspect-ratio: 3 / 4; }
.n-archive > :nth-child(6n+4) .n-media { aspect-ratio: 1 / 1; }

.n-pager {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-8);
	padding-top: var(--s-4);
	border-top: 1px solid var(--n-ink);
}
.n-pager span, .n-pager a {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.n-pager .is-off { color: var(--n-rule-firm); }

.n-empty {
	padding-block: var(--s-8);
	max-width: 34rem;
}
.n-empty h2 { font-size: var(--t-h2); margin-bottom: var(--s-3); }
.n-empty p { color: var(--n-ink-soft); }

/* ==================================================== 12  ARTICLE === */

/*
 * The article uses a named grid rather than a centred column so that images
 * and quotes can break out of the measure without leaving the flow. Body
 * content sits in [read]; a figure can claim [wide] or the full [bleed].
 */
.n-article {
	display: grid;
	grid-template-columns:
		[bleed-start] minmax(var(--gutter), 1fr)
		[wide-start] minmax(0, 8rem)
		[read-start] min(100% - (var(--gutter) * 2), var(--measure)) [read-end]
		minmax(0, 8rem) [wide-end]
		minmax(var(--gutter), 1fr) [bleed-end];
}
.n-article > * { grid-column: read; }
.n-article > .n-bleed { grid-column: bleed; }
.n-article > .n-wide { grid-column: wide; }

.n-art-head { padding-block: var(--s-7) var(--s-5); }
/*
 * Scoped with .nina so it out-specifies `.nina h1,h2,h3,h4 { margin: 0 }`,
 * which was nullifying it and letting the dek sit flush against the last
 * line of the headline. The other heading rules are left alone: their
 * neighbours carry their own spacing and those compositions render as
 * approved.
 */
.nina .n-art-head__title { font-size: var(--t-h1); margin-block: var(--s-4) var(--s-4); }
.n-art-head__dek {
	font-family: var(--n-text);
	font-size: var(--t-lead);
	line-height: 1.48;
	color: var(--n-ink-soft);
	margin-bottom: var(--s-5);
	text-wrap: pretty;
}
.n-art-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2) var(--s-3);
	padding-top: var(--s-4);
	border-top: var(--hairline);
}
.n-art-byline__name {
	font-family: var(--n-util);
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--n-ink);
}
.n-art-byline__sep { color: var(--n-rule-firm); }

.n-art-hero { margin-bottom: var(--s-7); }
.n-art-hero .n-media { aspect-ratio: 3 / 2; }

/* --- Reading typography ---------------------------------------------- */
.n-body { font-size: var(--t-body); line-height: 1.72; }
.n-body > * { margin-block: 0 1.3em; }
.n-body > *:last-child { margin-bottom: 0; }

.n-body h2 {
	font-size: var(--t-h2);
	line-height: 1.14;
	margin-block: 2.1em .55em;
	text-wrap: balance;
}
.n-body h3 {
	font-family: var(--n-util);
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--n-ink-soft);
	margin-block: 2em .5em;
}

.n-body a {
	color: var(--n-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--n-rule-firm);
	transition: border-color .2s ease, color .2s ease;
}
.n-body a:hover { color: var(--n-wine); border-color: var(--n-wine); }

.n-body ul, .n-body ol { padding-left: 1.25em; }
.n-body li { margin-bottom: .5em; padding-left: .25em; }
.n-body li::marker { color: var(--n-ink-mute); }

.n-body blockquote {
	margin: 2em 0;
	padding-left: var(--s-5);
	border-left: 2px solid var(--n-ink);
	font-style: italic;
	color: var(--n-ink-soft);
}

.n-body strong { font-weight: 700; }
.n-body em { font-style: italic; }

/* The opening paragraph gets a little more presence, without a drop cap. */
.n-body > p:first-of-type {
	font-size: calc(var(--t-body) * 1.1);
	line-height: 1.62;
	color: var(--n-ink);
}

/* --- Editorial breakouts --------------------------------------------- */
.n-pull {
	margin-block: var(--s-7);
	padding-block: var(--s-5);
	border-block: 1px solid var(--n-ink);
	font-family: var(--n-display);
	font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem);
	line-height: 1.18;
	letter-spacing: -.012em;
	text-wrap: balance;
}

.n-figure { margin-block: var(--s-7); }
.n-figure figcaption { margin-top: var(--s-3); }

.n-divider {
	margin-block: var(--s-7);
	border: 0;
	border-top: var(--hairline);
}

/* --- Article footer --------------------------------------------------- */
.n-art-foot {
	margin-top: var(--s-8);
	padding-top: var(--s-5);
	border-top: 1px solid var(--n-ink);
}

.n-prevnext {
	display: grid;
	gap: var(--s-5);
	margin-top: var(--s-7);
	padding-top: var(--s-5);
	border-top: var(--hairline);
}
@media (min-width: 48rem) { .n-prevnext { grid-template-columns: 1fr 1fr; } }
.n-prevnext__item { text-decoration: none; display: block; }
.n-prevnext__item--next { text-align: right; }
.n-prevnext__title {
	font-family: var(--n-display);
	font-size: var(--t-h3);
	line-height: 1.15;
	margin-top: var(--s-2);
}

/* ============================== 13  PAGES — ABOUT, CONTACT, 404 === */

/*
 * Same rule as the home opening: the frame is capped against the viewport so
 * the name is never pushed off the first screen by a tall portrait.
 */
.n-about-open {
	display: grid;
	gap: var(--s-6);
	align-items: center;
	padding-top: var(--s-5);
}
.n-about-open .n-media {
	aspect-ratio: 4 / 5;
	max-height: min(74vh, 38rem);
}
@media (min-width: 55rem) {
	.n-about-open {
		grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
		gap: var(--s-7);
		min-height: min(78vh, 44rem);
		padding-top: var(--s-6);
	}
	.n-about-open .n-media {
		aspect-ratio: auto;
		height: min(74vh, 40rem);
		max-height: none;
		width: 100%;
	}
}
.n-about-open__name {
	font-family: var(--n-display);
	font-size: var(--t-hero);
	line-height: .96;
	letter-spacing: -.01em;
	margin: 0 0 var(--s-3);
}
.n-about-open__aka { color: var(--n-ink-mute); font-family: var(--n-util); font-size: var(--t-small); }

.n-prose { max-width: var(--measure); }
.n-prose p { margin-bottom: 1.25em; }
.n-prose p:first-of-type { font-size: var(--t-lead); line-height: 1.5; }

.n-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.n-facts li {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: var(--s-4);
	padding-block: var(--s-3);
	border-bottom: var(--hairline);
	font-size: var(--t-small);
}
.n-facts li:first-child { border-top: var(--hairline); }
.n-facts dt, .n-facts .n-facts__k {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--n-ink-mute);
}

.n-contact-grid { display: grid; gap: var(--s-6) var(--gutter); }
@media (min-width: 55rem) { .n-contact-grid { grid-template-columns: 1.1fr 1fr; } }

.n-404 { padding-block: var(--s-9) var(--s-8); max-width: 42rem; }
.n-404__code {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--n-ink-mute);
}
.n-404__title { font-size: var(--t-hero); margin-block: var(--s-4); }

.n-results { display: grid; gap: var(--s-5); }
.n-result {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: var(--s-4);
	padding-bottom: var(--s-5);
	border-bottom: var(--hairline);
	text-decoration: none;
	align-items: start;
}
@media (min-width: 48rem) { .n-result { grid-template-columns: 9rem 1fr; gap: var(--s-5); } }
.n-result .n-media { aspect-ratio: 1 / 1; }
.n-result__title { font-family: var(--n-display); font-size: var(--t-h3); line-height: 1.14; margin-block: var(--s-1) var(--s-2); }

/* ========================================= 14  MOTION AND FOCUS === */

:where(.nina) :focus-visible {
	outline: 2px solid var(--n-wine);
	outline-offset: 3px;
	border-radius: 1px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.n-menu { transition: none; }
}

/* A single, restrained reveal. The page is fully readable without it: the
   class is only added by script once it has confirmed motion is welcome. */
.n-reveal { opacity: 0; transform: translateY(14px); }
.n-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}

@media print {
	.n-head, .n-foot, .n-menu, .n-search, .n-prevnext { display: none !important; }
	.nina { color: #000; background: #fff; }
}

/* Links that sit inside small metadata lines are still targets. A 24px hit
   area costs nothing visually and clears the WCAG 2.2 minimum. */
.n-eyebrow a,
.n-meta a,
.n-filters a,
.n-index__count a {
	min-height: 24px;
	display: inline-flex;
	align-items: center;
}

/* The About standfirst: large enough to hold the column beside a full
   portrait, short enough not to become a second biography. */
.n-about-open__stand {
	font-family: var(--n-text);
	font-size: clamp(1.15rem, .95rem + 1.1vw, 1.75rem);
	line-height: 1.38;
	color: var(--n-ink-soft);
	max-width: 24ch;
	margin: var(--s-5) 0 0;
	text-wrap: pretty;
}

/* ============================================ 15  CONSENT PANEL === */

/*
 * The analytics consent panel is rendered by inc/analytics.php and was styled
 * by the previous theme's components.css, which this design does not load.
 * Without these rules it appeared as unstyled markup at the foot of every
 * page — and it is the one control a reader needs to refuse tracking, so it
 * has to look deliberate. Same tokens, same type, no new dependencies.
 */
.nn-consent {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 140;
	background: var(--n-paper);
	border-top: 1px solid var(--n-ink);
	padding: var(--s-5) 0 calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -18px 40px -30px rgb(18 16 14 / .35);
}
.nn-consent[hidden] { display: none !important; }

.nn-consent__inner {
	width: min(100% - (var(--gutter) * 2), var(--canvas));
	margin-inline: auto;
	display: grid;
	gap: var(--s-4);
	align-items: center;
}
@media (min-width: 48rem) {
	.nn-consent__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); }
}

/* The title is an <h2>, so `.nina h2` out-specifies a single class and was
   setting it in the display face. Scoped to match. */
.nina .nn-consent__title {
	font-family: var(--n-util);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	margin: 0 0 var(--s-2);
	line-height: 1.2;
}
.nn-consent__body {
	font-family: var(--n-text);
	font-size: var(--t-small);
	line-height: 1.55;
	color: var(--n-ink-soft);
	margin: 0;
	max-width: 56ch;
}
.nn-consent__link { color: inherit; border-bottom: 1px solid var(--n-rule-firm); text-decoration: none; }
.nn-consent__link:hover { color: var(--n-wine); border-color: var(--n-wine); }

.nn-consent__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.nn-consent .nn-btn {
	appearance: none;
	cursor: pointer;
	font-family: var(--n-util);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: 0 var(--s-5);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--n-ink);
	background: var(--n-ink);
	color: var(--n-paper);
	transition: background .2s ease, color .2s ease;
}
.nn-consent .nn-btn:hover { background: var(--n-wine); border-color: var(--n-wine); }

.nn-consent .nn-btn--outline { background: none; color: var(--n-ink); }
.nn-consent .nn-btn--outline:hover { background: var(--n-ink); color: var(--n-paper); }

.nn-consent__close {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--n-ink-mute);
	font-family: var(--n-util);
	font-size: var(--t-micro);
	letter-spacing: .13em;
	text-transform: uppercase;
	min-height: 44px;
	padding-inline: var(--s-2);
}
.nn-consent__close:hover { color: var(--n-ink); }