:root{--c:#ff7a1a;--x:max(20px,6vw);--bx:var(--x);--bw:min(900px,calc(100vw - 2*var(--x)));--cx:var(--x);--cw:560px;--hb:56px;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#0b0824;color:#fff;-webkit-font-smoothing:antialiased;font-family:Archivo,system-ui,sans-serif}
body{overflow-x:hidden}
#gl{position:fixed;left:0;top:0;width:100%;height:100vh;display:block;background:#0b0824;transition:opacity 1s ease}
.pre #gl{opacity:0}
#road{width:1px}

/* ---- edge chrome: name lockup, lap indicator, contact ---- */
#top{position:fixed;left:var(--x);right:var(--x);top:0;height:60px;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;transition:opacity .6s ease .9s}
.pre #top{opacity:0}
#top a{color:#fff;text-decoration:none;pointer-events:auto;opacity:.92;transition:opacity .3s,color .3s,transform .4s var(--ease)}
#top a:hover,#top a:focus-visible{opacity:1;color:var(--c);outline:0}
.athome #lock{opacity:0;transform:translateY(-8px);pointer-events:none}
#laps{display:flex;align-items:center;gap:20px;min-width:0}
#laps ol{display:flex;gap:16px;list-style:none}
#laps button{all:unset;cursor:pointer;font:inherit;letter-spacing:.08em;color:rgba(255,255,255,.36);padding:5px 1px 3px;border-bottom:2px solid transparent;transition:color .3s,border-color .3s;pointer-events:auto}
#laps button.done{color:rgba(255,255,255,.7)}
#laps button.on{color:#fff;border-color:var(--c)}
#laps button:hover,#laps button:focus-visible{color:#fff;outline:0}
#lapname{color:var(--c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30vw;transition:opacity .3s}
#lapname:empty{opacity:0}
/* the numbers keep one place at every stop: the top bar no longer shows the stop's title, the boards name each stop (ADR-0045) */
#lapname{display:none}
#laps button{font-variant-numeric:tabular-nums}
/* the finale: a scrim keeps the chrome legible over the sunset, the lockup steps aside for the card's name, and the finish tab reads like the other stops (ADR-0011) */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:var(--scrim,200px);z-index:6;pointer-events:none;background:linear-gradient(180deg,rgba(11,8,36,.72),rgba(11,8,36,.38) 55%,rgba(11,8,36,0));opacity:.001;will-change:opacity;transition:opacity .8s ease}
.finale body::before{opacity:1}
.finale #lock{opacity:0;pointer-events:none}
.finale #lapname{color:#fff;border-bottom:2px solid var(--c);padding:5px 1px 3px}

/* ---- hero ---- */
/* the name alone, in the band between the top chrome and the heads in the team photo; lap.js sets --htop and --hfs from the photo's head line (ADR-0024) */
#hero{position:fixed;left:var(--x);right:var(--x);top:var(--htop,clamp(64px,10vh,120px));z-index:5;transition:opacity .3s,transform .5s var(--ease);pointer-events:none}
#hero.off{opacity:0;transform:translateY(-24px)}
#hero h1{font-size:var(--hfs,clamp(46px,8.6vw,160px));line-height:.92;font-weight:900;font-style:italic;font-stretch:112%;text-transform:uppercase;letter-spacing:-.025em;white-space:nowrap;color:#fff}
#hero h1 span{display:inline-block;padding-right:.08em;clip-path:inset(-12% 0 -12% 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1) .2s}
.pre #hero h1 span{clip-path:inset(-12% 100% -12% 0)}

/* ---- the HUD: one fixed spot, aligned to the board ---- */
#hud{position:fixed;left:var(--bx);bottom:var(--hb);width:var(--bw);z-index:5;height:0}
.stop{position:absolute;left:0;bottom:0;width:100%;padding:16px 30px 18px 24px;border-left:3px solid var(--k);opacity:0;transition:opacity .25s;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,8,36,.8) 0%,rgba(11,8,36,.6) 55%,rgba(11,8,36,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14px);mask-image:linear-gradient(180deg,transparent,#000 14px)}
.stop.on{opacity:1;pointer-events:auto}
.stop>*{opacity:0;transform:translateY(14px);transition:opacity .18s,transform .18s}
.stop.on>*{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.stop.on>h2{transition-delay:.07s}.stop.on>p,.stop.on>.links{transition-delay:.14s}.stop.on>footer{transition-delay:.22s}
.kick{display:flex;flex-direction:column;gap:4px;margin-bottom:9px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.kick b{font-weight:700;color:var(--k);letter-spacing:.18em}
.kick ul{display:flex;flex-wrap:wrap;list-style:none}
.kick li:not(:last-child)::after{content:"\00b7";margin:0 .7em;color:rgba(255,255,255,.35)}
.stop h2{font-size:clamp(26px,2.9vw,44px);line-height:1.02;font-weight:900;font-style:italic;font-stretch:80%;text-transform:uppercase;letter-spacing:-.008em}
.stop p{margin-top:9px;font-size:clamp(16px,1.25vw,18.5px);line-height:1.42;font-weight:500;color:#ebe7f7;max-width:84ch}
/* the finale's foreground: portrait, name, links and footer in the left column; the car is tracked in the right half behind them (ADR-0025) */
/* the card is painted and composited from load (opacity .001, never 0), so nothing is decoded or rasterised at the climax; it fades in and out as one piece, its panel with its content */
.stop.end{left:0;width:auto;max-width:min(720px,90vw);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;column-gap:24px;align-items:center;padding:20px 30px 20px 24px;opacity:.001;will-change:opacity;transition:opacity .2s ease}
.stop.end.on{opacity:1;transition:opacity .9s ease}
/* the card's backing is solid behind every line of it (the course, the racing line and the fireworks never show through the text), fading only past its right edge */
.stop.end{background:linear-gradient(90deg,rgba(11,8,36,.92) 0%,rgba(11,8,36,.9) calc(100% - 28px),rgba(11,8,36,0) 100%)}
.stop.end>*,.stop.end.on>*{opacity:1;transform:none;transition:none}
.stop.end .face{grid-row:1/5;width:clamp(120px,13vw,190px);height:clamp(120px,13vw,190px);object-fit:cover;object-position:50% 30%;border-radius:50%;border:3px solid var(--k);box-shadow:0 8px 40px rgba(0,0,0,.45)}
.stop.end h2{align-self:end;white-space:nowrap}
/* the role under the name (ADR-0026) */
.stop.end .role{margin-top:7px;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap}
.stop.end .links{margin-top:10px}
.stop.end footer{margin-top:16px;align-self:start}
.stop.end footer>*,.stop.end .links a{white-space:nowrap}
.links{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.links a{display:inline-block;padding:12px 26px;font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#0b0824;background:#fff;text-decoration:none;transition:background .15s}
.links a:hover,.links a:focus-visible{background:var(--k);outline:0}
.stop footer{margin-top:20px;display:flex;gap:22px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.stop footer button{all:unset;cursor:pointer;color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.stop footer button:hover,.stop footer button:focus-visible{color:var(--k);border-color:var(--k)}

/* ---- the finish card (ADR-0055): a bit more finish, kept simple. A frame and an accent stripe in the car's orange, the photo in a ring, GitHub and LinkedIn
   as buttons with their marks. lap.js makes the ring and the marks over what buildHUD made (finishUI) ---- */
.stop.end{--o:#ff7a1a;border:1px solid rgba(255,122,26,.62);border-left:6px solid var(--o);padding:22px 36px 22px 26px;column-gap:26px;background:rgba(11,8,36,.92);-webkit-mask-image:none;mask-image:none}
.stop.end .ring{grid-row:1/5;display:block;padding:5px;border:3px solid var(--o);border-radius:50%;line-height:0}
.stop.end .ring .face{display:block;width:clamp(116px,12.4vw,180px);height:clamp(116px,12.4vw,180px);border:0;border-radius:50%;object-fit:cover;object-position:50% 50%;box-shadow:none}
.stop.end .links{gap:10px;margin-top:12px}
.stop.end .links a{display:inline-flex;align-items:center;gap:10px;padding:11px 20px 11px 15px;border-radius:3px;letter-spacing:.14em;transition:background .15s}
.stop.end .links a svg{display:block;flex:none;width:19px;height:19px;fill:currentColor}
.stop.end .links a:hover,.stop.end .links a:focus-visible{background:var(--o);outline:0}
.stop.end footer button:hover,.stop.end footer button:focus-visible{color:var(--o);border-color:var(--o)}

/* ---- the finish's previews (ADR-0046): at the finish the five numbers give way to five small cards, each a thumbnail of its board, its number, a slot for
   its years and its title, and the contact button fades away (the visitor is at the contact card). Everywhere else the numbers are where they always are
   (ADR-0045): the cards are laid over the bar, out of its flow. They come and go by opacity and transform alone ---- */
#laps>ol:first-child,#gocontact{will-change:opacity}
#laps>ol:first-child{transition:opacity .35s ease}
#top #gocontact{transition:opacity .5s ease,color .3s}
.finale #laps>ol:first-child{opacity:0}
.finale #laps>ol:first-child button{pointer-events:none}
.finale #top #gocontact{opacity:0;pointer-events:none}
#pv{position:absolute;left:var(--pvx,50%);top:8px;display:flex;gap:12px;list-style:none;opacity:.001;transform:translateX(-50%) scale(.84);transform-origin:50% 0;will-change:opacity,transform;transition:opacity .25s ease,transform .45s var(--ease);pointer-events:none}
.finale #pv{opacity:1;transform:translateX(-50%);transition:opacity .7s ease .1s,transform .8s var(--ease) .1s}
#pv li{flex:none}
#pv button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;align-items:baseline;width:clamp(108px,9.4vw,176px);padding:0 0 8px;cursor:pointer;font:inherit;color:#fff;background:rgba(11,8,36,.78);border-top:2px solid var(--k);transition:background .2s}
.finale #pv button{pointer-events:auto}
#pv button:hover,#pv button:focus-visible{background:rgba(11,8,36,.96);outline:0}
#pv button:hover .pvt,#pv button:focus-visible .pvt{color:#fff}
#pv img{grid-column:1/3;display:block;width:100%;height:auto;aspect-ratio:var(--pva,2);object-fit:cover;background:#0b0824;margin-bottom:8px}
#pv .pvn{padding-left:9px;font-size:12.5px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--k)}
#pv .pvy{padding-right:9px;text-align:right;font-size:10.5px;font-weight:600;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.62);white-space:nowrap}
#pv .pvt{grid-column:1/3;margin-top:3px;padding:0 9px;font-size:10.5px;line-height:1.32;font-weight:600;letter-spacing:.07em;color:rgba(255,255,255,.84);transition:color .2s}

/* ---- scroll cue: a thin line in the HUD column ---- */
#cue{position:fixed;left:var(--x);bottom:var(--hb);z-index:5;display:flex;align-items:center;gap:16px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;transition:opacity .4s ease 1.6s;pointer-events:none}
#cue.off{opacity:0;transition-delay:0s}
.pre #cue{opacity:0}
#cue i{position:relative;display:block;width:2px;height:48px;background:rgba(255,255,255,.22);overflow:hidden}
#cue i::after{content:"";position:absolute;left:0;top:0;width:2px;height:16px;background:var(--c);box-shadow:0 0 8px var(--c);animation:cue 1.7s cubic-bezier(.55,0,.45,1) infinite}
@keyframes cue{0%{transform:translateY(-16px)}100%{transform:translateY(48px)}}

@media (max-width:760px),(max-aspect-ratio:1/1){
  :root{--x:16px;--hb:22px}
  #top{height:50px;font-size:11px;gap:12px}
  #laps ol{gap:10px}
  #lapname{display:none}
  #hero{top:76px}
  #hero h1{white-space:normal;font-size:17.5vw;font-stretch:100%}
  .stop.end{width:100%;max-width:none;column-gap:16px;padding:14px 14px 14px 14px}
  .stop.end .face{width:84px;height:84px;border-width:2px}
  .stop.end .role{white-space:normal;font-size:11px;letter-spacing:.14em;margin-top:5px}
  .stop{padding:10px 14px 12px 14px;border-left-width:3px}
  /* the caption's two small lines are as large as the boards' smallest lettering (13 px), their tracking closed up so the tech list stays on one line */
  .kick{font-size:13px;margin-bottom:5px;gap:2px;letter-spacing:.06em}
  .kick b{letter-spacing:.1em}
  .kick ul{letter-spacing:.01em}
  .kick li:not(:last-child)::after{margin:0 .32em}
  .stop h2{font-size:25px}
  .stop p{font-size:15.5px;line-height:1.35;margin-top:6px}
  .links a{padding:11px 20px;font-size:12px}
  .stop footer{margin-top:14px;font-size:11px}
  #cue span{display:none}
  /* the finish on a phone: the card's ring and buttons a size down; the previews across the top of the screen, a thumbnail and a number each */
  .stop.end{border-left-width:4px;padding:14px 12px 14px 12px;column-gap:14px}
  .stop.end .ring{padding:3px;border-width:2px}
  .stop.end .ring .face{width:74px;height:74px}
  .stop.end .links{gap:8px;margin-top:9px}
  .stop.end .links a{gap:7px;padding:10px 12px 10px 10px;font-size:11.5px;letter-spacing:.1em}
  .stop.end .links a svg{width:16px;height:16px}
  :root{--scrim:120px}
  #pv{position:fixed;left:var(--x);right:var(--x);top:8px;gap:6px;transform:scale(.9)}
  .finale #pv{transform:none}
  #pv li{flex:1 1 0;min-width:0}
  #pv button{display:block;width:100%;padding:0 0 5px;text-align:center}
  #pv img{aspect-ratio:1.5;margin-bottom:5px}
  #pv .pvn{padding:0;font-size:11px}
  #pv .pvy,#pv .pvt{display:none}
}
@media (prefers-reduced-motion:reduce){
  #cue i::after{animation:none;top:16px}
  .stop,.stop>*,#hero,#hero h1 span,#hero .line,#gl,#top,#pv,.finale #pv,#laps>ol:first-child,#top #gocontact{transition:none}
}
/* no WebGL2: still a page */
.nogl #gl,.nogl #cue,.nogl #top{display:none}
.nogl #hero,.nogl #hud,.nogl .stop{position:static;height:auto;opacity:1;transform:none;width:auto;margin:24px var(--x);clip-path:none}
.nogl .stop>*{opacity:1;transform:none}
.nogl .stop img{display:block;width:100%;margin-bottom:12px}
.nogl .stop.end{display:block}.nogl .stop.end .ring{display:inline-block;margin-bottom:12px}.nogl .stop.end .ring .face{width:160px;height:160px}

/* ---- the opening's marker (ADR-0048: 'please make it obvious which person I am amongst the group'): a small tag in the car's orange whose pointer stands
   just over the owner's hair in the team photo. lap.js puts it there (--mex, --mey: where the top of their head is on the screen, by the photo's own
   cover-fit) and shows it only while the camera is home (#me.on); it covers no face (ADR-0024) and is the only thing added to the opening (ADR-0011) ---- */
#me{position:fixed;left:0;top:0;z-index:5;transform:translate(var(--mex,-999px),var(--mey,-999px));pointer-events:none;font-size:var(--mef,11.5px);opacity:0;transition:opacity .12s ease}
#me.on{opacity:1;transition:opacity .6s ease}
#me span{position:absolute;left:0;bottom:calc(.52em + 3px);transform:translateX(-50%);display:block;padding:.36em .62em .36em .78em;line-height:1;font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#0b0824;background:#ff7a1a;border-radius:.26em;box-shadow:0 2px 10px rgba(11,8,36,.5)}
#me span::after{content:"";position:absolute;left:50%;top:100%;margin-left:-.44em;border:.44em solid transparent;border-top:.52em solid #ff7a1a;border-bottom:0}
.pre #me,.nogl #me{display:none}

/* ---- a short window (a 1366 x 768 or 1280 x 720 laptop's; lap.js sets .short under 800 px of height, never on a phone): the caption in two columns, who
   it was for and its name on the left and its sentence on the right, so it is about half as tall and the board above it keeps the room ---- */
.short .stop:not(.end){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto;column-gap:26px;align-content:center;padding:11px 22px 12px 20px;
  background:linear-gradient(90deg,rgba(11,8,36,.84) 0%,rgba(11,8,36,.74) 72%,rgba(11,8,36,.3) 100%)}
.short .stop:not(.end) .kick{grid-column:1;grid-row:1;align-self:end;margin-bottom:5px;gap:2px;letter-spacing:.08em}
.short .stop:not(.end) .kick b{letter-spacing:.14em}
/* the tech list may run to a second line there: its dots stand before each name and the one at the head of a line is cut off, so no line ends or starts on a dot */
.short .stop:not(.end) .kick{overflow:hidden}
.short .stop:not(.end) .kick ul{margin-left:-1.2em}
.short .stop:not(.end) .kick li{position:relative;padding-left:1.2em}
.short .stop:not(.end) .kick li:not(:last-child)::after{content:none}
.short .stop:not(.end) .kick li::before{content:"\00b7";position:absolute;left:.42em;color:rgba(255,255,255,.35)}
.short .stop:not(.end) h2{grid-column:1;grid-row:2;align-self:start;font-size:clamp(21px,2vw,26px);text-wrap:balance}
.short .stop:not(.end) p{grid-column:2;grid-row:1/3;align-self:center;margin-top:0;font-size:15px;line-height:1.36}

/* ---- the finish's previews on a phone: each thumbnail and number now has its years under it, in the board's colour, so a preview says when as well as
   which (ADR-0046, ADR-0056); a thumbnail there is too small for its board's words to be read ---- */
@media (max-width:760px),(max-aspect-ratio:1/1){
  #pv .pvy{display:block;padding:0;margin-top:2px;text-align:center;font-size:10px;letter-spacing:.04em;color:var(--k)}
}

/* ---- a short phone screen (a phone's browser with its bars showing: 360 x 640, 375 x 667, 390 x 664): the caption a size down and closer set, so the
   board over it keeps more of the height; lap.js lays each board out from the height it gets ---- */
@media (max-width:760px) and (max-height:700px),(max-aspect-ratio:1/1) and (max-height:700px){
  .stop:not(.end){padding:8px 14px 9px 14px}
  .stop:not(.end) .kick{margin-bottom:4px}
  .stop:not(.end) h2{font-size:22px}
  .stop:not(.end) p{font-size:14.5px;line-height:1.3;margin-top:5px}
}

/* ---- round 9: the finish (ADR-0079). The five numbers stay in the top bar at the finish, as and where they are on the track ("it shouldn't shift around
   the positioning of the numbers"); a preview opens under the one number the pointer is over, or the keyboard is on ("I only want the preview to expand for
   the specific number that I hover over"), laid over the page out of the bar's flow, so it never moves a number. A screen without hover (a phone) has the
   plain numbers only. The contact button still fades away there (ADR-0046) ---- */
.finale #laps>ol:first-child{opacity:1}
.finale #laps>ol:first-child button{pointer-events:auto}
#laps li{position:relative}
#laps .pvc{position:absolute;left:50%;top:calc(100% + 12px);z-index:1;display:grid;grid-template-columns:auto 1fr;align-items:baseline;width:clamp(196px,13.2vw,236px);padding:0 0 11px;
  background:rgba(11,8,36,.95);border-top:2px solid var(--k);border-radius:0 0 4px 4px;box-shadow:0 12px 34px rgba(0,0,0,.5);color:#fff;font-weight:600;text-transform:uppercase;pointer-events:none;
  opacity:.001;transform:translateX(calc(-50% + var(--pvd,0px))) translateY(-10px) scale(.82);transform-origin:50% 0;will-change:opacity,transform;transition:opacity .14s ease,transform .2s var(--ease)}
/* a notch over the preview that points up at its number */
#laps .pvc::before{content:"";position:absolute;left:calc(50% - var(--pvd,0px));top:-8px;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom:6px solid var(--k)}
#laps .pvc img{grid-column:1/3;display:block;width:100%;height:auto;aspect-ratio:var(--pva,2);object-fit:cover;background:#0b0824;margin-bottom:9px}
#laps .pvc .pvn{padding-left:11px;font-size:13px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--k)}
#laps .pvc .pvy{padding-right:11px;text-align:right;font-size:11px;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.66);white-space:nowrap}
#laps .pvc .pvt{grid-column:1/3;margin-top:4px;padding:0 11px;font-size:11px;line-height:1.34;letter-spacing:.07em;color:rgba(255,255,255,.92)}
@media (hover:hover){
  .finale #laps button:hover+.pvc,.finale #laps button:focus-visible+.pvc{opacity:1;transform:translateX(calc(-50% + var(--pvd,0px)));transition:opacity .2s ease,transform .34s var(--ease)}
}
/* a phone, or any screen without hover: the plain numbers only */
@media (hover:none),(max-width:760px),(max-aspect-ratio:1/1){
  #laps .pvc{display:none}
}
@media (prefers-reduced-motion:reduce){
  #laps .pvc,.finale #laps button:hover+.pvc,.finale #laps button:focus-visible+.pvc{transition:none}
}

/* ---- round 9: a long caption (lap.js, layout: a caption over half a line taller than the middle one, where this makes it shorter) lets its sentence run
   the caption's whole width; on a phone its name and sentence are a size smaller ---- */
.stop.wide p{max-width:none}
/* a short window (a small laptop's): every stop's caption has the one arrangement, its name over its sentence and the sentence the caption's whole width,
   with who it was for and its tools on one line over the name. (Two of the five had their name beside their sentence, so the place to read from moved from
   stop to stop: ADR-0011, "there will be text on the left and the right ... and i dont know where to look") */
.short .stop:not(.end){display:block}
.short .stop:not(.end) .kick{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:1.2em;margin-bottom:4px}
.short .stop:not(.end) p{margin-top:5px;max-width:none}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .stop.wide:not(.end) h2{font-size:22px}
  .stop.wide:not(.end) p{font-size:14.5px;line-height:1.3}
  /* a stop's name breaks into lines of about one length, so no word is left alone on its last line ('Self-Driving Formula Race / Car') */
  .stop:not(.end) h2{text-wrap:balance}
}
/* a phone's caption whose tools alone ran to two lines (lap.js, layout: .run, where this makes it a line less): who it was for and the tools run on together */
.stop.run:not(.end) .kick{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:0}
.stop.run:not(.end) .kick b{margin-right:.9em}
.stop.run:not(.end) .kick ul{display:contents}
@media (max-width:760px) and (max-height:700px),(max-aspect-ratio:1/1) and (max-height:700px){
  .stop.wide:not(.end) h2{font-size:20px}
  .stop.wide:not(.end) p{font-size:13.5px;line-height:1.28}
}

/* ---- round 9, pass 2 ---- */
/* the finish's preview: its title breaks into lines of about one length, so no word is left alone on its last line ('Self-Driving Formula Race / Car') */
#laps .pvc .pvt{text-wrap:balance}
/* a phone's caption: each tool's dot stands before it and stays with it, so a line never ends in a dot ('YOUTUBE BUSINESS  PYTHON .'); a dot that
   would start a line is in the strip cut off at the left, as on a small laptop */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .stop:not(.end) .kick ul{margin-left:-.94em;clip-path:inset(0 0 0 .94em)}
  .stop:not(.end) .kick li{position:relative;padding-left:.94em;white-space:nowrap}
  .stop:not(.end) .kick li:not(:last-child)::after{content:none}
  .stop:not(.end) .kick li::before{content:"\00b7";position:absolute;left:.32em;color:rgba(255,255,255,.35)}
  .stop.run:not(.end) .kick{margin-left:-.94em;clip-path:inset(0 0 0 .94em)}
  .stop.run:not(.end) .kick b{margin-right:0;padding-left:.94em}
  .stop.run:not(.end) .kick ul{margin-left:0;clip-path:none}
  .stop.run:not(.end) .kick li:first-child::before{content:none}
}

/* ---- round 9, board 02 (ADR-0069): its title, 'Novel Distributed Systems for Global Services', and its description are the owner's words and longer than
   the ones they replace. On a phone the stops' titles are set at 22 px, the size a short phone screen already had (25 px took this one to three lines on a
   390 px screen, 22 px keeps it to two), so the board over the caption keeps its height; no word is cut ---- */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .stop:not(.end) h2{font-size:22px}
}

/* ---- round 10: a big window (lap.js, layout: past 1920 by 940, the owner's 4K screen) grows the boards' captions with the window, as the boards
   grow, so beside its board a caption looks as it does on a window that size (ADR-0083). --cs is that growth, 1 up to 1920 by 940; on a short window
   and on a phone .big is never set. Past 1517 px wide the desktop sizes below are the ones the clamps above settle on ---- */
.big .stop:not(.end){padding:calc(16px * var(--cs)) calc(30px * var(--cs)) calc(18px * var(--cs)) calc(24px * var(--cs));border-left-width:calc(3px * var(--cs));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 calc(14px * var(--cs)));mask-image:linear-gradient(180deg,transparent,#000 calc(14px * var(--cs)))}
.big .stop:not(.end) .kick{gap:calc(4px * var(--cs));margin-bottom:calc(9px * var(--cs));font-size:calc(13px * var(--cs))}
.big .stop:not(.end) h2{font-size:calc(44px * var(--cs))}
.big .stop:not(.end) p{margin-top:calc(9px * var(--cs));font-size:calc(18.5px * var(--cs))}

/* ---- round 11 (ADR-0086): on the landing the stop numbers are gone, so the first move is to scroll; they fade in about a third of the way to board 01
   (hud's .athome, p < .3), out of the tab order while hidden. The name top-left and Contact top-right are as they were ---- */
#laps>ol:first-child{transition:opacity .35s ease,visibility 0s linear 0s}
.athome #laps>ol:first-child{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}

/* ---- round 11 (ADR-0087): the landing's scroll hint at the bottom centre and bigger: the word over a longer line, the light running down it; it scales with
   the captions past 1920 by 940 (--cs, ADR-0083). It fades as soon as the visitor scrolls, as before ---- */
#cue{left:50%;bottom:calc(var(--hb) + 4px);transform:translateX(-50%);flex-direction:column-reverse;gap:14px;font-size:calc(15px * var(--cs,1));letter-spacing:.3em;text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.45)}
#cue span{padding-left:.3em}
/* a soft dark pool behind it, so it reads over the busy photo */
#cue::before{content:"";position:absolute;z-index:-1;inset:-30px -64px -18px;background:radial-gradient(closest-side,rgba(8,5,24,.62),rgba(8,5,24,.32) 55%,transparent);pointer-events:none}
#cue i{width:2px;height:calc(64px * var(--cs,1));background:rgba(255,255,255,.5);box-shadow:0 0 10px rgba(0,0,0,.35)}
#cue i::after{height:20px;animation-name:cue11}
@keyframes cue11{0%{transform:translateY(-20px)}100%{transform:translateY(calc(64px * var(--cs,1)))}}
@media (max-width:760px),(max-aspect-ratio:1/1){
  #cue span{display:block;font-size:13px}
  #cue i{height:52px}
}
@media (prefers-reduced-motion:reduce){
  #laps>ol:first-child,.athome #laps>ol:first-child{transition:none}
  #cue i::after{animation:none;top:22px}
}