/* ==========================================================================
   UNO21 — Swiss brutalist
   ==========================================================================

   White paper, black rules, one red. Zero corner radius anywhere. The grid
   is visible because in this idiom the grid is the design, not scaffolding
   that gets hidden once the content arrives.

   Scoped entirely to body.u-style-uno21. Switching demo switches it off.

   WHY ONE ACCENT AND WHY IT IS RED
   --------------------------------
   The palette is black, white and a single red, and the red is reserved for
   things that are actionable or that changed. The moment it also decorates,
   it stops meaning anything — which is the whole argument of this style and
   the reason there is no second accent to reach for.

   The red is #d81f06 rather than the more familiar #e5240f. The classic
   value measures 4.57:1 against white, which passes AA by seven hundredths
   of a point — close enough that any future tweak to it fails, and close
   enough that it is unpleasant to read at small sizes even while passing.
   #d81f06 measures 5.10:1 in both directions and still reads as Swiss red.

   WHY THERE ARE NO SHADOWS AND NO RADIUS
   --------------------------------------
   Not minimalism for its own sake. A hairline black rule is an absolute
   edge — there is nothing softer available on white paper — so a shadow
   underneath it would be a second, weaker statement of the same boundary.
   Rounding the corners does the same thing in the other direction: it
   apologises for the edge the whole design is built on.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

body.u-style-uno21 {
	--u21-rule: 1px solid var(--u-text);
	--u21-rule-heavy: 2px solid var(--u-text);

	--u-mono-stack: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	/* Helvetica first, genuinely. The theme's system stack leads with
	   -apple-system, which on a Mac resolves to San Francisco — a fine face
	   and the wrong one here, because its wider apertures and looser
	   spacing undo the density this design depends on. */
	--u21-grotesk: "Helvetica Neue", Helvetica, "Inter", Arial, "Liberation Sans", sans-serif;

	font-family: var(--u21-grotesk);
	letter-spacing: -0.011em;
}

body.u-style-uno21 .u-mono,
body.u-style-uno21 .u-eyebrow {
	font-family: var(--u-mono-stack);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--u-muted);
	font-weight: 500;
}

body.u-style-uno21 .u-section-title,
body.u-style-uno21 .u-hero-title,
body.u-style-uno21 .u-page-title {
	font-family: var(--u21-grotesk);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.92;
	text-transform: none;
}

body.u-style-uno21 .u-section-title {
	font-size: clamp(2.2rem, 6vw, 4.6rem);
}

body.u-style-uno21 .u-section-head {
	max-width: 30ch;
	padding-bottom: 22px;
	border-bottom: var(--u21-rule-heavy);
	margin-bottom: clamp(28px, 4vw, 56px);
}

body.u-style-uno21 .u-section-text {
	color: var(--u-muted);
	font-size: 1rem;
	line-height: 1.5;
	max-width: 52ch;
}


/* --------------------------------------------------------------------------
   2. Chrome
   -------------------------------------------------------------------------- */

body.u-style-uno21 .u-header-bar {
	background: var(--u-bg);
	border-bottom: var(--u21-rule);
	border-radius: 0;
	box-shadow: none;
}

body.u-style-uno21 .u-header-nav a {
	font-family: var(--u-mono-stack);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.u-style-uno21 .u-btn {
	border-radius: 0;
	font-family: var(--u-mono-stack);
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	padding: 1em 1.6em;
	border: var(--u21-rule);
	box-shadow: none;
	transition: background-color 120ms linear, color 120ms linear;
}

body.u-style-uno21 .u-btn:active { transform: none; }

body.u-style-uno21 .u-btn-primary {
	--btn-bg: var(--u-primary);
	--btn-fg: #ffffff;
	background: var(--u-primary);
	border-color: var(--u-primary);
	color: #ffffff;
}

body.u-style-uno21 .u-btn-primary:hover {
	--btn-fg: var(--u-primary);
	background: transparent;
	color: var(--u-primary);
}

body.u-style-uno21 .u-btn-ghost {
	--btn-fg: var(--u-text);
	background: transparent;
	color: var(--u-text);
}

body.u-style-uno21 .u-btn-ghost:hover {
	background: var(--u-text);
	--btn-fg: var(--u-bg);
	color: var(--u-bg);
}

body.u-style-uno21 .u-footer {
	border-top: var(--u21-rule-heavy);
	background: var(--u-bg);
}

/* Cards, wherever they appear in shared sections. */
body.u-style-uno21 .u-card,
body.u-style-uno21 .u-tile,
body.u-style-uno21 .u-person,
body.u-style-uno21 .u-package,
body.u-style-uno21 .u-acc-item {
	border: var(--u21-rule);
	border-radius: 0;
	box-shadow: none;
	background: var(--u-bg);
}


/* --------------------------------------------------------------------------
   3. Grid hero
   -------------------------------------------------------------------------- */

body.u-style-uno21 .u-gridhero {
	position: relative;
	padding-block: clamp(80px, 12vh, 150px) 0;
	border-bottom: var(--u21-rule-heavy);
}

body.u-style-uno21 .u-gridhero > .u-container {
	position: relative;
}

/* The visible twelve-column field. */
body.u-style-uno21 .u-gridhero-rules {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	pointer-events: none;
	z-index: 0;
}

body.u-style-uno21 .u-gridhero-rules span {
	border-left: 1px solid color-mix(in srgb, var(--u-text) 12%, transparent);
}

body.u-style-uno21 .u-gridhero-rules span:last-child {
	border-right: 1px solid color-mix(in srgb, var(--u-text) 12%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	body.u-style-uno21 .u-gridhero-rules span,
	body.u-style-uno21 .u-gridhero-rules span:last-child { border-color: #e2e2e2; }
}

body.u-style-uno21 .u-gridhero-body {
	position: relative;
	z-index: 1;
	padding-bottom: clamp(40px, 6vw, 80px);
}

body.u-style-uno21 .u-gridhero-index {
	position: absolute;
	top: -0.16em;
	right: 0;
	font-size: clamp(5rem, 16vw, 13rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.06em;
	color: color-mix(in srgb, var(--u-text) 7%, transparent);
	z-index: -1;
	user-select: none;
}

body.u-style-uno21 .u-gridhero-title {
	font-size: clamp(2.8rem, 10vw, 8rem);
	margin: 16px 0 24px;
	max-width: 14ch;
}

body.u-style-uno21 .u-gridhero-title .u-line { display: block; overflow: hidden; }

body.u-style-uno21 .u-gridhero-title .u-line-in {
	display: block;
	transform: translateY(102%);
	animation: u21-up 760ms cubic-bezier(.16, 1, .3, 1) forwards;
	animation-delay: calc(var(--u-i, 0) * 80ms + 80ms);
}

@keyframes u21-up { to { transform: translateY(0); } }

body.u-style-uno21 .u-gridhero-lead {
	max-width: 44ch;
	color: var(--u-muted);
	font-size: 1.05rem;
	line-height: 1.5;
}

body.u-style-uno21 .u-gridhero-actions { margin-top: 26px; }

/* The fact row, ruled off along the bottom. */
body.u-style-uno21 .u-gridhero-facts {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: var(--u21-rule);
	margin: 0;
}

body.u-style-uno21 .u-fact {
	padding: 16px 16px 20px 0;
	border-right: var(--u21-rule);
	margin: 0;
}

body.u-style-uno21 .u-fact:last-child { border-right: 0; }
body.u-style-uno21 .u-fact:not(:first-child) { padding-left: 16px; }

body.u-style-uno21 .u-fact dt { margin: 0 0 6px; font-size: 0.66rem; }

body.u-style-uno21 .u-fact dd {
	margin: 0;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   4. Type specimen
   -------------------------------------------------------------------------- */

body.u-style-uno21 .u-specimen-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--u21-rule);
}

body.u-style-uno21 .u-specimen-row {
	display: grid;
	grid-template-columns: clamp(80px, 12vw, 180px) minmax(0, 1fr) minmax(0, 200px);
	gap: 24px;
	align-items: baseline;
	padding: clamp(20px, 3vw, 36px) 0;
	border-bottom: var(--u21-rule);
}

body.u-style-uno21 .u-specimen-mark {
	font-size: clamp(3.4rem, 9vw, 7rem);
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: -0.06em;
	/* The specimen character is the one place the red is decorative rather
	   than actionable, and it earns it: it is the thing being specimened. */
	color: var(--u-primary);
	align-self: start;
}

body.u-style-uno21 .u-specimen-title {
	margin: 0 0 8px;
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1;
}

body.u-style-uno21 .u-specimen-text {
	margin: 0;
	color: var(--u-muted);
	font-size: 0.96rem;
	line-height: 1.55;
	max-width: 56ch;
}

body.u-style-uno21 .u-specimen-meta {
	font-size: 0.66rem;
	text-align: right;
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   5. Capability matrix
   -------------------------------------------------------------------------- */

/* Horizontal scroll on a real table rather than a stacked card layout.

   A comparison table that stacks into cards stops being a comparison — the
   whole value is reading across the row, and cards put the columns on
   different screens. Scrolling keeps the comparison intact, and the row
   header stays put while it happens. */
body.u-style-uno21 .u-matrix-scroll {
	overflow-x: auto;
	border: var(--u21-rule);
	-webkit-overflow-scrolling: touch;
}

body.u-style-uno21 .u-matrix-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 620px;
}

body.u-style-uno21 .u-matrix-table th,
body.u-style-uno21 .u-matrix-table td {
	border-bottom: var(--u21-rule);
	padding: 15px 18px;
	text-align: left;
	vertical-align: middle;
}

body.u-style-uno21 .u-matrix-table thead th {
	border-bottom: var(--u21-rule-heavy);
	font-family: var(--u-mono-stack);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--u-muted);
	white-space: nowrap;
}

body.u-style-uno21 .u-matrix-table tbody tr:last-child th,
body.u-style-uno21 .u-matrix-table tbody tr:last-child td { border-bottom: 0; }

body.u-style-uno21 .u-matrix-table tbody th {
	font-weight: 500;
	min-width: 260px;
	border-right: var(--u21-rule);
}

body.u-style-uno21 .u-matrix-label { display: block; font-size: 0.98rem; }
body.u-style-uno21 .u-matrix-note { display: block; margin-top: 3px; font-size: 0.62rem; }

body.u-style-uno21 .u-matrix-cell {
	text-align: center;
	border-right: var(--u21-rule);
	width: 120px;
}

body.u-style-uno21 .u-matrix-cell:last-child { border-right: 0; }

body.u-style-uno21 .u-matrix-dot {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: var(--u21-rule);
}

body.u-style-uno21 .u-matrix-cell.is-yes .u-matrix-dot { background: var(--u-text); }
body.u-style-uno21 .u-matrix-cell.is-extra .u-matrix-dot { background: transparent; }

/* Not included is drawn as nothing at all rather than as a crossed circle.
   A hollow dot already means "possible"; a third symbol for "no" makes the
   reader learn a legend to see an absence. */
body.u-style-uno21 .u-matrix-cell.is-no .u-matrix-dot {
	border-color: color-mix(in srgb, var(--u-text) 18%, transparent);
}


/* --------------------------------------------------------------------------
   6. Poster
   -------------------------------------------------------------------------- */

body.u-style-uno21 .u-poster {
	position: relative;
	background: var(--u-text);
	color: var(--u-bg);
	padding-block: clamp(70px, 11vw, 150px);
	overflow: hidden;
}

body.u-style-uno21 .u-poster .u-btn-primary {
	border-color: var(--u-primary);
}

body.u-style-uno21 .u-poster .u-btn-primary:hover {
	background: var(--u-bg);
	border-color: var(--u-bg);
	--btn-fg: var(--u-text);
	color: var(--u-text);
}

body.u-style-uno21 .u-poster-edge {
	position: absolute;
	top: 50%;
	font-size: 0.64rem;
	color: color-mix(in srgb, var(--u-bg) 60%, transparent);
	white-space: nowrap;
}

body.u-style-uno21 .u-poster-edge.is-left {
	left: 14px;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
}

body.u-style-uno21 .u-poster-edge.is-right {
	right: 14px;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
}

body.u-style-uno21 .u-poster-title {
	margin: 0;
	font-size: clamp(2.4rem, 8.5vw, 7rem);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.05em;
	max-width: 16ch;
}

body.u-style-uno21 .u-poster-line { display: block; }

body.u-style-uno21 .u-poster-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	margin-top: clamp(32px, 5vw, 56px);
	padding-top: 24px;
	border-top: 1px solid color-mix(in srgb, var(--u-bg) 30%, transparent);
}

body.u-style-uno21 .u-poster-text {
	margin: 0;
	max-width: 44ch;
	font-size: 1rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--u-bg) 78%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	body.u-style-uno21 .u-poster-edge,
	body.u-style-uno21 .u-poster-text { color: #d5d5d5; }
	body.u-style-uno21 .u-poster-foot { border-top-color: #555; }
}


/* --------------------------------------------------------------------------
   7. The two page tools
   -------------------------------------------------------------------------- */

body.u-style-uno21 .u-rail-dot,
body.u-style-uno21 .u-calc-option,
body.u-style-uno21 .u-calc-out,
body.u-style-uno21 .u-stepper,
body.u-style-uno21 .u-audit-field,
body.u-style-uno21 .u-audit-links a,
body.u-style-uno21 .u-matrix-scroll {
	border-radius: 0;
	border-color: var(--u-text);
}

body.u-style-uno21 .u-rail-dot {
	font-family: var(--u-mono-stack);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.u-style-uno21 .u-rail-dot.is-active {
	background: var(--u-text);
	color: var(--u-bg);
}

body.u-style-uno21 .u-calc-option:has(input:checked) {
	background: transparent;
	border-color: var(--u-primary);
	box-shadow: inset 0 0 0 1px var(--u-primary);
}

body.u-style-uno21 .u-calc-legend {
	font-weight: 700;
	letter-spacing: -0.03em;
	border-bottom: var(--u21-rule-heavy);
	padding-bottom: 12px;
	width: 100%;
}

body.u-style-uno21 .u-calc-n { color: var(--u-primary); }

body.u-style-uno21 .u-calc-out-total {
	font-weight: 700;
	letter-spacing: -0.045em;
	color: var(--u-primary);
}

body.u-style-uno21 .u-calc-out { background: var(--u-surface); }

body.u-style-uno21 .u-audit-row.is-pass .u-audit-mark { background: var(--u-text); }
body.u-style-uno21 .u-audit-row.is-warn .u-audit-mark { background: var(--u-primary); }

/* A failure is a filled red square rather than a red circle: on a page
   where every other marker is round, shape alone distinguishes it, so the
   meaning survives for a reader who cannot separate the two colours. */
body.u-style-uno21 .u-audit-row.is-fail .u-audit-mark {
	background: var(--u-primary);
	border-radius: 0;
}

body.u-style-uno21 .u-audit-h {
	border-bottom: var(--u21-rule-heavy);
	padding-bottom: 8px;
	color: var(--u-text);
}

body.u-style-uno21 .u-audit-ref-row { border-top-color: var(--u-text); }


/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	body.u-style-uno21 .u-gridhero-rules { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	body.u-style-uno21 .u-gridhero-rules span:nth-child(n + 7) { display: none; }

	body.u-style-uno21 .u-specimen-row {
		grid-template-columns: clamp(64px, 14vw, 120px) minmax(0, 1fr);
	}

	body.u-style-uno21 .u-specimen-meta {
		grid-column: 2;
		text-align: left;
		margin-top: 8px;
	}
}

@media (max-width: 780px) {
	body.u-style-uno21 .u-gridhero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	body.u-style-uno21 .u-fact:nth-child(2n) { border-right: 0; }
	body.u-style-uno21 .u-fact:nth-child(-n + 2) { border-bottom: var(--u21-rule); }

	body.u-style-uno21 .u-gridhero-index { font-size: clamp(4rem, 22vw, 8rem); }
}

@media (max-width: 560px) {
	body.u-style-uno21 .u-gridhero-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.u-style-uno21 .u-gridhero-rules span:nth-child(n + 4) { display: none; }

	body.u-style-uno21 .u-specimen-row { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
	body.u-style-uno21 .u-poster-edge { display: none; }
}


/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.u-style-uno21 .u-gridhero-title .u-line-in {
		animation: none;
		transform: none;
	}
}


/* --------------------------------------------------------------------------
   10. Print
   -------------------------------------------------------------------------- */

@media print {
	body.u-style-uno21 .u-poster {
		background: transparent;
		color: #000;
	}

	body.u-style-uno21 .u-poster-text,
	body.u-style-uno21 .u-poster-edge { color: #333; }

	body.u-style-uno21 .u-gridhero-rules,
	body.u-style-uno21 .u-gridhero-index { display: none; }

	body.u-style-uno21 .u-matrix-scroll { overflow: visible; }
	body.u-style-uno21 .u-matrix-table { min-width: 0; }

	body.u-style-uno21 .u-specimen-row,
	body.u-style-uno21 .u-matrix-table tr { break-inside: avoid; }
}


/* --------------------------------------------------------------------------
   11. Grid hero with a backdrop
   --------------------------------------------------------------------------

   This is the harder of the two, because Uno21 is black type on white paper
   and a photograph inverts that completely. Everything that was black has to
   become white, and the things that were near-invisible hairlines have to
   become visible ones.
   -------------------------------------------------------------------------- */

body.u-style-uno21 .u-gridhero.has-backdrop {
	color: #ffffff;
	border-bottom: 0;
	padding-block: clamp(110px, 18vh, 220px) 0;
}

body.u-style-uno21 .u-gridhero.has-backdrop .u-gridhero-title,
body.u-style-uno21 .u-gridhero.has-backdrop .u-gridhero-lead,
body.u-style-uno21 .u-gridhero.has-backdrop .u-fact dd {
	color: #ffffff;
}

body.u-style-uno21 .u-gridhero.has-backdrop .u-eyebrow,
body.u-style-uno21 .u-gridhero.has-backdrop .u-fact dt {
	color: rgb(255 255 255 / 0.72);
}

/* The column rules were 12% black on white. On a photograph that is
   invisible, so they become white at a lower alpha — present enough to read
   as a grid, faint enough not to compete with the picture. */
body.u-style-uno21 .u-gridhero.has-backdrop .u-gridhero-rules span,
body.u-style-uno21 .u-gridhero.has-backdrop .u-gridhero-rules span:last-child {
	border-color: rgb(255 255 255 / 0.16);
}

body.u-style-uno21 .u-gridhero.has-backdrop .u-gridhero-index {
	color: rgb(255 255 255 / 0.12);
}

body.u-style-uno21 .u-gridhero.has-backdrop .u-gridhero-facts,
body.u-style-uno21 .u-gridhero.has-backdrop .u-fact {
	border-color: rgb(255 255 255 / 0.28);
}

/* The primary button keeps the red — it is the one colour in this palette
   that survives being put on an arbitrary photograph, because the scrim
   underneath guarantees a dark ground behind it either way. The ghost
   button, which borrowed the page's black, has to be redrawn in white. */
body.u-style-uno21 .u-gridhero.has-backdrop .u-btn-ghost {
	--btn-fg: #ffffff;
	color: #ffffff;
	border-color: rgb(255 255 255 / 0.6);
}

body.u-style-uno21 .u-gridhero.has-backdrop .u-btn-ghost:hover {
	background: #ffffff;
	--btn-fg: var(--u-text);
	color: var(--u-text);
	border-color: #ffffff;
}