/* nobedan.com — the apex, as a Syverson Industries product spec sheet.
 *
 * The format is mattebox.com's footer promoted to a whole page: one <dl>,
 * a lowercase "Label:" column left, content right, and the product name set
 * enormous in the content column as the hero. Structure and proportions are
 * lifted from that footer (`Resources/assets/css/main-2025-01-01.css`,
 * the `footer` block); every *value* here comes from the Nobedan tokens.
 *
 * Two conscious departures from DESIGN.md, both because this IS the SI spec
 * sheet rather than a Nobedan document:
 *
 *  1. The label register. DESIGN.md sets the label column in caption caps,
 *     tracked, Bold. The SI sheet's labels are sentence case with a colon,
 *     set Light — "Category:", not "CATEGORY" — and that punctuation is the
 *     format's signature. Kept.
 *  2. The colour block. DESIGN.md rations one per artifact; here the artifact
 *     is the block. Nothing on the page draws a rule above it, which is law
 *     four holding: a full-bleed ground is a harder edge than any rule.
 *
 * No masthead, so no heavy rule anywhere — correct, per the same law. The
 * only rule on the page is the fine one inside the legal block.
 */

/* ── The ground ───────────────────────────────────────────────────────────
 * The whole sheet sits on the accent, so the roles are re-derived here the
 * way `.bleed--accent` re-derives them inside a block (layout.css): custom
 * properties resolve where they are declared, and --ink-muted mixed toward
 * paper would fade toward a paper that is no longer under it.
 */

.apex {
	/* THE KNOB. The apex carries its own hue so it can differ from the
	 * proposal's (tokens.css --accent is Mattebox's coral, a placeholder).
	 * Every colour on the page — ground, link tint, muted ink — is mixed off
	 * this one value; change it here and nothing else. */
	--accent: #aae6b4;
	--accent-ground: var(--accent);
	background: var(--accent-ground);
	color: var(--ink-base);
	--ink-muted: color-mix(in oklab, var(--ink-base) 74%, var(--accent));
	--ink-faint: color-mix(in oklab, var(--ink-base) 54%, var(--accent));
	--rule-color: var(--ink-base);
	--rule-color-quiet: var(--ink-base);
	--rule-color-strong: var(--ink-base);

	/* Mattebox underlines its footer links in a pale tint of the coral it
	 * sets them on — the link reads as a link without the ink weight of a
	 * full underline. Same move, mixed off the Nobedan accent. */
	--link-tint: color-mix(in oklab, var(--ink-base) 38%, var(--accent));
}

/* The sheet is the only thing on the page, so it sits in the middle of it:
 * top-aligned, a laptop window leaves a third of the ground empty under the
 * legal block and the sheet reads as a document that ran out rather than as
 * one composed on the ground. `safe` so a short window scrolls from the top
 * instead of cutting the signature off above the viewport. */
@media screen {
	.apex {
		min-height: 100svh;
		display: grid;
		align-content: safe center;
	}
}

/* The sheet keeps the page measure and its margins: same geometry as
 * `.bleed-inner`, which is what a full-bleed ground with content on the
 * sheet column looks like everywhere else in the language. */
.spec {
	/* width:100% is load-bearing, not belt-and-braces: `.apex` is a grid,
	 * and `margin-inline: auto` on a grid item switches its sizing from
	 * stretch to fit-content — the sheet would then be as wide as the
	 * wordmark rather than as wide as --sheet-max, and the wordmark would
	 * overflow the very column it was sizing. */
	width: 100%;
	max-width: calc(var(--sheet-max) + 2 * var(--page-margin));
	margin-inline: auto;
	padding-inline: var(--page-margin);
	padding-block: var(--space-xl);
}

/* ── The list ─────────────────────────────────────────────────────────────
 * Mobile first: term above definition, the definition's bottom margin doing
 * the separating (Mattebox's narrowest breakpoint). The two-column form
 * switches on at the 48em the rest of the language uses.
 */

.spec-sheet {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.spec-sheet > dt {
	font-size: var(--text-caption);
	font-weight: var(--weight-light);
	line-height: var(--leading-tight);
	color: var(--ink-muted);
}

.spec-sheet > dd {
	max-width: var(--measure);
	margin: 0 0 var(--space-m) 0;
	min-width: 0;
}

.spec-sheet > dd:last-child {
	margin-bottom: 0;
}

/* ── The wordmark ─────────────────────────────────────────────────────────
 * Mattebox's `dd.prod h4` treatment, here carrying the page's h1: Medium,
 * display tracking, 0.9 leading, and the whole content column to itself.
 * --text-mega is the display register's largest step and lands within a few
 * pixels of the Mattebox footer's own ladder (12rem wide / 3.5rem narrow).
 */

.spec-sheet > dd.prod {
	max-width: none;
}

.spec-sheet > dd.prod h1 {
	font-size: var(--text-mega);
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-display);
	line-height: var(--leading-display);
	/* Optical alignment: at this size the N's left sidebearing reads as an
	 * indent against the column, so it is paid back. */
	margin: 0 0 var(--space-s) -0.05em;
}

/* ── The door ─────────────────────────────────────────────────────────────
 * A plain unknown element, no script. Block so the signup form that later
 * fills this slot replaces the inside of one element and nothing around it
 * moves.
 */

nobedan-door {
	display: block;
}

/* ── The legal register ───────────────────────────────────────────────────
 * Caption size, ink at reduced presence — Mattebox does this with 50%
 * opacity; here it is --ink-muted, because ink at reduced presence is a
 * colour role in this language and never a transparency.
 *
 * The measure divides by the same 1.5 the type does, so the small block sets
 * the same number of characters a line as body copy at --measure.
 */

.legal p {
	font-size: var(--text-caption);
	color: var(--ink-muted);
	max-width: calc(var(--measure) / 1.5);
}

/* Grand maps U+00A9 to an EMPTY glyph in all five weights — it is in the
 * cmap and it has an advance, but it draws nothing (verified 2026-08-25:
 * fontTools over site/assets/fonts/Grand-*.woff2, `glyf` bounds are None for
 * `copyright`). So the mark alone borrows the host's own geometric sans,
 * which is the same fix mattebox.com carries as `span.copy`. The fallbacks
 * are --font-grand's tail with Grand itself removed: naming the family the
 * page already matched would just draw the blank again. */
.copy {
	font-family: "Avenir Next", "Avenir", "Futura", "Century Gothic",
		system-ui, sans-serif;
}

/* The quietest rule on the page, so it takes the finest width — rank is
 * width, never colour (DESIGN.md, law one).
 *
 * It sits CLOSE to the text on both sides. base.css gives <hr> the document
 * rhythm — four parts above, one below, because a rule there introduces the
 * heading under it. This one introduces nothing; it is the hairline between
 * two lines of boilerplate, and Mattebox sets it about two-thirds of a line
 * clear on each side. */
.legal hr {
	border-top-width: var(--rule-fine-width);
	/* margin-block alone would leave the UA's `margin-inline: auto` in
	 * place, which centres a max-width rule inside its column. */
	margin: var(--space-xs) 0;
	max-width: calc(var(--measure) / 1.5);
}

/* ── Links ────────────────────────────────────────────────────────────── */

.spec-sheet a {
	text-decoration-color: var(--link-tint);
}

.spec-sheet a:hover,
.spec-sheet a:focus-visible {
	text-decoration-color: currentColor;
}

/* ── Two columns ──────────────────────────────────────────────────────────
 * Lifted from Mattebox: `min-content 1fr` with the term's own min-width
 * setting the label column, and a 1rem gap. The label steps up to body size
 * here, as it does on the Mattebox desktop footer.
 */

@media (min-width: 48em) {
	.spec {
		padding-block: var(--space-2xl);
	}

	.spec-sheet {
		grid-template-columns: min-content minmax(0, 1fr);
		gap: var(--space-s);
	}

	.spec-sheet > dt {
		min-width: 8rem;
		font-size: var(--text-body);
		line-height: var(--leading-body);
		white-space: nowrap;
	}

	.spec-sheet > dd {
		margin-bottom: 0;
	}
}

/* ── Paper ────────────────────────────────────────────────────────────────
 * A page-sized flood of accent is a screen decision, not a print one: on
 * paper the sheet is ink on paper and the hue would only cost toner.
 */

@media print {
	.apex {
		background: var(--paper);
		color: var(--ink);
		--link-tint: var(--ink);
	}

	.spec {
		padding: 0;
		max-width: none;
	}
}

/* ── The share card ───────────────────────────────────────────────────────
 * og.html only — the source of og.png, shot at 1200x630. The same spec sheet
 * cut down to what survives at thumbnail size: the SI signature small, the
 * wordmark, the description line. The card is an image on a fixed canvas
 * rather than a page, so its three sizes are absolute — a viewport-clamped
 * scale on a canvas that never changes size is arithmetic doing nothing.
 */

.og {
	margin: 0;
	width: 1200px;
	height: 630px;
	overflow: hidden;
}

.og-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-2xl);
}

.og-eyebrow {
	font-size: 1.5rem;
	font-weight: var(--weight-light);
	margin-bottom: var(--space-l);
	max-width: none;
}

.og-mark {
	font-size: 12rem;
	font-weight: var(--weight-medium);
	letter-spacing: var(--track-display);
	line-height: var(--leading-display);
	margin: 0 0 var(--space-m) -0.05em;
	max-width: none;
}

.og-line {
	font-size: 2.5rem;
	font-weight: var(--weight-light);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-head);
	max-width: 46rem;
}