/* THE INDEX HEAD (2026-10-23), shared by the five hubs that sit side by side
   in the nav: /events (and /events/<month>), /countries, /cities,
   /worlds-best and /itineraries. The owner, after the events calendar was
   rebuilt: "extend this branding to country, city, worlds best, itinerary
   pages, otherwise the pages look off as a group". One file, so they cannot
   drift apart again.

     <header class="hub-head">
       <div class="eyebrow">The Atlas</div>
       <h1 style="--mk:9">Countries</h1>        --mk = characters, for the fit
       <p class="hub-stand">...</p>
       <nav class="hub-rail">...</nav>          the page's own filter or links
     </header>

   The headline is Archivo 900 in capitals, as large as the measure allows; the
   standfirst is Lora; the rail is one line of Space Mono between the house's
   dashed rules, the current item in ink and underlined. A rail item can be an
   <a>, a <button> (a filter) or a <span class="off"> (nothing there yet).
   Linked LAST in <head>, after each page's own <style>, so it wins the ties
   with the chip styles it replaces. */

.hub-head{box-sizing:border-box;max-width:1500px;margin:0 auto;padding:clamp(120px,16vh,170px) clamp(20px,6vw,90px) 0;
  text-align:center;border-bottom:0}
.hub-head h1{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:.88;
  font-size:clamp(52px,12vw,176px);color:var(--ink);margin:18px 0 0;text-wrap:balance}
/* The name fits the measure: capitals run about 0.86em each. */
.hub-head h1[style*="--mk"]{font-size:min(clamp(52px,12vw,176px),calc((min(100vw,1500px) - 2 * clamp(20px,6vw,90px)) / (var(--mk) * .86)))}
.hub-head .hub-stand{font-family:'Lora',Georgia,serif;font-size:clamp(16px,1.8vw,19px);line-height:1.6;color:var(--muted);
  font-style:normal;max-width:600px;margin:clamp(18px,2.4vw,28px) auto 0}

.hub-head .hub-rail{display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(18px,2.6vw,36px);max-width:none;
  margin:clamp(28px,3.4vw,46px) 0 0;padding:0;border-top:1px dashed var(--dash);border-bottom:1px dashed var(--dash);background:none}
.hub-head .hub-rail > *{position:relative;display:inline-flex;align-items:center;gap:7px;margin:0;padding:13px 0 12px;
  font-family:'Space Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;
  color:var(--ink-2);background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;text-decoration:none;white-space:nowrap}
.hub-head .hub-rail > * svg{display:none}
.hub-head .hub-rail > *:hover{color:var(--blue);background:none}
.hub-head .hub-rail > [aria-current],.hub-head .hub-rail > .active,.hub-head .hub-rail > .on,.hub-head .hub-rail > [aria-pressed="true"]{
  color:var(--ink);font-weight:700;background:none}
.hub-head .hub-rail > [aria-current]::after,.hub-head .hub-rail > .active::after,.hub-head .hub-rail > .on::after,.hub-head .hub-rail > [aria-pressed="true"]::after{
  content:"";position:absolute;left:-6px;right:-6px;bottom:-1px;border-bottom:2px solid var(--ink)}
.hub-head .hub-rail > .off,.hub-head .hub-rail > :disabled{color:var(--muted-2);opacity:.55;cursor:default}
.hub-head .hub-rail > :focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* On a phone a long rail is one line that scrolls sideways, not six rows. */
@media(max-width:760px){
  .hub-head .hub-rail{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
    margin-left:calc(-1 * clamp(20px,6vw,90px));margin-right:calc(-1 * clamp(20px,6vw,90px));padding:0 clamp(20px,6vw,90px)}
  .hub-head .hub-rail::-webkit-scrollbar{display:none}
  .hub-head .hub-rail{justify-content:safe center}
}
@media(prefers-reduced-motion:reduce){.hub-head .hub-rail{scroll-behavior:auto}}

/* THE SENTENCE PICKER, for a filter too long to be a rail (2026-10-23): the
   cities' 35 countries wrapped to four rows. It is World's Best's own device
   ("Show me the best [places] in [the world]"), restated here so any hub can
   use it: the picked word opens a paper panel with a search box. On a phone
   the panel is a bottom sheet. It sits in the same dashed band as a rail.

     <div class="hub-sentence">Show me the cities in
       <span class="hub-sel"><button class="hub-word" aria-expanded="false">every country</button>
         <div class="hub-pop" hidden><input class="hub-find"><div class="hub-opts">
           <button class="hub-opt">...</button></div></div></span></div> */
/* Set as a rail, not a headline: the band is the same height and the same
   Space Mono as every other hub's, the lead-in in grey and the pick in ink,
   bold and underlined like a rail's current item (2026-10-23: a 30px Archivo
   sentence in the band read heavier than the rest of the group). */
.hub-head .hub-sentence{margin:clamp(28px,3.4vw,46px) 0 0;padding:0;border-top:1px dashed var(--dash);border-bottom:1px dashed var(--dash);
  font-family:'Space Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;color:var(--muted-2)}
.hub-sel{display:inline-block;position:relative;white-space:nowrap;margin-left:.6em}
.hub-word{font:inherit;font-weight:700;letter-spacing:inherit;text-transform:inherit;color:var(--ink);background:none;border:0;
  padding:13px 18px 12px 0;margin:0;cursor:pointer;position:relative;line-height:inherit}
.hub-word::before{content:'';position:absolute;left:-6px;right:-6px;bottom:-1px;border-bottom:2px solid var(--ink)}
.hub-word::after{content:'';position:absolute;right:2px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-75%) rotate(45deg);transition:transform .2s}
.hub-word[aria-expanded="true"]::after{transform:translateY(-25%) rotate(-135deg)}
.hub-word:hover{color:var(--blue)}
.hub-word:hover::before{border-color:var(--blue)}
.hub-word:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hub-pop{position:absolute;z-index:40;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:min(320px,92vw);background:var(--bg);
  border:1px solid var(--line-strong);box-shadow:0 18px 50px rgba(20,19,15,.14);text-align:left;white-space:normal;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;letter-spacing:0;line-height:1.3}
.hub-pop[hidden]{display:none}
.hub-pop .hub-find{display:block;box-sizing:border-box;width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 16px;
  font:inherit;font-size:15px;color:var(--ink);outline:none;border-radius:0}
.hub-pop .hub-find::placeholder{color:var(--muted-2)}
.hub-pop .hub-opts{display:block;max-height:300px;overflow-y:auto;margin:0;padding:6px;overscroll-behavior:contain}
.hub-pop .hub-opt{display:flex;align-items:center;width:100%;margin:0;padding:10px 12px;background:none;border:0;border-radius:0;
  font:inherit;letter-spacing:0;text-transform:none;text-align:left;color:var(--ink-2);cursor:pointer}
.hub-pop .hub-opt:hover,.hub-pop .hub-opt.hi{background:var(--bg-2);color:var(--ink)}
.hub-pop .hub-opt.active,.hub-pop .hub-opt.on{background:none;color:var(--blue);font-weight:600}
.hub-pop .hub-opt[data-hide]{display:none}
.hub-pop .hub-none{padding:14px 16px;color:var(--muted);font-family:'Lora',Georgia,serif;font-style:italic}
@media(max-width:600px){
  .hub-pop{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;width:auto;max-height:70vh;
    border:0;border-top:1px solid var(--line-strong);box-shadow:0 -12px 40px rgba(20,19,15,.18);padding-bottom:env(safe-area-inset-bottom)}
  .hub-pop .hub-opts{max-height:50vh}
  .hub-pop .hub-opt{padding:13px 12px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.hub-word::after{transition:none}}