/* Noble Instruments – "The plate"
   One instrument per horizontal band, all four sides at once.
   Nothing to click, nothing hidden.

   Type is the site's own pairing, not the plugin's: the parent theme sets
   every heading in Cormorant Garamond and every run of body/UI text in
   Montserrat, and self-hosts both. The plate borrows the same two families
   so it reads as part of the site rather than a widget dropped into it. */

.ni-paper {
	--ni-paper:  #ECEAE4;  /* warm bone ground */
	--ni-ink:    #241F1A;
	--ni-quiet:  #6E675E;
	--ni-hair:   #C9C4BA;
	--ni-accent: #96601E;

	--ni-display: 'Cormorant Garamond', 'Times', Georgia, serif;
	--ni-ui:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;

	background: var(--ni-paper);
	color: var(--ni-ink);
	font-family: var(--ni-ui);
	-webkit-font-smoothing: antialiased;
	padding-bottom: 60px;
}
.ni-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
}

/* Rules: the double line is a nod to purfling. */
.ni-rule {
	height: 3px;
	border-top: 1px solid var(--ni-ink);
	border-bottom: 1px solid var(--ni-ink);
}
.ni-rule--end { margin-top: 54px; }
.ni-hair { height: 1px; background: var(--ni-hair); }

/* ── Masthead ─────────────────────────────────────────────────────── */
.ni-masthead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 60px;
	padding: 44px 0 24px;
}
/* Cormorant Garamond has a small x-height and a light stem next to Marcellus,
   so the display sizes are set larger than a like-for-like swap would give. */
.ni-masthead-title {
	font-family: var(--ni-display);
	font-weight: 500;
	font-size: 52px;
	line-height: 1.1;
	max-width: 640px;
	margin: 0;
	text-wrap: balance;
	color: var(--ni-ink);
}
.ni-masthead-note {
	font-family: var(--ni-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ni-quiet);
	line-height: 2;
	max-width: 240px;
	text-align: right;
	margin: 0;
}

/* ── Type filter ──────────────────────────────────────────────────── */
.ni-filter {
	display: flex;
	gap: 24px;
	padding-top: 20px;
}
.ni-filter-link {
	font-family: var(--ni-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ni-quiet);
	text-decoration: none;
}
.ni-filter-link:hover,
.ni-filter-link.is-current { color: var(--ni-ink); }

/* ── The band ─────────────────────────────────────────────────────── */
/* Each instrument is its own sheet: a hairline frame on all four sides,
   the same paper tone as the page behind it, and a soft ink-based shadow
   so it reads as a separate leaf lying on the page rather than one long
   unbroken scroll. The gap between plates (margin-top, not padding) is
   what lets the page's own paper background show through as a seam. */
.ni-plate {
	background: var(--ni-paper);
	border: 1px solid var(--ni-hair);
	box-shadow: 0 1px 0 rgba(36, 31, 26, 0.05), 0 22px 44px -30px rgba(36, 31, 26, 0.4);
	padding: 44px 48px 48px;
	margin-top: 48px;
}

.ni-plate-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 12px;
}
.ni-plate-type {
	font-family: var(--ni-display);
	font-weight: 500;
	font-size: 25px;
	line-height: 1.2;
	margin: 0;
	color: var(--ni-ink);
}
.ni-plate-no {
	font-family: var(--ni-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ni-quiet);
	margin: 0;
	white-space: nowrap;
}

.ni-plate-sides {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	padding-top: 32px;
}

.ni-side {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
/* Height follows the column width, so the band keeps the mockup's
   proportions whatever container the theme gives us. */
/* Every frame in a band is identical, so the four instruments share one
   baseline and one scale. min-height:0 is required: the frame is a flex
   item, and the default min-height:auto lets the image's intrinsic height
   override aspect-ratio. */
.ni-side-frame {
	width: 100%;
	aspect-ratio: 1 / 2.2;
	max-height: 640px;
	min-height: 0;
}
/* The photos are shot on a cool white sweep that reads about (231,241,255)
   at the top of frame. brightness() lifts that ground to true white so
   multiply drops it into the paper and the instrument sits on the page
   instead of in a visible box. Measured, not guessed: 255/231 = 1.10. */
.ni-side-frame img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	display: block;
	mix-blend-mode: multiply;
	filter: brightness(1.10);
}
.ni-side-label {
	font-family: var(--ni-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ni-quiet);
}

/* ── The strip ────────────────────────────────────────────────────────
   [noble_instruments] on Home and Sales. One photo per instrument — the
   front, always — in a row you can run your eye along. Same paper, ink and
   hairlines as the plate, at a fraction of the height, so it sits inside a
   page of prose instead of taking the page over. */
.ni-paper--strip {
	padding-bottom: 18px;
	margin: 40px 0;
}
/* The strip sits inside the theme's content column, which already supplies
   the page's horizontal padding — our own wrap padding would inset it from
   the prose it belongs with. */
.ni-paper--strip .ni-wrap { padding: 0; }

.ni-strip {
	display: flex;
	align-items: flex-end;
	gap: 26px;
	padding: 26px 0 20px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.ni-strip::-webkit-scrollbar { display: none; }

/* Links inside the plate and the strip are labels, not prose. The theme sets
   colour and an underline on every link in .post-page-content with
   !important, so undoing it here has to match that weight. */
.ni-paper a {
	text-decoration: none !important;
	color: inherit !important;
}
.ni-paper .ni-strip-more a,
.ni-paper .ni-back a,
.ni-paper .nav-links a { color: var(--ni-accent) !important; }
.ni-paper .ni-strip-more a:hover,
.ni-paper .ni-back a:hover { color: var(--ni-ink) !important; }
.ni-paper .ni-strip-more a:hover { text-decoration: underline !important; }

.ni-tile {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
}
/* Fixed height, width follows the photo — the violins are all much the same
   silhouette, so a shared baseline and a shared scale is all the strip needs
   to read as one set rather than a pile of thumbnails. */
.ni-tile-frame {
	display: block;
	height: 230px;
}
.ni-tile-frame img {
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: contain;
	object-position: bottom center;
	display: block;
	/* Same measured lift as the plate: the sweep behind these photos reads
	   about (231,241,255), and 255/231 = 1.10 puts it at true white so
	   multiply drops it cleanly into the paper. */
	mix-blend-mode: multiply;
	filter: brightness(1.10);
	transition: filter 160ms ease;
}
.ni-tile:hover .ni-tile-frame img,
.ni-tile:focus-visible .ni-tile-frame img { filter: brightness(1.02); }

.ni-tile-name {
	font-family: var(--ni-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ni-quiet);
	white-space: nowrap;
}
.ni-tile:hover .ni-tile-name { color: var(--ni-ink); }

.ni-strip-more {
	margin: 0;
	padding-top: 14px;
	font-family: var(--ni-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

@media (max-width: 782px) {
	.ni-paper--strip { margin: 28px 0; }
	.ni-tile-frame { height: 190px; }
	/* No negative margin here, unlike the plate: the strip sits inside the
	   theme's content column, not our own wrap, so bleeding it past the edge
	   would scroll the whole page sideways. The overflowing last tile is
	   affordance enough. */
	.ni-strip { gap: 18px; }
}

@media (forced-colors: active) {
	.ni-tile-frame img { mix-blend-mode: normal; filter: none; }
}

/* ── Single instrument extras ─────────────────────────────────────── */
.ni-note {
	max-width: 620px;
	margin: 40px 0 0;
	font-family: var(--ni-ui);
	font-size: 15px;
	line-height: 1.7;
	color: #4A443C;
}
.ni-back {
	padding-top: 20px;
	font-family: var(--ni-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0;
}

.ni-empty {
	padding: 54px 0;
	font-family: var(--ni-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ni-quiet);
}

.ni-paper :focus-visible {
	outline: 2px solid var(--ni-accent);
	outline-offset: 3px;
}

/* Pagination inherits the quiet label treatment. */
.ni-paper .pagination,
.ni-paper .nav-links {
	padding-top: 32px;
	font-family: var(--ni-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ── Narrower desktop / tablet ────────────────────────────────────── */
@media (max-width: 1200px) {
	.ni-wrap { padding: 0 40px; }
	.ni-plate { padding: 36px 36px 40px; margin-top: 38px; }
	.ni-plate-sides { gap: 20px; }
	.ni-masthead-title { font-size: 42px; }
}

/* ── Phone: the row of four becomes a swipe ───────────────────────── */
@media (max-width: 782px) {
	.ni-wrap { padding: 0 24px; }

	.ni-masthead {
		display: block;
		padding: 22px 0 16px;
	}
	.ni-masthead-title { font-size: 33px; max-width: none; }
	.ni-masthead-note {
		text-align: left;
		max-width: none;
		padding-top: 10px;
	}

	.ni-plate {
		padding: 24px 20px 28px;
		margin-top: 28px;
		box-shadow: 0 1px 0 rgba(36, 31, 26, 0.05), 0 14px 28px -20px rgba(36, 31, 26, 0.34);
	}
	.ni-plate-type { font-size: 22px; }

	/* Each plate is now its own framed card, so the swipe strip can no
	   longer bleed past the page edge (.ni-wrap) without spilling through
	   the plate's own border. Instead it bleeds only to the plate's own
	   right padding edge — the partially-cut photo against the card's
	   inner edge is still the swipe affordance, just contained inside the
	   frame instead of escaping it. */
	.ni-plate-sides {
		display: flex;
		grid-template-columns: none;
		gap: 18px;
		padding: 20px 0 4px 0;
		margin-right: -20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ni-plate-sides::-webkit-scrollbar { display: none; }

	.ni-side {
		flex: 0 0 auto;
		gap: 12px;
		scroll-snap-align: start;
	}
	.ni-side:last-child { padding-right: 20px; }

	/* In the swipe strip each frame is as wide as its own photo. */
	.ni-side-frame { width: auto; aspect-ratio: auto; height: 420px; max-height: none; }
	.ni-side-frame img { width: auto; max-width: none; }

	.ni-side-label { font-size: 9px; }

	.ni-note { margin-top: 28px; }
}

@media (max-width: 420px) {
	.ni-side-frame { height: 360px; }
}

/* Windows High Contrast strips backgrounds, which would leave the photos
   multiplying against an unknown backdrop. */
@media (forced-colors: active) {
	.ni-side-frame img { mix-blend-mode: normal; filter: none; }
}