@charset "UTF-8";
/*
 * NINA NOIR — homepage
 * ============================================================================
 *
 * Loaded on the homepage only, after nina.css and the type sheet. Built to
 * the approved reference composition: ivory ground, a blush opening panel,
 * a sand category band, one deep burgundy accent.
 *
 * The palette is scoped to .nina--home so no other page changes with it.
 *
 * Image ratios are fixed per block and every image is object-fit: cover
 * inside its frame, so no upload can break the grid:
 *
 *   block        phone        tablet       desktop
 *   opening      4:5 (5:4 ≥480) 3:2         fills its half (≈3:2)
 *   featured     3:2          16:9         3:2 → 2:1 → 12:5 as it widens
 *   picks        4:3          16:9         16:9
 *   latest       1:1 (list)   3:2          3:2
 *   about        4:5          4:5          2:1
 *   instagram    1:1          1:1          1:1
 *
 * Breakpoints: phone < 48rem (768px) ≤ tablet < 62rem (992px) ≤ desktop.
 */

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

.nina--home {
	--n-paper: #faf6f3;
	--n-paper-warm: #f4ede8;
	--n-paper-deep: #eee6e0;
	--n-blush: #ece3df;
	--n-sand: #ebe1db;
	--n-shell: #efe1d8;
	--n-ink: #231a17;
	--n-ink-soft: #574b45;
	--n-ink-mute: #7a6d66;
	--n-rule: #e4d9d2;
	--n-rule-firm: #d2c3b9;
	--n-wine: #4f1d2b;
	--n-wine-lift: #6b2a3c;
	--n-mark: #3d1c1e;
	--hairline: 1px solid var(--n-rule);

	/* Vertical rhythm between the stacked blocks. */
	--h-gap: clamp(2.25rem, 1.4rem + 2vw, 3.5rem);
	--h-card-gap: clamp(1rem, .5rem + 1.3vw, 2.1rem);
}

/* The masthead sits a little tighter here, as in the reference: smaller,
   more widely tracked navigation, a finer wordmark, a quieter button. */
.nina--home .n-head__inner { padding-block: clamp(.2rem, .1rem + .3vw, .45rem); }
.nina--home .n-navlist { gap: clamp(.9rem, .1rem + 1.5vw, 2.1rem); }
.nina--home .n-navlist a { font-size: clamp(.64rem, .6rem + .1vw, .7rem); letter-spacing: .2em; }
.nina--home .n-wordmark { font-size: clamp(1.3rem, 1rem + 1.05vw, 1.95rem); font-weight: 400; }
.nina--home .n-subscribe { font-size: clamp(.62rem, .58rem + .1vw, .68rem); letter-spacing: .22em; padding-inline: 1.9em; }
.nina--home .n-foot { margin-top: 0; }

/* ======================================================== SHARED === */

.h-eyebrow {
	font-family: var(--n-util);
	font-size: clamp(.66rem, .62rem + .12vw, .74rem);
	font-weight: 500;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--n-ink-soft);
	line-height: 1.3;
	margin: 0;
}

.h-meta {
	font-family: var(--n-util);
	font-size: clamp(.66rem, .62rem + .12vw, .74rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--n-ink-mute);
	display: flex;
	flex-wrap: wrap;
	gap: .2em .7em;
	margin: 0;
}

/* Filled button: the burgundy call to action. */
.h-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	min-height: 48px;
	padding: 0 2.3em;
	background: var(--n-wine);
	color: #fff;
	border: 0;
	font-family: var(--n-util);
	font-size: clamp(.68rem, .64rem + .14vw, .78rem);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, gap .25s ease;
}
.nina a.h-btn { color: #fff; }
.h-btn:hover { background: var(--n-wine-lift); gap: 1.35em; }
.h-btn .n-icon { width: 1.35em; height: 1.35em; stroke-width: 1.8; }

/* Text link with a rule under it: "Read the story", "All articles". */
.h-more {
	display: inline-flex;
	align-items: center;
	gap: .8em;
	min-height: 44px;
	font-family: var(--n-util);
	font-size: clamp(.64rem, .6rem + .12vw, .72rem);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--n-ink);
	white-space: nowrap;
	transition: color .2s ease, gap .25s ease;
}
.h-more:hover { color: var(--n-wine); gap: 1.1em; }
.h-more .n-icon { width: 1.3em; height: 1.3em; stroke-width: 1.8; }

/* Image frames: every picture on the page fills a fixed frame. */
.h-hero__media img,
.h-feature__media img,
.h-card__media img,
.h-about__media img,
.h-ig__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (hover: hover) {
	.h-card__media img,
	.h-feature__media img { transition: transform .9s cubic-bezier(.2, .7, .25, 1); }
	.h-card:hover .h-card__media img,
	.h-feature:hover .h-feature__media img { transform: scale(1.03); }
	.h-ig__item img { transition: opacity .3s ease; }
	.h-ig__item a:hover img { opacity: .86; }
}

/* ================================================= A  OPENING === */

.h-hero {
	display: grid;
	grid-template-areas: 'media' 'panel';
	background: var(--n-blush);
}

.h-hero__media {
	grid-area: media;
	position: relative;
	overflow: hidden;
	background: var(--n-paper-deep);
	aspect-ratio: 4 / 5;
}

.h-hero__panel {
	grid-area: panel;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) var(--gutter) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.nina .h-hero__mark {
	font-family: var(--n-display);
	font-size: clamp(3rem, 10vw, 5.5rem);
	font-weight: 400;
	line-height: .95;
	letter-spacing: .055em;
	text-transform: uppercase;
	color: var(--n-mark);
	margin: .2em 0 .24em;
	white-space: nowrap;
}

.nina .h-hero__line {
	font-family: var(--n-text);
	font-size: clamp(1.1rem, .98rem + .42vw, 1.36rem);
	line-height: 1.45;
	color: var(--n-ink);
	margin: 0;
	max-width: 30rem;
	text-wrap: pretty;
}

.nina .h-hero__sign {
	font-family: var(--n-text);
	font-style: italic;
	font-size: clamp(1.25rem, 1.02rem + .8vw, 1.8rem);
	line-height: 1.25;
	color: var(--n-wine);
	margin: .55em 0 0;
	max-width: 28rem;
	text-wrap: balance;
}

.h-hero .h-btn { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.3rem); }

.h-hero__subjects {
	margin-top: clamp(1.1rem, .8rem + 1vw, 1.8rem);
	padding-top: clamp(.6rem, .4rem + .6vw, 1rem);
	position: relative;
}
/* The short rule above the subject links. */
.h-hero__subjects::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3rem;
	height: 1px;
	background: #fff;
	opacity: .9;
}
.h-hero__subjects ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.1rem, .6rem + 1.6vw, 2.6rem);
}
.h-hero__subjects a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--n-util);
	font-size: clamp(.64rem, .6rem + .12vw, .72rem);
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--n-ink-soft);
	transition: color .2s ease;
}
.h-hero__subjects a:hover { color: var(--n-wine); }

/* A large phone or small tablet in portrait would make a 4:5 frame taller
   than the screen; 5:4 keeps the masthead within reach. */
@media (min-width: 30rem) {
	.h-hero__media { aspect-ratio: 5 / 4; }
}
@media (min-width: 48rem) {
	.h-hero__media { aspect-ratio: 3 / 2; }
}

@media (min-width: 62rem) {
	.h-hero {
		grid-template-columns: minmax(0, 44.7fr) minmax(0, 55.3fr);
		grid-template-areas: 'panel media';
		min-height: clamp(30rem, 36vw, 42rem);
	}
	/* On a wide screen the frame fills its half at whatever ratio that is. */
	.h-hero__media { aspect-ratio: auto; }
	.h-hero__media img { position: absolute; inset: 0; }
	.h-hero__panel {
		padding: clamp(2rem, 3.6vw, 4.5rem) clamp(1.5rem, 3vw, 4rem) clamp(1.25rem, 1.6vw, 2rem) clamp(2rem, 5.8vw, 6.5rem);
	}
	.nina .h-hero__mark { font-size: clamp(3rem, 5.9vw, 6.2rem); }
}

/* ================================================ B  FEATURED === */

.h-feature {
	display: grid;
	gap: var(--s-5);
	margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.h-feature__media {
	display: block;
	aspect-ratio: 3 / 2;
}

.h-feature__body { max-width: 34rem; }

.nina .h-feature__title {
	font-family: var(--n-display);
	font-size: clamp(1.85rem, 1.1rem + 2.1vw, 2.9rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -.012em;
	color: var(--n-mark);
	margin: .45em 0 .35em;
	text-wrap: balance;
}
.h-feature__title a { color: inherit; }

.nina .h-feature__dek {
	font-family: var(--n-text);
	font-size: clamp(1.06rem, .98rem + .3vw, 1.2rem);
	line-height: 1.5;
	color: var(--n-ink-soft);
	margin: 0 0 .75em;
	text-wrap: pretty;
}

.h-feature .h-more {
	margin-top: .35em;
	border-bottom: 1px solid currentColor;
}

@media (min-width: 48rem) {
	.h-feature__media { aspect-ratio: 16 / 9; }
}

@media (min-width: 62rem) {
	.h-feature {
		grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
		gap: clamp(1.5rem, 2.4vw, 3rem);
		align-items: center;
	}
	/* On a small laptop the text column is narrow and tall; a deeper frame
	   keeps the picture level with it. The cinematic 12:5 needs room. */
	.h-feature__media { aspect-ratio: 3 / 2; }
}
@media (min-width: 75rem) {
	.h-feature__media { aspect-ratio: 2 / 1; }
}
@media (min-width: 90rem) {
	.h-feature__media { aspect-ratio: 12 / 5; }
}

/* ========================================= SECTION HEADINGS === */

.h-sec { margin-top: var(--h-gap); }

.h-sec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .25rem var(--s-4);
	margin-bottom: clamp(.5rem, .3rem + .6vw, 1rem);
}

.nina .h-sec__title {
	font-family: var(--n-display);
	font-size: clamp(1.25rem, .95rem + .95vw, 1.72rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--n-ink);
}

.nina .h-sec__aside {
	font-family: var(--n-text);
	font-style: italic;
	font-size: clamp(.98rem, .92rem + .2vw, 1.08rem);
	color: var(--n-ink-soft);
	margin: 0;
}

/* ================================================== CARDS === */

/*
 * One card, four rows: picture, subject, headline, standfirst. Wherever
 * cards sit side by side each card is a subgrid of its row, so the four rows
 * line up across the whole row — every picture the same height, every
 * subject on one line, every standfirst starting at the same height however
 * many lines the headline beside it runs to. Spacing lives on the rows, not
 * on the items, so it is identical in every card.
 */
.h-card { position: relative; }

.h-card__media { display: block; }

.h-card__body > * { padding-inline: .35rem; }

.h-card .h-eyebrow { padding-top: clamp(.85rem, .65rem + .6vw, 1.3rem); }

.nina .h-card__title {
	font-family: var(--n-display);
	font-size: clamp(1.2rem, .95rem + .75vw, 1.6rem);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.01em;
	color: var(--n-ink);
	margin: 0;
	padding-top: .4rem;
	text-wrap: balance;
}
.h-card__title a { color: inherit; }
.h-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Keyboard focus rings the whole card, since the whole card is the link. */
.h-card:has(a:focus-visible) { outline: 2px solid var(--n-wine); outline-offset: 4px; }
.h-card .h-card__title a:focus-visible { outline: none; }
.h-card:hover .n-title-link { background-size: 100% 1px; }

.nina .h-card__dek {
	font-family: var(--n-text);
	font-size: clamp(1.02rem, .95rem + .25vw, 1.18rem);
	line-height: 1.45;
	color: var(--n-ink-soft);
	margin: 0;
	padding-top: .45rem;
	text-wrap: pretty;
}

/* Side-by-side cards share their rows: Picks always (on a phone they sit
   side by side on the shelf), Latest once it leaves the phone list. */
@supports (grid-template-rows: subgrid) {
	.h-picks > .h-card--row {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 4;
		row-gap: 0;
	}
	.h-picks > .h-card--row .h-card__body { display: contents; }

	@media (min-width: 30rem) {
		.h-latest > .h-card--row {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 4;
			row-gap: 0;
		}
		.h-latest > .h-card--row .h-card__body { display: contents; }
	}
}

/* --- C. Picks: three identical cards ------------------------------- */
/* On a phone the row becomes a swipeable shelf with the next card
   visible at the edge, rather than three tall cards stacked. */
.h-picks {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 80%;
	grid-template-rows: auto auto auto auto;
	column-gap: var(--s-4);
	row-gap: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	margin-inline: calc(var(--gutter) * -1);
	padding-inline: var(--gutter);
	scroll-padding-inline: var(--gutter);
}
.h-picks::-webkit-scrollbar { display: none; }
.h-picks > * { scroll-snap-align: start; }
.h-picks .h-card__media { aspect-ratio: 4 / 3; }

@media (min-width: 48rem) {
	.h-picks {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--h-card-gap);
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
	.h-picks .h-card__media { aspect-ratio: 16 / 9; }
}

/* --- D. Latest: four compact cards --------------------------------- */
/* On a phone: a list with square thumbnails, the way a journal's index
   reads, instead of four more full-width pictures. */
.h-latest { display: grid; gap: 0; }
.h-latest .h-card {
	display: grid;
	grid-template-columns: 6.75rem minmax(0, 1fr);
	column-gap: var(--s-4);
	align-items: start;
	padding-block: var(--s-4);
	border-top: var(--hairline);
}
.h-latest .h-card:last-child { border-bottom: var(--hairline); }
.h-latest .h-card__media { aspect-ratio: 1 / 1; }
.h-latest .h-card__body > * { padding-inline: 0; }
.h-latest .h-card .h-eyebrow { padding-top: .1rem; }
.nina .h-latest .h-card__title { font-size: clamp(1.14rem, 1rem + .5vw, 1.45rem); }

@media (min-width: 30rem) {
	.h-latest {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--h-card-gap);
		row-gap: var(--s-6);
	}
	.h-latest .h-card {
		grid-template-columns: none;
		padding: 0;
		border: 0;
	}
	.h-latest .h-card:last-child { border: 0; }
	.h-latest .h-card__media { aspect-ratio: 3 / 2; }
	.h-latest .h-card__body > * { padding-inline: .35rem; }
	.h-latest .h-card .h-eyebrow { padding-top: clamp(.85rem, .65rem + .6vw, 1.3rem); }
}

@media (min-width: 62rem) {
	.h-latest {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(1rem, 1.4vw, 1.5rem);
	}
}

/* ============================================= E  CATEGORIES === */

.h-cats {
	background: var(--n-sand);
	margin-top: clamp(2rem, 1.2rem + 1.6vw, 2.75rem);
	padding-block: clamp(1.1rem, .8rem + .9vw, 1.6rem) clamp(1rem, .7rem + 1vw, 1.8rem);
}

.nina .h-cats__title {
	font-family: var(--n-util);
	font-size: clamp(.66rem, .62rem + .12vw, .74rem);
	font-weight: 500;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-align: center;
	color: var(--n-ink-soft);
	margin-bottom: clamp(.6rem, .4rem + .6vw, 1rem);
}

/* A single row that scrolls sideways on small screens and spreads evenly
   on large ones, with a hairline between each subject. */
.h-cats__list {
	list-style: none;
	margin: 0 calc(var(--gutter) * -1);
	padding: 0 var(--gutter);
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}
.h-cats__list::-webkit-scrollbar { display: none; }

.h-cats__list li {
	flex: 1 0 auto;
	position: relative;
	scroll-snap-align: start;
}
.h-cats__list li + li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 22%;
	bottom: 22%;
	width: 1px;
	background: var(--n-rule-firm);
}

.h-cats__list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7rem;
	min-width: 6.5rem;
	padding: .5rem clamp(.6rem, .3rem + .7vw, 1.1rem);
	text-decoration: none;
	color: var(--n-ink);
	transition: color .2s ease;
}
.h-cats__list a:hover { color: var(--n-wine); }
.h-cats__list .n-icon { width: clamp(30px, 1.6rem + .5vw, 38px); height: clamp(30px, 1.6rem + .5vw, 38px); transition: transform .3s ease; }
.h-cats__list a:hover .n-icon { transform: translateY(-2px); }
.h-cats__list span {
	font-family: var(--n-util);
	font-size: clamp(.62rem, .58rem + .12vw, .7rem);
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* From tablet width the strip stops scrolling and every subject gets an
   equal cell, as in the reference; long names wrap onto a second line
   rather than widening their cell. Two rows of six until there is room
   for all of them in one. Only a phone keeps the sideways strip. */
@media (min-width: 48rem) {
	.h-cats__list {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		row-gap: .6rem;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
	.h-cats__list li:nth-child(6n+1)::before { display: none; }
	.h-cats__list a { min-width: 0; padding-inline: .3rem; }
	.h-cats__list span { white-space: normal; text-align: center; letter-spacing: .17em; line-height: 1.5; }
}
@media (min-width: 87.5rem) {
	.h-cats__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.h-cats__list li:nth-child(6n+1)::before { display: block; }
}

/* ================================================== F  ABOUT === */

.h-about {
	display: grid;
	gap: var(--s-5);
	margin-top: clamp(1rem, .6rem + 1.2vw, 1.6rem);
	align-items: center;
}

.h-about__media { aspect-ratio: 4 / 5; }

.nina .h-about__title {
	font-family: var(--n-display);
	font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.4rem);
	font-weight: 400;
	line-height: 1.05;
	color: var(--n-mark);
	margin: .45em 0 .35em;
}

.nina .h-about__text {
	font-family: var(--n-text);
	font-size: clamp(1.04rem, .96rem + .28vw, 1.18rem);
	line-height: 1.5;
	color: var(--n-ink-soft);
	margin: 0 0 clamp(1rem, .8rem + .6vw, 1.4rem);
	max-width: 32rem;
	text-wrap: pretty;
}

.h-about__links {
	list-style: none;
	margin: 0;
	padding: var(--s-3) 0 0;
	border-top: var(--hairline);
	display: grid;
	gap: 0;
}
.h-about__links a {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	min-height: 52px;
	text-decoration: none;
	color: var(--n-ink);
	transition: color .2s ease;
}
.h-about__links a:hover { color: var(--n-wine); }
.h-about__links .n-icon { width: clamp(28px, 1.4rem + .6vw, 36px); height: clamp(28px, 1.4rem + .6vw, 36px); stroke-width: 1.05; }
.h-about__links span {
	font-family: var(--n-util);
	font-size: clamp(.64rem, .6rem + .12vw, .72rem);
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
}

@media (min-width: 48rem) {
	.h-about {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: var(--s-4) var(--s-6);
	}
	.h-about__links {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
	}
}

@media (min-width: 62rem) {
	.h-about {
		grid-template-columns: minmax(0, 1.07fr) minmax(0, 1fr) auto;
		gap: clamp(1.5rem, 2.4vw, 3rem);
	}
	.h-about__media { aspect-ratio: 2 / 1; }
	.h-about__links {
		grid-column: auto;
		grid-template-columns: none;
		align-content: center;
		align-self: stretch;
		border-top: 0;
		border-left: var(--hairline);
		padding: var(--s-3) 0 var(--s-3) clamp(1.5rem, 2.6vw, 3rem);
		margin-block: 8%;
		gap: clamp(.25rem, .8vw, 1rem);
	}
}

/* =============================================== G  INSTAGRAM === */

/*
 * Edge to edge, square tiles, hairline gaps, as in the reference: six
 * photographs and the Follow tile on a desktop. Photographs only; no
 * captions, counts or overlays. Each tile links to its post.
 */
.h-ig { margin-top: clamp(1rem, .6rem + 1.2vw, 1.6rem); }

.h-ig__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(3px, .4vw, 6px);
}

.h-ig__item a {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--n-paper-deep);
}

/* How many photographs each layout shows, so every grid ends flush:
   phone 8 + follow = 3×3, tablet 7 + follow = 4×2, desktop 6 + follow = 7. */
.h-ig__item:nth-child(n+9) { display: none; }

/* The Follow treatment: a tile in the grid, or on its own until the
   account is connected. */
.h-ig__follow { background: var(--n-shell); }
.h-ig__follow-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	height: 100%;
	aspect-ratio: 1 / 1;
	padding: .75rem;
	color: var(--n-ink);
	text-decoration: none;
	text-align: center;
	transition: background-color .25s ease, color .25s ease;
}
.h-ig__follow-link:hover { background: var(--n-sand); color: var(--n-wine); }
.h-ig__follow-label,
.h-ig__follow-handle {
	font-family: var(--n-util);
	font-size: clamp(.58rem, .54rem + .16vw, .7rem);
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	line-height: 1.6;
}
.h-ig__follow-handle { word-break: break-all; }
.h-ig__follow .n-icon {
	width: clamp(24px, 1.1rem + .6vw, 30px);
	height: clamp(24px, 1.1rem + .6vw, 30px);
	stroke-width: 1.35;
	margin-top: .5rem;
}
.h-ig__follow-rule { width: 2.2rem; height: 1px; background: currentColor; opacity: .5; margin-top: .7rem; }

@media (min-width: 48rem) {
	.h-ig__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.h-ig__item:nth-child(n+8) { display: none; }
}

@media (min-width: 62rem) {
	.h-ig__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.h-ig__item:nth-child(n+7) { display: none; }
}

/* Not connected yet: the same Follow treatment, alone, in a band as tall as
   one row of the grid will be, so the page already has its final shape. */
.h-ig__follow--solo .h-ig__follow-link {
	aspect-ratio: auto;
	min-height: clamp(9rem, 7rem + 8vw, 13.5rem);
	gap: .4rem;
}
.h-ig__follow--solo .h-ig__follow-handle {
	font-family: var(--n-display);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
	letter-spacing: .06em;
	text-transform: none;
	line-height: 1.2;
	color: var(--n-mark);
}

/* ============================================ H  STAY CONNECTED === */

/*
 * Centred, like a colophon: a small heading, then every place Nina
 * publishes, set as one row with hairlines between. When a newsletter
 * provider is configured its form sits between the heading and the row,
 * so the section never needs redesigning to take email.
 */
.h-sub {
	padding-block: clamp(2.5rem, 1.8rem + 2.4vw, 4rem) clamp(2rem, 1.5rem + 2vw, 3.25rem);
	scroll-margin-top: 5rem;
	text-align: center;
}
.h-sub:focus { outline: none; }

.h-sub__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nina .h-sub__title {
	font-family: var(--n-display);
	font-size: clamp(1.55rem, 1.15rem + 1.25vw, 2.3rem);
	font-weight: 400;
	line-height: 1.12;
	color: var(--n-mark);
	margin-top: .55em;
	text-wrap: balance;
}

.h-sub__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	width: min(100%, 34rem);
	margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.h-sub__form input {
	flex: 1 1 16rem;
	min-height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--n-rule-firm);
	background: #fff;
	font-family: var(--n-text);
	font-size: 1.05rem;
	color: var(--n-ink);
}
.nina .h-sub__note { flex-basis: 100%; font-size: .9rem; color: var(--n-ink-soft); margin: .25rem 0 0; }

.h-sub__channels {
	list-style: none;
	margin: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: min(100%, 64rem);
	border-top: var(--hairline);
}
.h-sub__channels li { border-bottom: var(--hairline); }
.h-sub__channels li:nth-child(odd) { border-right: var(--hairline); }
.h-sub__channels li:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }

.h-sub__channels a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	padding: 1.1rem .5rem 1rem;
	min-height: 44px;
	text-decoration: none;
	color: var(--n-ink);
	transition: color .2s ease, background-color .25s ease;
}
.h-sub__channels a:hover { color: var(--n-wine); background: var(--n-paper-warm); }
.h-sub__channels .n-sicon { width: 22px; height: 22px; stroke-width: 1.3; margin-bottom: .25rem; }
.h-sub__net {
	font-family: var(--n-util);
	font-size: clamp(.62rem, .58rem + .12vw, .7rem);
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
}
.h-sub__handle {
	font-family: var(--n-text);
	font-style: italic;
	font-size: clamp(.98rem, .94rem + .15vw, 1.08rem);
	color: var(--n-ink-soft);
}

@media (min-width: 48rem) {
	.h-sub__channels {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		border-bottom: var(--hairline);
	}
	.h-sub__channels li,
	.h-sub__channels li:nth-child(odd) { border-bottom: 0; border-right: 0; }
	.h-sub__channels li + li { border-left: var(--hairline); }
	.h-sub__channels li:last-child:nth-child(odd) { grid-column: auto; }
	.h-sub__channels a { padding-block: 1.35rem 1.2rem; }
}