/*
Theme Name: Long Slot
Theme URI: https://example.com/
Author: SitePlot Media
Author URI: https://example.com/
Description: A reference-index theme for a long slot toaster site. Built around one signature device — a slot drawn to scale against an inch rule — with a cool porcelain palette, a grotesque/serif/mono type trio, and every measurement rendered as text as well as graphics. Companion to the Long Slot Engine plugin.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: longslot
Tags: one-column, custom-menu, featured-images, accessibility-ready
*/

/* =========================================================================
   TOKENS

   Palette: cool porcelain and chrome, with the element glow as the single
   accent and one warm note (crumb) reserved for the browning ramp. The warm
   note is deliberately quarantined — the moment it spreads to backgrounds the
   whole thing turns into a paper-and-ink site, which is what this is not.

   Type: three roles that do three different jobs.
     display — a heavy grotesque, tight, for headlines and eyebrows
     body    — a serif, for prose you actually read
     mono    — for every measurement, model number and data label
   A number in a mono face reads as a reading off an instrument, which is what
   it is. That is the whole argument for the third face.
   ====================================================================== */

:root {
	--enamel:      #F6F8F9;
	--panel:       #FFFFFF;
	--panel-sunk:  #EEF2F4;
	--ink:         #12171C;
	--ink-2:       #4A5762;
	--ink-3:       #6F7C86;
	--slate:       #263038;
	--slate-2:     #37444E;
	--element:     #C93A12;
	--element-lit: #E9541F;
	--chrome:      #CBD5DA;
	--chrome-soft: #E4EAED;
	--crumb:       #E9D9BC;
	--good:        #1F6F4A;

	--display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--body: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--shell: 1180px;
	--gutter: clamp(18px, 4vw, 40px);
	--measure: 66ch;
	--radius: 3px;
	--rule: 1px solid var(--chrome);
	--rule-soft: 1px solid var(--chrome-soft);
	--shadow: 0 1px 2px rgba(18, 23, 28, .05), 0 8px 24px -18px rgba(18, 23, 28, .3);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--enamel);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--element); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--element-lit); }

:focus-visible {
	outline: 3px solid var(--element-lit);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text, .skip {
	position: absolute;
	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;
}
.skip:focus {
	position: fixed; top: 10px; left: 10px; z-index: 200;
	width: auto; height: auto; margin: 0; padding: 10px 16px;
	clip: auto; clip-path: none;
	background: var(--slate); color: #fff;
	font-family: var(--display); font-weight: 700; font-size: 14px;
	border-radius: var(--radius);
}

.mono {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: .93em;
	letter-spacing: -.01em;
}

/* ONE GRID. The masthead bar, the hero inner, every .wrap and the footer all
   resolve to the same rule. Two containers each centring their own width is
   what makes a logo and an H1 sit on different left edges, and it looks wrong
   long before anyone can say why. */
.wrap,
.masthead__bar,
.hero__inner,
.site-foot__wrap {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
	width: 100%;
}

/* =========================================================================
   THE RAMP — the one flourish
   ====================================================================== */

.ramp {
	height: 5px;
	background: linear-gradient(
		to right,
		#F5E7CC 0%, #E7CB9A 17%, #D3A867 34%,
		#B47F3E 50%, #8C5626 67%, #5C3314 84%, #31200F 100%
	);
}

/* =========================================================================
   MASTHEAD
   ====================================================================== */

.masthead {
	position: sticky; top: 0; z-index: 60;
	background: var(--panel);
	border-bottom: var(--rule);
}
.masthead__bar {
	display: flex; align-items: center; gap: 24px;
	min-height: 72px;
}

/* THE WORDMARK IS LONGER THAN THE PLACEHOLDER IT WAS BUILT AGAINST.
   "Long Slot Toasters" measures 333px at 19px, against 190px for the working
   title. Measured across the widths, the brand was a shrinkable flex item, so
   between 861 and 1100px its BOX was squeezed narrower than its own text and
   the glyphs ran under the navigation. Nothing wrapped, so a screenshot at
   1440 showed nothing wrong.
   Three fixes: never shrink, never wrap, and scale the type down rather than
   letting it collide. */
.brand {
	display: flex; align-items: center; gap: 11px;
	text-decoration: none; color: var(--ink);
	margin-right: auto;
	flex: 0 0 auto;
	min-width: 0;
}
.brand .lst-mark { color: var(--slate); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(15px, 1.55vw, 19px);
	letter-spacing: -.025em;
	white-space: nowrap;
}
.brand__tag {
	font-family: var(--mono);
	font-size: 10.5px; letter-spacing: .01em;
	color: var(--ink-3); text-transform: none;
	margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: 22px; }
.nav__list {
	display: flex; align-items: center; gap: 22px;
	list-style: none; margin: 0; padding: 0;
}
.nav__list li { position: relative; }
.nav__list a {
	font-family: var(--display);
	font-weight: 600; font-size: 14.5px; letter-spacing: -.005em;
	color: var(--ink); text-decoration: none;
	padding: 6px 0; display: inline-block;
	border-bottom: 2px solid transparent;
}
.nav__list a:hover,
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a { border-bottom-color: var(--element); color: var(--ink); }

.nav__list .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 70;
	min-width: 220px; margin: 0; padding: 8px 0;
	list-style: none;
	background: var(--panel);
	border: var(--rule); border-radius: var(--radius);
	box-shadow: var(--shadow);
	visibility: hidden; opacity: 0;
	transition: opacity .12s ease;
}
.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
.nav__list .sub-menu a { display: block; padding: 7px 16px; border: 0; }
.nav__list .sub-menu a:hover { background: var(--panel-sunk); }
.nav__list .sub-menu .sub-menu { top: 0; left: 100%; }
.nav__list li.flip-left > .sub-menu { left: auto; right: 0; }
.nav__list li.flip-left .sub-menu .sub-menu { left: auto; right: 100%; }

.nav__search { display: flex; align-items: stretch; }
.nav__search input {
	font-family: var(--mono); font-size: 12.5px;
	width: 150px; padding: 7px 10px;
	border: var(--rule); border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
	background: var(--enamel); color: var(--ink);
}
.nav__search button {
	display: grid; place-items: center;
	width: 36px; padding: 0; cursor: pointer;
	background: var(--slate); color: #fff;
	border: 1px solid var(--slate);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.nav__search button:hover { background: var(--slate-2); }

.navtoggle {
	display: none; align-items: center; gap: 7px;
	background: none; border: var(--rule); border-radius: var(--radius);
	padding: 8px 12px; cursor: pointer;
	font-family: var(--display); font-weight: 700; font-size: 13px;
	color: var(--ink);
}

/* =========================================================================
   SHARED FURNITURE
   ====================================================================== */

.eyebrow {
	font-family: var(--mono);
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--element); margin: 0 0 10px;
}
.eyebrow a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 800; letter-spacing: -.028em;
	line-height: 1.12; color: var(--ink);
	margin: 0 0 .5em;
	text-wrap: balance;
}

.btn {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--display); font-weight: 700; font-size: 14.5px;
	padding: 12px 20px; border-radius: var(--radius);
	text-decoration: none; cursor: pointer; border: 1px solid transparent;
	transition: background .14s ease, color .14s ease;
}
.btn--solid { background: var(--slate); color: #fff; border-color: var(--slate); }
.btn--solid:hover { background: var(--element); border-color: var(--element); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--chrome); }
.btn--ghost:hover { border-color: var(--slate); color: var(--ink); background: var(--panel); }

.crumbs { padding: 20px 0 0; }
.crumbs__list {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	list-style: none; margin: 0; padding: 0;
	font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.crumbs__item + .crumbs__item::before {
	content: "/"; margin-right: 8px; color: var(--chrome);
}
.crumbs__item a { color: var(--ink-2); text-decoration: none; }
.crumbs__item a:hover { color: var(--element); }

.pagehead { padding: 26px 0 30px; border-bottom: var(--rule); margin-bottom: 34px; }
.pagehead__h1 { font-size: clamp(30px, 4.6vw, 46px); margin-bottom: 14px; }
.pagehead__stand { max-width: var(--measure); color: var(--ink-2); margin: 0 0 10px; font-size: 18px; }
.pagehead__meta { color: var(--ink-3); font-size: 12.5px; }

.prose { max-width: var(--measure); }
.prose h2 { font-size: 25px; margin-top: 1.7em; }
.prose h3 { font-size: 19.5px; margin-top: 1.5em; }
.prose p { margin: 0 0 1.15em; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.ls-tablewrap--prose {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.4em 0;
	border: var(--rule); border-radius: var(--radius);
	background: var(--panel);
}
.prose table {
	width: 100%; border-collapse: collapse; margin: 0;
	font-family: var(--mono); font-size: 13px;
	min-width: 520px;
}
.ls-tablewrap--prose th:first-child, .ls-tablewrap--prose td:first-child { border-left: 0; }
.ls-tablewrap--prose th:last-child, .ls-tablewrap--prose td:last-child { border-right: 0; }
.prose th, .prose td { border: var(--rule-soft); padding: 9px 11px; text-align: left; vertical-align: top; }
.prose thead th { background: var(--slate); color: #fff; font-weight: 600; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--panel-sunk); padding: 2px 5px; border-radius: 2px; }
.prose blockquote {
	margin: 1.4em 0; padding: 4px 0 4px 20px;
	border-left: 3px solid var(--element); color: var(--ink-2);
}

.main { display: block; }

/* =========================================================================
   HERO — asymmetric split, not a banded gradient
   ====================================================================== */

.hero { background: var(--panel); border-bottom: var(--rule); }
.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
	padding-block: clamp(38px, 6vw, 68px) clamp(30px, 4vw, 48px);
}
.hero__h1 {
	font-size: clamp(32px, 5.1vw, 55px);
	line-height: 1.04;
	margin-bottom: 20px;
}
.hero__stand {
	max-width: 56ch; color: var(--ink-2);
	font-size: 18px; margin: 0 0 1.05em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero__show {
	background: var(--enamel);
	border: var(--rule);
	border-radius: var(--radius);
	padding: 20px 20px 12px;
}
.hero__gaugelab {
	font-family: var(--mono); font-size: 10.5px;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-3); margin: 0 0 14px;
	padding-bottom: 10px; border-bottom: var(--rule-soft);
}
.hero__gaugerow + .hero__gaugerow { margin-top: 14px; padding-top: 14px; border-top: var(--rule-soft); }
.hero__gaugename {
	display: block;
	font-family: var(--display); font-weight: 700; font-size: 13px;
	letter-spacing: -.01em; color: var(--ink); margin-bottom: 2px;
}
.hero__gaugekey {
	display: flex; flex-wrap: wrap; gap: 14px;
	margin: 16px 0 4px; padding-top: 12px; border-top: var(--rule-soft);
	font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
}
.hero__key { display: inline-flex; align-items: center; gap: 6px; }
.hero__key::before {
	content: ""; width: 14px; height: 8px; border-radius: 1px; display: inline-block;
}
.hero__key--ok::before { background: var(--slate); }
.hero__key--short::before { background: var(--element); }
.hero__key--none::before { background: var(--chrome-soft); border: 1px dashed var(--ink-3); }

.hero__empty { color: var(--ink-2); font-size: 15px; }

.counters {
	max-width: var(--shell); margin-inline: auto;
	padding: 0 var(--gutter) clamp(30px, 4vw, 46px);
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
	background: transparent;
}
.counter {
	border-left: 3px solid var(--chrome);
	padding: 4px 0 4px 14px;
}
.counter:first-child { border-left-color: var(--element); }
.counter__n {
	display: block;
	font-family: var(--mono); font-weight: 600;
	font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em;
	color: var(--ink); line-height: 1.1;
}
.counter__l {
	display: block; margin-top: 4px;
	font-size: 13px; color: var(--ink-2); line-height: 1.35;
}

/* =========================================================================
   BANDS
   ====================================================================== */

.band { padding-block: clamp(42px, 6vw, 74px); }
.band + .band { border-top: var(--rule); }
.band--axes { background: var(--panel); }
.band--finder { background: var(--panel-sunk); }
.band--index { background: var(--enamel); }
.band--crit { background: var(--panel); }
.band--history { background: var(--slate); color: #E7EDF0; }

.band__h2 { font-size: clamp(25px, 3.4vw, 35px); margin-bottom: 14px; }
.band__lede { max-width: var(--measure); color: var(--ink-2); margin: 0 0 28px; font-size: 17px; }
.band__after { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

.band--history .eyebrow { color: var(--crumb); }
.band--history h2, .band--history h3 { color: #fff; }
.band--history a { color: var(--crumb); }

/* Axis cards */
.axcards {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px; margin-top: 30px;
}
.axcard {
	border: var(--rule); border-top: 3px solid var(--slate);
	border-radius: var(--radius);
	padding: 22px 20px 24px;
	background: var(--enamel);
	display: flex; flex-direction: column;
}
.axcard:nth-child(2) { border-top-color: var(--element); }
.axcard:nth-child(3) { border-top-color: var(--ink-3); }
.axcard__icon { color: var(--slate); display: block; margin-bottom: 12px; }
.axcard__title { font-size: 20px; margin-bottom: 4px; }
.axcard__num {
	font-family: var(--mono); font-size: 22px; font-weight: 600;
	color: var(--element); margin: 0 0 12px; letter-spacing: -.02em;
}
.axcard__body { margin: 0; font-size: 15.5px; color: var(--ink-2); }

/* Criteria */
.ls-crit {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px; background: var(--chrome-soft);
	border: var(--rule-soft); margin-top: 28px;
}
.ls-crit__item { background: var(--panel); padding: 22px 20px; }
.ls-crit__n {
	display: block;
	font-family: var(--mono); font-size: 12px; font-weight: 600;
	color: var(--element); letter-spacing: .06em; margin-bottom: 10px;
}
.ls-crit__title { font-size: 17.5px; margin-bottom: 7px; }
.ls-crit__body { margin: 0; font-size: 15px; color: var(--ink-2); }

/* Hoax callout */
.hoax {
	border-left: 3px solid var(--element-lit);
	padding-left: 22px; margin: 0 0 40px;
	max-width: var(--measure);
}
.hoax__body { color: #C8D3D9; margin: 0 0 1em; font-size: 17.5px; }

/* =========================================================================
   THE GAUGE — the signature
   ====================================================================== */

.ls-gauge { margin: 0; }
.ls-gauge__svg { display: block; width: 100%; height: auto; }
.ls-gauge__track { fill: var(--chrome-soft); }
.ls-gauge__fill { fill: var(--slate); }
.ls-gauge__fill--short { fill: var(--element); }
.ls-gauge__bar-line {
	stroke: var(--element); stroke-width: 1.5; stroke-dasharray: 3 3;
}
.ls-gauge__rule { stroke: var(--chrome); stroke-width: 1; }
.ls-gauge__tick { stroke: var(--ink-3); stroke-width: 1; }
/* 9.5px in a 520-unit viewBox rendered at 463px comes out around 8.5px on
   screen, which measured as illegible. The floor is what it looks like where
   it lands, not what the number says. */
.ls-gauge__num {
	font-family: var(--mono); font-size: 12px; fill: var(--ink-2);
}
.ls-gauge__bar-label {
	font-family: var(--mono); font-size: 11px;
	letter-spacing: .04em; fill: var(--element);
}
.ls-gauge__nodata {
	font-family: var(--mono); font-size: 11px;
	fill: var(--ink-3); font-style: normal;
}
.ls-gauge--unknown .ls-gauge__track { fill: repeating-linear-gradient(0deg, #eee, #eee 2px); fill: var(--panel-sunk); }
.ls-gauge__cap {
	display: none;
	font-family: var(--mono); font-size: 11.5px;
	color: var(--ink-3); margin-top: 6px; line-height: 1.5;
}
.plate .ls-gauge__cap { display: block; }

/* =========================================================================
   SPEC PLATE
   ====================================================================== */

.plate {
	background: var(--panel);
	border: var(--rule); border-radius: var(--radius);
	padding: clamp(20px, 3vw, 30px);
	margin: 30px 0 36px;
	box-shadow: var(--shadow);
}
.plate__head {
	display: flex; flex-wrap: wrap; align-items: baseline;
	justify-content: space-between; gap: 12px;
	padding-bottom: 14px; margin-bottom: 22px; border-bottom: var(--rule);
}
.plate__title { font-size: 21px; margin: 0; }
.plate__meta { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.plate__meta .mono { color: var(--ink); font-weight: 600; }

.axes {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px; background: var(--chrome-soft);
	border: var(--rule-soft); margin-bottom: 26px;
}
.axis {
	background: var(--panel); padding: 16px 16px 18px;
	display: grid; grid-template-rows: auto auto auto auto; align-content: start;
}
.axis__icon { color: var(--slate); margin-bottom: 8px; }
.axis__label {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-3);
}
.axis__value {
	font-family: var(--mono); font-size: 27px; font-weight: 600;
	letter-spacing: -.03em; color: var(--ink); line-height: 1.2; margin: 2px 0 8px;
}
.axis--gap { background: var(--panel-sunk); }
.axis--gap .axis__value { font-size: 15px; color: var(--element); font-weight: 500; }
.axis--gap .axis__icon { color: var(--ink-3); }
.axis__note { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }

.specs { margin: 24px 0 0; }
.specs__row {
	display: grid; grid-template-columns: minmax(150px, 34%) 1fr;
	gap: 16px; padding: 10px 0; border-bottom: var(--rule-soft);
}
.specs__row dt {
	font-family: var(--display); font-weight: 600; font-size: 14px;
	color: var(--ink-2);
}
.specs__row dd { margin: 0; color: var(--ink); }
.specs__qual { font-family: var(--body); font-size: 13px; color: var(--ink-3); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tag {
	font-family: var(--mono); font-size: 11.5px;
	background: var(--panel-sunk); border: var(--rule-soft);
	padding: 3px 8px; border-radius: 2px; color: var(--ink-2);
}

.judgement {
	margin-top: 24px; border-top: var(--rule); padding-top: 18px;
	display: grid; gap: 12px;
}
.judgement__row {
	display: grid; grid-template-columns: 128px minmax(0, 1fr);
	gap: 14px; margin: 0; align-items: baseline;
}
.judgement__label {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-3);
}
.judgement__row--best .judgement__label { color: var(--good); }
.judgement__row--watch .judgement__label { color: var(--element); }
.judgement__text { font-size: 16px; color: var(--ink); }

.navtoggle__text { font: inherit; }
.foot-nav, .foot-purpose, .hero__say, .hero__gauges, .model { display: block; }
.page { padding-bottom: 50px; }

.verify {
	display: flex; gap: 11px; align-items: flex-start;
	margin: 24px 0 0; padding: 14px 16px;
	background: var(--panel-sunk); border-left: 3px solid var(--good);
	font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
}
.verify .lst-icon { flex: none; color: var(--good); margin-top: 2px; }
.verify strong { color: var(--ink); }
.verify--published { border-left-color: var(--element); }
.verify--published .lst-icon { color: var(--element); }
.verify--none { border-left-color: var(--ink-3); }
.verify--none .lst-icon { color: var(--ink-3); }

/* =========================================================================
   MODEL PAGE
   ====================================================================== */

.model__head { padding: 26px 0 4px; }
.model__h1 { font-size: clamp(29px, 4.4vw, 44px); margin-bottom: 14px; }
.model__flags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.model__stand { max-width: var(--measure); font-size: 19px; color: var(--ink-2); margin: 0; }
.model__figure { margin: 24px 0; }
.model__figure img { border: var(--rule); border-radius: var(--radius); }
.model__body { margin-bottom: 34px; }

.flag {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
	padding: 5px 10px; border-radius: 2px; border: 1px solid;
}
.flag--yes { color: var(--good); border-color: var(--good); background: rgba(31, 111, 74, .07); }
.flag--no { color: var(--element); border-color: var(--element); background: rgba(201, 58, 18, .06); }
.flag--unknown { color: var(--ink-3); border-color: var(--chrome); background: var(--panel-sunk); }

.pill, .ls-pill {
	display: inline-block;
	font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
	padding: 4px 9px; border-radius: 2px; white-space: nowrap;
	border: 1px solid var(--chrome); background: var(--panel-sunk); color: var(--ink-2);
}
.pill--current, .ls-pill--current { border-color: var(--good); color: var(--good); background: rgba(31, 111, 74, .07); }
.pill--discontinued, .ls-pill--discontinued { border-color: var(--ink-3); color: var(--ink-2); background: var(--panel-sunk); }

.evi, .ls-evi {
	font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
	padding: 4px 8px; border-radius: 2px;
	background: var(--slate); color: #fff;
}
.evi--published, .ls-evi--published { background: var(--chrome-soft); color: var(--ink-2); }

.ls-axes { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-left: 4px; }
.ls-model { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

/* What fits */
.fits { margin: 0 0 40px; }
.fits__title { font-size: 22px; margin-bottom: 8px; }
.fits__note { max-width: var(--measure); color: var(--ink-2); font-size: 15px; margin: 0 0 18px; }
.fits__list { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.fits__item {
	display: grid;
	grid-template-columns: 26px minmax(0, 1.1fr) 110px minmax(0, 1.4fr);
	gap: 14px; align-items: center;
	padding: 13px 0; border-bottom: var(--rule-soft);
}
.fits__icon { display: grid; place-items: center; }
.fits__item--yes .fits__icon { color: var(--good); }
.fits__item--tight .fits__icon { color: #B87A16; }
.fits__item--no .fits__icon { color: var(--element); }
.fits__item--unknown .fits__icon { color: var(--ink-3); }
.fits__what { font-family: var(--display); font-weight: 600; font-size: 15px; }
.fits__need { font-family: var(--mono); font-weight: 400; color: var(--ink-3); margin-left: 8px; font-size: 12px; }
.fits__verdict { font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em; }
.fits__item--yes .fits__verdict { color: var(--good); }
.fits__item--no .fits__verdict { color: var(--element); }
.fits__why { font-size: 14px; color: var(--ink-2); }

.related { margin: 0 0 40px; }
.related__title { font-size: 22px; margin-bottom: 18px; }
.correct {
	margin: 0 0 60px; padding: 16px 18px;
	background: var(--panel); border: var(--rule); border-radius: var(--radius);
	font-size: 15px; color: var(--ink-2);
}

/* =========================================================================
   CARDS
   ====================================================================== */

.cards {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.cards--index { margin-bottom: 60px; }

.card {
	background: var(--panel);
	border: var(--rule); border-radius: var(--radius);
	padding: 20px 20px 16px;
	display: flex; flex-direction: column;
}
.card--short { border-left: 3px solid var(--element); }
.card__head { margin-bottom: 14px; }
.card__title { font-size: 18.5px; margin: 0; line-height: 1.2; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a:hover { color: var(--element); }
.card__model { margin: 4px 0 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }

.card__axes {
	display: flex; gap: 18px; list-style: none;
	margin: 12px 0 14px; padding: 10px 0;
	border-top: var(--rule-soft); border-bottom: var(--rule-soft);
	font-family: var(--mono); font-size: 14px; font-weight: 600;
}
.card__axes span {
	display: inline-block; width: 15px;
	color: var(--ink-3); font-weight: 400; font-size: 11px;
}
.card__blurb { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); }
.card__best, .card__watch { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.card__bestlabel, .card__watchlabel {
	display: inline-block;
	font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
	text-transform: uppercase; color: var(--ink-3); margin-right: 6px;
}
.card__watchlabel { color: var(--element); }
.card__foot {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: auto; padding-top: 14px; border-top: var(--rule-soft);
}
.card__more {
	margin-left: auto;
	font-family: var(--display); font-weight: 600; font-size: 13.5px;
	text-decoration: none;
}
.card__more::after { content: " \2192"; }

/* =========================================================================
   THE INDEX TABLE
   ====================================================================== */

.ls-tablewrap { overflow-x: auto; border: var(--rule); border-radius: var(--radius); background: var(--panel); }
.ls-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.ls-table__cap {
	caption-side: top; text-align: left;
	font-family: var(--body); font-size: 14px; color: var(--ink-2);
	padding: 14px 16px; border-bottom: var(--rule);
}
.ls-table thead th {
	background: var(--slate); color: #fff;
	font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	text-align: left; padding: 10px 14px; white-space: nowrap;
}
.ls-table th.num, .ls-table td.num { text-align: right; }
.ls-table tbody th, .ls-table tbody td {
	padding: 12px 14px; border-bottom: var(--rule-soft); vertical-align: top;
}
.ls-table tbody tr:last-child th, .ls-table tbody tr:last-child td { border-bottom: 0; }
.ls-table tbody tr:hover { background: var(--panel-sunk); }
.ls-table tbody th {
	text-align: left; font-weight: 600;
	font-family: var(--display); font-size: 14px; letter-spacing: -.01em;
}
.ls-table tbody th a { color: var(--ink); text-decoration: none; }
.ls-table tbody th a:hover { color: var(--element); }
.ls-table td.num { font-size: 14px; font-weight: 600; }
.ls-table td.is-under { color: var(--element); }
.ls-table tr.is-short { background: rgba(201, 58, 18, .035); }

/* =========================================================================
   FIT FINDER
   ====================================================================== */

.ls-finder {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}
.ls-finder__head { grid-column: 1 / -1; }
.ls-finder__title { font-size: clamp(24px, 3.2vw, 33px); margin-bottom: 10px; }
.ls-finder__sub { max-width: var(--measure); color: var(--ink-2); margin: 0; font-size: 17px; }

.ls-finder__controls {
	background: var(--panel); border: var(--rule); border-radius: var(--radius);
	padding: 22px;
}
.ls-finder__controls label {
	display: block;
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.ls-finder__inputrow { display: flex; align-items: center; gap: 16px; }
.ls-finder__inputrow input[type="range"] { flex: 1; accent-color: var(--element); }
.ls-finder__inputrow output {
	font-family: var(--mono); font-size: 27px; font-weight: 600;
	letter-spacing: -.03em; min-width: 84px; text-align: right; color: var(--ink);
}
.ls-finder__presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.ls-chip {
	font-family: var(--mono); font-size: 11.5px;
	padding: 6px 11px; cursor: pointer;
	background: var(--enamel); color: var(--ink-2);
	border: var(--rule); border-radius: 2px;
}
.ls-chip:hover { border-color: var(--slate); color: var(--ink); }
.ls-chip.is-on { background: var(--slate); border-color: var(--slate); color: #fff; }

.ls-finder__results { display: grid; gap: 14px; }
.ls-finder__group {
	background: var(--panel); border: var(--rule);
	border-left: 3px solid var(--chrome);
	border-radius: var(--radius); padding: 14px 16px;
}
.ls-finder__group--yes { border-left-color: var(--good); }
.ls-finder__group--tight { border-left-color: #B87A16; }
.ls-finder__group--no { border-left-color: var(--element); }
.ls-finder__gtitle {
	font-size: 15px; margin: 0 0 8px;
	display: flex; align-items: center; gap: 8px;
}
.ls-finder__count {
	font-family: var(--mono); font-size: 11px; font-weight: 600;
	background: var(--panel-sunk); color: var(--ink-2);
	padding: 2px 7px; border-radius: 10px;
}
.ls-finder__list { list-style: none; margin: 0; padding: 0; }
.ls-finder__list li {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 5px 0; font-size: 14.5px;
	border-bottom: var(--rule-soft);
}
.ls-finder__list li:last-child { border-bottom: 0; }
.ls-finder__list a { color: var(--ink); text-decoration: none; }
.ls-finder__list a:hover { color: var(--element); }
.ls-finder__len { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.ls-finder__loading, .ls-finder__noscript { color: var(--ink-3); font-size: 15px; margin: 0; }

/* =========================================================================
   TIMELINE
   ====================================================================== */

.ls-time { list-style: none; margin: 0; padding: 0; }
.ls-time__item {
	display: grid; grid-template-columns: 92px minmax(0, 1fr);
	gap: 24px; padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.ls-time__year {
	font-family: var(--mono); font-size: 21px; font-weight: 600;
	letter-spacing: -.02em; color: var(--crumb);
}
.ls-time__title { font-size: 19px; margin: 0 0 8px; }
.ls-time__body p { margin: 0 0 8px; color: #C2CDD4; font-size: 16.5px; max-width: var(--measure); }
.ls-time__src { font-family: var(--mono); font-size: 11.5px; color: #93A2AB; }
.ls-time__src a { color: var(--crumb); }

/* Shade scale */
.ls-shades { display: flex; gap: 4px; margin: 20px 0; flex-wrap: wrap; }
.ls-shades__step { flex: 1; min-width: 74px; text-align: center; }
.ls-shades__swatch { display: block; height: 44px; border-radius: 2px; border: var(--rule-soft); }
.ls-shades__n { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; margin-top: 6px; }
.ls-shades__label { display: block; font-size: 12px; color: var(--ink-2); }

/* =========================================================================
   FORM, ADS, CONSENT
   ====================================================================== */

.ls-form { max-width: 620px; margin: 24px 0; }
.ls-form__row { display: flex; flex-direction: column; margin-bottom: 16px; }
.ls-form__row label {
	font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.ls-form input[type="text"], .ls-form input[type="email"], .ls-form select, .ls-form textarea {
	font-family: var(--body); font-size: 16px;
	padding: 11px 13px; color: var(--ink);
	background: var(--panel); border: var(--rule); border-radius: var(--radius);
	width: 100%;
}
.ls-form textarea { resize: vertical; }
.ls-form__hint { font-size: 13.5px; color: var(--element); margin-top: 5px; }
.ls-form__note { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }
.ls-form__trap { position: absolute; left: -9999px; }
.ls-form__ok {
	padding: 14px 16px; background: rgba(31, 111, 74, .08);
	border-left: 3px solid var(--good); color: var(--ink); font-size: 16px;
}
.ls-form__err {
	padding: 14px 16px; background: rgba(201, 58, 18, .06);
	border-left: 3px solid var(--element); color: var(--ink); font-size: 16px;
}

.ls-ad {
	display: block; margin: 32px auto; max-width: var(--shell);
	padding-inline: var(--gutter); text-align: center;
}
.ls-ad__label {
	display: block;
	font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.ls-ad__unit { min-height: 90px; }

.ls-consent {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
	background: var(--slate); color: #E7EDF0;
	border-top: 3px solid var(--element);
	box-shadow: 0 -8px 32px -20px rgba(0, 0, 0, .7);
}
.ls-consent[hidden] { display: none; }
.ls-consent__inner {
	max-width: var(--shell); margin-inline: auto;
	padding: 18px var(--gutter);
	display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
}
.ls-consent__text { flex: 1 1 420px; }
.ls-consent__head {
	font-family: var(--display); font-weight: 800; font-size: 15px;
	margin: 0 0 5px; color: #fff; letter-spacing: -.01em;
}
.ls-consent__body { margin: 0; font-size: 14px; line-height: 1.5; color: #BFCBD3; }
.ls-consent__body a { color: var(--crumb); }
.ls-consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ls-btn {
	font-family: var(--display); font-weight: 700; font-size: 14px;
	padding: 11px 18px; border-radius: var(--radius);
	cursor: pointer; border: 1px solid transparent;
}
.ls-btn--solid { background: var(--element); color: #fff; border-color: var(--element); }
.ls-btn--solid:hover { background: var(--element-lit); }
.ls-btn--ghost { background: transparent; color: #E7EDF0; border-color: rgba(255, 255, 255, .35); }
.ls-btn--ghost:hover { border-color: #fff; color: #fff; }

.ls-linkish {
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; color: inherit; text-decoration: underline;
	text-underline-offset: 3px;
}

.ls-empty { color: var(--ink-2); font-size: 16px; padding: 24px 0; }

/* =========================================================================
   LISTS, FOOTER
   ====================================================================== */

.postlist { display: grid; gap: 20px; margin-bottom: 50px; }
.postlist__item { border-bottom: var(--rule-soft); padding-bottom: 20px; }
.postlist__title { font-size: 21px; margin-bottom: 6px; }
.postlist__title a { color: var(--ink); text-decoration: none; }
.postlist__title a:hover { color: var(--element); }
.postlist__meta { color: var(--ink-3); font-size: 12px; margin: 0 0 8px; }
.postlist__blurb { margin: 0; color: var(--ink-2); }
.pager { margin-bottom: 60px; font-family: var(--mono); font-size: 14px; }
.pager .page-numbers { padding: 6px 11px; border: var(--rule); margin-right: 5px; text-decoration: none; border-radius: 2px; }
.pager .current { background: var(--slate); color: #fff; border-color: var(--slate); }

.empty { margin-bottom: 60px; }
.searchform { display: flex; gap: 8px; max-width: 460px; margin-top: 16px; }
.searchform input {
	flex: 1; font-family: var(--body); font-size: 16px;
	padding: 11px 13px; border: var(--rule); border-radius: var(--radius);
	background: var(--panel);
}

.site-foot { background: var(--slate); color: #C2CDD4; margin-top: 0; }
.site-foot__wrap {
	display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 64px);
	padding-block: clamp(40px, 5vw, 60px) 34px;
}
.foot-purpose__title { color: #fff; font-size: 22px; margin-bottom: 12px; }
.foot-purpose__lede { margin: 0 0 22px; font-size: 16px; color: #C2CDD4; max-width: 62ch; }
.pledges { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pledges__item {
	display: flex; align-items: flex-start; gap: 11px;
	font-family: var(--display); font-weight: 600; font-size: 14.5px; color: #E7EDF0;
}
.pledges__item .lst-icon { color: var(--crumb); flex: none; margin-top: 1px; }

.foot-nav__title {
	color: #fff; font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; font-family: var(--mono); font-weight: 600;
	margin-bottom: 14px;
}
.foot-nav__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.foot-nav__list li { margin-bottom: 8px; break-inside: avoid; }
.foot-nav__list a, .foot-nav__list .ls-linkish {
	color: #C2CDD4; text-decoration: none; font-size: 14.5px;
}
.foot-nav__list a:hover, .foot-nav__list .ls-linkish:hover { color: #fff; text-decoration: underline; }

.site-foot__legal {
	max-width: var(--shell); margin: 0 auto; padding: 20px var(--gutter) 34px;
	border-top: 1px solid rgba(255, 255, 255, .13);
	font-size: 13px; color: #8FA0AA; line-height: 1.6;
}

/* =========================================================================
   RESPONSIVE
   Breakpoints: 1000 and 700. The finder and the footer use 900 because two
   columns of prose need more room than a card grid does.
   ====================================================================== */

@media (max-width: 1000px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__show { order: 2; }
	.counters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
	.axcards, .ls-crit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cards { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.ls-finder, .site-foot__wrap { grid-template-columns: 1fr; }
	.fits__item { grid-template-columns: 24px minmax(0, 1fr) 100px; }
	.fits__why { grid-column: 2 / -1; font-size: 13.5px; }
}

@media (max-width: 1040px) {
	.navtoggle { display: inline-flex; }
	.nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--panel); border-bottom: var(--rule);
		padding: 10px var(--gutter) 18px;
		box-shadow: var(--shadow);
	}
	.nav.is-open { display: flex; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__list a { padding: 11px 0; border-bottom: var(--rule-soft); }
	.nav__list .sub-menu {
		position: static; visibility: visible; opacity: 1;
		border: 0; box-shadow: none; padding: 0 0 0 16px;
	}
	.nav__search { margin-top: 14px; }
	.nav__search input { width: 100%; }
	.masthead__bar { position: relative; flex-wrap: nowrap; }
}

@media (max-width: 560px) {
	/* Icon only. The label costs ~54px, which is the difference between the
	   wordmark fitting and not. aria-label on the button keeps it announced. */
	.navtoggle__text { display: none; }
	.navtoggle { padding: 8px 10px; }
}

@media (max-width: 700px) {
	body { font-size: 16px; }
	.counters { grid-template-columns: 1fr; }
	.axcards, .ls-crit, .axes { grid-template-columns: 1fr; }
	.specs__row { grid-template-columns: 1fr; gap: 3px; }
	.ls-time__item { grid-template-columns: 1fr; gap: 6px; }
	.foot-nav__list { columns: 1; }
	.fits__item { grid-template-columns: 24px minmax(0, 1fr); }
	.fits__verdict { grid-column: 2; }
	.ls-consent__inner { padding-block: 15px; }
	.ls-consent__actions { width: 100%; }
	.ls-consent__actions .ls-btn { flex: 1; justify-content: center; }
	.brand__tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.masthead, .site-foot, .ls-consent, .ls-ad, .nav, .ramp { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	.plate, .card { break-inside: avoid; }
}