/**
 * CostaDelSpeed — front-end styles.
 *
 * Direction: a print gallery, not a car dealership. The reference collage sits
 * on a warm off-white wall, so the page behaves like a photographic print show
 * — quiet paper, disciplined type, one red accent borrowed from brake calipers.
 *
 * Sections are separated by whitespace and by their own headings — there is
 * no decorative divider between them and none is wanted. A tick-rule pattern
 * lived here once, drawn on every section boundary through a pseudo-element;
 * it is gone, along with the positioning context that existed only to anchor
 * it. Do not reintroduce it.
 *
 * Everything is scoped under .sc-scope so the active theme cannot bleed in.
 */

.sc-scope {
	/* Palette */
	--sc-paper:       #edeae4;
	--sc-paper-deep:  #e4e0d8;
	--sc-ink:         #14161a;
	--sc-graphite:    #575c63;
	--sc-hairline:    #d2cdc4;
	--sc-signal:      #c1211d;
	--sc-carbon:      #16181c;

	/* Type roles.
	   Michroma carries the headings, Poppins the running text. Figures stay on
	   a monospace stack because neither of the two has a tabular-figures
	   feature — Poppins alone gives its digits nine different widths, which
	   would make the hero reels jitter as they spin. */
	--sc-display: "Michroma", "Arial Narrow", system-ui, sans-serif;
	--sc-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sc-data:    "Michroma", ui-monospace, SFMono-Regular, Menlo, monospace;
	/* Michroma is near-monospaced — seven of its ten digits share a width and
	   the spread is 5.1% — but the odometer cannot tolerate even that, so its
	   cells are pinned to the widest digit rather than to the glyph. */
	--sc-odo-cell: 1em;

	/* Rhythm */
	--sc-gap:      clamp(2.5rem, 6vw, 5.5rem);
	--sc-pad:      clamp(1rem, 4vw, 5rem);
	/* One vertical rhythm for the hero column: the gap below the rule under
	   the title and the gap above the simulator panel are the same measure. */
	--sc-hero-rhythm: clamp(1.5rem, 3vw, 2.75rem);
	/* Ceiling for the two-column blocks. The video's width is derived from it
	   so that it matches the technical column rather than merely resembling
	   it — the two sections then alternate as a pattern instead of drifting. */
	/* Both two-column blocks divide at the same fraction, so the seam between
	   photo and data lands exactly where the seam between text and video does
	   one section later. That shared line is what makes the alternation read
	   as a pattern rather than as two unrelated layouts. */
	--sc-split-a: 1.1fr;
	--sc-split-b: 1fr;
	/* The same division expressed as a percentage: b / (a + b). The
	   description is positioned rather than laid out in a track, so it needs
	   the seam as a length. Change the two above and change this with them. */
	--sc-split-media: 47.619%;
	/* Height of the theme's floating header, which overlaps the page instead
	   of pushing it down. Everything that needs to clear it reads this. */
	--sc-menu:     80px;
	--sc-measure:  1000px;

	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/* Nothing here may widen the document. `clip` rather than `hidden`:
	   `hidden` would turn this into a scroll container and break the sticky
	   pin in the gallery. */
	overflow-x: clip;
	color: var(--sc-ink);
	background: var(--sc-paper);
	font-family: var(--sc-body);
	line-height: 1.6;
}

.sc-scope *,
.sc-scope *::before,
.sc-scope *::after {
	box-sizing: inherit;
}

/* Shortcode placements drop into somebody else's layout — a page, an
   Elementor section — which already has a background of its own. The paper
   tint belongs to the car page, where it *is* the page; here it would be a
   rectangle of the wrong colour laid over whatever the section is doing. The
   cards keep their own deeper tint, so they still read as tiles. */
.sc-scope.sc-scope--bare {
	background: transparent;
}

.sc-scope img {
	max-width: 100%;
	height: auto;
	display: block;
}

.sc-scope button {
	font: inherit;
	color: inherit;
}

/* Michroma exists in one weight. Left alone, a browser asked for bold smears
   the glyphs sideways, which on a face this wide is unmistakable. */
.sc-scope .sc-hero__title,
.sc-scope .sc-section__title,
.sc-scope .sc-card__name,
.sc-scope .sc-ignition__label {
	font-weight: 400;
	font-synthesis: none;
}

.sc-scope :focus-visible {
	outline: 2px solid var(--sc-signal);
	outline-offset: 3px;
}

.sc-scope .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ Structure */

/* Full bleed. Nothing here is capped by a page width — the only thing that
   still has a ceiling is the collage itself, because its height follows from
   its width and it has to stay on screen. */
.sc-scope .sc-body,
.sc-scope .sc-hero {
	max-width: none;
	margin-inline: auto;
	padding-inline: var(--sc-pad);
}

.sc-scope .sc-section {
	padding-block: var(--sc-gap);
}

.sc-scope .sc-section__title {
	font-family: var(--sc-display);
	font-size: clamp(0.8rem, 1.3vw, 1.2rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 1.8rem;
}

.sc-scope .sc-eyebrow {
	font-family: var(--sc-body);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--sc-graphite);
	margin: 0 0 0.4rem;
}

/* ----------------------------------------------------------------------- Hero */

.sc-scope .sc-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"head"
		"media"
		"stats"
		"sim";
}

.sc-scope .sc-hero__media  { grid-area: media; }
.sc-scope .sc-hero__head   { grid-area: head; }
.sc-scope .sc-stats        { grid-area: stats; }
.sc-scope .sc-hero__sim    { grid-area: sim; }

.sc-scope .sc-hero__sim {
	margin-top: var(--sc-hero-rhythm);
}

/* The bordered launcher, back as it was: heading and copy on one side,
   ignition on the other, the whole thing framed. Only the surroundings
   changed — it now sits in the hero column rather than in a section. */
.sc-scope .sc-sim-launch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.1rem, 2.2vw, 1.75rem);
	padding: clamp(1.1rem, 2.2vw, 1.75rem);
	border: 1px solid var(--sc-ink);
}

.sc-scope .sc-sim-launch__text {
	flex: 1 1 200px;
}

.sc-scope .sc-sim-launch__title {
	margin: 0 0 0.55rem;
	font-family: var(--sc-display);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sc-scope .sc-sim-launch__copy {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--sc-graphite);
}

.sc-scope .sc-hero {
	container-type: inline-size;
	padding-top: calc(var(--sc-menu) + clamp(0.75rem, 2vw, 1.75rem));
	padding-bottom: 30px;
}

.sc-scope .sc-hero__head {
	margin-bottom: clamp(1.1rem, 2.5vw, 1.9rem);
}

.sc-scope .sc-hero__title {
	font-family: var(--sc-display);
	font-size: clamp(1rem, 7cqw, 2rem);
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0;
}

/* Collage: three straight bars rising left to right, like a stepped bar mark.
   The main photo is anchored to the bottom and its top edge lands exactly on
   the shortest bar's lower edge, so the ragged bottoms never show.

   All offsets are percentages of the column width, which keeps the whole
   composition proportional from 1200px down to a phone with no breakpoints.
   At 7:12, 51.4% of the bar's width equals 30% of its height. */

/* The composition is roughly 0.90 × its own width tall, so capping the width
   is how the height is controlled. Below 1024px the title and stats stack
   above and below it, hence the lower ceiling there. */
.sc-scope .sc-collage {
	position: relative;
	width: min(100%, 66vh);
	margin-inline: auto;
	padding-bottom: 26%;
}

.sc-scope .sc-collage__stack {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1%;
	width: 88.5%;
	margin-inline: auto;
	align-items: start;
}

.sc-scope .sc-collage__frame {
	position: relative;
	margin: 0;
	aspect-ratio: 7 / 12;
	background: var(--sc-paper-deep);
	overflow: hidden;
}

.sc-scope .sc-collage__frame--left {
	margin-top: 51.4%;
}

.sc-scope .sc-collage__frame--center {
	margin-top: 25.7%;
}

.sc-scope .sc-collage__frame--right {
	margin-top: 0;
}

/* Absolute rather than object-fitted, so the stored shift can move it with
   `top` — a percentage there resolves against the frame's height, which is
   the unit the shift is measured in. min-height keeps a landscape file from
   leaving a gap; for a portrait file height:auto wins and nothing is cropped. */
.sc-scope .sc-collage__img {
	position: absolute;
	inset-inline: 0;
	top: 0;
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: cover;
}

.sc-scope .sc-collage__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		var(--sc-paper-deep) 0 10px,
		var(--sc-paper) 10px 20px
	);
}

.sc-scope .sc-collage__hero {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
}

.sc-scope .sc-collage__photo {
	width: 100%;
	aspect-ratio: 12 / 5;
	object-fit: cover;
	box-shadow: 0 -20px 44px rgba(20, 22, 26, 0.20);
}

/* Six stat tiles. Always six, even when a value is missing. */

/* One rule above the figures, closing the title off. Below them nothing —
   the block should not read as a boxed table. */
.sc-scope .sc-stats {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0.75rem;
	margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
	padding: var(--sc-hero-rhythm) 0 0;
	border-top: 1px solid var(--sc-ink);
}

/* Five items — three figures and two rules — spread with equal gaps. Because
   every gap is the same, each rule lands exactly halfway between its
   neighbours no matter how long their labels are. Fixed thirds could not do
   this: they measure from the column edge, while the eye measures from the
   text. */
.sc-scope .sc-stat {
	flex: 0 1 auto;
	min-width: 0;
}

/* Centred inside the block, whichever edge the block itself sits against.
   The block is only as wide as its widest line, so the shorter of the two —
   "2,8 s" over "0–100 KM/H", or "MOC" under "640 KM" — is centred on the
   other instead of being flushed to an edge it does not reach. */
.sc-scope .sc-stat {
	text-align: center;
}

.sc-scope .sc-stat-rule {
	flex: 0 0 1px;
	align-self: stretch;
	margin-block: 0.15rem;
	background: var(--sc-hairline);
}

.sc-scope .sc-stat__value {
	display: flex;
	align-items: flex-end;
	margin: 0;
	font-family: var(--sc-data);
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.15rem, 2.2vw, 1.75rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
}

/* Digit reels. Each cell is one line tall and clips, so the strip inside can
   carry twenty-odd digits and show exactly one. Cells are laid out as flex
   items to sidestep the baseline that an overflow-hidden inline-block
   synthesises from its bottom edge. */
.sc-scope .sc-odo {
	display: inline-flex;
	align-items: flex-end;
}

.sc-scope .sc-odo__cell {
	display: block;
	width: var(--sc-odo-cell);
	height: 1em;
	line-height: 1;
	overflow: hidden;
	text-align: center;
}

.sc-scope .sc-odo__reel {
	display: block;
	transform: translateY(0);
	will-change: transform;
}

.sc-scope .sc-odo__reel > span,
.sc-scope .sc-odo__sep {
	display: block;
	height: 1em;
	line-height: 1;
}

.sc-scope .sc-odo__sep {
	/* A separator is not a digit and must not take a digit's slot. */
	width: auto;
}

.sc-scope .sc-stat__unit {
	font-size: 0.62em;
	line-height: 1;
	color: var(--sc-graphite);
	margin-left: 0.25em;
}

.sc-scope .sc-stat__empty {
	color: var(--sc-hairline);
}

.sc-scope .sc-stat__value {
	justify-content: center;
}

.sc-scope .sc-stat__label {
	margin: 0.5rem 0 0;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sc-graphite);
}

/* ------------------------------------------------------ Horizontal gallery */

/* Default state is a plain swipeable strip. The script adds .is-pinned only
   when it can drive the sideways travel from scroll, so a failure or an old
   browser degrades to something that still works with a thumb. */
/* No negative margin here. The section is a direct child of the full-width
   wrapper, so it already spans edge to edge — pulling it further out was what
   widened the document and produced the horizontal scrollbar. */
.sc-scope .sc-gallery {
	position: relative;
	background: var(--sc-carbon);
	padding-block: clamp(2rem, 5vw, 4rem);
}

.sc-scope .sc-gallery__pin {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sc-scope .sc-gallery__pin::-webkit-scrollbar {
	display: none;
}

.sc-scope .sc-gallery__track {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	padding-inline: var(--sc-pad);
	width: max-content;
}

.sc-scope .sc-gallery__item {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: center;
}

/* The theme styles bare <button> elements, and its hover colour was reaching
   the gallery through this one — the plugin reset the resting state but not
   the interactive ones, so the red only appeared under the cursor. Every
   state is pinned here instead of just the default. */
.sc-scope .sc-gallery__button,
.sc-scope .sc-gallery__button:hover,
.sc-scope .sc-gallery__button:focus,
.sc-scope .sc-gallery__button:active {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	box-shadow: none;
	filter: none;
	cursor: zoom-in;
	line-height: 0;
}

/* The keyboard ring stays — it just cannot be the signal red on this ground,
   which is what read as a red hover after a click. */
.sc-scope .sc-gallery__button:focus-visible {
	outline: 2px solid rgba(237, 234, 228, 0.85);
	outline-offset: 3px;
}

.sc-scope .sc-gallery__img {
	height: min(58vh, 420px);
	width: auto;
	max-width: none;
	object-fit: cover;
}

.sc-scope .sc-gallery__button:hover .sc-gallery__img {
	opacity: 1;
	filter: none;
}

.sc-scope .sc-gallery__label {
	margin: 0 0 1.25rem;
	padding-inline: var(--sc-pad);
	font-family: var(--sc-display);
	/* Twenty pixels above the old 0.72rem. Written as a sum rather than as a
	   single value so the relationship to the rest of the label scale stays
	   visible. */
	font-size: calc(0.72rem + 20px);
	font-weight: 400;
	font-synthesis: none;
	/* Michroma is far wider than Poppins, so the old 0.24em tracking would
	   have run the two words off the screen at this size. */
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	color: rgba(237, 234, 228, 0.55);
}

.sc-scope .sc-gallery__count {
	margin-left: 0.6em;
	color: var(--sc-signal);
}

.sc-scope .sc-gallery__bar {
	display: none;
	margin: 1.5rem var(--sc-pad) 0;
	height: 2px;
	background: rgba(237, 234, 228, 0.18);
}

.sc-scope .sc-gallery__bar span {
	display: block;
	height: 100%;
	background: var(--sc-signal);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ------------------------------------------------------------ Swipe mode */

/* Everything that is not the pinned desktop effect: a phone, a tablet, a
   visitor who asked for reduced motion, or a script that failed.
 *
 * The sideways scroll used to belong to the pane — and the pane also holds
 * the heading, so swiping the photos carried "GALERIA 12" off the left of the
 * screen along with them, which is exactly the label you want to still be
 * able to see while you are looking through a gallery. The scroll belongs to
 * the track alone. The heading and the count are then siblings of the scroll
 * container rather than passengers inside it, and they stay put.
 *
 * `:not(.is-pinned)` rather than a media query because the script decides
 * whether to pin on three separate grounds, only one of which is the width.
 * Matching on the class it actually sets is the only way to be right in all
 * three cases. */
.sc-scope .sc-gallery:not(.is-pinned) .sc-gallery__pin {
	overflow: visible;
	scroll-snap-type: none;
}

.sc-scope .sc-gallery:not(.is-pinned) .sc-gallery__track {
	width: auto;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sc-scope .sc-gallery:not(.is-pinned) .sc-gallery__track::-webkit-scrollbar {
	display: none;
}

/* The page padding moves off the track and onto the outermost photos. As the
   track's own padding it would be the scroll container's padding, and the
   trailing edge of that is the one browsers have historically dropped from
   the scrollable area — the last photo would end flush against the screen
   while the first one kept its margin. A margin on a flex item has never had
   that problem. */
.sc-scope .sc-gallery:not(.is-pinned) .sc-gallery__track {
	padding-inline: 0;
}

.sc-scope .sc-gallery:not(.is-pinned) .sc-gallery__item:first-child {
	margin-left: var(--sc-pad);
}

.sc-scope .sc-gallery:not(.is-pinned) .sc-gallery__item:last-child {
	margin-right: var(--sc-pad);
}

/* The bar is no longer desktop-only. With the heading fixed in place it is
   the one thing left that says how far the strip runs, so it is shown
   whenever there is actually something to scroll — the script adds the
   second class only when the track overflows. */
.sc-scope .sc-gallery.is-swipe.is-scrollable .sc-gallery__bar {
	display: block;
}

/* Pinned mode: the pane sticks for the height of the section while the track
   is translated sideways by the script. */
.sc-scope .sc-gallery.is-pinned {
	padding-block: 0;
}

/* The pane is the full viewport, but its contents centre in what is left
   below the header — otherwise the header eats the top of the photos and the
   whole strip reads as sitting too high. */
.sc-scope .sc-gallery.is-pinned .sc-gallery__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	padding-top: var(--sc-menu);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	scroll-snap-type: none;
}

.sc-scope .sc-gallery.is-pinned .sc-gallery__track {
	will-change: transform;
}

.sc-scope .sc-gallery.is-pinned .sc-gallery__img {
	height: min(68vh, calc(100vh - var(--sc-menu) - 180px));
}

.sc-scope .sc-gallery.is-pinned .sc-gallery__bar {
	display: block;
}

/* ---------------------------------------------------------------- Spec table */

/* ------------------------------------------- Technical data, two columns */

/* No width cap here any more. It applied to this block and not to the
   description below, so at wide viewports the two sections split at different
   places and the alternating pattern fell apart. The table keeps its own
   measure instead — that is where readability actually needed protecting. */
.sc-scope .sc-spec-layout {
	max-width: none;
}

.sc-scope .sc-spec-figure {
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--sc-paper-deep);
}

.sc-scope .sc-spec-main {
	min-width: 0;
}

/* The same hairline that closes the car's name in the hero, doing the same
   job here. It spans the table's measure rather than the column, so the rule
   and the rows below it share one right edge. */
.sc-scope .sc-spec-main .sc-section__title {
	max-width: var(--sc-measure);
	padding-bottom: clamp(0.9rem, 2vw, 1.4rem);
	margin-bottom: 0;
	border-bottom: 1px solid var(--sc-ink);
}

.sc-scope .sc-spec-figure__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Armed only once the script runs, so a page without JavaScript shows the
   photo rather than an empty square.
 *
 * The open state carries every class the closed one does, plus is-revealed.
 * That ordering is load-bearing: an earlier version wrote the closed state as
 * `.is-armed.is-ready` and the open one as `.is-revealed`, so the closed rule
 * was one class more specific and won regardless of the markup. The photo was
 * clipped to nothing and stayed there. */
.sc-scope .sc-reveal.is-armed {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-scope .sc-reveal.is-armed .sc-spec-figure__img {
	transform: scale(1.16);
	transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sc-scope .sc-reveal.is-armed.is-revealed {
	clip-path: inset(0 0 0 0);
}

.sc-scope .sc-reveal.is-armed.is-revealed .sc-spec-figure__img {
	transform: scale(1);
}

@media (min-width: 900px) {
	/* align-items: start is what makes the sticky photo possible. A stretched
	   grid item fills the whole row and has nowhere to travel; a start-aligned
	   one keeps its own height, so it can ride along while the accordions
	   beside it run longer. */
	.sc-scope .sc-spec-layout--split {
		display: grid;
		grid-template-columns: minmax(0, var(--sc-split-a)) minmax(0, var(--sc-split-b));
		/* No column gap: the right column's own padding is the separation, so
		   the two never add up into a double space. */
		gap: 0;
		align-items: start;
	}

	/* Fifty on every side, no allowance for the floating header. The column
	   scrolls, so the heading only passes behind the pill in transit — worth
	   less than the band of empty page the allowance left at the top. */
	.sc-scope .sc-spec-layout--split .sc-spec-main {
		padding: 50px;
	}

	/* Full bleed on the left and the full height of what the header leaves —
	   no square, no margins. The negative margin reaches past the page padding
	   to the viewport edge; overflow-x: clip on the wrapper keeps that from
	   widening the document.
	   Sticky survives here only because that wrapper uses clip rather than
	   hidden — hidden would make it a scroll container and pin the photo to
	   the top of the section instead of the viewport. */
	.sc-scope .sc-spec-layout--split .sc-spec-figure {
		position: sticky;
		top: 0;
		height: 100vh;
		aspect-ratio: auto;
		margin: 0 0 0 calc(-1 * var(--sc-pad));
	}

	/* The admin bar is fixed over the top of the viewport, so for a logged-in
	   editor the first 32px of the photo would sit behind it. */
	body.admin-bar .sc-scope .sc-spec-layout--split .sc-spec-figure {
		top: 32px;
		height: calc(100vh - 32px);
	}

	.sc-scope .sc-spec-layout--split .sc-section__title {
		margin-top: 0;
	}

	/* The photo starts and ends where the section does. Section padding here
	   would read as a band of empty page above and below it, and the brief is
	   that the bottom of the photo is the bottom of the block. */
	.sc-scope .sc-section--spec {
		padding-block: 0;
	}
}

/* Below that breakpoint the two columns stack, and the photo was the only
   thing in the stack still wearing the page's margins: a band of paper above
   it where the section's own top padding was, and a strip of paper down each
   side. On a screen this narrow that reads as a picture that failed to load
   into its frame rather than as a deliberate margin. The negative margins are
   the section's padding and the page's padding, given back exactly, so the
   photo runs to all three edges and the paper is left to the text below it —
   which is the only place it was ever doing any work.
 *
 * overflow-x: clip on .sc-scope is what stops the overhang from widening the
 * document, the same guarantee the desktop rule above relies on.
 *
 * The top margin does not move the photo relative to its own box: with no
 * padding or border on .sc-spec-layout it collapses through and shifts the
 * whole layout up instead. Same picture either way, and the section's bottom
 * padding is untouched. */
@media (max-width: 899px) {
	.sc-scope .sc-spec-layout--split .sc-spec-figure {
		margin-top: calc(-1 * var(--sc-gap));
		margin-inline: calc(-1 * var(--sc-pad));
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-scope .sc-reveal,
	.sc-scope .sc-reveal .sc-spec-figure__img {
		clip-path: none !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------- Data groups */

/* Headings, not accordions. Nothing folds away, so the chevron, the pointer
   cursor and the hover colour that went with them are gone too. */
.sc-scope .sc-spec-groups {
	max-width: var(--sc-measure);
}

.sc-scope .sc-spec-group + .sc-spec-group {
	border-top: 1px solid var(--sc-hairline);
}

.sc-scope .sc-spec-group__head {
	margin: 0;
	padding: 1.1rem 0 0.35rem;
	line-height: 1.2;
}

.sc-scope .sc-spec-group__name {
	font-family: var(--sc-display);
	font-size: clamp(0.8rem, 1.2vw, 1rem);
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sc-scope .sc-spec-group .sc-spec {
	margin-bottom: 1.1rem;
}

/* Nothing but the words.
 *
 * The greys and rules that used to sit behind these rows were never declared
 * here — they came from the theme's own table styling, which this template
 * inherits like any other page. Everything else in the plugin is insulated
 * from the theme; the table was the one thing that was not, so it is reset
 * explicitly rather than merely overridden.
 *
 * A two-column table stretched across an ultrawide screen would put the label
 * and its value half a metre apart, hence the measure. */
.sc-scope .sc-spec {
	width: 100%;
	max-width: var(--sc-measure);
	border-collapse: collapse;
	background: none;
	border: 0;
}

.sc-scope .sc-spec tbody,
.sc-scope .sc-spec__row,
.sc-scope .sc-spec__label,
.sc-scope .sc-spec__value {
	background: none;
	border: 0;
	box-shadow: none;
}

.sc-scope .sc-spec__label,
.sc-scope .sc-spec__value {
	padding: 0.62rem 0;
	vertical-align: baseline;
	line-height: 1.4;
}

.sc-scope .sc-spec__label {
	width: 52%;
	text-align: left;
	font-weight: 400;
	color: var(--sc-graphite);
}

/* Values against the right edge: with nothing else separating the columns,
   two clean margins are what holds the rows together. */
.sc-scope .sc-spec__value {
	text-align: right;
	font-family: var(--sc-data);
	font-size: 1rem;
	color: var(--sc-ink);
}

.sc-scope .sc-spec__unit {
	color: var(--sc-graphite);
	font-size: 0.8em;
	margin-left: 0.35em;
}

/* ---------------------------------------------------------- Emotional tiles */

/* The description sits on the dark ground the tiles used to occupy. Negative
   margins pull it out to the page edges, and its padding puts the text back
   where the rest of the column sits. */
.sc-scope .sc-section--story {
	background: var(--sc-carbon);
	color: var(--sc-paper);
	margin-inline: calc(-1 * var(--sc-pad));
	padding-inline: var(--sc-pad);
}

/* No tick rule above it: on the dark ground the hairline reads as a row of
   bright dashes rather than as the quiet divider it is on paper.
 *
 * Three classes, matching the rule it has to beat — `.sc-scope .sc-section +
 * .sc-section::before`. Written with two it simply lost, which is why the
 * dashes survived every previous attempt to remove them. */
.sc-scope .sc-section.sc-section--story::before {
	display: none;
}

.sc-scope .sc-section__title--inverse {
	color: var(--sc-paper);
}







/* ------------------------------------------------------------ Story + video */

.sc-scope .sc-story--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

/* From here the description block mirrors the technical section: text in a
   padded column, media bled out to the page edge, and no section padding to
   leave a band above or below it.
 *
 * One deliberate difference. The photo could take any height because the
 * browser crops it; an embedded player cannot. Stretched off 16:9 the video
 * would simply letterbox itself with black bars, so it keeps its ratio and
 * sticks instead — which is what fills the column when the text runs longer. */
@media (min-width: 900px) {
	.sc-scope .sc-section--story {
		padding-block: 0;
	}

	/* The video is matched to the photo, not to the column beside it. Matching
	   the column was the wrong measure: that column carries 50px of padding,
	   so its visible block of accordions is a hundred pixels narrower than the
	   track it sits in — and the block is what the eye compares.
	 *
	   Same fraction of the same capped width the photo uses, so the two media
	   blocks come out identical and mirrored: one bleeding off the left edge,
	   the next off the right. */
	.sc-scope .sc-story--split {
		position: relative;
		grid-template-columns: minmax(0, var(--sc-split-a)) minmax(0, var(--sc-split-b));
		gap: 0;
	}

	/* Taken out of the flow entirely.
	 *
	   As a grid item the description was one of two things sizing the row, and
	   a row is as tall as its tallest occupant — so a long description pushed
	   the dark ground past the video and the height was never actually fixed.
	   Positioned instead, it contributes nothing, and the video is left as the
	   only thing that can decide how tall the section is.
	 *
	   Stretched top to bottom, and fifty from the screen edge on the left
	   because the offset cancels the page padding the section carries. */
	.sc-scope .sc-story--split .sc-story__text {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(-1 * var(--sc-pad));
		right: var(--sc-split-media);
		display: flex;
		flex-direction: column;
		/* `safe` keeps an over-long description reachable: centring alone
		   would push its opening lines past the top edge with no way back. */
		justify-content: safe center;
		gap: 1.15em;
		padding: 50px;
		max-width: none;
		overflow-y: auto;
	}

	/* Flex containers do not collapse margins, so the paragraph spacing moves
	   to the container's gap and the children give theirs up — otherwise every
	   gap between paragraphs would double. */
	.sc-scope .sc-story--split .sc-story__text > * {
		margin-block: 0;
		max-width: 62ch;
	}

	.sc-scope .sc-story--split .sc-story__text > * {
		max-width: 62ch;
	}

	/* Placed explicitly. With the description positioned it no longer occupies
	   a cell, so the video would otherwise be auto-placed into the first one.
	   No sticky any more either — the section is exactly the video's height,
	   so there is nothing left for it to travel through. */
	.sc-scope .sc-story--split .sc-story__video {
		grid-column: 2;
		margin-right: calc(-1 * var(--sc-pad));
	}


}

/* Stacked, the player had the same problem the photo above it had, and it
   gets the same answer — mirrored, because here the loose edge is the bottom
   rather than the top. Two negative margins for the page padding on either
   side, and one for the section's own bottom padding, so the video finishes
   flush with the foot of the dark band instead of floating in it. The section
   keeps that padding for the case where there is no video at all. */
@media (max-width: 899px) {
	.sc-scope .sc-story--split .sc-story__video {
		margin-inline: calc(-1 * var(--sc-pad));
		margin-bottom: calc(-1 * var(--sc-gap));
	}
}

.sc-scope .sc-story__text {
	font-size: 1.03rem;
	max-width: 62ch;
	color: rgba(237, 234, 228, 0.82);
}

.sc-scope .sc-story__text strong,
.sc-scope .sc-story__text b,
.sc-scope .sc-story__text h1,
.sc-scope .sc-story__text h2,
.sc-scope .sc-story__text h3,
.sc-scope .sc-story__text h4 {
	color: var(--sc-paper);
}

.sc-scope .sc-story__text > *:first-child {
	margin-top: 0;
}

.sc-scope .sc-story__text > *:last-child {
	margin-bottom: 0;
}

.sc-scope .sc-story__text a {
	color: var(--sc-signal);
	text-underline-offset: 3px;
}

.sc-scope .sc-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sc-carbon);
}

.sc-scope .sc-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------------- Ignition button */

/* A start-stop button off a real dashboard: two metal rings catching light
   from opposite directions, a recessed dark face, and a filament between the
   two labels that lights when you reach for it. Built at final size rather
   than scaled up, so the lettering stays crisp. */
.sc-scope .sc-ignition {
	--ign: 132px;

	position: relative;
	display: grid;
	place-items: center;
	width: var(--ign);
	height: var(--ign);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	background-image: linear-gradient(
		135deg,
		#d2d2d2 0%,
		#6b6b6b 20%,
		#0c0c0c 50%,
		#0c0c0c 70%,
		#6b6b6b 100%
	);
	box-shadow: 0 8px 20px rgba(20, 22, 26, 0.42);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.sc-scope .sc-ignition__bezel {
	display: grid;
	place-items: center;
	width: calc(var(--ign) - 13px);
	height: calc(var(--ign) - 13px);
	padding: 2px;
	border-radius: 50%;
	/* Lit from the top, against the outer ring's diagonal — that opposition
	   is what reads as machined metal rather than a flat grey circle. */
	background-image: linear-gradient(
		to bottom,
		#9e9e9e 0%,
		#ffffff 40%,
		#383838 70%,
		#ffffff 100%
	);
}

.sc-scope .sc-ignition__face {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: #4f4f4f;
	box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.72);
}

.sc-scope .sc-ignition__label {
	font-family: var(--sc-display);
	font-size: 0.55rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #b0b0b0;
	text-indent: 0.06em;
}

.sc-scope .sc-ignition__groove {
	width: 58%;
	height: 1px;
	background: #131313;
}

.sc-scope .sc-ignition__filament {
	display: block;
	height: 100%;
	background: transparent;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.sc-scope .sc-ignition:hover .sc-ignition__filament,
.sc-scope .sc-ignition:focus-visible .sc-ignition__filament {
	background: var(--sc-signal);
	box-shadow: 0 0 6px var(--sc-signal);
}

.sc-scope .sc-ignition:hover {
	box-shadow: 0 10px 26px rgba(20, 22, 26, 0.5);
}

.sc-scope .sc-ignition:active {
	transform: scale(0.965);
	box-shadow: 0 2px 7px rgba(20, 22, 26, 0.4);
}

.sc-scope .sc-ignition:focus-visible {
	outline: 2px solid var(--sc-signal);
	outline-offset: 6px;
}

/* The moment of ignition: white flash settling to red. */
@keyframes sc-ignite {
	0% {
		background: #ffffff;
		box-shadow: 0 0 24px #ffffff;
	}
	100% {
		background: var(--sc-signal);
		box-shadow: 0 0 6px var(--sc-signal);
	}
}

.sc-scope .sc-ignition.is-firing .sc-ignition__filament {
	animation: sc-ignite 0.45s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
	.sc-scope .sc-ignition.is-firing .sc-ignition__filament {
		animation: none;
		background: var(--sc-signal);
	}
}

@media (max-width: 767px) {
	.sc-scope .sc-ignition {
		--ign: 116px;
	}
}

/* ---------------------------------------------------------------- Car cards */

.sc-scope .sc-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
}

/* [all_cars] takes its column count from the shortcode, defaulting to the
   same three. The responsive rules at the foot of this file still clamp it
   to two and then one — they come later and win on source order, which is
   what keeps a columns="5" grid from surviving onto a phone. */
.sc-scope .sc-cards--all {
	grid-template-columns: repeat(var(--sc-cards-cols, 3), 1fr);
}

.sc-scope .sc-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--sc-paper-deep);
	transition: transform 0.25s ease;
}

.sc-scope .sc-card:hover {
	transform: translateY(-4px);
}

.sc-scope .sc-card__media {
	display: block;
	aspect-ratio: 12 / 5;
	overflow: hidden;
}

.sc-scope .sc-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sc-scope .sc-card__body {
	display: block;
	/* The brand line used to start flush against the photo, which read as the
	   caption belonging to the image rather than to the card. */
	padding: 1.1rem 1.2rem 1.4rem;
}

.sc-scope .sc-card__brand {
	display: block;
	font-family: var(--sc-body);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sc-graphite);
}

.sc-scope .sc-card__name {
	display: block;
	font-family: var(--sc-display);
	font-size: 0.82rem;
	text-transform: uppercase;
	line-height: 1.45;
	margin-top: 0.35rem;
}

.sc-scope .sc-card__stats {
	display: flex;
	gap: 1.5rem;
	margin-top: 0.9rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--sc-hairline);
	font-family: var(--sc-data);
	font-size: 1rem;
}

.sc-scope .sc-card__stat em {
	font-style: normal;
	font-size: 0.68em;
	color: var(--sc-graphite);
	margin-left: 0.25em;
}

.sc-scope .sc-empty {
	padding: 2rem;
	text-align: center;
	color: var(--sc-graphite);
}

/* ------------------------------------------------------------- Pagination */

.sc-scope .sc-pagination {
	/* Michroma sets an ascent of 1.156 em against a descent of 0.266 em, so
	   with line-height: 1 the ink of a digit is centred slightly below the
	   middle of its line box — enough to see in a square this small. Padding
	   at the foot shortens the content box from below, and a centred flex
	   child rises by half of it. One knob, tuned here.
	   The arrows are drawn rather than typed, so they are exempt. */
	--sc-page-optical: 0.13em;
	--sc-page-size: 2.7rem;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Both themes and Elementor ship their own rules for .page-numbers, so every
   property that matters is restated here rather than inherited and hoped for.
   The anchor in the selector is what carries this past a bare .page-numbers
   rule elsewhere in the cascade.

   min-width against height makes a square at one digit and lets the box grow
   at two, instead of squeezing the number. */
.sc-scope .sc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--sc-page-size);
	height: var(--sc-page-size);
	padding: 0 0.55rem var(--sc-page-optical);
	border: 1px solid var(--sc-hairline);
	border-radius: 0;
	background: transparent;
	font-family: var(--sc-data);
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	color: var(--sc-ink);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sc-scope .sc-pagination a.page-numbers:hover,
.sc-scope .sc-pagination a.page-numbers:focus-visible {
	border-color: var(--sc-ink);
	background: var(--sc-paper-deep);
	color: var(--sc-ink);
}

/* The page you are on, filled rather than outlined: at this size a border
   colour alone was not telling two states apart at a glance. */
.sc-scope .sc-pagination .page-numbers.current {
	border-color: var(--sc-ink);
	background: var(--sc-ink);
	color: var(--sc-paper);
}

.sc-scope .sc-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--sc-graphite);
}

/* The arrows carry an SVG and a screen-reader label, neither of which sits on
   a baseline, so the optical correction comes back off. */
.sc-scope .sc-pagination .prev,
.sc-scope .sc-pagination .next {
	padding-bottom: 0;
}

.sc-scope .sc-pagination__arrow {
	display: block;
	width: 1.05rem;
	height: 1.05rem;
	/* The stroke would thicken with the box if anything ever resized the
	   arrow. Pinning it keeps a hairline a hairline. */
	vector-effect: non-scaling-stroke;
}

/* The grid dims while the next page is on its way and stops taking clicks, so
   a second one cannot overtake the first. */
.sc-scope [data-sc-collection].is-loading {
	pointer-events: none;
}

.sc-scope [data-sc-collection].is-loading .sc-cards {
	opacity: 0.4;
	transition: opacity 0.2s ease;
}

/* The grid takes focus after a swap so the keyboard lands in the new cards.
   A ring around the whole block is noise; the cards inside have their own. */
.sc-scope .sc-cards:focus {
	outline: none;
}

/* ------------------------------------------------------- Related carousel */

/* The head carries the arrows opposite the title. Over the cards they would
   sit on the photos, and this row was empty on the right anyway. */
.sc-scope .sc-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.8rem;
}

.sc-scope .sc-related__head .sc-section__title {
	margin-bottom: 0;
}

.sc-scope .sc-related__nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex: 0 0 auto;
}

.sc-scope .sc-related__nav[hidden] {
	display: none;
}

/* The lightbox chevrons, moved onto paper: same glyphs, same weight, same
   quarter-opacity resting state — only the ink colour changes, because here
   they sit on the light ground rather than on a black one.

   Every state pinned and the two colour properties flagged, for the reason
   the simulator's close button needed the same: the theme styles bare
   <button> elements and its stylesheet loads after this one. */
.sc-scope .sc-related__arrow,
.sc-scope .sc-related__arrow:hover,
.sc-scope .sc-related__arrow:focus,
.sc-scope .sc-related__arrow:active {
	appearance: none;
	-webkit-appearance: none;
	padding: 0 0.35rem;
	border: 0;
	border-radius: 0;
	background: none !important;
	background-image: none !important;
	color: var(--sc-ink) !important;
	box-shadow: none !important;
	text-shadow: none;
	font-size: 2.6rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.sc-scope .sc-related__arrow:hover {
	opacity: 1;
}

.sc-scope .sc-related__arrow:focus-visible {
	outline: 2px solid var(--sc-signal);
	outline-offset: 2px;
}

/* At an end of the travel. Still focusable and still announced, just visibly
   spent — removing them instead would make the pair jump about. */
.sc-scope .sc-related__arrow[disabled] {
	opacity: 0.18;
	cursor: default;
}

/* The track. Native scrolling with snap points: the section is usable with a
   finger and a trackpad whether or not the script ever arrives. */
.sc-scope .sc-cards--carousel {
	--sc-card-gap: clamp(1rem, 2.5vw, 2rem);
	--sc-cards-per-view: 3;

	display: flex;
	gap: var(--sc-card-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Room for the cards' hover lift and for a focus ring, both of which would
	   otherwise be clipped by the scroll container. */
	padding: 4px 0;
}

.sc-scope .sc-cards--carousel::-webkit-scrollbar {
	display: none;
}

/* Width derived from the count and the gap, so changing either at a
   breakpoint takes one line rather than a new calc. */
.sc-scope .sc-cards--carousel > .sc-card {
	flex: 0 0 calc(
		(100% - (var(--sc-cards-per-view) - 1) * var(--sc-card-gap))
		/ var(--sc-cards-per-view)
	);
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.sc-scope .sc-cards--carousel {
		--sc-cards-per-view: 2;
	}
}

@media (max-width: 700px) {
	.sc-scope .sc-cards--carousel {
		--sc-cards-per-view: 1;
	}
}

/* scrollBy( { behavior: "smooth" } ) resolves against this property, so
   turning it off here is what actually stops the animation. */
@media (prefers-reduced-motion: reduce) {
	.sc-scope .sc-cards--carousel {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------------------ Lightbox */

/* Full screen, opaque, no page showing through: at this size the photo is the
   whole point and a translucent backdrop only puts the article behind it back
   in the frame.

   Note the lightbox lives on <body>, outside .sc-scope, because a fixed
   element inside a container-type ancestor would size itself to that ancestor
   instead of the viewport. Nothing here inherits the plugin's resets, so the
   controls carry their own — and the same specificity guard the simulator
   needed, for the same reason. */
.sc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #161418;
	padding: clamp(1rem, 4vw, 3rem);
}

.sc-lightbox[hidden] {
	display: none;
}

/* One photo, as large as the screen allows. There is nothing else competing
   for the space, so the only limits are the viewport and the padding. */
.sc-lightbox__img {
	max-width: 100%;
	max-height: 88vh;
	object-fit: contain;
}

.sc-lightbox .sc-lightbox__btn,
.sc-lightbox .sc-lightbox__btn:hover,
.sc-lightbox .sc-lightbox__btn:focus,
.sc-lightbox .sc-lightbox__btn:active {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	z-index: 2;
	border: 0;
	background: none !important;
	background-image: none !important;
	color: #edeae4 !important;
	box-shadow: none !important;
	text-shadow: none;
	font-size: 2.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 1rem;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.sc-lightbox .sc-lightbox__btn:hover {
	opacity: 1;
}

.sc-lightbox .sc-lightbox__btn:focus-visible {
	outline: 2px solid #edeae4;
	outline-offset: 3px;
}

/* Same mark as the simulator's: a circle with two crossed bars, drawn here
   rather than taken from a font. */
.sc-lightbox .sc-lightbox__btn--close,
.sc-lightbox .sc-lightbox__btn--close:hover,
.sc-lightbox .sc-lightbox__btn--close:focus,
.sc-lightbox .sc-lightbox__btn--close:active {
	top: clamp(1rem, 2vw, 1.75rem);
	right: clamp(1rem, 2vw, 1.75rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.25rem, 3vw, 2.75rem);
	height: clamp(2.25rem, 3vw, 2.75rem);
	padding: 0;
	border: 1px solid rgba(237, 234, 228, 0.45) !important;
	border-radius: 50% !important;
	opacity: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sc-lightbox .sc-lightbox__btn--close:hover {
	border-color: #edeae4 !important;
	background: #edeae4 !important;
	color: #161418 !important;
}

.sc-lightbox__x {
	position: relative;
	display: block;
	width: 38%;
	height: 38%;
}

.sc-lightbox__x::before,
.sc-lightbox__x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor;
}

.sc-lightbox__x::before {
	transform: translateY(-50%) rotate(45deg);
}

.sc-lightbox__x::after {
	transform: translateY(-50%) rotate(-45deg);
}

.sc-lightbox .sc-lightbox__btn--prev {
	left: 0.25rem;
}

.sc-lightbox .sc-lightbox__btn--next {
	right: 0.25rem;
}

.sc-lightbox__counter {
	position: absolute;
	top: clamp(1rem, 2vw, 1.75rem);
	left: clamp(1rem, 2vw, 1.75rem);
	font-family: var(--sc-data, "Michroma", monospace);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: rgba(237, 234, 228, 0.7);
}

/* ------------------------------------------------- The lightbox on a phone */

/* No arrows at all here. On a wide screen a photo leaves margins down both
   sides and the chevrons sit in them; a phone has no such margins, so they
   were laid over the picture itself. Moving them below the frame fixed the
   overlap but bought nothing — the swipe gesture already does the same job,
   it is what a photo viewer is expected to answer to on a touch screen, and
   it is the gesture a thumb reaches for before it looks for a button. The
   counter is left to say how many there are.
 *
 * With the lane gone the photo takes the height back. It is capped at 100% of
 * the container's content box rather than at a hand-written vh figure, so it
 * follows the padding automatically instead of having to be kept in step
 * with it. */
@media (max-width: 767px) {
	.sc-lightbox {
		padding:
			3.5rem
			0.75rem
			calc(1.25rem + env(safe-area-inset-bottom, 0px));
	}

	.sc-lightbox__img {
		max-height: 100%;
	}

	/* Flagged, because this is the one thing on the overlay that must not
	   come back: the theme styles bare <button> elements and its stylesheet
	   is enqueued after this one. */
	.sc-lightbox .sc-lightbox__btn--prev,
	.sc-lightbox .sc-lightbox__btn--next {
		display: none !important;
	}
}

/* ------------------------------------------------- Two columns on desktop */

/* From 1024px the collage takes the left 70% and the name plus numbers stack
   down the right 30%. Moving the stats out of the vertical flow is what buys
   the extra size — the hero is no longer collage height PLUS a stats row. */
@media (min-width: 1024px) {
	/* The hero owns the first screen. Without a floor the section ended
	   wherever the collage did and the dark band of the next one showed
	   above the fold; with it, the surplus becomes breathing room around
	   the composition instead. The collage cap below is derived from the
	   same 100vh, so nothing overflows. */
	.sc-scope .sc-hero {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* The admin bar is fixed over the viewport and pushes the document down,
	   so for a logged-in editor a full 100vh would hang below the fold. */
	body.admin-bar .sc-scope .sc-hero {
		min-height: calc(100vh - 32px);
	}

	.sc-scope .sc-hero__grid {
		width: 100%;
	}

	/* The media column is 60% of the row, but never taller than the screen —
	   88vh on the width translates to about 80vh of height. Whatever the cap
	   leaves over goes to the info column rather than to empty side margins,
	   which is what keeps the page full width. */
	.sc-scope .sc-hero__grid {
		grid-template-columns: min(60%, calc((100vh - var(--sc-menu) - 100px) * 1.1)) minmax(240px, 1fr);
		/* Two rows sized by their content, the third flexible so it swallows
		   whatever the collage leaves over. Without the flexible row the
		   collage's height gets shared out across the others and pushes the
		   column apart. */
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"media head"
			"media stats"
			"media sim";
		/* The gap equals the page padding, and the info column takes every
		   pixel that is left. That is what makes the two margins around it
		   match: collage → column is one --sc-pad, column → page edge is the
		   other. The previous space-between capped the column at 38rem and
		   dumped the surplus into the gap, so the left one always read wider
		   than the right. */
		column-gap: var(--sc-pad);
		align-items: start;
	}

	.sc-scope .sc-collage {
		width: 100%;
	}

	.sc-scope .sc-hero__media {
		align-self: center;
	}

	/* The title now sizes against its own column, not the whole hero. */
	.sc-scope .sc-hero__head {
		container-type: inline-size;
		margin-bottom: 1.25rem;
	}

	.sc-scope .sc-hero__title {
		font-size: clamp(0.9rem, 6cqw, 2.4rem);
	}

	/* One row, tight. Spreading three figures down the full height of the
	   collage turned them into three unrelated islands; side by side they read
	   as one statement about the car. Their own container so the type sizes
	   off the column rather than the whole hero. */
	.sc-scope .sc-stats {
		container-type: inline-size;
		grid-template-columns: repeat(3, 1fr);
		align-self: start;
		margin: 0;
	}

	.sc-scope .sc-stat__value {
		font-size: clamp(1.05rem, 5.2cqw, 1.85rem);
		line-height: 1;
	}

	.sc-scope .sc-stat__label {
		margin-top: 0.55rem;
		font-size: 0.7rem;
	}

	/* Title and figures sit as one block against the middle of the collage:
	   Everything sits at the top of the column; the slack collects underneath,
	   where it reads as margin rather than as three separated islands. */
	.sc-scope .sc-hero__sim {
		align-self: start;
		margin-top: var(--sc-hero-rhythm);
	}
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {

	.sc-scope .sc-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 899, not 900. At exactly 900 both this and the block above it matched, so
   the description was positioned for two columns inside a grid that had just
   been collapsed to one. */
@media (max-width: 899px) {
	.sc-scope .sc-story--split {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	/* Three short values still fit across a phone, so the row survives —
	   which keeps the composition recognisable at every width. */
	.sc-scope .sc-cards {
		grid-template-columns: 1fr;
	}

	.sc-scope .sc-spec__label {
		width: 48%;
	}

}

@media (prefers-reduced-motion: reduce) {
	.sc-scope *,
	.sc-lightbox * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}