/* Quarterlight: one photographer's cove in daylight. The floor line is the only structure. */
@font-face { font-family: "Zalando Sans Expanded"; src: url("/assets/fonts/specimen/zalando-sans-expanded-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Faustina"; src: url("/assets/fonts/specimen/faustina-var.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Faustina"; src: url("/assets/fonts/specimen/faustina-var-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }

.spec-quarterlight {
  --ql-bg: #A9ABAD; --ql-ink: #101112; --ql-ink-2: rgba(16, 17, 18, .74); --ql-paint: #A8231C; --ql-light: #E4E4E1;
  --ql-wall: #B8B7B4; --ql-curve: #C4C3BF; --ql-floor: #A3A2A0; --ql-ivory: #DEDAD0; --ql-silver: #B4B2AE;
  --ql-disp: "Zalando Sans Expanded", "Arial Black", Arial, sans-serif;
  --ql-text: "Faustina", Georgia, serif;
  --ql-gut: clamp(16px, 4.4vw, 64px); --ql-gap: clamp(12px, 1.6vw, 24px);
  --ql-ease: cubic-bezier(.2, .7, .1, 1);
  --ql-fl: 50%; --ql-bx: 62%;
  color-scheme: light;
}
body.spec-quarterlight { margin: 0; background: var(--ql-bg); }
.spec-quarterlight #spec-main {
  color: var(--ql-ink); font-family: var(--ql-text); font-size: clamp(16.5px, .95rem + .2vw, 18.5px); line-height: 1.58;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:where(.spec-quarterlight #spec-main) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset) { margin: 0; }
:where(.spec-quarterlight #spec-main) :where(ul, ol) { padding: 0; list-style: none; }
:where(.spec-quarterlight #spec-main) :where(a) { color: inherit; }
:where(.spec-quarterlight #spec-main) :where(img) { display: block; max-width: 100%; height: auto; }
.spec-quarterlight #spec-main :focus-visible { outline: 2px solid var(--ql-paint); outline-offset: 3px; }
.ql-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the three voices: what it left the factory with, what it didn't, what we found */
.ql-v-orig { font-family: var(--ql-disp); font-weight: 860; font-variation-settings: "wght" 860; letter-spacing: -.005em; }
.ql-v-not { font-family: var(--ql-disp); font-weight: 220; font-variation-settings: "wght" 220; }
.ql-v-found { font-family: var(--ql-text); font-style: italic; font-weight: 460; }

/* the cove: wall, the curve where it meets the floor, the floor, and the page grey above and below */
.ql-cove { position: relative; isolation: isolate; }
.ql-cove::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 38% at var(--ql-bx) calc(var(--ql-fl) - 34%), rgb(228 228 225 / .55), transparent 70%),
    linear-gradient(180deg, var(--ql-bg) 0, var(--ql-wall) calc(var(--ql-fl) - 26%), var(--ql-curve) calc(var(--ql-fl) - 6%), var(--ql-floor) calc(var(--ql-fl) + 16%), var(--ql-bg) 100%);
}
.ql-grain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .028; z-index: 40; }

/* ── the nav ─────────────────────────────────────────────────────────────────── */
.ql-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60; height: 56px; margin-bottom: -56px; box-sizing: border-box;
  display: flex; align-items: center; gap: 24px; padding: 0 var(--ql-gut);
  font-family: var(--ql-disp); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; line-height: 1;
  transition: background-color .5s var(--ql-ease), backdrop-filter .5s var(--ql-ease);
}
.ql-nav.is-scrolled { background: rgb(228 228 225 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* without the script, the page's own scroll gives the nav its ground once the cove is behind it */
@supports (animation-timeline: scroll()) { .ql-nav:not(.ql-nav-js) { animation: ql-navbg linear both; animation-timeline: scroll(root); animation-range: 40vh 60vh; } @keyframes ql-navbg { to { background: rgb(228 228 225 / .92); } } }
.ql-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; margin-right: auto; min-height: 44px; }
.ql-brand .ql-mark { width: 28px; height: 28px; flex: none; }
.ql-links { display: flex; gap: clamp(14px, 1.9vw, 30px); }
.ql-links a { display: inline-block; padding: 14px 0; text-decoration: none; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat; transition: background-size .5s var(--ql-ease); }
.ql-links a:hover { background-size: 100% 1px; }
.ql-menu { display: none; }
@media (max-width: 960px) {
  .ql-nav { gap: 12px; height: 48px; margin-bottom: -48px; }
  .ql-menu {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit;
    font: inherit; letter-spacing: inherit; cursor: pointer;
  }
  .ql-menu-glyph { width: 16px; height: 6px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
  .ql-links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px var(--ql-gut) 18px;
    background: rgb(228 228 225 / .97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ql-ease), transform .35s var(--ql-ease), visibility 0s .35s;
  }
  .ql-links a { padding: 13px 0; font-size: 15px; }
  .ql-nav.is-open .ql-links { visibility: visible; opacity: 1; transform: none; transition: opacity .35s var(--ql-ease), transform .35s var(--ql-ease); }
  .ql-nav.is-open { background: rgb(228 228 225 / .97); }
}
@media (max-width: 359px) { .ql-brand { gap: 8px; } .ql-brand .ql-mark { width: 24px; height: 24px; } }

/* ── the cove, first screen ──────────────────────────────────────────────────── */
@font-face { font-family: "Shadows Into Light"; src: url("/assets/fonts/specimen/shadows-into-light-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.ql-hero {
  --ql-fl: 64%;
  --ql-floor-y: min(64%, calc(100% - 318px));
  --ql-snap-w: clamp(110px, min(14.5vw, (100svh - 524px) / 1.32), 236px);
  height: calc(100svh - var(--bar-h, 40px)); min-height: 640px; max-height: 1180px;
  overflow: clip;
}
.ql-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 75% at 58% 58%, transparent 52%, rgb(16 17 18 / .09) 100%); }
.ql-stage { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; outline: none; }
.ql-stage:focus-visible { outline: 2px solid var(--ql-paint); outline-offset: -6px; }
.ql-stage.is-drag { cursor: grabbing; }
.ql-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.ql-car-gl .ql-canvas { opacity: 1; }
.ql-poster { position: absolute; inset: 0 0 auto; height: var(--ql-floor-y); display: block; overflow: hidden; }
.ql-poster { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.ql-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform-origin: 50% 60%; transition: transform 1.1s var(--ql-ease), filter 1.1s var(--ql-ease); }
.ql-poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: background 1.1s var(--ql-ease); }
.ql-car-gl .ql-poster { opacity: 0; visibility: hidden; transition: opacity .45s var(--ql-ease), visibility 0s .45s; }
.ql-qa.ql-car-gl .ql-poster { transition: none; }
/* without the renderer the photograph chooses: the chosen car lit, the others under a veil */
.ql-hero:not(.ql-car-gl)[data-car="fastback"] .ql-poster img { transform: scale(1.12); transform-origin: 17% 62%; }
.ql-hero:not(.ql-car-gl)[data-car="roadster"] .ql-poster img { transform: scale(1.12); transform-origin: 50% 62%; }
.ql-hero:not(.ql-car-gl)[data-car="brake"] .ql-poster img { transform: scale(1.12); transform-origin: 83% 62%; }
.ql-hero:not(.ql-car-gl)[data-car="fastback"] .ql-poster::after { background: linear-gradient(90deg, transparent 27%, rgb(169 171 173 / .42) 40%); }
.ql-hero:not(.ql-car-gl)[data-car="roadster"] .ql-poster::after { background: linear-gradient(90deg, rgb(169 171 173 / .42) 26%, transparent 38%, transparent 62%, rgb(169 171 173 / .42) 74%); }
.ql-hero:not(.ql-car-gl)[data-car="brake"] .ql-poster::after { background: linear-gradient(90deg, rgb(169 171 173 / .42) 60%, transparent 73%); }
@media (min-width: 701px) {
  .ql-hero:not(.ql-car-gl) .ql-poster { left: calc(max(var(--ql-gut), (100% - 1312px) / 2) + var(--ql-snap-w) + 40px); }
}
.ql-hero:not(.ql-car-gl) .ql-pick-s, .ql-hero:not(.ql-car-gl) .ql-gaps, .ql-hero:not(.ql-car-gl) .ql-spin, .ql-hero:not(.ql-car-gl) .ql-leader, .ql-hero:not(.ql-car-gl) .ql-mz, .ql-hero:not(.ql-car-gl) .ql-cap { display: none; }

.ql-leader { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .25s linear; }
.ql-leader polyline { fill: none; stroke: var(--ql-ink); stroke-width: 1; stroke-linejoin: round; }
.ql-leader circle { fill: var(--ql-ink); }
.ql-leader.is-on { opacity: 1; }
/* the gaps, measured: a dot on each shut line, a leader up to the rail, the number set on it */
.ql-mz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .3s linear; }
.ql-mz.is-on { opacity: 1; }
.ql-mz-l { fill: none; stroke: var(--ql-ink); stroke-width: 1; stroke-linejoin: round; }
.ql-mz-d { fill: var(--ql-light); stroke: var(--ql-ink); stroke-width: 1.2; }
.ql-mz-n { font-family: var(--ql-disp); font-weight: 760; font-variation-settings: "wght" 760; font-size: 15px; fill: var(--ql-ink); font-variant-numeric: lining-nums tabular-nums; paint-order: stroke; stroke: var(--ql-bg); stroke-width: 4px; stroke-linejoin: round; }
.ql-mz-c { font-family: var(--ql-text); font-style: italic; font-size: 12.5px; fill: var(--ql-ink); paint-order: stroke; stroke: var(--ql-bg); stroke-width: 4px; stroke-linejoin: round; }
.ql-mz-ride .ql-mz-l { stroke: var(--ql-paint); stroke-width: 1.5; }
.ql-hero.is-measuring .ql-leader { display: none; }

.ql-floor {
  position: absolute; left: 0; right: 0; top: var(--ql-floor-y); z-index: 2;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); row-gap: 0;
  width: min(1312px, 100% - 2 * var(--ql-gut)); margin: 0 auto; align-items: start;
  pointer-events: none;
}
.ql-floor > * { pointer-events: auto; }
.ql-floor::before { content: ""; position: absolute; left: -2vw; right: -2vw; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(16 17 18 / .12) 12%, rgb(16 17 18 / .12) 88%, transparent); }
.ql-intro { grid-column: 1 / 5; grid-row: 1 / 4; }
.ql-h1 { padding-top: 18px; text-wrap: balance; font-family: var(--ql-disp); font-weight: 780; font-size: clamp(16px, .85rem + .4vw, 22px); line-height: 1.2; letter-spacing: -.005em; max-width: 19em; }

/* choosing a car: each drawn side-on in its paint */
.ql-pick { grid-column: 6 / 13; grid-row: 1; padding-top: 12px; }
.ql-pick-l { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font: 700 12.5px/1.2 var(--ql-disp); letter-spacing: .04em; }
.ql-pick-s { font: italic 400 14px var(--ql-text); letter-spacing: 0; color: var(--ql-ink-2); }
.ql-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ql-word {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  padding: 9px 12px 11px; box-sizing: border-box; min-height: 44px; border-radius: 14px;
  color: var(--ql-ink); text-decoration: none; cursor: pointer;
  background: rgb(228 228 225 / .46); box-shadow: inset 0 0 0 1px rgb(16 17 18 / .14);
  transition: .45s var(--ql-ease);
}
#ql-pick-brake { --paint: #A8231C; --wheel: #C4BFB3; }
#ql-pick-fastback { --paint: #16181A; --wheel: #B4B2AE; }
#ql-pick-roadster { --paint: #DEDAD0; --wheel: #DEDAD0; }
.ql-word::after {
  content: ""; position: absolute; top: 9px; right: 10px; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgb(16 17 18 / .4); transition: .3s var(--ql-ease);
}
.ql-sil { display: block; width: min(100%, 112px); height: auto; aspect-ratio: 468 / 136; margin: 2px 0 6px; overflow: visible; transition: transform .7s var(--ql-ease); }
.ql-sil * { vector-effect: non-scaling-stroke; }
.ql-sil-p { fill: var(--paint); stroke: rgb(16 17 18 / .55); stroke-linejoin: round; }
.ql-sil-w { fill: #3A3E42; }
.ql-sil-t { fill: #101112; }
.ql-sil-h { fill: var(--wheel); stroke: rgb(16 17 18 / .35); }
.ql-sil-s { fill: none; stroke: #5D6266; stroke-width: 1.4; }
.ql-sil-seat { fill: #8A5A33; }
.ql-sil-hood { fill: #2A2B2C; }
.ql-word-n { font-family: var(--ql-disp); font-weight: 760; font-variation-settings: "wght" 760; font-size: clamp(13px, .55rem + .45vw, 15px); line-height: 1.2; padding-right: 22px; }
.ql-word-c { display: flex; align-items: center; gap: 7px; margin-top: 3px; font: 500 11.5px/1.2 var(--ql-disp); letter-spacing: .03em; }
.ql-chip { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--paint); box-shadow: inset 0 0 0 1px rgb(16 17 18 / .45); }
.ql-word-t { margin-top: 5px; font-family: var(--ql-text); font-size: 14px; line-height: 1.3; color: var(--ql-ink-2); text-wrap: pretty; }
@media (hover: hover) {
  .ql-word:hover { background: rgb(240 240 237 / .78); box-shadow: inset 0 0 0 1px rgb(16 17 18 / .28), 0 12px 24px -14px rgb(16 17 18 / .5); transform: translateY(-2px); }
  .ql-word:hover .ql-sil { transform: translateX(-5px); }
  .ql-word:hover::after { box-shadow: inset 0 0 0 1.5px rgb(16 17 18 / .75); }
}
.ql-word:is([aria-current="true"], [aria-pressed="true"]) { background: #F2F2EF; box-shadow: inset 0 0 0 1.5px var(--ql-ink), 0 16px 30px -16px rgb(16 17 18 / .55); }
.ql-word:is([aria-current="true"], [aria-pressed="true"])::after { background: var(--ql-ink); box-shadow: none; }
.ql-word:is([aria-current="true"], [aria-pressed="true"])::before { content: ""; position: absolute; z-index: 1; top: 13px; right: 17.5px; width: 4px; height: 9px; border: solid var(--ql-light); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* the snapshots: the top one is thrown to the back */
.ql-snaps { position: absolute; left: 0; bottom: calc(100% + clamp(30px, 6svh, 64px)); width: var(--ql-snap-w); container-type: inline-size; }
.ql-snaps-stack { position: relative; aspect-ratio: 88 / 107; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ql-snaps.is-live .ql-snaps-stack { cursor: pointer; }
.ql-snap {
  position: absolute; inset: 0; box-sizing: border-box; padding: 5.6% 5.6% 0;
  background: #F2F1EB;
  box-shadow: 0 1px 2px rgb(16 17 18 / .3), 0 16px 28px -14px rgb(16 17 18 / .55);
  transform: translate(var(--x, 0%), var(--y, 0%)) rotate(var(--r, 0deg)); transition: transform .6s var(--ql-ease);
}
.ql-snap[data-slot="0"] { --r: -2.5deg; z-index: 3; }
.ql-snap[data-slot="1"] { --x: 7%; --y: -2.5%; --r: 4.5deg; z-index: 2; }
.ql-snap[data-slot="2"] { --x: -6%; --y: -4.5%; --r: -7.5deg; z-index: 1; }
@media (hover: hover) {
  .is-live .ql-snaps-stack:hover [data-slot="0"] { --y: -2.5%; --r: -1deg; }
  .is-live .ql-snaps-stack:hover [data-slot="1"] { --x: 13%; --r: 7deg; }
}
.ql-snap-ph { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #55575A; }
.ql-snap-ph img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ql-snap-ph::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(16 17 18 / .2); background: linear-gradient(150deg, rgb(255 255 255 / .17), transparent 34%); }
.ql-snap-c { display: block; padding: 7% 4% 0; font-family: "Shadows Into Light", "Segoe Print", cursive; font-size: max(10px, 8cqw); line-height: 1.1; text-align: center; color: #26282B; transform: rotate(-1.2deg); text-wrap: balance; }
.ql-snaps-next {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: max-content; margin: 18px 0 0 50%; transform: translateX(-50%); min-height: 36px; padding: 0 14px 0 11px; box-sizing: border-box; white-space: nowrap;
  border: 0; border-radius: 999px; background: rgb(228 228 225 / .78); color: var(--ql-ink); cursor: pointer;
  font: 600 12px/1 var(--ql-disp); letter-spacing: .04em;
}
.ql-snaps-next::before { content: "\21BB"; font: 400 16px/1 system-ui, sans-serif; }
.ql-snaps-n { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ql-ink-2); }

.ql-tools { grid-column: 10 / 13; grid-row: 2; justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.ql-gaps, .ql-spin {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; box-sizing: border-box;
  border: 0; border-radius: 999px; background: var(--ql-light); color: var(--ql-ink); cursor: pointer;
  font-family: var(--ql-disp); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; line-height: 1; white-space: nowrap;
  transition: background-color .4s var(--ql-ease), color .4s var(--ql-ease);
}
.ql-spin { background: rgb(228 228 225 / .55); box-shadow: inset 0 0 0 1px rgb(16 17 18 / .16); }
.ql-spin:hover, .ql-snaps-next:hover { background: var(--ql-light); }
.ql-spin[hidden], .ql-snaps-next[hidden] { display: none; }
.ql-spin-i { width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) 2px 1px / 3px 10px no-repeat, linear-gradient(currentColor, currentColor) 7px 1px / 3px 10px no-repeat; }
.ql-spin.is-off .ql-spin-i { background: currentColor; clip-path: polygon(15% 4%, 95% 50%, 15% 96%); }
.ql-gaps-more { display: none; }
.ql-swatch { width: 18px; height: 14px; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 5px 0 / 2px 100% no-repeat, linear-gradient(currentColor, currentColor) 11px 0 / 2px 100% no-repeat; }
.ql-gaps[aria-pressed="true"] { background: var(--ql-ink); color: var(--ql-light); }
.ql-sub { margin-top: 14px; font-size: clamp(15.5px, .9rem + .15vw, 17.5px); line-height: 1.5; max-width: 38ch; color: var(--ql-ink); }
.ql-note { grid-column: 6 / 10; grid-row: 2 / 4; margin-top: 16px; font-size: clamp(17px, .9rem + .5vw, 23px); line-height: 1.3; max-width: 34ch; transition: opacity .25s linear; }
.ql-note .ql-v-not { font-size: 1.04em; }
.ql-note .ql-v-found { font-size: 1.08em; line-height: 1.28; }
.ql-note.is-out { opacity: 0; }
.ql-note-more { display: none; font-family: var(--ql-text); font-style: italic; font-weight: 400; font-size: .72em; }
.ql-cap { grid-column: 10 / 13; grid-row: 3; margin-top: 12px; justify-self: end; text-align: right; font-style: italic; font-size: 14px; line-height: 1.35; max-width: 22ch; }
.ql-cap-touch { display: none; }
.ql-cap .ql-v-found { font-weight: 400; }
@media (hover: none) and (pointer: coarse) { .ql-cap-fine { display: none; } .ql-cap-touch { display: inline; } }

/* 1024 to 1180, and short wide screens */
@media (max-width: 1180px) and (min-aspect-ratio: 5/4) {
  .ql-intro { grid-column: 1 / 6; }
  .ql-pick { grid-column: 6 / 13; }
  .ql-note { grid-column: 6 / 11; }
  .ql-tools { grid-column: 9 / 13; }
  .ql-cap { grid-column: 11 / 13; }
  .ql-word-t { font-size: 13px; }
}
/* portrait tablets and phones: the stage first, the floor below it */
@media (max-aspect-ratio: 5/4), (max-width: 700px) {
  .ql-hero { --ql-sh: min(58svh, 88vw); height: auto; min-height: 0; max-height: none; overflow: visible; }
  .ql-hero::before {
    background:
      radial-gradient(70% calc(var(--ql-sh) * .5) at 58% calc(var(--ql-sh) * .42), rgb(228 228 225 / .55), transparent 70%),
      linear-gradient(180deg, var(--ql-bg) 0, var(--ql-wall) calc(var(--ql-sh) * .5), var(--ql-curve) calc(var(--ql-sh) * .86), var(--ql-floor) calc(var(--ql-sh) + 90px), var(--ql-bg) 100%);
  }
  .ql-hero::after { display: none; }
  .ql-stage { position: relative; inset: auto; height: var(--ql-sh); min-height: 250px; max-height: 720px; }
  .ql-poster { height: 100%; }
  .ql-floor { position: relative; top: auto; margin-top: -8px; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-bottom: 36px; }
  .ql-floor::before { top: 0; }
  .ql-pick { grid-column: 1 / -1; grid-row: 1; padding-top: 6px; }
  .ql-note { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; max-width: 32ch; }
  .ql-intro { grid-column: 1 / -1; grid-row: 3; }
  .ql-h1 { padding-top: 22px; }
  .ql-sub { max-width: 44ch; }
  .ql-tools { grid-column: 1 / -1; grid-row: 6; justify-self: stretch; margin-top: 22px; }
  .ql-tools > * { flex: 1 1 auto; justify-content: center; }
  .ql-gaps-more { display: inline; }
  .ql-cap { grid-column: 1 / -1; grid-row: 7; justify-self: start; text-align: left; margin-top: 12px; max-width: none; }
  .ql-note-more { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; }
}
@media (max-aspect-ratio: 5/4) and (min-width: 701px) {
  .ql-hero { --ql-sh: min(52svh, 62vw); }
  .ql-floor { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ql-pick { grid-column: 1 / 10; }
  .ql-note { grid-column: 1 / 9; }
  .ql-intro { grid-column: 1 / 9; }
  .ql-tools { grid-column: 10 / 13; grid-row: 1; justify-self: end; flex-direction: column; align-items: stretch; margin-top: 38px; }
  .ql-tools > * { flex: none; }
  .ql-gaps-more { display: none; }
  .ql-cap { grid-column: 9 / 13; grid-row: 2; justify-self: end; text-align: right; }
  .ql-hero { --ql-snap-w: clamp(120px, min(17vw, calc((var(--ql-sh) - 150px) * .78)), 200px); }
  .ql-snaps { bottom: calc(100% + 30px); }
  .ql-word-t { font-size: 13px; }
}
@media (max-width: 700px) {
  .ql-hero { --ql-sh: min(50svh, 80vw); }
  .ql-words { grid-template-columns: 1fr; gap: 8px; }
  .ql-word { grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 8px 12px; border-radius: 12px; }
  .ql-word::after { top: 50%; margin-top: -10px; }
  .ql-word::before { top: 50% !important; margin-top: -6.5px; }
  .ql-sil { grid-row: 1 / 4; width: 92px; margin: 0; }
  .ql-word-n { font-size: 14px; padding-right: 26px; }
  .ql-word-t { margin-top: 2px; font-size: 13.5px; line-height: 1.28; padding-right: 26px; }
  .ql-h1 { font-size: 18px; }
  .ql-hero { --ql-snap-w: min(56vw, 220px); }
  .ql-snaps { position: relative; bottom: auto; left: auto; grid-column: 1 / -1; grid-row: 5; justify-self: center; margin-top: 40px; }
}
@media (max-width: 400px) { .ql-cap { font-size: 13px; } }
/* phones without the renderer: the photograph pans to the chosen car */
@media (max-width: 700px) {
  .ql-hero:not(.ql-car-gl)[data-car="fastback"] .ql-poster img { object-position: 8% 62%; transform-origin: 22% 62%; }
  .ql-hero:not(.ql-car-gl)[data-car="roadster"] .ql-poster img { object-position: 50% 62%; transform-origin: 50% 62%; }
  .ql-hero:not(.ql-car-gl)[data-car="brake"] .ql-poster img { object-position: 92% 62%; transform-origin: 78% 62%; }
  .ql-hero:not(.ql-car-gl)[data-car="fastback"] .ql-poster::after { background: linear-gradient(90deg, transparent 40%, rgb(169 171 173 / .42) 56%); }
  .ql-hero:not(.ql-car-gl)[data-car="roadster"] .ql-poster::after { background: linear-gradient(90deg, rgb(169 171 173 / .42) 12%, transparent 26%, transparent 74%, rgb(169 171 173 / .42) 88%); }
  .ql-hero:not(.ql-car-gl)[data-car="brake"] .ql-poster::after { background: linear-gradient(90deg, rgb(169 171 173 / .42) 44%, transparent 60%); }
}
@media (max-width: 380px) and (max-height: 600px) {
  .ql-hero { --ql-sh: min(52svh, 80vw); }
  .ql-h1 { font-size: 16px; padding-top: 14px; }
  .ql-note { font-size: 16px; }
}

/* ── the sections, laid on the cove ──────────────────────────────────────────── */
.ql-wrap { width: min(1312px, 100% - 2 * var(--ql-gut)); margin: 0 auto; position: relative; }
.ql-sec { padding: clamp(80px, 9vw, 144px) 0; }
/* the floor line: where each section's curve meets its floor, drawn as the faintest tangent */
.ql-sec::after { content: ""; position: absolute; left: 0; right: 0; top: var(--ql-fl); height: 1px; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(16 17 18 / .12) 14%, rgb(16 17 18 / .12) 86%, transparent); }
.ql-xl { font-family: var(--ql-disp); font-weight: 880; font-variation-settings: "wght" 880; font-size: clamp(44px, .5rem + 9.7vw, 148px); line-height: .92; letter-spacing: -.015em; }
.ql-l { font-family: var(--ql-disp); font-weight: 840; font-variation-settings: "wght" 840; font-size: clamp(30px, 1.1rem + 3.8vw, 72px); line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.ql-lede { font-size: clamp(18px, 1rem + .35vw, 22px); line-height: 1.5; max-width: 50ch; text-wrap: pretty; }
.ql-v { font-size: clamp(18px, .95rem + .75vw, 27px); line-height: 1.36; text-wrap: pretty; }
.ql-v.ql-v-orig { max-width: 34ch; }
.ql-v.ql-v-not { max-width: 40ch; }
.ql-v.ql-v-found { max-width: 46ch; font-size: clamp(19px, 1rem + .8vw, 29px); line-height: 1.3; }

/* photographs: they switch on as they arrive, then their finding is marked on the frame */
.ql-fig { position: relative; }
.ql-ph { position: relative; }
.ql-ph img { width: 100%; height: auto; }
.ql-fig figcaption { margin-top: 12px; font-size: 14px; line-height: 1.35; max-width: 62ch; font-style: normal; outline-offset: 4px; }
.ql-fig figcaption em { font-weight: 460; }
@media (max-width: 400px) { .ql-fig figcaption { font-size: 13px; } }
.ql-find { position: absolute; inset: 0; pointer-events: none; }
/* a tick on the top edge at the finding's x and one on the left edge at its y, oxide, like marks on a print */
.ql-find::before, .ql-find::after { content: ""; position: absolute; background: var(--ql-paint); transition: transform .6s var(--ql-ease) .35s; }
.ql-find::before { left: calc(var(--x) * 100% - 1px); top: -14px; width: 2px; height: 11px; transform-origin: 50% 0; }
.ql-find::after { top: calc(var(--y) * 100% - 1px); left: -14px; height: 2px; width: 11px; transform-origin: 0 50%; }
/* and across the print, two light hairlines that cross at the finding when its caption is read */
.ql-ph::before, .ql-ph::after { content: none; }
.ql-fig .ql-find { background:
  linear-gradient(var(--ql-light), var(--ql-light)) calc(var(--x) * 100%) 0 / 1px 100% no-repeat,
  linear-gradient(var(--ql-light), var(--ql-light)) 0 calc(var(--y) * 100%) / 100% 1px no-repeat;
  opacity: 0; transition: opacity .45s var(--ql-ease); }
.ql-fig:hover .ql-find, .ql-fig:focus-within .ql-find { opacity: .92; }

/* ── what we do ──────────────────────────────────────────────────────────────── */
.ql-do { --ql-fl: 62%; }
.ql-run { font-family: var(--ql-disp); font-size: clamp(28px, .55rem + 3.9vw, 66px); line-height: 1.02; letter-spacing: -.012em; font-weight: 860; font-variation-settings: "wght" 860; }
.ql-run-l { display: block; }
.ql-run-a { display: block; }
.ql-run-t { display: block; font-family: var(--ql-text); font-style: italic; font-weight: 400; font-variation-settings: normal; font-size: clamp(17px, .8rem + .75vw, 25px); letter-spacing: 0; line-height: 1.3; margin: 6px 0 clamp(18px, 2.4vw, 34px); }
.ql-run-no { font-weight: 220; font-variation-settings: "wght" 220; letter-spacing: -.005em; }
.ql-do .ql-then { margin: clamp(40px, 5vw, 72px) 0 0 calc((100% + var(--ql-gap)) / 12 * 6); max-width: 44ch; }
@media (min-width: 1100px) {
  .ql-run-l { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--ql-gap); align-items: baseline; }
  .ql-run-a { white-space: nowrap; }
  .ql-run-t { margin: 0; padding-left: 4px; }
  .ql-run-l + .ql-run-l { margin-top: clamp(4px, .6vw, 10px); }
}

/* ── on the floor ────────────────────────────────────────────────────────────── */
.ql-cars { --ql-fl: 44%; }
.ql-cars-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); align-items: end; }
.ql-cars-head .ql-xl { grid-column: 1 / 9; }
.ql-cars-head .ql-lede { grid-column: 9 / 13; font-size: clamp(16.5px, .95rem + .2vw, 18.5px); padding-bottom: .4em; }
.ql-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ql-gap); margin-top: clamp(40px, 5vw, 80px); }
/* the three on our floor as cards: the one open below is the one that's lit */
.ql-item { position: relative; display: grid; align-content: start; padding: 10px 10px 18px; border-radius: 18px; text-decoration: none; background: rgb(228 228 225 / .4); box-shadow: inset 0 0 0 1px rgb(16 17 18 / .14); transition: .45s var(--ql-ease); }
.ql-item-p { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: #B9B8B5; }
.ql-item-p img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ql-ease); }
.ql-item-n { position: relative; margin: 16px 8px 0; padding-right: 34px; font: 760 clamp(18px, .8rem + .9vw, 26px)/1.1 var(--ql-disp); font-variation-settings: "wght" 760; }
.ql-item-n::after { content: ""; position: absolute; right: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; box-sizing: border-box; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(16 17 18 / .4); }
.ql-item-l { margin: 5px 8px 0; font-style: italic; font-size: 15px; line-height: 1.3; color: var(--ql-ink-2); }
.ql-item-go { margin: 14px 8px 0; font: 600 12.5px/1.3 var(--ql-disp); letter-spacing: .04em; }
.ql-item-see::after { content: "\2192"; display: inline-block; margin-left: .4em; transition: transform .4s var(--ql-ease); }
.ql-item-on { display: none; }
.ql-item-on::after { content: "\2193"; margin-left: .4em; }
@media (hover: hover) {
  .ql-item:hover { background: rgb(240 240 237 / .8); box-shadow: inset 0 0 0 1px rgb(16 17 18 / .3), 0 18px 30px -18px rgb(16 17 18 / .5); transform: translateY(-3px); }
  .ql-item:hover .ql-item-p img { transform: scale(1.04); }
  .ql-item:hover .ql-item-see::after { transform: translateX(4px); }
}
.ql-item:is(.is-open, [aria-current="true"]) { background: #F2F2EF; box-shadow: inset 0 0 0 1.5px var(--ql-ink), 0 18px 34px -18px rgb(16 17 18 / .55); transform: none; }
.ql-item:is(.is-open, [aria-current="true"]) .ql-item-n::after { background: var(--ql-ink); box-shadow: none; }
.ql-item:is(.is-open, [aria-current="true"]) .ql-item-n::before { content: ""; position: absolute; z-index: 1; right: 8.5px; top: 50%; width: 5px; height: 10px; margin-top: -7.5px; border: solid var(--ql-light); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ql-item:is(.is-open, [aria-current="true"]) .ql-item-see { display: none; }
.ql-item:is(.is-open, [aria-current="true"]) .ql-item-on { display: inline; }
.ql-spreads { margin-top: clamp(64px, 8vw, 128px); }
.ql-spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); align-items: start; }
.ql-spread + .ql-spread { margin-top: clamp(96px, 10vw, 160px); }
.ql-spread[hidden] { display: none; }
.ql-sp-fig { grid-column: 1 / 7; }
.ql-sp-fig .ql-ph { box-shadow: 0 34px 40px -30px rgb(16 17 18 / .45); }
/* each car's photographs: the finding first, then the car; arrows and a count on the print, thumbnails under it */
.ql-gal .ql-ph { touch-action: pan-y; }
.ql-gal-img, .ql-gal-ghost { aspect-ratio: 4 / 3; object-fit: cover; }
.ql-gal-ghost { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ql-gal-th { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.ql-gal-th a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; opacity: .7; transition: opacity .3s, box-shadow .3s; }
.ql-gal-th img { width: 100%; height: 100%; object-fit: cover; }
.ql-gal-th a:hover, .ql-gal-th a[aria-current="true"] { opacity: 1; }
.ql-gal-th a[aria-current="true"] { box-shadow: 0 0 0 2px var(--ql-bg), 0 0 0 4px var(--ql-ink); }
.ql-gal-b { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgb(242 242 239 / .92); color: var(--ql-ink); font: 600 19px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 18px -8px rgb(16 17 18 / .6); transition: opacity .3s, transform .3s; }
.ql-gal-b.is-prev { left: 12px; }
.ql-gal-b.is-next { right: 12px; }
.ql-gal-b:hover { transform: scale(1.08); }
@media (hover: hover) { .ql-gal .ql-gal-b { opacity: 0; } .ql-gal:is(:hover, :focus-within) .ql-gal-b { opacity: 1; } }
.ql-gal-n { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; border-radius: 99px; background: rgb(16 17 18 / .62); color: #F2F2EF; font: 600 12px/1 var(--ql-disp); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ql-spread-t { grid-column: 8 / 13; display: grid; gap: 18px; align-content: start; }
.ql-sp-name { font-family: var(--ql-disp); font-weight: 840; font-variation-settings: "wght" 840; font-size: clamp(30px, 1.1rem + 3.8vw, 72px); line-height: 1; letter-spacing: -.01em; }
.ql-elev { display: block; width: 100%; max-width: 440px; height: auto; margin: 2px 0 6px; overflow: visible; }
.ql-elev * { vector-effect: non-scaling-stroke; }
.ql-elev-g { stroke: rgb(16 17 18 / .3); stroke-width: 1; }
.ql-elev-b, .ql-elev-c { fill: rgb(228 228 225 / .42); stroke: var(--ql-ink); stroke-width: 1.1; stroke-linejoin: round; }
.ql-elev-w { fill: rgb(16 17 18 / .16); stroke: var(--ql-ink); stroke-width: .8; }
.ql-elev-l { fill: none; stroke: var(--ql-ink); stroke-width: .8; }
.ql-elev-t { fill: rgb(16 17 18 / .1); stroke: var(--ql-ink); stroke-width: 1.1; }
.ql-elev-k { fill: none; stroke: var(--ql-ink); stroke-width: 2.4; stroke-linecap: round; }
.ql-what { max-width: 52ch; }
.ql-sp-go { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: baseline; margin-top: 6px; }
.ql-ask-about, .ql-go, .ql-next { font-family: var(--ql-disp); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-decoration: none; padding: 12px 0; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat; transition: background-size .5s var(--ql-ease); }
.ql-ask-about::after, .ql-go::after, .ql-next::after { content: "\2192"; margin-left: .5em; }
.ql-next { background-size: 0 1px; }
.ql-next:hover, .ql-next:focus-visible { background-size: 100% 1px; }
.ql-next { display: none; }
.ql-cars-live .ql-next { display: inline-flex; }

/* car to car: the chosen name and photograph fly from the list into the spread, the old ones back */
::view-transition-group(ql-vt-name), ::view-transition-group(ql-vt-photo), ::view-transition-group(ql-vt-name-out), ::view-transition-group(ql-vt-photo-out) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
::view-transition-old(ql-vt-photo), ::view-transition-new(ql-vt-photo), ::view-transition-old(ql-vt-photo-out), ::view-transition-new(ql-vt-photo-out) { height: 100%; object-fit: cover; }
.ql-spread.is-new .ql-spread-t > :not(.ql-sp-name) { animation: ql-rise .5s cubic-bezier(.2, .7, .1, 1) .62s both; }
@keyframes ql-rise { from { opacity: 0; } to { opacity: 1; } }

/* ── what we write down ──────────────────────────────────────────────────────── */
.ql-notes { --ql-fl: 30%; }
.ql-legend { margin-top: 26px; font-size: clamp(18px, .95rem + .75vw, 27px); line-height: 1.36; max-width: 62ch; }
.ql-notes-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); margin-top: clamp(48px, 6vw, 96px); align-items: end; }
.ql-bay { grid-column: 5 / 13; grid-row: 1; }
.ql-bay .ql-ph { box-shadow: 0 34px 40px -30px rgb(16 17 18 / .5); }
.ql-read { grid-column: 1 / 5; grid-row: 1; display: grid; gap: 20px; align-self: end; padding-bottom: 38px; }
.ql-read-h { font-family: var(--ql-disp); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; }
.ql-read .ql-v { font-size: clamp(17px, .85rem + .55vw, 22px); }
.ql-read .ql-v-found { font-size: clamp(18px, .9rem + .6vw, 24px); }
.ql-floorcap { margin: clamp(40px, 5vw, 72px) 0 0 calc((100% + var(--ql-gap)) / 12 * 4); font-style: italic; font-size: clamp(20px, 1rem + .9vw, 30px); line-height: 1.3; max-width: 40ch; }

/* ── bay, pit, cove, floor: a plan of the building and one car's way through it ───── */
.ql-route { --ql-fl: 18%; }
.ql-route-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); align-items: end; }
.ql-route-head .ql-l { grid-column: 1 / 7; }
.ql-route-head .ql-lede { grid-column: 7 / 12; padding-bottom: .2em; }
.ql-route-plan { position: relative; margin: clamp(170px, 14vw, 210px) 0 clamp(170px, 14vw, 210px); }
.ql-hp-tilt { transform-origin: 50% 100%; }
.ql-hp { display: block; width: 100%; height: auto; overflow: visible; }
.ql-hp-v { display: none; }
.ql-hp * { vector-effect: non-scaling-stroke; }
.ql-hp-in { fill: rgb(228 228 225 / .34); }
.ql-hp .ql-hp-wall { fill: none; stroke: var(--ql-ink); stroke-width: 6; stroke-linecap: square; vector-effect: none; }
.ql-hp .ql-hp-div { fill: none; stroke: var(--ql-ink); stroke-width: 3; vector-effect: none; }
.ql-hp-dark { fill: rgb(16 17 18 / .045); }
.ql-hp-mark { fill: none; stroke: rgb(16 17 18 / .28); stroke-width: 1; }
.ql-hp-door { fill: none; stroke: var(--ql-ink); stroke-width: 1; stroke-dasharray: 5 4; }
.ql-hp-bay { fill: none; stroke: rgb(16 17 18 / .45); stroke-width: 1; stroke-dasharray: 4 4; }
.ql-hp-pit { fill: rgb(16 17 18 / .08); stroke: var(--ql-ink); stroke-width: 1.2; }
.ql-hp-hatch { fill: none; stroke: rgb(16 17 18 / .42); stroke-width: .8; }
.ql-hp-lamp { fill: var(--ql-light); stroke: var(--ql-ink); stroke-width: 1; }
.ql-hp-cove { fill: none; stroke: rgb(16 17 18 / .38); stroke-width: 1; }
.ql-hp-soft { fill: rgb(228 228 225 / .55); stroke: rgb(16 17 18 / .4); stroke-width: .8; stroke-dasharray: 3 3; }
.ql-hp-cam { fill: var(--ql-ink); }
.ql-hp-cars > rect { stroke: rgb(16 17 18 / .5); stroke-width: .8; }
.ql-hp-g { fill: rgb(16 17 18 / .55); stroke: none !important; }
.ql-hp-g.is-pale { fill: rgb(228 228 225 / .3); }
.ql-hp-cover { fill: #C4C3BF; stroke: rgb(16 17 18 / .5); stroke-width: .8; }
.ql-hp-desk { fill: none; stroke: var(--ql-ink); stroke-width: 1; }
.ql-hp .ql-hp-route { fill: none; stroke: var(--ql-paint); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: none; }
.ql-hp-v .ql-hp-route { stroke-width: 8; }
.ql-hp-trav { fill: var(--ql-paint); offset-rotate: auto; offset-distance: 100%; }
.ql-hp-w .ql-hp-trav { offset-path: path("M-40 250H175C300 250 330 250 470 250C610 250 660 250 805 250C940 250 975 345 1100 345H1230C1345 345 1375 250 1470 250H1560"); }
.ql-hp-v .ql-hp-trav { offset-path: path("M250 -10V135C250 260 250 280 250 383C250 520 250 540 250 655C250 780 350 790 350 880V950C350 1020 250 1030 250 1090V1180"); }
.ql-hp-trav .ql-hp-g { fill: rgb(16 17 18 / .5); }
.ql-hp-roof { fill: var(--ql-paint); }
.ql-places { position: absolute; inset: 0; pointer-events: none; }
.ql-place { position: absolute; width: min(20%, 250px); pointer-events: auto; }
.ql-place h3 { font-family: var(--ql-disp); font-weight: 700; font-variation-settings: "wght" 700; font-size: 15px; letter-spacing: .01em; line-height: 1.2; margin-bottom: 8px; }
.ql-place p { font-size: 15.5px; line-height: 1.45; }
.ql-place::before { content: ""; position: absolute; left: 0; width: 1px; height: 28px; background: rgb(16 17 18 / .3); }
.ql-place:nth-child(odd) { bottom: calc(100% + 30px); }
.ql-place:nth-child(odd)::before { top: calc(100% + 2px); }
.ql-place:nth-child(even) { top: calc(100% + 30px); }
.ql-place:nth-child(even)::before { bottom: calc(100% + 2px); }
.ql-place:nth-child(1) { left: 1.5%; }
.ql-place:nth-child(2) { left: 21.2%; }
.ql-place:nth-child(3) { left: 38.4%; }
.ql-place:nth-child(4) { left: 64%; }
.ql-place:nth-child(5) { right: 0; text-align: right; }
.ql-place:nth-child(5)::before { left: auto; right: 0; }
.ql-terms { margin: 0 0 0 calc((100% + var(--ql-gap)) / 12 * 2); max-width: 60ch; display: grid; gap: 14px; }
.ql-terms div { display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: 4px 24px; align-items: baseline; }
.ql-terms dt { font-family: var(--ql-disp); font-weight: 700; font-variation-settings: "wght" 700; font-size: 14px; letter-spacing: .01em; }
.ql-terms dd { margin: 0; }

/* ── finding one for you ─────────────────────────────────────────────────────── */
.ql-findsec { --ql-fl: 72%; }
.ql-find-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); align-items: start; }
.ql-gauge { grid-column: 1 / 6; position: sticky; top: calc(var(--bar-h, 40px) + 104px); max-width: 38vw; }
.ql-gauge .ql-ph { box-shadow: 0 34px 40px -30px rgb(16 17 18 / .45); }
.ql-qs { grid-column: 7 / 13; }
.ql-qs .ql-lede { margin-top: 22px; }
.ql-q { margin-top: clamp(96px, 22vh, 260px); }
.ql-q h3 { font-family: var(--ql-text); font-style: italic; font-weight: 400; font-size: clamp(30px, 1rem + 4.2vw, 76px); line-height: 1.04; letter-spacing: -.01em; margin-bottom: 20px; text-wrap: balance; }
.ql-q p { max-width: 42ch; }
.ql-find-then { margin-top: clamp(96px, 22vh, 260px); max-width: 44ch; font-size: clamp(18px, 1rem + .35vw, 22px); line-height: 1.5; }
.ql-closing { margin-top: clamp(48px, 7vh, 96px); font-family: var(--ql-disp); font-weight: 220; font-variation-settings: "wght" 220; font-size: clamp(26px, .8rem + 3vw, 58px); line-height: 1.08; letter-spacing: -.01em; }

/* ── elsewhere ───────────────────────────────────────────────────────────────── */
.ql-away { --ql-fl: 58%; color: var(--ql-light); background-color: #9A1F19; }
/* one section painted: the cove in the brake's oxide, the light pooled at the curve */
.ql-away::before {
  background:
    radial-gradient(60% 42% at var(--ql-bx) calc(var(--ql-fl) - 30%), rgb(196 70 58 / .55), transparent 70%),
    linear-gradient(180deg, #8E1D17 0, var(--ql-paint) calc(var(--ql-fl) - 24%), #B02A22 calc(var(--ql-fl) - 5%), #9A1F19 calc(var(--ql-fl) + 18%), #861B15 100%);
}
.ql-away::after { background: linear-gradient(90deg, transparent, rgb(228 228 225 / .28) 14%, rgb(228 228 225 / .28) 86%, transparent); }
.ql-away :focus-visible { outline-color: var(--ql-light) !important; }
.ql-away .ql-away-y { font-weight: 860; }
.ql-away-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); align-items: end; }
.ql-away-grid .ql-l { grid-column: 1 / 6; }
.ql-away-t { grid-column: 7 / 12; }
.ql-away-p { font-size: clamp(18px, 1rem + .35vw, 22px); line-height: 1.55; max-width: 40ch; }
.ql-away-p b { font-family: var(--ql-disp); font-weight: 700; font-variation-settings: "wght" 700; font-size: .84em; letter-spacing: .005em; }
.ql-gaps-go { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 0 16px; align-items: baseline; }
.ql-gaps-go em { font-size: 15px; }
.ql-away-v { grid-column: 1 / 13; margin-top: clamp(64px, 8vw, 120px); font-size: clamp(24px, .7rem + 2.6vw, 50px); line-height: 1.1; letter-spacing: -.01em; }
.ql-away-f { margin-top: 18px; font-size: clamp(19px, 1rem + .8vw, 29px); line-height: 1.3; letter-spacing: 0; }

/* ── finding it a place ──────────────────────────────────────────────────────── */
.ql-garage { --ql-fl: 20%; }
.ql-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); align-items: start; }
.ql-g-head { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); align-items: end; }
.ql-g-head .ql-l { grid-column: 1 / 7; }
.ql-garage-sub { grid-column: 1 / 7; grid-row: 2; margin-top: 14px; font-family: var(--ql-disp); font-weight: 340; font-variation-settings: "wght" 340; font-size: clamp(20px, .9rem + 1.3vw, 34px); line-height: 1.15; }
.ql-g-intro { grid-column: 8 / 12; grid-row: 1 / 3; align-self: end; max-width: 44ch; }
.ql-g-in { grid-column: 1 / 5; grid-row: 2; margin-top: clamp(48px, 5vw, 80px); display: grid; gap: 18px; }
.ql-plan { grid-column: 5 / 13; grid-row: 2 / 4; margin: clamp(48px, 5vw, 80px) 0 0; position: relative; width: min(100%, 760px); aspect-ratio: var(--ql-plan-ar, .9826); justify-self: end; }
.ql-plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ql-g-out { grid-column: 1 / 5; grid-row: 3; margin-top: 32px; display: grid; gap: 10px; align-self: start; }
.ql-g-out p { font-size: 16.5px; line-height: 1.45; }
.ql-g-out p:first-child { font-family: var(--ql-disp); font-weight: 760; font-variation-settings: "wght" 760; font-size: clamp(20px, .9rem + .7vw, 26px); line-height: 1.15; }
.ql-g-n { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.ql-g-lab, .ql-g-f label { font-family: var(--ql-disp); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; display: block; }
.ql-g-cars { display: grid; gap: 2px; border: 0; margin: 0 0 8px; }
.ql-g-lab { margin-bottom: 6px; }
.ql-g-car { --w: 300; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid rgb(16 17 18 / .18); background: none; color: var(--ql-ink); text-align: left; cursor: pointer; font: inherit; }
.ql-g-car:disabled { cursor: default; color: var(--ql-ink); }
.ql-g-cn { font-family: var(--ql-disp); font-weight: var(--w); font-variation-settings: "wght" var(--w); font-size: 17px; transition: font-variation-settings .5s var(--ql-ease); }
.ql-g-car[aria-pressed="true"] { --w: 780; }
.ql-g-car:not(:disabled):hover { --w: 520; }
.ql-g-car[aria-pressed="true"]:not(:disabled):hover { --w: 780; }
.ql-g-car::before { content: ""; width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 3px; flex: none; align-self: center; order: -1; }
.ql-g-car[aria-pressed="true"]::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--ql-bg); }
.ql-g-cn { margin-right: auto; }
.ql-g-mm { font-size: 14px; color: rgb(16 17 18 / .8); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ql-g-seam { margin-top: 6px; font-style: italic; font-size: 14px; }
.ql-g-f { display: grid; gap: 2px; }
.ql-g-v { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid rgb(16 17 18 / .22); }
.ql-g-v:focus-within { border-bottom-color: var(--ql-paint); box-shadow: 0 1px 0 var(--ql-paint); }
.ql-g-f input, .ql-g-f select { font: inherit; font-size: 19px; color: var(--ql-ink); background: none; border: 0; border-radius: 0; padding: 8px 0; min-height: 44px; box-sizing: border-box; width: 100%; font-variant-numeric: lining-nums tabular-nums; -moz-appearance: textfield; }
.ql-g-f input::-webkit-inner-spin-button, .ql-g-f input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ql-g-f select { cursor: pointer; }
.ql-g-f :is(input, select):focus-visible { outline: none; }
.ql-g-f :disabled { opacity: 1; color: var(--ql-ink); -webkit-text-fill-color: var(--ql-ink); }
.ql-g-u { font-size: 14px; }
/* the plan's parts */
.ql-p-in { fill: #B8B7B4; }
.ql-p-walk { fill: none; stroke: var(--ql-light); stroke-linejoin: miter; }
.ql-p-door { fill: rgb(16 17 18 / .06); stroke: rgb(16 17 18 / .6); }
.ql-p-door.is-shut { fill: none; stroke: rgb(16 17 18 / .38); }
.ql-p-x { stroke: var(--ql-ink); fill: none; }
.ql-p-body { stroke: rgb(16 17 18 / .35); stroke-width: 12; }
.ql-p-glass { fill: rgb(16 17 18 / .5); }
.ql-p-glass.is-pale { fill: rgb(228 228 225 / .3); }
.ql-p-wall { fill: none; stroke: var(--ql-ink); stroke-linecap: square; }
.ql-p-roll { stroke: var(--ql-ink); fill: none; }
.ql-p-gap { stroke: #B8B7B4; }
.ql-p-swing { fill: none; stroke: rgb(16 17 18 / .6); }
.ql-p-dim { stroke: var(--ql-paint); fill: none; }
.ql-p-num { fill: var(--ql-ink); font-family: var(--ql-text); font-variant-numeric: lining-nums tabular-nums; }
.ql-p-tight { font-weight: 600; }
.ql-p-ext { stroke: rgb(16 17 18 / .5); fill: none; }
/* the handles on the walls */
.ql-handles { position: absolute; inset: 0; pointer-events: none; }
.ql-h { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: auto; cursor: ew-resize; touch-action: none; outline: none; }
.ql-h-D { cursor: ns-resize; }
.ql-h::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ql-light); box-shadow: 0 0 0 1.5px var(--ql-ink); transition: transform .3s var(--ql-ease); }
.ql-h:hover::before, .ql-h.is-drag::before { transform: scale(1.35); }
.ql-h:focus-visible::before { box-shadow: 0 0 0 1.5px var(--ql-ink), 0 0 0 5px var(--ql-paint); }
.ql-h-rx::before, .ql-h-rr::before { width: 8px; height: 16px; margin: -8px 0 0 -4px; border-radius: 3px; }
.ql-h-at::before { background: var(--ql-ink); box-shadow: 0 0 0 1.5px var(--ql-light); }

/* ── ask us ──────────────────────────────────────────────────────────────────── */
.ql-ask { --ql-fl: 40%; }
.ql-ask::before { background: radial-gradient(60% 38% at var(--ql-bx) 12%, rgb(228 228 225 / .7), transparent 70%), linear-gradient(180deg, var(--ql-bg) 0, var(--ql-curve) calc(var(--ql-fl) - 22%), var(--ql-light) var(--ql-fl), var(--ql-curve) calc(var(--ql-fl) + 30%), var(--ql-bg) 100%); }
.ql-ask-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ql-gap); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.ql-form { grid-column: 1 / 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ql-gap); row-gap: 28px; }
.ql-f { grid-column: 1 / -1; display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ql-f-half { grid-column: auto; }
.ql-f > label, .ql-f legend { font-family: var(--ql-disp); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; padding: 0; }
.ql-f legend { margin-bottom: 8px; }
.ql-f input[type="text"], .ql-f input[type="email"], .ql-f select, .ql-f textarea {
  font: inherit; color: var(--ql-ink); background: transparent; border: 0; border-bottom: 1px solid rgb(16 17 18 / .22); border-radius: 0;
  padding: 10px 0; min-height: 44px; box-sizing: border-box; width: 100%;
}
.ql-f textarea { resize: vertical; }
.ql-f textarea::placeholder { color: rgb(16 17 18 / .62); font-style: italic; }
.ql-f :is(input, select, textarea):focus { outline: none; border-bottom: 2px solid var(--ql-paint); }
.ql-f-about, .ql-f-when { display: block; }
.ql-f-about label, .ql-f-when label { display: inline-flex; align-items: center; gap: 10px; margin: 0 22px 4px 0; min-height: 44px; cursor: pointer; }
.ql-f-about input, .ql-f-when input { width: 16px; height: 16px; margin: 0; accent-color: var(--ql-ink); }
.ql-f-about span, .ql-f-when span { --w: 300; font-family: var(--ql-disp); font-weight: var(--w); font-variation-settings: "wght" var(--w); font-size: 16px; transition: font-variation-settings .45s var(--ql-ease); }
.ql-f-about input:checked + span, .ql-f-when input:checked + span { --w: 780; }
.ql-hint { font-style: italic; font-size: 14px; }
.ql-send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; }
.ql-send-b { font-family: var(--ql-disp); font-weight: 760; font-size: 16px; letter-spacing: .02em; color: var(--ql-ink); background: none; border: 0; padding: 12px 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ql-status { font-style: italic; font-size: 15px; }
.ql-js .ql-f-which[hidden] { display: none; }
.ql-ask-side { grid-column: 9 / 13; display: grid; gap: 16px; padding-top: 30px; }
.ql-ask-where { font-family: var(--ql-disp); font-weight: 700; font-variation-settings: "wght" 700; font-size: 17px; line-height: 1.35; }
.ql-ask-note { font-size: 15px; }
.ql-foot { margin-top: clamp(96px, 12vw, 160px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center; font-size: 15px; }
.ql-foot .ql-mark { grid-row: 1 / 3; align-self: start; }
.ql-foot-n { font-family: var(--ql-disp); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.ql-foot-s { font-size: 14px; }

/* ── the camera moves along the cove as you scroll; photographs switch on; the plan settles ─ */
@property --ql-bx { syntax: "<percentage>"; inherits: true; initial-value: 62%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ql-sec { animation: ql-bx linear both; animation-timeline: view(); }
    @keyframes ql-bx { from { --ql-bx: 30%; } to { --ql-bx: 74%; } }
    .ql-ph img { animation: ql-on linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    @keyframes ql-on { from { filter: brightness(.74); } to { filter: none; } }
    .ql-find::before { animation: ql-tick-x linear both; animation-timeline: view(); animation-range: cover 25% cover 38%; }
    .ql-find::after { animation: ql-tick-y linear both; animation-timeline: view(); animation-range: cover 25% cover 38%; }
    @keyframes ql-tick-x { from { transform: scaleY(0); } to { transform: none; } }
    @keyframes ql-tick-y { from { transform: scaleX(0); } to { transform: none; } }
    .ql-route { view-timeline: --ql-route block; }
    .ql-hp-tilt { animation: ql-tilt linear both; animation-timeline: --ql-route; animation-range: entry 10% cover 45%; }
    @keyframes ql-tilt { from { transform: perspective(1400px) rotateX(52deg); } to { transform: none; } }
    .ql-hp-route { animation: ql-draw linear both; animation-timeline: --ql-route; animation-range: cover 25% cover 70%; }
    @keyframes ql-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    .ql-hp-trav { animation: ql-trav linear both; animation-timeline: --ql-route; animation-range: cover 25% cover 70%; }
    @keyframes ql-trav { from { offset-distance: 0%; } to { offset-distance: 100%; } }
    .ql-place { animation: ql-ink steps(1, end) both; animation-timeline: --ql-route; }
    @keyframes ql-ink { from { opacity: .45; } to { opacity: 1; } }
    .ql-place:nth-child(1) { animation-range: cover 30% cover 31%; }
    .ql-place:nth-child(2) { animation-range: cover 38.5% cover 39.5%; }
    .ql-place:nth-child(3) { animation-range: cover 48% cover 49%; }
    .ql-place:nth-child(4) { animation-range: cover 58.5% cover 59.5%; }
    .ql-place:nth-child(5) { animation-range: cover 67% cover 68%; }
  }
}

/* ── narrower screens ────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ql-g-head .ql-l, .ql-garage-sub { grid-column: 1 / 9; }
  .ql-g-intro { grid-column: 1 / 11; grid-row: 3; margin-top: 22px; }
  .ql-g-in { grid-column: 1 / 13; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ql-gap); row-gap: 14px; margin-top: 40px; }
  .ql-g-cars { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ql-gap); }
  .ql-g-cars .ql-g-lab, .ql-g-cars .ql-g-seam { grid-column: 1 / -1; }
  .ql-plan { grid-column: 1 / 13; grid-row: 3; justify-self: center; margin-top: 40px; }
  .ql-g-out { grid-column: 1 / 13; grid-row: 4; max-width: 70ch; }
}
@media (max-width: 1024px) {
  .ql-cars-head .ql-xl, .ql-cars-head .ql-lede { grid-column: 1 / -1; }
  .ql-cars-head .ql-lede { margin-top: 24px; max-width: 52ch; }
  .ql-sp-fig, .ql-spread-t { grid-column: 1 / -1; }
  .ql-sp-fig { max-width: 640px; }
  .ql-spread-t { margin-top: 40px; }
  .ql-bay, .ql-read { grid-column: 1 / -1; grid-row: auto; }
  .ql-read { margin-top: 36px; padding: 0; order: 2; }
  .ql-floorcap { margin-left: 0; }
  .ql-route-head .ql-l, .ql-route-head .ql-lede { grid-column: 1 / -1; }
  .ql-route-head .ql-lede { margin-top: 20px; }
  .ql-place { width: min(23%, 230px); }
  .ql-place p { font-size: 15px; }
  .ql-terms { margin-left: 0; }
  .ql-gauge { grid-column: 1 / 6; max-width: none; }
  .ql-qs { grid-column: 7 / 13; }
  .ql-away-grid .ql-l { grid-column: 1 / -1; }
  .ql-away-t { grid-column: 1 / 11; margin-top: 28px; }
  .ql-form { grid-column: 1 / -1; }
  .ql-ask-side { grid-column: 1 / -1; padding-top: 48px; max-width: 52ch; }
}
@media (max-width: 860px) {
  .ql-list { grid-template-columns: 1fr; gap: 10px; }
  .ql-item { grid-template-columns: 132px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 8px; border-radius: 14px; }
  .ql-item-p { grid-row: 1 / 4; border-radius: 8px; }
  .ql-item-n { margin: 2px 0 0; font-size: 18px; }
  .ql-item-l { margin: 2px 0 0; font-size: 14px; }
  .ql-item-go { margin: 6px 0 2px; font-size: 12px; }
  .ql-gal-th { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px; margin: 12px -4px 0; }
  .ql-gal-th li { scroll-snap-align: start; }
  .ql-route-plan { margin: 36px 0 56px; display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); column-gap: 18px; align-items: start; }
  .ql-hp-tilt { position: sticky; top: calc(var(--bar-h, 40px) + 72px); }
  .ql-hp-w { display: none; }
  .ql-hp-v { display: block; max-height: calc(100svh - var(--bar-h, 40px) - 110px); width: auto; max-width: 100%; margin: 0 auto; }
  .ql-places { position: static; display: grid; gap: clamp(40px, 12vh, 110px); padding: 6vh 0 12vh; }
  .ql-place { position: relative; width: auto; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; text-align: left !important; }
  .ql-place::before { display: none; }
  .ql-terms div { grid-template-columns: 1fr; }
  .ql-find-grid { display: block; }
  .ql-gauge { position: relative; top: auto; max-width: 440px; }
  .ql-qs { margin-top: 56px; }
  .ql-q { margin-top: 64px; }
  .ql-find-then { margin-top: 64px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
    .ql-place { animation: ql-ink steps(1, end) both; animation-timeline: view(); animation-range: cover 30% cover 31% !important; }
  }
}
@media (max-width: 700px) {
  .ql-do .ql-then { margin-left: 0; }
  .ql-g-in { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-row: 5; }
  .ql-g-cars { grid-template-columns: 1fr; }
  .ql-plan { grid-row: 3; }
  .ql-g-out { grid-row: 4; }
  .ql-form { grid-template-columns: 1fr; }
  .ql-f-half { grid-column: 1 / -1; }
  .ql-away-v { margin-top: 56px; }
}
@media (max-width: 420px) {
  .ql-g-in { grid-template-columns: 1fr 1fr; }
  .ql-g-f input, .ql-g-f select { font-size: 17px; }
  .ql-route-plan { column-gap: 14px; }
  .ql-place p { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .spec-quarterlight #spec-main *, .spec-quarterlight #spec-main *::before, .spec-quarterlight #spec-main *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}