/* Keep the muted words of large scrolling bands readable on the dark section backgrounds. */
.band-track span{color:rgba(241,244,240,.45)}

/* ==========================================================================
   Shared by every page, on top of the page's own stylesheet.
   1. Menus: the mega menu of the top bar and the small-screen menu.
   2. The flock drifting across the background, with wings that beat.
   ========================================================================== */

/* ==========================================================================
   1. Menus
   The markup comes from inc/menus.php, the entries from Appearance > Menus.
   The panel is the route's departures board: the sparrow with the visitor's
   bird in its slipstream, and the entries as numbered stops.
   ========================================================================== */

/* ---- wide screens: the links of the bar ---- */
.bar-nav{align-self:stretch}
.bar-nav .nav-link{position:relative; display:flex; align-items:center; min-height:44px; font:500 15px/1 var(--f-body); color:var(--text-2); text-decoration:none; transition:color .2s}
.bar-nav a.nav-link:hover,.bar-nav a.nav-link:focus-visible,.bar-nav .nav-link[aria-current]{color:var(--text)}
/* three streaks of air under the link in use, the same ones that follow the sparrow */
.bar-nav .nav-link::after{content:""; position:absolute; left:0; right:0; bottom:3px; height:9px; pointer-events:none; opacity:0; transform:translateX(-10px) scaleX(.35); transform-origin:0 50%; transition:opacity .2s,transform .4s var(--ease);
  background:linear-gradient(90deg,var(--mint),rgba(70,222,159,0)) 0 0 / 100% 1.5px no-repeat,linear-gradient(90deg,var(--mint),rgba(70,222,159,0)) 7px 4px / 56% 1.5px no-repeat,linear-gradient(90deg,var(--mint),rgba(70,222,159,0)) 0 8px / 78% 1.5px no-repeat}
.bar-nav a.nav-link:hover::after,.bar-nav a.nav-link:focus-visible::after,.nav-item:hover > .nav-link::after,.nav-item.is-open > .nav-link::after{opacity:1; transform:none}
.bar-nav .nav-link[aria-current]::after{opacity:.85; transform:none; background-size:100% 1.5px,0 0,0 0}
/* the item is as tall as the bar, so the pointer never leaves it on the way down to the panel */
.nav-item{display:flex; align-items:center; align-self:stretch}
.nav-item:hover > .nav-link,.nav-item.is-open > .nav-link{color:var(--text)}
.nav-toggle{display:grid; place-items:center; width:26px; height:44px; margin-right:-10px; padding:0; border:0; border-radius:8px; background:none; color:var(--text-2); cursor:pointer; transition:color .2s}
.nav-toggle svg{width:10px; height:6px; transition:transform .2s var(--ease)}
.nav-toggle:focus-visible{outline:2px solid var(--mint); outline-offset:-4px}
.nav-item:hover .nav-toggle,.nav-item.is-open .nav-toggle{color:var(--text)}
.nav-item:hover:not(.is-shut) .nav-toggle svg,.nav-item.is-open .nav-toggle svg{transform:rotate(180deg)}

/* ---- the panel ---- */
.mega{position:absolute; top:100%; left:0; right:0; max-height:calc(100dvh - var(--bar-h)); overflow-y:auto; overscroll-behavior:contain; visibility:hidden; opacity:0; transform:translateY(-8px); background:var(--bar-bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line-2); box-shadow:0 40px 60px -20px rgba(0,0,0,.6); transition:opacity .18s ease,transform .22s var(--ease),visibility 0s linear .2s}
/* the delay on closing gives the pointer time to cross from the link to the panel */
.nav-item:hover:not(.is-shut) .mega,.nav-item.is-open .mega{visibility:visible; opacity:1; transform:none; transition-delay:0s}
.mega-in{position:relative; display:grid; grid-template-columns:minmax(230px,320px) minmax(0,1fr); align-items:start; gap:clamp(28px,4vw,72px); width:100%; max-width:calc(var(--max) + 2 * var(--pad)); margin-inline:auto; padding:clamp(26px,2.6vw,40px) var(--pad) clamp(30px,3vw,48px)}

/* the lead: the sparrow, its three streaks of air, and what the panel holds */
.mega-sky{position:relative; height:74px; margin-bottom:20px}
.mega-sparrow{position:absolute; left:-4px; top:0; width:104px; height:auto; fill:var(--mint)}
.mega-air{position:absolute; left:94px; top:46px; width:min(170px,55%); height:14px; transform:rotate(8deg); transform-origin:0 50%}
.mega-air i{position:absolute; left:0; height:1.5px; border-radius:2px; background:linear-gradient(90deg,#B8FFE0,rgba(70,222,159,.6) 45%,rgba(14,143,138,0)); transform-origin:0 50%}
.mega-air i:nth-child(1){top:0; left:12px; width:56%}
.mega-air i:nth-child(2){top:6px; width:100%}
.mega-air i:nth-child(3){top:12px; left:26px; width:70%}
.nav-item:hover:not(.is-shut) .mega-air i,.nav-item.is-open .mega-air i{animation:mega-air .7s var(--ease) both}
.mega-air i:nth-child(1){animation-delay:.08s}
.mega-air i:nth-child(3){animation-delay:.16s}
@keyframes mega-air{from{transform:scaleX(0); opacity:0}}
.mega-seat{position:absolute; left:142px; top:44px; width:1px; height:1px}
.mega-label{margin:0; font:400 var(--fs-tag)/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.mega-intro{margin:12px 0 0; font:500 clamp(20px,1.5vw,24px)/1.25 var(--f-display); letter-spacing:-.01em; color:var(--text); text-wrap:balance}
.bar-nav .mega-all{display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:12px; font:500 15px/1 var(--f-body); color:var(--mint); text-decoration:none}
.mega-all svg,.mega-book svg{width:16px; height:16px; transition:transform .2s var(--ease)}
.mega-all:hover svg,.mega-book:hover svg{transform:translateX(3px)}

/* the visitor's bird: it rests in the slipstream and flies to the stop under the pointer */
.mega-you{position:absolute; left:0; top:0; z-index:2; width:34px; height:auto; fill:var(--amber); pointer-events:none; transform:translate(var(--bx,150px),var(--by,70px)) rotate(var(--bt,0deg)); transition:transform .55s var(--ease)}
.mega-you.is-out{--bt:-8deg}

/* the board: every entry is a stop, numbered, boarding or coming soon */
.mega-board{overflow:hidden; border:1px solid var(--line-2); border-radius:18px; background:linear-gradient(180deg,rgba(241,244,240,.04),rgba(241,244,240,.012))}
.mega-head,.mega-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; padding:13px 20px}
.mega-head{border-bottom:1px dashed var(--line-2); font:400 var(--fs-tag)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.mega-head strong{font-weight:400; color:var(--text)}
.mega-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:-1px 0 0 -1px; padding:0; list-style:none}
.mega-grid > li{border-top:1px dashed var(--line); border-left:1px dashed var(--line)}
.mega-grid ul{margin:0; padding:0 0 10px; list-style:none}
.bar-nav .mega-link{display:block; height:100%; min-height:0; padding:16px 20px 18px; font:400 15px/1.4 var(--f-body); color:var(--text-2); text-decoration:none; transition:background-color .2s}
.mega-code{display:flex; align-items:center; gap:12px; font:400 var(--fs-tag)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.mega-code b{font-weight:400; color:var(--text)}
.mega-status{display:inline-flex; align-items:center; gap:7px; color:var(--mint)}
.mega-status i{width:6px; height:6px; border-radius:50%; background:var(--mint)}
.mega-status.is-soon{color:var(--amber)}
.mega-name{display:block; margin-top:12px; font:500 17px/1.2 var(--f-display); letter-spacing:-.01em; color:var(--text); transition:color .2s}
.mega-desc{display:block; margin-top:6px; font:400 14px/1.45 var(--f-body); color:var(--text-2)}
.bar-nav a.mega-link:hover,.bar-nav a.mega-link:focus-visible{background-color:rgba(70,222,159,.07)}
.bar-nav a.mega-link:hover .mega-name,.bar-nav a.mega-link:focus-visible .mega-name,.bar-nav a.mega-link[aria-current] .mega-name{color:var(--mint)}
.bar-nav a.mega-link:hover .mega-status i,.bar-nav a.mega-link:focus-visible .mega-status i{animation:mega-blink 1.2s ease-in-out infinite}
@keyframes mega-blink{50%{opacity:.25}}
.mega-link.is-plain .mega-name,.mega-leaf.is-plain{color:var(--text-2)}
.mega-group > .mega-link{height:auto; padding-bottom:8px}
.bar-nav .mega-leaf{display:flex; align-items:center; min-height:36px; padding:0 20px; font:400 15px/1.3 var(--f-body); color:var(--text-2); text-decoration:none}
.bar-nav a.mega-leaf:hover,.bar-nav a.mega-leaf:focus-visible,.bar-nav a.mega-leaf[aria-current]{color:var(--mint)}
.mega-foot{border-top:1px dashed var(--line-2); font:400 15px/1.3 var(--f-body); color:var(--text-2)}
.mega-foot strong{font-weight:500; color:var(--text)}
.bar-nav .mega-book{display:inline-flex; align-items:center; gap:10px; min-height:36px; font:500 15px/1 var(--f-body); color:var(--mint); text-decoration:none; white-space:nowrap}
/* narrower bars: the lead becomes one row above the board */
@media (max-width:1180px){
  .mega-in{grid-template-columns:minmax(0,1fr); gap:18px}
  .mega-lead{display:grid; grid-template-columns:240px minmax(0,1fr) auto; align-items:center; column-gap:20px}
  .mega-sky{margin-bottom:0}
  .mega-intro{display:none}
  .bar-nav .mega-all{margin-top:0}
}
@media (max-width:1000px){
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- small screens: the panel under the bar, with the entries below a link folded away ---- */
@media (max-width:360px){
  .bar{gap:6px}
  .bar .wm{height:16px}
  .bar .stages{flex-shrink:0}
  .bar .stages summary{gap:5px; padding-inline:8px}
}
.stages .stages-panel{position:absolute; top:100%; left:0; right:0; max-height:calc(100dvh - var(--bar-h)); overflow-y:auto; overscroll-behavior:contain; padding:4px var(--pad) 20px; background:var(--sky-foot); border-bottom:1px solid var(--line-2)}
.stages .stages-panel ol,.stages .stages-panel ul{position:static; margin:0; padding:0; list-style:none; background:none; border:0}
.stages li a span:only-child{color:inherit}
.stages li a[aria-current]{color:var(--mint)}
.stages li > .plain{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); min-height:44px; border-bottom:1px solid var(--line); font:400 var(--fs-mono)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
.stages li.has-sub{display:grid; grid-template-columns:minmax(0,1fr) 44px}
.stages .sub-toggle{display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--text-2); cursor:pointer}
.stages .sub-toggle svg{width:10px; height:6px; transition:transform .2s var(--ease)}
.stages .sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.stages .sub-toggle:focus-visible{outline:2px solid var(--mint); outline-offset:-4px}
/* the stops below a link, numbered as on the board */
.stages .stages-panel .sub{grid-column:1 / -1; padding:0 0 8px 14px; counter-reset:stop}
.stages .stages-panel .sub[hidden]{display:none}
.stages .sub li{counter-increment:stop}
.stages .sub li a,.stages .sub li > .plain{justify-content:flex-start; gap:6px; min-height:42px; font:400 15px/1.25 var(--f-body); letter-spacing:0; text-transform:none; color:var(--text-2)}
.stages .sub li a{color:var(--text)}
.stages .sub li a::before,.stages .sub li > .plain::before{content:counter(stop,decimal-leading-zero); flex:none; width:30px; font:400 var(--fs-tag)/1 var(--f-mono); letter-spacing:.08em; color:var(--text-2)}
.stages .sub li.deep a,.stages .sub li.deep > .plain{padding-left:14px}
.stages .sub .soon{margin-left:auto; font:400 var(--fs-tag)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--amber); white-space:nowrap}
.stages-label{margin:22px 0 4px; font:400 var(--fs-tag)/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}

@media (prefers-reduced-motion:reduce){
  .mega{transform:none; transition:none}
  .mega-you,.bar-nav .nav-link::after,.nav-toggle svg,.mega-all svg,.mega-book svg,.stages .sub-toggle svg{transition:none}
  .nav-item:hover:not(.is-shut) .mega-air i,.nav-item.is-open .mega-air i,.bar-nav a.mega-link:hover .mega-status i,.bar-nav a.mega-link:focus-visible .mega-status i{animation:none}
}

/* ==========================================================================
   2. The background flock. The page stylesheets draw each bird as one still
   picture; the script swaps it for the mark with its wing as a separate part,
   so the birds beat their wings as they drift. Position, size, speed and
   opacity come from the same custom properties as before.
   ========================================================================== */
.flock svg.flock-bird{position:absolute; left:100%; top:var(--y); width:calc(26px * var(--s)); height:calc(16px * var(--s)); overflow:visible; fill:#38443F; opacity:var(--o); animation:flock-drift var(--t) linear infinite; animation-delay:calc(var(--t) * var(--f) * -1)}
/* a few beats, then a short glide; every bird keeps its own time */
.flock-wing{transform:translate(1686px,302px) rotate(38deg) scale(1,1) rotate(-38deg) translate(-1686px,-302px); animation:flock-beat calc(1.9s + var(--f) * 1.3s) ease-in-out infinite; animation-delay:calc(var(--f) * -3s)}
@keyframes flock-beat{
  0%,18%,36%,54%,72%,100%{transform:translate(1686px,302px) rotate(38deg) scale(1,1) rotate(-38deg) translate(-1686px,-302px)}
  9%,27%,45%,63%{transform:translate(1686px,302px) rotate(38deg) scale(1,.3) rotate(-38deg) translate(-1686px,-302px)}
}
@media (prefers-reduced-motion:reduce){
  .flock-wing{animation:none}
}