/* TONEHOLD: the menu (10 October). Martial: "the menu at the top … it could be better to have it more seeable", on two
   references: glass bars, and pills (outlined, one filled).
   ONE frosted pill bar, the same on every page, that follows the screen: the wordmark; the nav's nouns as pills (a
   hairline each; the current one stands filled); "Apply to release" as the filled pill at its end, in ink. At a
   phone's size it stays ONE bar: the wordmark gives way to the TH mark, the pills hold their names, Apply says Apply.
   A page with no nav (the invitation, the paying page, the terms, a licence, a desk) carries the same bar with its
   own word at its end. Every page loads this sheet last; top.js says which noun is the current one.
   What an anchor leads to stops under the bar, never behind it (scroll-padding-top). */
html{scroll-padding-top:92px}
.top,.th-look .top,body[data-page="desk"] .top{position:sticky;top:10px;z-index:300;display:flex;align-items:center;justify-content:space-between;gap:12px;width:calc(100% - 28px);max-width:1240px;height:58px;margin:10px auto 0;padding:0 7px 0 24px;border-radius:29px;
  background:color-mix(in srgb,var(--plate) 64%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 18px 34px -24px rgba(14,15,17,.45)}
.top::before,.th-look .top::before{content:none}
.top .word{flex:none}
.top nav{display:flex;flex:0 1 auto;align-items:center;gap:6px;min-width:0}
.top nav a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:20px;background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 16%,transparent);font:500 14px/1 var(--f);color:var(--fg);text-decoration:none;white-space:nowrap;transition:background .2s,box-shadow .2s,color .2s}
.top nav a:hover{background:none;box-shadow:inset 0 0 0 1px var(--fg)}
.top nav a[aria-current="page"]{background:var(--plate);box-shadow:inset 0 0 0 1.5px var(--fg),0 8px 14px -10px rgba(14,15,17,.5)}
/* what stands at its end: Apply to release, the filled pill; or the page's own word */
.top>.lk{flex:none;display:inline-flex;align-items:center;gap:0;min-height:44px;padding:0 20px;border-radius:22px;background:var(--fg);color:var(--bg);font:600 14px/1 var(--f);text-decoration:none;white-space:nowrap;transition:transform .5s var(--spring)}
.top>.lk:hover{transform:scale(1.03)}
.top>.lk[aria-current="page"]{background:var(--plate);color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.top>.lk.q{background:none;color:var(--fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 16%,transparent)}
.top>.ml{padding-right:14px}
.top .tr{display:flex;align-items:center;gap:6px}
.th-sub{display:none!important}
/* the one banner stands above the bar, part of the page */
.th-now{position:relative;z-index:1}
@media (max-width:1000px){
  .top,.th-look .top,body[data-page="desk"] .top{top:8px;width:calc(100% - 16px);height:54px;margin-top:8px;padding:0 6px 0 8px;gap:6px;border-radius:27px}
  .top nav{display:flex}
  .top nav a{min-height:40px;padding:0 11px;font-size:12.5px;letter-spacing:-.005em}
  /* the wordmark gives way to the TH mark */
  .top .word{display:inline-flex;align-items:center;width:44px;height:44px;font-size:0;letter-spacing:0;background:url(/editions/tonehold/th.svg) center/36px no-repeat}
  .top .word .byi{display:none}
  .top>.lk{min-height:42px;padding:0 14px;font-size:13px}
  .top>.lk span{display:none}
  .top>.ml{padding-right:10px;font-size:9.5px}
}
@media (max-width:360px){.top nav a{padding:0 8px;font-size:12px}.top>.lk{padding:0 11px}}
@media (prefers-reduced-motion:reduce){.top>.lk{transition:none}}
/* a thumb's size, wherever a hand lands (the phone pass, 10 October) */
p.ml a,.by a{display:inline-block;padding-block:14px}
.th-bar #bTi{position:relative}
.th-bar #bTi::after{content:"";position:absolute;inset:-11px -4px}
.ap-line input{min-height:44px}