/* Interaction layers: keep the title and images in the same isolated white scene. */
:root{--muted:#666}
.home-scene{background:#fff;cursor:grab;touch-action:none}
.home-scene.is-dragging,.home-scene.is-dragging *{cursor:grabbing!important;user-select:none}
.float-tile{left:0!important;top:0!important;animation:none!important;touch-action:none;user-select:none;transition:none}
.float-photo img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.float-tile:hover .float-photo,.float-tile:focus-visible .float-photo{transform:scale(1.025);box-shadow:none}
.home-identity{mix-blend-mode:difference;color:#fefefd}
.home-identity .wordmark{font-size:clamp(35px,5.2vw,100px)}
.home-identity a{color:inherit}
/* Home controls sit above moving imagery. Difference blending keeps the
   labels legible over both light and dark photographs, like the reference
   site's editorial controls. */
.home-footnote{mix-blend-mode:difference;color:#fff;font-size:14px;line-height:1.45}
.home-footnote>span{color:inherit}
.home-footnote button,.home-footnote>a{color:inherit;font-size:14px;font-weight:600}
.home-footnote{line-height:1.45}
.backdrop-dismiss{display:none}
.vertical-close{unicode-bidi:plaintext}
body[data-view=garage-ranking] .home-scene,body[data-view=ranking] .home-scene{opacity:.2}
body[data-view=garage-ranking] .site-nav{opacity:.35}
body[data-view=garage-ranking] .nav-home{display:block}
/* Only functional content is dimmed; the opposite sheet edge stays responsive. */
body[data-view=garage] .home-identity{z-index:8}
body:not([data-view=home]) .float-tile{pointer-events:none}
.garage-sheet>.vertical-close{top:0;transform:translate3d(0,var(--close-y,30vh),0)}
.ranking-sheet>.vertical-close{top:0;transform:translate3d(0,var(--close-y,38vh),0)}
.detail-sheet>.vertical-close{left:0;top:47px;transform:translate3d(var(--close-x,49vw),0,0)}
.continue-browsing{left:0;transform:translate3d(var(--close-x,44vw),0,0)}
.image-dialog>#lightbox-close{left:0;right:auto;transform:translate3d(var(--close-x,45vw),0,0)}
[data-track-close]{will-change:transform;transition:opacity 160ms;min-height:24px}
.select-label,.filter-note>span,.detail-image-caption,.detail-kicker,.advanced-item>dt,.story-body figcaption,.scope-note,.no-story,.ranking-controls>label,.rank-summary,.rank-car small,.ranking-footer,.compare-subtotal small,.comparison-table th,.compare-note,.compare-radar p span{color:#666}
.tier-button{color:#737373}
.tier-button:hover{color:#111}
.compare-empty p{color:#666}
.compare-subtotal small{max-width:none}
.vehicle-grid{gap:34px 20px}
.panel-link:hover{transform:none}
.collection-footer,.filter-note{line-height:1.5}
.compare-radar svg{overflow:visible}
.float-caption{max-width:300px;white-space:normal;min-width:100%;font-size:12px;line-height:1.4}
@media(max-width:1100px){.vehicle-grid{gap:28px 16px}}
@media(max-width:700px){
 .home-identity .wordmark{font-size:8.4vw;white-space:nowrap}
 .home-footnote{font-size:12px;bottom:28vh}
 .home-footnote>span{color:#666}
 .float-caption{display:none}
 .vehicle-grid{gap:25px 14px}
 .garage-sheet>.vertical-close,.ranking-sheet>.vertical-close{left:auto;right:14px;top:22px;writing-mode:horizontal-tb;transform:none}
 .detail-sheet>.vertical-close{left:auto;right:14px;top:22px;transform:none}
 .continue-browsing{left:15px;transform:none}
 .image-dialog>#lightbox-close{left:auto;right:16px;transform:none}
 body[data-view=garage-ranking] .site-nav{opacity:0;pointer-events:none}
}
@media(pointer:coarse),(prefers-reduced-motion:reduce){
 .garage-sheet>.vertical-close{top:20px;transform:none}
 .ranking-sheet>.vertical-close{top:58px;transform:none}
 .detail-sheet>.vertical-close{left:auto;right:24px;transform:none}
 .continue-browsing{left:16px;transform:none}
 .image-dialog>#lightbox-close{left:auto;right:20px;transform:none}
 [data-track-close],.edge-sheet{will-change:auto}
}
@media(max-width:700px) and (pointer:coarse){.garage-sheet>.vertical-close,.ranking-sheet>.vertical-close{top:22px;transform:none}}

/* Garage filter rail: keep count, active criteria, and controls in one visual system. */
.filter-status{border:1px solid #deded9;padding:11px 12px 12px;margin-bottom:18px;background:linear-gradient(180deg,#fbfbf9,#fff);}
.filter-status-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:10px;line-height:1.2;letter-spacing:.04em;color:#777;}
.filter-status-head strong{font-size:11px;letter-spacing:0;color:#111;font-weight:600;white-space:nowrap;}
.filter-progress{height:6px;margin-top:9px;background:#ecece8;border-radius:999px;overflow:hidden;}
.filter-progress>span{display:block;width:var(--filter-fill,100%);height:100%;border-radius:inherit;background:linear-gradient(90deg,#161616,#7a7a73);transition:width 360ms cubic-bezier(.22,.8,.32,1);}
.active-filters{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;min-height:17px;}
.active-filters button,.active-filters .filter-all{font:inherit;font-size:10px;line-height:1.2;letter-spacing:0;color:#222;padding:4px 6px;border:1px solid #d6d6d1;background:#fff;}
.active-filters button{cursor:pointer;transition:background 150ms,color 150ms,border-color 150ms;}
.active-filters button:hover,.active-filters button:focus-visible{background:#111;color:#fff;border-color:#111;}
.active-filters button span{padding-left:3px;color:#888;}
.active-filters button:hover span,.active-filters button:focus-visible span{color:#fff;}
.active-filters .filter-all{border-color:transparent;color:#999;padding-left:0;}
.tier-filters{padding:0 0 9px;border-bottom:1px solid #e8e8e3;margin-bottom:17px;}
.tier-button{position:relative;padding:2px 4px 3px 0;}
.tier-button sup{font-size:9px;font-weight:400;color:#999;vertical-align:middle;margin-left:2px;}
.tier-button[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#111;}
.filter-field-grid{display:grid;grid-template-columns:1fr;gap:0 12px;}
.filter-more{border-top:1px solid #e8e8e3;border-bottom:1px solid #e8e8e3;margin:1px 0 11px;padding:0;}
.filter-more>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:11px;line-height:1.3;color:#555;}
.filter-more>summary::-webkit-details-marker{display:none;}
.filter-more>summary::after{content:"+";font-size:16px;color:#999;transition:transform 180ms ease;}
.filter-more[open]>summary::after{content:"−";transform:rotate(180deg);}
.filter-more>summary:hover,.filter-more>summary:focus-visible{color:#111;}
#more-filter-count{font-size:10px;color:#111;margin-left:auto;margin-right:7px;}
.filter-more-grid{display:grid;grid-template-columns:1fr;gap:0 12px;padding:0 0 7px;}
.range-label{display:block;color:#888;font-size:10px;line-height:1.35;margin:0 0 12px;}
.range-label>span{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;}
.range-label output{color:#111;font-variant-numeric:tabular-nums;}
.range-label input[type=range]{display:block;width:100%;height:12px;margin:0;accent-color:#161616;cursor:pointer;}
.range-label input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#111 0 var(--range-fill,0%),#e5e5e0 var(--range-fill,0%) 100%);}
.range-label input[type=range]::-moz-range-track{height:2px;background:#e5e5e0;}
.range-label input[type=range]::-moz-range-progress{height:2px;background:#111;}
.range-label input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;margin-top:-5px;border:1px solid #111;border-radius:50%;background:#fff;}
.range-label input[type=range]::-moz-range-thumb{width:10px;height:10px;border:1px solid #111;border-radius:50%;background:#fff;}
@media (min-width:701px){
 .filter-field-grid,.filter-more-grid{grid-template-columns:1fr 1fr;}
 .filter-field-grid .select-label:first-child,.filter-field-grid .select-label:nth-child(2){grid-column:span 1;}
}
@media (max-width:700px){
 .filter-status,.tier-filters,.search-label,.filter-field-grid,.filter-more{grid-column:1/-1;}
 .filter-status{margin-bottom:0;}
 .tier-filters{border-bottom:1px solid #e8e8e3;}
 .filter-field-grid{grid-template-columns:1fr 1fr;gap:9px 16px;}
 .filter-field-grid .select-label{min-width:0;}
 .filter-more-grid{grid-template-columns:1fr 1fr;gap:0 16px;}
 .filter-more-grid .range-label{grid-column:span 2;}
 .filter-more>summary{padding:9px 0;}
 .active-filters{max-height:48px;overflow:auto;}
}

/* Garage filter controls: compact, consistent numeric inputs and exact star chips. */
.stars-filter{border:0;margin:0 0 12px;padding:0;min-width:0;}
.stars-filter legend{padding:0;color:#888;font-size:10px;line-height:1.35;margin-bottom:6px;}
.stars-options{display:flex;flex-wrap:wrap;gap:6px;}
.stars-options label{display:inline-flex;align-items:center;gap:4px;border:1px solid #dddcd6;padding:5px 7px;color:#333;font-size:11px;line-height:1;cursor:pointer;transition:background 150ms,color 150ms,border-color 150ms;}
.stars-options label:has(input:checked){background:#111;color:#fff;border-color:#111;}
.stars-options input{position:absolute;opacity:0;pointer-events:none;}
.number-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 8px;margin:0 0 12px;color:#888;font-size:10px;line-height:1.35;}
.number-filter>span{grid-column:1/-1;}
.number-filter input{width:100%;min-width:0;border:1px solid #d8d8d2;border-radius:0;background:#fff;color:#111;font:inherit;font-size:12px;line-height:1;padding:7px 8px;outline:0;transition:border-color 150ms,box-shadow 150ms;}
.number-filter input::placeholder{color:#aaa;}
.number-filter input:focus{border-color:#111;box-shadow:0 0 0 1px #111;}
.number-filter output{font-size:10px;color:#111;white-space:nowrap;font-variant-numeric:tabular-nums;}
@media (min-width:701px){.filter-more-grid .stars-filter{grid-column:span 2;}.filter-more-grid .number-filter{min-width:0;}}
@media (max-width:700px){.filter-more-grid .stars-filter,.filter-more-grid .number-filter{grid-column:span 2;}.stars-options{gap:5px;}.stars-options label{font-size:10px;padding:5px 6px;}}
