/* The running head: brand, "Prepared for", the stage menu, its drop-down under 1100px and the progress line. */
/* running head */
.rh{position:fixed;left:0;right:0;top:0;z-index:60;height:56px;display:flex;align-items:center;gap:16px;padding:0 var(--m);background:rgba(252,251,248,.97);border-bottom:1px solid var(--line)}
.rh img{height:22px;width:auto}
.rh .ttl{font:600 15px/1 var(--sans);color:var(--grey);padding-left:16px;border-left:1px solid var(--line2)}
.rh .for{margin-left:auto;font:500 14px var(--sans);color:var(--grey)}
.rh .for b{color:var(--ink);font-weight:650}
.rh .btn{height:36px;padding:0 16px;font-size:14px}
.rh .for+.btn{margin-left:0}
.rh .btn:first-of-type{margin-left:auto}
.rh .for~.btn{margin-left:0}
@media (max-width:640px){.rh .ttl,.rh .for{display:none}.rh .btn{margin-left:auto}}
/* the stage menu: the stages of the kit (fewer where a kit has no such section), written out as plain words on a second row under the top bar, with room to breathe. The stage you are in is ink, with a thin red line under it that slides to the next one as you move on; the stages behind you are a quiet grey and the ones ahead are lighter. Each one is a link. If the words ever need more room than the row has, the row scrolls sideways with soft fades at its edges. A fine red line along the foot of the header is how far through the kit you are. Under 1100px it becomes the current stage and a drop-down in the same style. */
:root{--hh:100px;--st-done:#52565D;--st-next:#6B6F78}
.rh{height:var(--hh);padding-bottom:44px}
.rh::after{content:"";position:absolute;left:0;right:0;top:55px;height:1px;background:var(--line);pointer-events:none}
.rh img{order:0}
.rh .for{order:2}
.rh .btn{order:3}
.rh .st{position:absolute;left:0;right:0;bottom:0;height:44px;padding:0 var(--m);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;--fl:0px;--fr:0px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.rh .st::-webkit-scrollbar{display:none}
.rh .st.st-l{--fl:44px}
.rh .st.st-r{--fr:44px}
.st ol{position:relative;display:flex;align-items:stretch;justify-content:space-between;column-gap:24px;height:100%;min-width:100%;width:max-content;list-style:none;margin:0;padding:0}
.st li{flex:none;display:flex}
.st a{position:relative;display:flex;align-items:center;gap:9px;padding:0 3px;font:500 13px/1 var(--sans);letter-spacing:.014em;color:var(--st-next);text-decoration:none;white-space:nowrap;transition:color .3s var(--e)}
.st a::after{content:"";position:absolute;left:3px;right:3px;bottom:7px;height:2px;border-radius:1px;background:var(--line2);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--e)}
.st a:hover{color:var(--ink)}
.st a:hover::after{transform:scaleX(1)}
.st a:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:3px}
.st li.done a{color:var(--st-done)}
.st li.on a{color:var(--ink)}
.st li.on a::after{display:none}
.st-ln{position:absolute;left:0;bottom:7px;width:1px;height:2px;border-radius:1px;background:var(--red);transform-origin:0 50%;transform:translateX(var(--x,0px)) scaleX(var(--w,0));transition:transform .62s cubic-bezier(.65,0,.25,1);pointer-events:none}
.st-ln.nt{transition:none}
.st-lw{position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none}
.rh .sm{display:none;order:1;position:relative;margin-left:auto;height:36px;min-width:0}
.sm-b{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;max-width:100%;height:36px;padding:0 12px 0 14px;border-radius:4px;cursor:pointer;font:500 13.5px/1 var(--sans);letter-spacing:.012em;color:var(--ink);transition:background .18s var(--e)}
.sm-b:hover,.sm.open .sm-b{background:rgba(20,22,26,.06)}
.sm-b:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sm-n{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:6px 0 5px;background:linear-gradient(var(--red),var(--red)) 0 100%/100% 2px no-repeat}
.sm-c{flex:none;padding-left:12px;border-left:1px solid var(--line2);font-weight:500;color:var(--st-next);font-variant-numeric:tabular-nums}
.sm-c b{color:var(--ink);font-weight:600}
.sm-v{flex:none;color:var(--st-next);transition:transform .25s var(--e)}
.sm.open .sm-v{transform:rotate(180deg)}
.sm-p{position:absolute;top:calc(100% + 8px);right:0;width:312px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(20,22,26,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--e),visibility 0s .25s}
.sm.open .sm-p{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* with scripts off nothing sets .open: the button is a control that holds the focus (or, where a browser gives a tapped button no focus, the hover a tap leaves behind) and the panel
   opens while the menu has either, so the stages' links work with no scripts. header.js marks the menu `wired` when it takes the button over, and then the class does the opening as before (a focus that stayed on the button would keep it open). A tap elsewhere takes both away. */
html:not(.js) .sm:not(.wired):focus-within .sm-p,html:not(.js) .sm:not(.wired):hover .sm-p{opacity:1;visibility:visible;transform:none;transition-delay:0s}
html:not(.js) .sm:not(.wired):focus-within .sm-v,html:not(.js) .sm:not(.wired):hover .sm-v{transform:rotate(180deg)}
.sm-p ol{list-style:none;margin:0;padding:0}
.sm-p a{display:flex;align-items:baseline;gap:14px;padding:11px 14px;border-radius:6px;font:500 14px/1.25 var(--sans);letter-spacing:.012em;color:var(--st-next);text-decoration:none;transition:background .15s,color .15s}
.sm-p a:hover{background:var(--soft);color:var(--ink)}
.sm-p li.done a{color:var(--st-done)}
.sm-p li.on a{color:var(--ink)}
.sm-p .no{flex:none;min-width:1.7em;font:500 13px/1 var(--sans);font-style:normal;letter-spacing:.06em;font-variant-numeric:tabular-nums;opacity:.62}
.sm-p .t{padding-bottom:3px;background:linear-gradient(var(--red),var(--red)) 0 100%/0 2px no-repeat;transition:background-size .4s var(--e)}
.sm-p li.on .t{background-size:100% 2px}
.sm-p a:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.sm-bar{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--red);opacity:.5;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
@media (max-width:1099px){:root{--hh:56px}.rh{padding-bottom:0}.rh::after{display:none}.rh .st{display:none}.rh .sm{display:block;order:1}.rh .for{display:none}}
@media (max-width:640px){
  .rh{gap:10px}
  .rh .sm{flex:1}
  .rh .btn{padding:0 14px}
  .sm-b{padding:0 8px 0 10px;gap:8px}
  .sm-p{position:fixed;left:12px;right:12px;top:60px;width:auto}
}
@media (max-width:420px){.rh img{height:19px}.rh .btn{padding:0 12px;font-size:13.5px}}
@media (max-width:760px){.rh .ttl{display:none}}

/* touch: the header's controls are 44 tall; the fill stays the old 36 (a transparent 4px border above and below that the background is not painted under; the radius is doubled
   up and down so the corners keep their 4px); the drop-down rows are 44 with 8px between, and the list scrolls if the screen is short */
@media (pointer:coarse){
  .rh .btn,.sm-b{height:44px;border:solid transparent;border-width:4px 0;background-clip:padding-box;border-radius:4px / 8px}
  .sm-b{margin:-4px 0}   /* the drop-down's wrapper stays 36 high, so the 44 box is centred on it */
  .sm-p{max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
  .sm-p ol{display:grid;row-gap:8px}
  .sm-p a{padding:13px 14px;line-height:18px}
}
@media (pointer:coarse) and (min-width:1100px){
  .rh .btn{margin-top:-6px}   /* the stage links start at y 55: the button stays 8px clear of them */
}
/* a notch or a rounded corner never sits under the header or the drop-down (the insets are 0 unless the page is drawn edge to edge) */
.rh{padding-left:max(var(--m),env(safe-area-inset-left));padding-right:max(var(--m),env(safe-area-inset-right))}
.rh .st{padding-left:max(var(--m),env(safe-area-inset-left));padding-right:max(var(--m),env(safe-area-inset-right))}
@media (max-width:640px){.sm-p{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}}