/*
 * Quarter Mile Calculator -- tokens, layout, panels.
 *
 * Palette, fonts and the 2px radius are the same tokens as css/z60.css on the
 * 0-60 tool, which are lifted from the theme's main.css, so the tool reads as
 * part of the site although the theme is stripped from this page.
 *
 * Every size is calc(<base> * var(--qmc-ui-scale)), so the whole UI rescales
 * from one number. Deliberately NOT scaled: hairline borders, radii, focus
 * rings and every reserved min-height. A reservation is a measurement.
 *
 * No url() in any CSS file: an optimiser that aggregates stylesheets into a
 * cache directory rewrites the base and relative paths break silently.
 *
 * NO `stroke` RULE ANYWHERE. Stroke inherits through SVG, and the body class
 * (qmc-body) and the art root (qmc-shell) both sit on ancestors of SVG shapes.
 * The artwork carries its strokes as attributes on the shapes themselves.
 *
 * Motion lives in qmc-art.css, which loads last and ends with the one blanket
 * prefers-reduced-motion block.
 */

:root {
	color-scheme: dark;

	--qmc-red: #e11d2a;
	--qmc-red-dark: #b91320;
	--qmc-bg: #0a0a0b;
	--qmc-bg-2: #0f0f12;
	--qmc-surface: #141417;
	--qmc-surface-2: #1b1b21;
	--qmc-surface-3: #23232a;
	--qmc-line: rgba(255, 255, 255, .08);
	--qmc-line-strong: rgba(255, 255, 255, .16);
	--qmc-text: #f4f1ec;
	--qmc-dim: #c1c1c7;
	--qmc-muted: #8a8a90;
	--qmc-faint: #6a6a72;

	/* Amber reads as "measured" and the tree's warning lights, cyan as links
	   and focus. Both differ from the brand red in lightness as well as hue. */
	--qmc-amber: #f5a524;
	--qmc-cyan: #38bdf8;
	--qmc-good: #4ade80;

	--qmc-font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
	--qmc-font-body: "Spectral", Georgia, "Times New Roman", serif;
	--qmc-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--qmc-radius: 2px;
	--qmc-ease: cubic-bezier(.2, .7, .2, 1);
	--qmc-ui-scale: 1;

	--qmc-maxw: calc(1180px * var(--qmc-ui-scale));
	--qmc-pad: calc(26px * var(--qmc-ui-scale));
}

@media (max-width: 720px) {
	:root { --qmc-ui-scale: .94; --qmc-pad: 18px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.qmc-body {
	margin: 0;
	background: var(--qmc-bg);
	color: var(--qmc-text);
	font-family: var(--qmc-font-body);
	font-size: calc(17px * var(--qmc-ui-scale));
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* A long unbroken string must never widen the page on a phone. */
	overflow-wrap: break-word;
}
body.qmc-body a { color: var(--qmc-cyan); }

/* ------------------------------------------------------------- structure */

.qmc-wrap {
	max-width: var(--qmc-maxw);
	margin: 0 auto;
	padding: 0 calc(20px * var(--qmc-ui-scale));
}

.qmc-masthead { border-bottom: 1px solid var(--qmc-line); background: var(--qmc-bg-2); }
.qmc-masthead-in {
	max-width: var(--qmc-maxw);
	margin: 0 auto;
	padding: calc(12px * var(--qmc-ui-scale)) calc(20px * var(--qmc-ui-scale));
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc(8px * var(--qmc-ui-scale)) calc(20px * var(--qmc-ui-scale));
}
.qmc-brand { display: inline-flex; line-height: 0; color: var(--qmc-text); text-decoration: none; }
.qmc-brand svg { display: block; height: calc(38px * var(--qmc-ui-scale)); width: auto; }
@media (max-width: 520px) { .qmc-brand svg { height: calc(30px * var(--qmc-ui-scale)); } }
/* Fallback only, for when assets/logo.svg cannot be read. */
.qmc-brand-word {
	font-family: var(--qmc-font-display);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: calc(17px * var(--qmc-ui-scale));
	line-height: 1;
}
.qmc-brand-word b { color: var(--qmc-red); }

.qmc-masthead nav {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: calc(4px * var(--qmc-ui-scale)) calc(18px * var(--qmc-ui-scale));
}
.qmc-masthead nav a {
	font-family: var(--qmc-font-ui);
	font-size: calc(13px * var(--qmc-ui-scale));
	color: var(--qmc-muted);
	text-decoration: none;
	padding: 4px 0;
}
.qmc-masthead nav a:hover { color: var(--qmc-text); }
.qmc-masthead nav a[aria-current="page"] { color: var(--qmc-text); }
@media (max-width: 720px) {
	/* One scrolling row, so the nav cannot push the tool below the first screen. */
	.qmc-masthead nav { margin-left: 0; justify-content: flex-start; flex-basis: 100%; gap: 0 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.qmc-masthead nav a { white-space: nowrap; }
	.qmc-masthead nav a { font-size: 12px; padding: 5px 0; }
	.qmc-hero h1 { font-size: 34px; }
	.qmc-hero p { font-size: 16.5px; }
}

.qmc-hero { padding: calc(32px * var(--qmc-ui-scale)) 0 calc(6px * var(--qmc-ui-scale)); }
.qmc-hero h1 {
	font-family: var(--qmc-font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.04;
	font-size: calc(44px * var(--qmc-ui-scale));
	margin: 0 0 calc(10px * var(--qmc-ui-scale));
}
.qmc-hero p { margin: 0; max-width: 62ch; color: var(--qmc-dim); font-size: calc(18px * var(--qmc-ui-scale)); }

.qmc-app { padding-bottom: calc(40px * var(--qmc-ui-scale)); }

.qmc-card {
	background: var(--qmc-surface);
	border: 1px solid var(--qmc-line);
	border-radius: var(--qmc-radius);
	padding: var(--qmc-pad);
	min-width: 0;
}

.qmc-eyebrow {
	font-family: var(--qmc-font-ui);
	font-size: calc(11px * var(--qmc-ui-scale));
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--qmc-faint);
	margin: 0 0 calc(14px * var(--qmc-ui-scale));
}

/* ------------------------------------------------------------------ tabs */

.qmc-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	margin-top: calc(20px * var(--qmc-ui-scale));
	background: var(--qmc-line);
	border: 1px solid var(--qmc-line);
	border-radius: var(--qmc-radius);
	overflow: hidden;
}
.qmc-tab {
	font-family: var(--qmc-font-display);
	font-weight: 600;
	font-size: calc(15px * var(--qmc-ui-scale));
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--qmc-muted);
	background: var(--qmc-surface);
	border: 0;
	border-bottom: 3px solid transparent;
	padding: calc(14px * var(--qmc-ui-scale)) calc(10px * var(--qmc-ui-scale));
	/* Reserved: on a phone the middle label wraps to three lines. */
	min-height: 52px;
	cursor: pointer;
	transition: color .18s var(--qmc-ease), background .18s var(--qmc-ease);
}
.qmc-tab:hover { color: var(--qmc-text); }
.qmc-tab[aria-selected="true"] {
	color: var(--qmc-text);
	background: var(--qmc-surface-2);
	border-bottom-color: var(--qmc-red);
}
.qmc-tab:focus-visible { outline: 3px solid var(--qmc-cyan); outline-offset: -3px; }
@media (max-width: 520px) {
	/* Two columns of fields leave about 140px; keep a two-way switch on one line. */
	.qmc-field .qmc-seg { display: flex; }
	.qmc-field .qmc-seg button { flex: 1 1 auto; padding: 7px 5px; font-size: 11.5px; white-space: nowrap; }
}
@media (max-width: 720px) {
	.qmc-tab { font-size: 12px; letter-spacing: .03em; padding: 8px 4px; min-height: 66px; }
}

.qmc-tabpanel { margin-top: calc(18px * var(--qmc-ui-scale)); }
.qmc-tabpanel[hidden] { display: none; }

.qmc-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: calc(18px * var(--qmc-ui-scale));
	align-items: stretch;
}
.qmc-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: calc(18px * var(--qmc-ui-scale)); align-items: start; }
@media (max-width: 900px) {
	.qmc-split, .qmc-split--even { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- forms */

.qmc-lookup { position: relative; margin-bottom: calc(18px * var(--qmc-ui-scale)); }

.qmc-label {
	display: block;
	font-family: var(--qmc-font-ui);
	font-size: calc(11px * var(--qmc-ui-scale));
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--qmc-muted);
	margin-bottom: calc(6px * var(--qmc-ui-scale));
}

.qmc-input, .qmc-select {
	width: 100%;
	min-width: 0;
	background: var(--qmc-bg-2);
	border: 1px solid var(--qmc-line-strong);
	border-radius: var(--qmc-radius);
	color: var(--qmc-text);
	font-family: var(--qmc-font-ui);
	font-size: 16px; /* 16px stops iOS from zooming the page on focus */
	padding: calc(11px * var(--qmc-ui-scale)) calc(12px * var(--qmc-ui-scale));
	font-variant-numeric: tabular-nums;
}
.qmc-input--big { font-size: calc(17px * var(--qmc-ui-scale)); padding-top: calc(13px * var(--qmc-ui-scale)); padding-bottom: calc(13px * var(--qmc-ui-scale)); }
.qmc-input:focus, .qmc-select:focus,
.qmc-btn:focus-visible, .qmc-hit:focus-visible, .qmc-seg button:focus-visible,
.qmc-disclose:focus-visible {
	outline: 3px solid var(--qmc-cyan);
	outline-offset: 2px;
}

/* Side-by-side labels that wrap on a phone must wrap to the same height, or the
   two inputs sit at different levels. */
@media (max-width: 520px) { .qmc-label--pair { min-height: 2.9em; } }

.qmc-hint {
	margin: calc(8px * var(--qmc-ui-scale)) 0 0;
	font-family: var(--qmc-font-ui);
	font-size: calc(12.5px * var(--qmc-ui-scale));
	line-height: 1.5;
	color: var(--qmc-muted);
}
.qmc-lookup .qmc-hint {
	border-left: 2px solid var(--qmc-line-strong);
	padding-left: calc(9px * var(--qmc-ui-scale));
}

.qmc-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(16px * var(--qmc-ui-scale)) calc(14px * var(--qmc-ui-scale));
}
.qmc-fields--tight { gap: calc(12px * var(--qmc-ui-scale)); }
.qmc-field { min-width: 0; }
.qmc-field--wide { grid-column: 1 / -1; }
@media (max-width: 330px) { .qmc-fields { grid-template-columns: minmax(0, 1fr); } }

/* Segmented switch: two or three choices that are always visible. */
.qmc-seg {
	display: inline-flex;
	max-width: 100%;
	margin-top: calc(8px * var(--qmc-ui-scale));
	border: 1px solid var(--qmc-line-strong);
	border-radius: var(--qmc-radius);
	overflow: hidden;
}
.qmc-seg--field { display: flex; margin-top: 0; }
.qmc-seg--field button { flex: 1 1 0; padding-top: calc(11px * var(--qmc-ui-scale)); padding-bottom: calc(11px * var(--qmc-ui-scale)); }
.qmc-seg--wide { display: flex; margin: 0 0 calc(18px * var(--qmc-ui-scale)); }
.qmc-seg--wide button { flex: 1 1 0; padding: calc(12px * var(--qmc-ui-scale)) calc(8px * var(--qmc-ui-scale)); }
.qmc-seg button {
	font-family: var(--qmc-font-ui);
	font-size: calc(12.5px * var(--qmc-ui-scale));
	font-weight: 600;
	color: var(--qmc-muted);
	background: var(--qmc-bg-2);
	border: 0;
	border-right: 1px solid var(--qmc-line-strong);
	padding: calc(7px * var(--qmc-ui-scale)) calc(12px * var(--qmc-ui-scale));
	min-height: 34px;
	cursor: pointer;
	transition: background .15s var(--qmc-ease), color .15s var(--qmc-ease);
}
.qmc-seg button:last-child { border-right: 0; }
.qmc-seg button:hover { color: var(--qmc-text); }
.qmc-seg button[aria-pressed="true"] { background: var(--qmc-red); color: #fff; }

.qmc-btn {
	font-family: var(--qmc-font-display);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: calc(13px * var(--qmc-ui-scale));
	background: var(--qmc-surface-3);
	color: var(--qmc-text);
	border: 1px solid var(--qmc-line-strong);
	border-radius: var(--qmc-radius);
	padding: calc(10px * var(--qmc-ui-scale)) calc(16px * var(--qmc-ui-scale));
	min-height: 40px;
	cursor: pointer;
	transition: background .18s var(--qmc-ease), opacity .18s var(--qmc-ease);
}
.qmc-btn:hover { background: var(--qmc-surface-2); }
.qmc-btn--primary {
	background: var(--qmc-red);
	border-color: var(--qmc-red);
	color: #fff;
	font-size: calc(15px * var(--qmc-ui-scale));
	padding: calc(11px * var(--qmc-ui-scale)) calc(28px * var(--qmc-ui-scale));
}
.qmc-btn--primary:hover { background: var(--qmc-red-dark); }
.qmc-btn:disabled { opacity: .55; cursor: default; }

/* ----------------------------------------------------------- search hits */

.qmc-hits {
	position: absolute;
	z-index: 30;
	left: 0; right: 0;
	margin-top: 4px;
	background: var(--qmc-surface-2);
	border: 1px solid var(--qmc-line-strong);
	border-radius: var(--qmc-radius);
	max-height: calc(320px * var(--qmc-ui-scale));
	overflow-y: auto;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.qmc-hits[hidden] { display: none; }
.qmc-hit {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--qmc-line);
	color: var(--qmc-text);
	padding: calc(10px * var(--qmc-ui-scale)) calc(12px * var(--qmc-ui-scale));
	cursor: pointer;
	font-family: var(--qmc-font-ui);
}
.qmc-hit:last-child { border-bottom: 0; }
.qmc-hit:hover { background: var(--qmc-surface-3); }
.qmc-hit-name { display: block; font-size: calc(14px * var(--qmc-ui-scale)); }
.qmc-hit-meta { display: block; font-size: calc(12px * var(--qmc-ui-scale)); color: var(--qmc-muted); margin-top: 2px; }
.qmc-lookup-empty, .qmc-lookup-note {
	margin: 0;
	padding: calc(10px * var(--qmc-ui-scale)) calc(12px * var(--qmc-ui-scale));
	font-family: var(--qmc-font-ui);
	font-size: calc(12.5px * var(--qmc-ui-scale));
	color: var(--qmc-muted);
}

/* --------------------------------------------------------------- results */

/* Reserved: the server paints this card in full, so these are the heights it
   has when the script takes over. Measured, not chosen. */
.qmc-results { min-height: 430px; }
@media (max-width: 900px) { .qmc-results { min-height: 0; } }
@media (max-width: 520px) { .qmc-results { min-height: 478px; } }
.qmc-results .qmc-eyebrow { color: var(--qmc-muted); min-height: 1.3em; }

.qmc-k {
	margin: 0;
	font-family: var(--qmc-font-ui);
	font-size: calc(11px * var(--qmc-ui-scale));
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--qmc-faint);
}
.qmc-big {
	margin: calc(2px * var(--qmc-ui-scale)) 0 0;
	font-family: var(--qmc-font-display);
	font-weight: 600;
	font-size: calc(84px * var(--qmc-ui-scale));
	line-height: 1.05;
	color: var(--qmc-red);
	font-variant-numeric: tabular-nums;
}
.qmc-big small {
	font-family: var(--qmc-font-ui);
	font-weight: 600;
	font-size: calc(15px * var(--qmc-ui-scale));
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--qmc-muted);
	margin-left: calc(8px * var(--qmc-ui-scale));
}
.qmc-big--mid { font-size: calc(48px * var(--qmc-ui-scale)); color: var(--qmc-text); }
@media (max-width: 520px) { .qmc-big { font-size: calc(72px * var(--qmc-ui-scale)); } }

.qmc-range {
	margin: calc(6px * var(--qmc-ui-scale)) 0 0;
	font-family: var(--qmc-font-ui);
	font-size: calc(14.5px * var(--qmc-ui-scale));
	line-height: 1.45;
	color: var(--qmc-dim);
	/* two lines, for when the coverage sentence is on */
	min-height: calc(14.5px * 1.45 * 2 * var(--qmc-ui-scale));
}
.qmc-explain {
	margin: calc(14px * var(--qmc-ui-scale)) 0 0;
	padding: calc(11px * var(--qmc-ui-scale)) calc(13px * var(--qmc-ui-scale));
	background: var(--qmc-surface-2);
	border-left: 3px solid var(--qmc-amber);
	font-family: var(--qmc-font-ui);
	font-size: calc(13px * var(--qmc-ui-scale));
	line-height: 1.5;
	color: var(--qmc-dim);
}

.qmc-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	margin: calc(18px * var(--qmc-ui-scale)) 0 0;
	background: var(--qmc-line);
	border: 1px solid var(--qmc-line);
}
.qmc-stat { background: var(--qmc-surface); padding: calc(13px * var(--qmc-ui-scale)) calc(12px * var(--qmc-ui-scale)); min-width: 0; }
.qmc-stat + .qmc-stat { padding-left: calc(12px * var(--qmc-ui-scale)); }
.qmc-stat dt {
	font-family: var(--qmc-font-ui);
	font-size: calc(10.5px * var(--qmc-ui-scale));
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--qmc-faint);
	margin-bottom: calc(5px * var(--qmc-ui-scale));
}
.qmc-stat dd { margin: 0; }
.qmc-stat dd:not(.qmc-sub) {
	font-family: var(--qmc-font-display);
	font-weight: 600;
	font-size: calc(30px * var(--qmc-ui-scale));
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}
.qmc-stat dd small {
	font-family: var(--qmc-font-ui);
	font-size: calc(11.5px * var(--qmc-ui-scale));
	font-weight: 500;
	color: var(--qmc-muted);
}
.qmc-sub {
	margin: calc(5px * var(--qmc-ui-scale)) 0 0;
	font-family: var(--qmc-font-ui);
	font-size: calc(12px * var(--qmc-ui-scale));
	color: var(--qmc-muted);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
	.qmc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qmc-stat:nth-child(3) { grid-column: 1 / -1; }
	.qmc-stat:nth-child(2) { padding-left: calc(12px * var(--qmc-ui-scale)); }
}

/* Tab 2 and 3 outputs */
.qmc-results--slip { min-height: 330px; }
.qmc-results--conv { min-height: 400px; }
@media (max-width: 900px) { .qmc-results--slip, .qmc-results--conv { min-height: 0; } }
.qmc-source {
	margin: calc(12px * var(--qmc-ui-scale)) 0 0;
	font-family: var(--qmc-font-ui);
	font-size: calc(13px * var(--qmc-ui-scale));
	color: var(--qmc-muted);
	min-height: calc(13px * 1.5 * var(--qmc-ui-scale));
}
.qmc-verdict {
	margin: calc(14px * var(--qmc-ui-scale)) 0 0;
	padding: calc(12px * var(--qmc-ui-scale)) calc(14px * var(--qmc-ui-scale));
	background: var(--qmc-surface-2);
	border-left: 3px solid var(--qmc-amber);
	font-family: var(--qmc-font-ui);
	font-size: calc(14.5px * var(--qmc-ui-scale));
	line-height: 1.55;
	color: var(--qmc-text);
	min-height: calc(14.5px * 1.55 * 3 * var(--qmc-ui-scale) + 24px);
}
.qmc-conv-row { padding: calc(4px * var(--qmc-ui-scale)) 0 calc(14px * var(--qmc-ui-scale)); border-bottom: 1px solid var(--qmc-line); margin-bottom: calc(14px * var(--qmc-ui-scale)); }
.qmc-conv-row .qmc-sub { min-height: 1.4em; }

/* ----------------------------------------------------------- goal, weather */

.qmc-goal-out {
	margin: calc(14px * var(--qmc-ui-scale)) 0 0;
	font-family: var(--qmc-font-ui);
	font-size: calc(15px * var(--qmc-ui-scale));
	line-height: 1.55;
	color: var(--qmc-text);
	min-height: calc(15px * 1.55 * 3 * var(--qmc-ui-scale));
}

.qmc-weather { padding: 0; }
.qmc-disclose {
	display: flex;
	align-items: center;
	gap: calc(12px * var(--qmc-ui-scale));
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	color: var(--qmc-text);
	cursor: pointer;
	padding: var(--qmc-pad);
}
.qmc-disclose-t {
	font-family: var(--qmc-font-ui);
	font-size: calc(11px * var(--qmc-ui-scale));
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--qmc-faint);
	margin-right: auto;
}
.qmc-pill {
	font-family: var(--qmc-font-ui);
	font-size: calc(11px * var(--qmc-ui-scale));
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--qmc-muted);
	border: 1px solid var(--qmc-line-strong);
	border-radius: 999px;
	padding: 2px 10px;
}
.qmc-weather.is-on .qmc-pill { color: var(--qmc-bg); background: var(--qmc-amber); border-color: var(--qmc-amber); }
.qmc-chev {
	width: 9px; height: 9px;
	border-right: 2px solid var(--qmc-muted);
	border-bottom: 2px solid var(--qmc-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s var(--qmc-ease);
}
.qmc-disclose[aria-expanded="true"] .qmc-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.qmc-wx-body { padding: 0 var(--qmc-pad) var(--qmc-pad); }
.qmc-wx-body[hidden] { display: none; }
.qmc-wx-out {
	margin: calc(14px * var(--qmc-ui-scale)) 0 0;
	font-family: var(--qmc-font-ui);
	font-size: calc(13.5px * var(--qmc-ui-scale));
	line-height: 1.55;
	color: var(--qmc-dim);
	min-height: calc(13.5px * 1.55 * 3 * var(--qmc-ui-scale));
}

/* ---------------------------------------------------------- similar cars */

.qmc-similar { margin-top: calc(18px * var(--qmc-ui-scale)); }
.qmc-cars {
	list-style: none;
	margin: 0;
	padding: 0;
	/* three rows, reserved */
	min-height: 168px;
}
.qmc-car-row {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
	gap: calc(14px * var(--qmc-ui-scale));
	align-items: baseline;
	padding: calc(13px * var(--qmc-ui-scale)) 0;
	border-bottom: 1px solid var(--qmc-line);
	font-family: var(--qmc-font-ui);
	font-size: calc(14.5px * var(--qmc-ui-scale));
}
.qmc-car-row:last-child { border-bottom: 0; }
.qmc-car-name { min-width: 0; }
.qmc-car-time { font-family: var(--qmc-font-display); font-weight: 600; font-size: calc(19px * var(--qmc-ui-scale)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qmc-car-src { color: var(--qmc-muted); font-size: calc(12.5px * var(--qmc-ui-scale)); text-align: right; }
.qmc-car-none { font-family: var(--qmc-font-ui); font-size: 14px; color: var(--qmc-muted); padding: 12px 0; }
@media (max-width: 600px) {
	.qmc-car-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
	.qmc-car-src { grid-column: 1 / -1; text-align: left; }
	.qmc-cars { min-height: 228px; }
}

/* --------------------------------------------------------------- article */

.qmc-article {
	max-width: calc(760px * var(--qmc-ui-scale));
	margin: calc(56px * var(--qmc-ui-scale)) auto 0;
	padding: 0 calc(20px * var(--qmc-ui-scale));
}
.qmc-article h2 {
	font-family: var(--qmc-font-display);
	text-transform: uppercase;
	letter-spacing: .01em;
	font-size: calc(27px * var(--qmc-ui-scale));
	margin: calc(38px * var(--qmc-ui-scale)) 0 calc(12px * var(--qmc-ui-scale));
}
.qmc-article h3 {
	font-family: var(--qmc-font-display);
	font-size: calc(20px * var(--qmc-ui-scale));
	margin: calc(26px * var(--qmc-ui-scale)) 0 calc(8px * var(--qmc-ui-scale));
}
.qmc-article p { margin: 0 0 calc(17px * var(--qmc-ui-scale)); }
/* Article images carry width and height attributes; without this a 660px image
   widens a 360px page. */
.qmc-article img { max-width: 100%; height: auto; display: block; }
.qmc-article figure { margin: calc(22px * var(--qmc-ui-scale)) 0; max-width: 100%; }
.qmc-article figcaption {
	margin-top: 8px;
	font-family: var(--qmc-font-ui);
	font-size: calc(13px * var(--qmc-ui-scale));
	color: var(--qmc-muted);
}
.qmc-article ul, .qmc-article ol { margin: 0 0 calc(17px * var(--qmc-ui-scale)); padding-left: 1.3em; }
.qmc-article table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-family: var(--qmc-font-ui);
	font-size: calc(14px * var(--qmc-ui-scale));
	margin: calc(20px * var(--qmc-ui-scale)) 0;
}
.qmc-article th, .qmc-article td {
	text-align: left;
	padding: calc(9px * var(--qmc-ui-scale)) calc(10px * var(--qmc-ui-scale));
	border-bottom: 1px solid var(--qmc-line);
}
.qmc-article th {
	font-size: calc(11px * var(--qmc-ui-scale));
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--qmc-faint);
}
.qmc-article td:not(:first-child) { font-variant-numeric: tabular-nums; }

.qmc-foot {
	border-top: 1px solid var(--qmc-line);
	margin-top: calc(56px * var(--qmc-ui-scale));
	padding: calc(26px * var(--qmc-ui-scale)) 0 calc(44px * var(--qmc-ui-scale));
	font-family: var(--qmc-font-ui);
	font-size: calc(13px * var(--qmc-ui-scale));
	color: var(--qmc-muted);
}

/* ----------------------------------------------------------------- embed */

body.qmc-embedded .qmc-masthead,
body.qmc-embedded .qmc-hero p,
body.qmc-embedded .qmc-article,
body.qmc-embedded .qmc-foot { display: none; }
body.qmc-embedded .qmc-hero { padding-top: calc(18px * var(--qmc-ui-scale)); }

.qmc-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}