/* ─── Server Page Vocabulary ─────────────────────────────────────────────────
   Shared by the brochure and the auth cards: the wordmark and the partner credit,
   drawn the way the app's header draws them. Colours come from palette.css.

   Deliberately NOT loaded by the app. It styles .brand-mark and .site-sub itself,
   from index.css, and its credit marks are a different DOM shape -- there the
   .site-sub-mark class is on the SVG, here it is a span wrapping one. Same names,
   different structures; keeping them in separate files is what stops one from
   reaching into the other. */

* {
	box-sizing: border-box;
}

/* ── Wordmark ──
   TOTE | WIRE with a tall red bar between the words, and the accent flag beside it.
   The app styles the same classes from index.css (it has a themed variant of the bar
   to carry); these rules are what the server pages render. */

.brand-mark {
	display: inline-flex;
	align-items: center;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1;
}

.brand-mark .brand-bar {
	width: 3px;
	height: 1.4em;
	margin: 0 2px;
	background: var(--red);
	border-radius: 1px;
}

.brand-flag {
	color: var(--header-flag);
}

/* ── Partner credit ──
   "From", 1/ST RACING, "&", NYRA, all on one row, as the app's header renders it. The
   names are the row's tall element, so it centers as a unit rather than sitting on the
   wordmark's baseline. Both are deliberately kept under the wordmark's cap height --
   this is a credit, not a co-brand. */

.site-sub {
	display: flex;
	align-items: center;
	align-self: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-dim);
	text-transform: none;
	letter-spacing: 0;
}

.site-sub-lead,
.site-sub-amp {
	font-size: 10px;
	line-height: 1;
}

/* The partner names, set as text rather than drawn. Suisse's cap is 0.725em, so the
   font-size that lands an 8px cap is 8/0.725. Two different faces, so equal boxes would
   not put their capitals on one line -- sharing a baseline leaves that sum to the
   browser, whichever face a platform resolves, while .site-sub keeps the lead-in and the
   ampersand centred on the row. */
.site-sub-mark {
	display: block;
	align-self: baseline;
	/* A drawn mark could not break; a name can, and "1/ST RACING" splits at its space the
	   moment the row is tight. */
	white-space: nowrap;
	font-family: "Suisse", var(--font-sans);
	font-size: 11px;
	font-weight: 300;
	line-height: 1;
	color: var(--header-title);
	text-transform: uppercase;
}

.site-sub-mark--1st {
	letter-spacing: 0.05em;
}

/* NYRA's mark is a condensed grotesque, and Suisse has no condensed cut to reach for: its
   letters run half a cap height wide against Suisse's two thirds, and sit about a third of
   a normal sidebearing apart. No one condensed family ships everywhere, so the stack takes
   each platform's in turn -- Apple, Windows, Android, then desktop Linux. Its own size
   rather than a transform, which is painted after layout and pulls text off the line. */
.site-sub-mark--nyra {
	font-family: "Avenir Next Condensed", "Helvetica Neue Condensed Bold",
		"Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", sans-serif;
	font-stretch: condensed;
	font-weight: 400;
	font-size: 12.3px;
	letter-spacing: -0.05em;
}