/* =================================================================================================
 * Offer Columns 1.1.0, the ranking for The Bonus Press.
 *
 * The form: each offer is a vertical column and the attribute rows run across the columns, so the
 * rack reads like a printed price list. A leading column holds the row labels. Four offer columns
 * stand on a desktop sheet. Below 860 pixels the whole group scrolls sideways with the leading
 * column pinned, which is the only place in the network where a ranking scrolls sideways and the
 * only honest small-screen form for a comparison grid.
 *
 * Rows line up across the columns through CSS subgrid: the parent holds the row tracks and every
 * column borrows them. Where subgrid is missing, the leading column is dropped and each cell
 * prints its own label instead, so a column can never drift a row out of line.
 *
 * One width. The rack starts on the sheet's left rule and finishes on its right rule and carries
 * no horizontal padding of its own. There is no pixel width anywhere on the rack, the bed or the
 * plate. The insets are inside a column, which has its own edge, and nowhere else.
 *
 * Colour, type and measure come from the theme on :root. The block below is the fallback, so a
 * page still reads if the theme is swapped out. No value here is invented: every one is the token.
 * ============================================================================================== */

.oc-rack {
	--oc-paper: var(--tc-paper, #F7F3EC);
	--oc-paper-2: var(--tc-paper-2, #EFE9DF);
	--oc-ink: var(--tc-ink, #16181F);
	--oc-ink-2: var(--tc-ink-2, #4A4F5C);
	--oc-navy: var(--tc-navy, #27356B);
	--oc-blue-d: var(--tc-blue-d, #005A90);
	--oc-coral-d: var(--tc-coral-d, #C9263A);
	--oc-blue: var(--tc-blue, #0078BF);
	--oc-coral: var(--tc-coral, #F15060);
	--oc-tint-b: var(--tc-tint-b, #DCE8F5);
	--oc-tint-c: var(--tc-tint-c, #FBE0E2);
	--oc-rule: var(--tc-rule, #CFC7B8);
	--oc-display: var(--tc-display, "Archivo", "Helvetica Neue", Arial, sans-serif);
	--oc-body: var(--tc-body, "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
	--oc-mono: var(--tc-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

	/* The leading column of row labels. A measure, not a width on the rack. */
	--oc-stub: 8.5rem;
	--oc-count: 4;
	--oc-rows: 15;

	box-sizing: border-box;
	display: block;
	width: auto;
	max-width: none;
	margin: 0 0 var(--tc-gap, 2.4rem);
	padding: 0;
	border: 0;
	border-radius: var(--tc-radius, 0);
	background: none;
	color: var(--oc-ink);
	font-family: var(--oc-body);
	font-size: 1rem;
	line-height: 1.5;
}

.oc-rack *,
.oc-rack *::before,
.oc-rack *::after {
	box-sizing: border-box;
	border-radius: var(--tc-radius, 0);
	box-shadow: none;
}

/* The two lines that sit above the rack. No horizontal padding: both start on the sheet's rule. */
.oc-rack__masthead {
	margin: 0 0 .5rem;
	padding: 0;
	font-family: var(--oc-display);
	font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--oc-navy);
}

.oc-rack__paid {
	margin: 0 0 .75rem;
	padding: 0;
	font-size: .8125rem;
	line-height: 1.45;
	color: var(--oc-ink-2);
}

/* ---------------------------------------------------------------------------------------------- *
 * The bed holds the plate and the fade. The plate is the scroll port. Neither carries a width.
 * ---------------------------------------------------------------------------------------------- */
.oc-bed {
	position: relative;
	margin: 0;
	padding: 0;
}

.oc-plate {
	margin: 0;
	padding: 0;
	overflow: visible;
}

.oc-columns {
	display: grid;
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 0;
	grid-template-columns: minmax(7rem, .85fr) repeat(var(--oc-count), minmax(0, 1fr));
	grid-template-rows: repeat(var(--oc-rows), auto);
	border-block: 1px solid var(--oc-rule);
	background: var(--oc-paper);
}

/* Every column borrows the parent's row tracks, so a row lands on one line across the whole rack. */
.oc-stub,
.oc-col {
	display: grid;
	grid-row: 1 / -1;
	grid-template-rows: subgrid;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* The leading column owns the hairline between itself and the first offer, so it stays attached
   to the labels while it is pinned. The offers carry the hairlines between one another. */
.oc-stub {
	border-inline-end: 1px solid var(--oc-rule);
	background: var(--oc-paper);
}

.oc-col + .oc-col {
	border-inline-start: 1px solid var(--oc-rule);
}

/* ---------------------------------------------------------------------------------------------- *
 * Cells. The inset lives here, inside a column, and nowhere above it.
 * ---------------------------------------------------------------------------------------------- */
.oc-stub__cell,
.oc-col__folio,
.oc-col__imprint,
.oc-col__ceiling,
.oc-cell,
.oc-col__licensing,
.oc-col__foot {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: .55rem .7rem;
	border-block-end: 1px solid var(--oc-rule);
}

.oc-col__foot,
.oc-stub__cell--foot {
	border-block-end: 0;
}

/* With no tracking address anywhere in the rack there is no call to action to print, and the foot
   row would otherwise draw as an empty band across every column under the licence row. The cells
   are dropped, which leaves their shared row track with nothing in it and so no height, and the
   licence row gives up its own bottom hairline so the rack finishes on one rule rather than two.
   A signed-in editor gets the reminder instead, and the class is taken off again for that viewer. */
.oc-columns--vacant .oc-col__foot,
.oc-columns--vacant .oc-stub__cell--foot {
	display: none;
}

.oc-columns--vacant .oc-col__licensing,
.oc-columns--vacant .oc-stub__cell--licensing {
	border-block-end: 0;
}

.oc-stub__cell {
	justify-content: center;
	font-size: .75rem;
	line-height: 1.3;
	letter-spacing: .055em;
	text-transform: uppercase;
	color: var(--oc-ink-2);
	background: var(--oc-paper-2);
}

.oc-stub__cell--folio,
.oc-stub__cell--imprint,
.oc-stub__cell--ceiling {
	font-family: var(--oc-display);
	color: var(--oc-navy);
}

/* The rank mark. A flat tinted area with the numeral in ink on it, never ink colour on bright ink. */
.oc-col__folio {
	align-items: flex-start;
	font-family: var(--oc-mono);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--oc-ink);
	background-color: var(--oc-tint-b);
	background-image: var(--tc-grain, none);
}

.oc-col:first-of-type .oc-col__folio {
	background-color: var(--oc-tint-c);
}

/* The brand. */
.oc-col__house {
	margin: 0;
	padding: 0;
	font-family: var(--oc-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.005em;
	color: var(--oc-ink);
}

.oc-col__strap {
	margin: .15rem 0 0;
	padding: 0;
	font-size: .75rem;
	line-height: 1.3;
	color: var(--oc-blue-d);
}

/* The one headline figure, set in the display face. The bright inks carry a display figure and
   nothing smaller, so the figure never falls below 2rem and the line under it is set in ink. */
.oc-col__headline {
	font-family: var(--oc-display);
	font-size: clamp(2rem, 1.6rem + 1.25vw, 2.7rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--oc-blue);
}

.oc-col:first-of-type .oc-col__headline {
	color: var(--oc-coral);
}

.oc-col__gloss {
	margin: .25rem 0 0;
	font-size: .75rem;
	line-height: 1.35;
	color: var(--oc-ink-2);
}

/* An attribute cell. A figure is set in the mono, words in the body face. */
.oc-cell__value {
	overflow-wrap: anywhere;
	color: var(--oc-ink);
}

.oc-cell--figure .oc-cell__value {
	font-family: var(--oc-mono);
	font-size: .9375rem;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

.oc-cell--words .oc-cell__value {
	font-size: .8125rem;
	line-height: 1.4;
}

/* The licence line. Every offer in this rack is licensed offshore, so the line sits on a tint and
   is never dressed down. Ink on the tint measures 14.24 against the paper's 16.03. */
.oc-col__licensing {
	font-size: .75rem;
	line-height: 1.4;
	color: var(--oc-ink-2);
}

.oc-col__licensing--offshore {
	color: var(--oc-ink);
	background: var(--oc-tint-c);
}

/* The call to action. Grounded in the darker coral, where white measures 5.49, never in the
   bright ink, where it measures 3.47. */
.oc-col__foot {
	justify-content: flex-end;
	padding: .7rem;
}

.oc-col__through {
	display: block;
	padding: .65rem .55rem;
	border: 0;
	background-color: var(--oc-coral-d);
	background-image: var(--tc-grain, none);
	color: #FFFFFF;
	font-family: var(--oc-display);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .035em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.oc-col__through:hover,
.oc-col__through:focus {
	background-color: var(--oc-navy);
	color: #FFFFFF;
	text-decoration: none;
}

.oc-col__through--missing {
	background-color: transparent;
	background-image: none;
	border: 1px dashed var(--oc-coral-d);
	color: var(--oc-coral-d);
	text-transform: none;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------------------------------------- *
 * The lines under the rack. Vertical padding only, so each one starts on the sheet's left rule
 * and finishes on its right rule.
 * ---------------------------------------------------------------------------------------------- */
.oc-rack__caveat {
	margin: 0;
	padding: .7rem 0 0;
	border-block-start: 2px solid var(--oc-coral-d);
	font-size: .875rem;
	line-height: 1.5;
	color: var(--oc-ink);
}

.oc-rack__dated {
	margin: .5rem 0 0;
	padding: 0;
	font-size: .75rem;
	line-height: 1.45;
	color: var(--oc-ink-2);
}

/* The line that tells a reader the rack moves sideways. It is printed only where it is true. */
.oc-rack__sideways {
	display: none;
	margin: .45rem 0 0;
	padding: 0;
	font-size: .75rem;
	line-height: 1.4;
	color: var(--oc-ink-2);
}

/* The fade at the scrolling edge. Flat bands rather than a smooth wash, which is what the press
   lays down, and it is shown only where the rack actually scrolls. */
.oc-fade {
	display: none;
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 2.5rem;
	pointer-events: none;
}

/* Read by a screen reader, not drawn. These used to cost the page a sideways scrollbar: an
   absolutely positioned box looks for the nearest positioned ancestor, found none inside the
   scrolling plate, and so was laid out against the page itself at whatever x the column sat at,
   which on a phone was several hundred pixels past the right edge. The rack scrolled correctly
   and the whole document scrolled with it. The column below is now a containing block, so the
   box stays where it belongs; the rule is kept here beside the thing it fixes. */
.oc-col,
.oc-stub {
	position: relative;
}

/* A label that is read aloud and not printed. In the no-subgrid fallback the cell labels come back. */
.oc-offscreen,
.oc-cell__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The marker that stands where a call to action has no address yet. It is swapped out before the
   page is sent, and it is hidden here as well so that nothing shows if the swap is ever skipped. */
.oc-vacant {
	display: none;
}

/* The editor's reminder, which a reader never sees. */
.oc-missing {
	display: block;
	margin: .4rem 0 0;
	padding: 0;
	font-size: .75rem;
	line-height: 1.4;
	color: var(--oc-ink-2);
}

/* ---------------------------------------------------------------------------------------------- *
 * Below 860 pixels: one group that scrolls sideways, with the leading column pinned left. The
 * plate scrolls, the rack does not move, so the one width holds at every size.
 * ---------------------------------------------------------------------------------------------- */
@media (max-width: 859.98px) {

	.oc-plate {
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.oc-columns {
		width: max-content;
		grid-template-columns: var(--oc-stub) repeat(var(--oc-count), 12.5rem);
	}

	.oc-stub {
		position: sticky;
		inset-inline-start: 0;
		z-index: 2;
	}

	.oc-col {
		scroll-snap-align: start;
	}

	.oc-rack__sideways {
		display: block;
	}

	.oc-fade {
		display: block;
		background: linear-gradient(to left, rgba(247, 243, 236, .92) 0 35%, rgba(247, 243, 236, .55) 35% 68%, rgba(247, 243, 236, 0) 68% 100%);
		background: linear-gradient(to left,
			color-mix(in srgb, var(--oc-paper) 92%, transparent) 0 35%,
			color-mix(in srgb, var(--oc-paper) 55%, transparent) 35% 68%,
			color-mix(in srgb, var(--oc-paper) 0%, transparent) 68% 100%);
	}

	.oc-col__headline {
		font-size: 2rem;
	}
}

/* ---------------------------------------------------------------------------------------------- *
 * Where subgrid is missing, the leading column is dropped and every cell prints its own label.
 * Each column then stands on its own and no row can fall out of line.
 * ---------------------------------------------------------------------------------------------- */
@supports not (grid-template-rows: subgrid) {

	.oc-stub {
		display: none;
	}

	.oc-columns {
		grid-template-columns: repeat(var(--oc-count), minmax(13rem, 1fr));
		grid-template-rows: auto;
	}

	.oc-col {
		display: flex;
		flex-direction: column;
		grid-row: auto;
	}

	.oc-col:first-of-type {
		border-inline-start: 0;
	}

	.oc-cell__label {
		position: static;
		display: block;
		width: auto;
		height: auto;
		margin: 0 0 .15rem;
		overflow: visible;
		clip-path: none;
		white-space: normal;
		font-size: .6875rem;
		letter-spacing: .055em;
		text-transform: uppercase;
		color: var(--oc-ink-2);
	}

	@media (max-width: 859.98px) {
		.oc-columns {
			grid-template-columns: repeat(var(--oc-count), 13rem);
		}
	}
}

/* ---------------------------------------------------------------------------------------------- *
 * Forced colours and print. In forced colours the paper is not ours to paint, so the tints and
 * the fade stand down. On paper the rack prints flat, with every column on the sheet.
 * ---------------------------------------------------------------------------------------------- */
@media (forced-colors: active) {

	.oc-fade {
		display: none;
	}

	.oc-col__folio,
	.oc-col__licensing--offshore,
	.oc-stub__cell {
		background: none;
	}

	.oc-col__through {
		border: 1px solid currentColor;
	}
}

@media print {

	.oc-plate {
		overflow: visible;
	}

	.oc-columns {
		width: 100%;
		grid-template-columns: var(--oc-stub) repeat(var(--oc-count), minmax(0, 1fr));
	}

	.oc-stub {
		position: static;
	}

	.oc-fade,
	.oc-rack__sideways {
		display: none;
	}

	.oc-col__headline {
		font-size: 2rem;
		color: var(--oc-ink);
	}
}