/* T22 menu bar (call of 11 Oct): "Candor" on the left, the pill on the right, so the centred
   titles and the notch stages pass between them instead of under one centred island.
   The pill is the brief's nav pill (black glass, like the notch), so it reads on black and on
   white as it is. The wordmark is bare: white over black, black over white (nav.js). */
:root{--bar-top:20px;--chrome-edge:6vw;--bar-edge:var(--chrome-edge)}
.bar{position:fixed;z-index:60;inset:0 0 auto 0;height:calc(var(--bar-top) + 44px);pointer-events:none;transform:translateZ(0)}
/* The bar has a real box and its own layer, and the pill and its button carry no lens (owner, 15 Oct: the menu flickered
   while scrolling). Over this page's flat black and white a lens has nothing to bend, and redrawing it every scroll frame
   was what flickered; the pill keeps its frost, wash and contour. A zero-height fixed parent also drew unreliably on iOS. */
.bar>*{pointer-events:auto}
/* Form navigation stays on the page layer; it has no scroll-driven theme compositing. */
.bar--form{transform:none}
/* the two pieces stand on the page container's edges, at each of its widths (style.css .wrap) */


.bar__mark,.bar__name{font-family:var(--serif);font-weight:400;font-size:var(--t-brand);line-height:44px;letter-spacing:-.02em;text-decoration:none;color:#fff;white-space:nowrap}
.bar__mark{position:absolute;top:var(--bar-top);left:var(--bar-edge);height:44px;animation:none}
/* the same word in ink, shown only where white is under it: during the ripple that is a circle
   growing from the middle of the stage, so the word turns exactly as the white edge passes */
.bar__mark-k{position:absolute;inset:0;color:#000;clip-path:var(--ink-clip,inset(0 0 100% 0))}
.bar__name{display:none}

#top .bar__pill.lg.lg--pill{position:absolute!important;top:var(--bar-top);right:var(--bar-edge);display:grid!important;grid-template-rows:44px 0fr;width:max-content;padding:0!important;overflow:hidden;
 transition:grid-template-rows .3s var(--ease);animation:none}
#top .bar__pill.lg.lg--pill[data-open=true]{grid-template-rows:44px 1fr}
/* on white the same wash would read as grey; a little more keeps the pill black on both halves (T22, agreed) */
html.is-light #top .bar__pill.lg.lg--pill{--lg-wash:rgba(12,12,14,.86);box-shadow:0 6px 18px rgba(0,0,0,.16)!important}
.bar__row{display:flex;align-items:center;justify-content:flex-end;gap:4px;height:44px;padding:0 4px}
#top .bar__cta.lg.lg--button{min-height:36px!important;height:36px;padding:0 24px!important;--lg-wash:rgba(255,255,255,.1);--lg-give:.978}
.bar__menu{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:rgba(255,255,255,.72);cursor:pointer;transition:background .2s,color .2s}
.bar__menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.bar__menu path{transition:transform .3s var(--ease);transform-origin:12px 12px}
.bar__menu path:first-child{transform:translateY(-3px)}
.bar__pill[data-open=true] .bar__menu path:first-child{transform:rotate(45deg)}
.bar__menu path:last-child{transform:translateY(3px)}
.bar__pill[data-open=true] .bar__menu path:last-child{transform:rotate(-45deg)}
@media(hover:hover){.bar__menu:hover{background:rgba(255,255,255,.12);color:#fff}}
.bar__menu:focus-visible,.bar__mark:focus-visible,.bar__name:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bar__links{min-height:0;overflow:hidden}
.bar__links-in{display:grid;gap:0;padding:4px 4px 6px;opacity:0;transition:opacity .14s ease}
.bar__pill[data-open=true] .bar__links-in{opacity:1;transition:opacity .25s .13s ease}

/* On a phone too, the pill holds only the two controls; the wordmark stays bare on the left (owner, 15 Oct). */
@media(max-width:759px){
 :root{--bar-top:12px}
 #top .bar__cta.lg.lg--button{padding:0 18px!important;font-size:15px!important}
}

/* Keep keyboard focus inside the close control, without a detached outer ring. */
#top .bar__pill.lg.lg-new .bar__menu:focus{outline:none!important}
#top .bar__pill.lg.lg-new .bar__menu:focus-visible{outline:1px solid rgba(255,255,255,.55)!important;outline-offset:-4px!important}