/*  THE LAUNCH STYLESHEET. RELEASE 0295 OPENS IT, AND IT IS A NEW FILE ON
    PURPOSE.

    `app/static/style.css` is 76,848 bytes against the project's 80 KB rule and
    this connector re-sends a whole file for every change, so the launch work
    goes here. It loads after `style.css` and after `walk.css`, so where it
    restates a selector on purpose it wins; everything it does is written
    beside the reason for it.

    NO BACKSLASH APPEARS IN THIS FILE.

    ---------------------------------------------------------------------------
    RELEASE 0295. THE PHONE HEADER IS ONE ROW.

    What was here before: below 700px the header turned into a column - the
    logo on one row, five to seven navigation links wrapping over two rows, and
    the token search on a row of its own. Measured at 390x844 that header took
    roughly a third of the first screen, and a visitor who had not yet been
    told what the site does was reading a bar of places to go instead.

    What it is now: one row, the logo at the left and a 44px button that says
    the word "Menu" at the right, with the whole navigation and the search in a
    panel that opens from that button directly under the header. The links are
    the same links, in the same order, in the same words; the search is first
    in the panel and full width, because it is the one thing in there a visitor
    might actually want on a phone.

    NOTHING CHANGES ABOVE 900px. Every rule below is inside a max-width query,
    and the desktop bar is the bar it has always been.

    AND NOTHING CHANGES WITHOUT THE SCRIPT. The toggle is hidden and the
    navigation is left exactly as it was unless `launch.js` has run and put
    `js-nav` on the root element. A header whose links are behind a button that
    cannot work is a header with no links at all, so a reader with scripts off
    gets the old wrapping bar rather than a dead end.  */

/*  The button exists in the markup on every page and is seen only where it
    can do something: below 900px, with the script running. */
.navtoggle{display:none}

@media (max-width:899px){

  /*  The row. `position:relative` is what the panel below hangs from; the
      header is deliberately not sticky on this site, so the panel scrolls
      away with it rather than sitting over the page.  */
  html.js-nav header{position:relative;flex-direction:row;flex-wrap:nowrap;
  align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}

  html.js-nav .navtoggle{display:inline-flex;align-items:center;
  justify-content:center;flex:0 0 auto;min-height:var(--tap,44px);
  min-width:var(--tap,44px);padding:10px 14px;font:inherit;
  font-size:var(--t-body,1rem);color:var(--text);background:var(--surface-1);
  border:1px solid var(--line);border-radius:8px;cursor:pointer}
  html.js-nav .navtoggle:hover{background:var(--surface-2)}
  html.js-nav .navtoggle:focus-visible{outline:2px solid var(--link);
  outline-offset:2px}

  /*  The navigation is the panel. It is the same element and the same markup:
      hidden until the button opens it, and a column under the header when it
      is open.  */
  html.js-nav header nav{display:none}
  html.js-nav header nav.open{display:flex;flex-direction:column;
  align-items:stretch;gap:2px;position:absolute;left:0;right:0;top:100%;
  z-index:900;margin:0;padding:12px 16px 16px;background:var(--surface-2);
  border-bottom:1px solid var(--line);box-shadow:var(--elevation);
  max-height:calc(100vh - 100%);overflow-y:auto;
  transition:opacity .14s ease-out}

  /*  The search first, and the full width of the panel. It is last in the
      markup - which is where the comment in `base.html` has always said it
      belongs, because anywhere earlier it breaks the line of links on the
      desktop bar - so it is moved to the top here rather than moved in the
      document.  */
  html.js-nav header nav.open .navsearch{order:-1;display:block;width:100%;
  margin:0 0 10px}
  html.js-nav header nav.open .navsearch input{width:100%;
  min-height:var(--tap,44px)}

  /*  Every link in the panel is a 44px row with the word at its left, which
      is a thumb-sized target rather than an inline run of text.  */
  html.js-nav header nav.open a{display:flex;align-items:center;
  min-height:var(--tap,44px);padding:0 4px;line-height:1.3}
  /*  The separators are punctuation for a row of links. In a column they
      would be a row of lone middots.  */
  html.js-nav header nav.open .navsep{display:none}
}

/*  Reduced motion: the panel appears, it does not fade. `style.css` already
    zeroes every transition under this query; this says it again for the one
    transition this file adds, so the rule travels with the thing it governs.  */
@media (prefers-reduced-motion:reduce){
  html.js-nav header nav.open{transition:none}
}

/*  ---------------------------------------------------------------------------
    RELEASE 0296. THE FOOTER IS AN INDEX, NOT A PARAGRAPH.

    Twenty links and nineteen middots in one run of text became five groups
    with a heading over each. The markup carries the headings and the lists;
    this is only their geometry.

    FIVE COLUMNS FROM 900px. `walk.css` already made the footer a grid at that
    width - the two sentences beside each other, the links in the widest of
    three tracks - and five columns do not fit in one of those tracks at any
    readable width. So the two sentences keep their row and the groups take a
    full-width row of their own underneath, five across.

    A SINGLE STACK BELOW, AND THAT IS ALL IT IS. Each heading sits above its
    own links, every link is a 44px row, and there is not a separator anywhere
    in it: a middot between items in a column is punctuation with nothing to
    punctuate.  */
.footcols{display:grid;grid-template-columns:1fr;gap:16px 20px;
margin:var(--s4,16px) 0 0}
.footcol h2{margin:0 0 2px;font-size:.95rem;line-height:1.3;font-weight:700;
color:var(--text)}
.footcol ul{list-style:none;margin:0;padding:0}
.footcol li{margin:0}
.footcol a{display:flex;align-items:center;min-height:var(--tap,44px);
color:var(--muted);text-decoration:none}
.footcol a:hover,.footcol a:focus-visible{color:var(--text);
text-decoration:underline}

@media (min-width:900px){
  /*  The two sentences on one row, the five groups on the next. Written out
      rather than inherited, because the track this would otherwise land in
      was measured for a paragraph of links and not for five columns.  */
  footer{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  footer .social{grid-column:1}
  footer>p:not(.social){grid-column:2}
  .footcols{grid-column:1 / -1;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px}
  /*  A 44px row per link is a thumb target on a phone and a gappy column on a
      desktop, where the pointer is precise and the eye wants the group read
      as one block.  */
  .footcol a{min-height:0;padding:3px 0}
}