/* Vulcan — gear-shift menu and "finish line" footer. */
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The menu button is the way into the gearbox on every width. */
.menu-toggle{display:flex;align-items:center;gap:14px;min-height:48px;background:none;padding:10px 0 10px 12px;font-size:14px;color:var(--petrol)}
@media(min-width:851px){.site-header .menu-toggle{margin-left:4px}}
@media(max-width:850px){.site-header nav{display:none!important}}

.gear-menu{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--metal);overflow:hidden}
.gear-menu:not([open]){display:none}
.gear-menu::backdrop{background:transparent}
.gear-blade{position:absolute;inset:0;background:var(--orange);z-index:0}
.gear-panel{position:relative;z-index:1;height:100%;overflow:auto;overscroll-behavior:contain;background:var(--petrol);padding:26px var(--gutter) 30px;display:grid;grid-template-rows:auto 1fr;
  background-image:repeating-linear-gradient(135deg,#ffffff07 0 2px,transparent 2px 14px)}
.gear-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:1px solid #b4cbc040;padding-bottom:20px}
.gear-kicker{font-size:13px;color:#c8d9ce;margin:0 0 6px}
.gear-head h2{font:700 clamp(36px,5vw,64px)/.95 var(--display);margin:0;color:var(--metal)}
.gear-close{width:56px;height:56px;border-radius:50%;border:1.5px solid #b4cbc080;background:transparent;color:var(--metal);display:grid;place-items:center;flex:none;transition:background .2s,transform .35s var(--ease)}
.gear-close .icon{width:26px;height:26px;transform:rotate(45deg);stroke:currentColor;fill:none;stroke-width:1.8}
.gear-close:hover,.gear-close:focus-visible{background:var(--orange);color:var(--petrol);transform:rotate(90deg)}
.gear-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:center;padding-top:clamp(20px,4vh,48px)}
.gear-list{list-style:none;margin:0;padding:0;counter-reset:none}
.gear-list a{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid #b4cbc030;color:var(--metal);text-decoration:none;position:relative}
.gear-list b{grid-row:1/span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid #b4cbc070;font:700 26px/1 var(--display);transition:background .2s,color .2s,border-color .2s,transform .35s var(--ease)}
.gear-list span{font:700 clamp(30px,4.2vw,58px)/1 var(--display);letter-spacing:-.01em;transition:transform .35s var(--ease),color .2s}
.gear-list small{font-size:14px;color:#c8d9ce;margin-top:4px}
.gear-list a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.gear-list a:hover::after,.gear-list a:focus-visible::after,.gear-list a.is-engaged::after{transform:scaleX(1)}
.gear-list a:hover span,.gear-list a:focus-visible span,.gear-list a.is-engaged span{transform:translateX(12px);color:#fff}
.gear-list a:hover b,.gear-list a:focus-visible b,.gear-list a.is-engaged b{background:var(--orange);border-color:var(--orange);color:var(--petrol);transform:rotate(-8deg)}
.gear-list a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.gear-dash{display:grid;gap:18px;justify-items:center}
.tach{width:min(100%,380px);height:auto;overflow:visible}
.tach-ticks line{stroke:#c8d9ce;stroke-width:2}
.tach-ticks line.red{stroke:var(--orange)}
.tach-red{fill:none;stroke:var(--orange);stroke-width:8;opacity:.85}
.tach-nums text{fill:#c8d9ce;font:600 15px var(--display);text-anchor:middle}
.tach-unit{fill:#c8d9ce;font:500 12px var(--body);text-anchor:middle}
.needle{transform-box:view-box;transform-origin:150px 160px;transform:rotate(-120deg)}
.needle path{fill:var(--orange)}
.needle circle{fill:var(--metal);stroke:var(--petrol);stroke-width:3}
.gearbox{width:min(100%,320px);height:auto;overflow:visible}
.gearbox .slot{fill:none;stroke:#0b2826;stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
.gear-labels text{fill:var(--metal);font:700 22px var(--display);text-anchor:middle}
.knob circle{fill:var(--orange);stroke:var(--metal);stroke-width:3}
.knob .knob-dot{fill:var(--petrol);stroke:none}
@media(max-width:850px){
  .gear-body{grid-template-columns:1fr;align-items:start}
  .gear-dash{order:-1;grid-template-columns:1fr 1fr;align-items:center}
  .tach{width:100%}.gearbox{width:88%}
  .gear-list a{grid-template-columns:52px minmax(0,1fr);column-gap:14px;padding:10px 0}
  .gear-list b{width:44px;height:44px;font-size:22px}
}
@media(max-width:850px) and (max-height:700px),(max-height:520px){.gear-dash{display:none}.gear-list small{display:none}}
@media(max-width:400px){.gear-list span{font-size:28px}.gear-close{width:48px;height:48px}}

/* Footer: the car comes home to the workshop. */
.finish-line{position:relative;height:clamp(250px,30vw,520px);margin:clamp(30px,5vw,70px) calc(var(--gutter) * -1) clamp(18px,3vw,36px)}
.finish-scene{display:block;width:100%;height:100%}
.sign-text{font:700 128px/1 var(--display);letter-spacing:-.01em;fill:#2c5450;transition:fill .6s,filter .6s}
.finish-line.is-home .sign-text{fill:var(--orange);filter:drop-shadow(0 0 14px #ffaa70aa)}
.interior{opacity:.25;transition:opacity .6s}
.finish-line.is-home .interior{opacity:1}
.door rect{fill:#b9c3bb;stroke:#8a998f;stroke-width:2}
.car-beam{opacity:0;transition:opacity .3s}
.finish-line.is-driving .car-beam{opacity:1}
@media (prefers-reduced-motion:no-preference){.finish-line.is-home .sign-text{animation:neon 1.1s steps(1) 1}}
@keyframes neon{0%{fill:#2c5450;filter:none}15%{fill:var(--orange)}25%{fill:#2c5450;filter:none}40%{fill:var(--orange)}100%{fill:var(--orange)}}
@media(max-width:700px){.finish-line{height:240px}}

.lamp-cone{opacity:0;transition:opacity .35s}
.lamp.is-on .lamp-cone{opacity:.18}
.lamp-bulb{transition:fill .3s}
.lamp.is-on .lamp-bulb{fill:#fff3c4}
.finish-greeting{position:absolute;right:var(--gutter);top:8%;margin:0;text-align:right;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s var(--ease);z-index:2}
.finish-greeting b{display:block;font:700 clamp(46px,6vw,104px)/.9 var(--display);color:var(--orange)}
.finish-greeting span{display:block;margin-top:10px;font-size:clamp(15px,1.3vw,19px);color:#c8d9ce}
.finish-line.is-home .finish-greeting{opacity:1;transform:none}
@media(max-width:700px){.finish-greeting{position:static;text-align:left;padding:0 var(--gutter) 8px;opacity:1;transform:none}.finish-greeting b{font-size:44px}.finish-line{height:auto}.finish-scene{height:240px}}

/* closed geometry for the diagonal wipe: both layers start parked off the right edge */
.gear-menu .gear-blade,.gear-menu .gear-panel{clip-path:polygon(-25% 0,140% 0,140% 100%,0 100%)}
/* the scene keeps its proportions on wide screens so the lit sign is never cropped */
@media(min-width:701px){.finish-line{height:auto}.finish-scene{height:auto;aspect-ratio:1600/520;max-width:1920px;margin-inline:auto}}