/* ============================================================
   The tabs — one switch for the four index pages.

   Home · Library · Essays · Reviews sit in the header of /, /books, /articles
   and /reviews as a
   segmented control: a track with the current page pressed. The pressed
   segment carries a view-transition-name, so in a browser that animates
   navigation (Chrome 126, Safari 18.2 and later) it slides along the track
   to the new page's segment while the rest of the page fades — the switch
   reads as one object that stays put while the page beneath it changes.
   Elsewhere it is simply a static control that reads the same on every page.

   Colour comes from whichever page hosts it: the home page's ink and
   parchment, or the reader's ground and text (book.css), whichever is set.

   Markup: <nav class="tabbed"> … <div class="tabs" role="navigation">
   <a href="/">…</a><a class="on" aria-current="page" href="/books">…</a> …
   The .tabbed class on the header's nav is what lets the switch drop to a
   second row under 900px, where the site's other links have already gone
   into the menu.
   ============================================================ */
:root{--hdr:76px}
.tabs{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;flex:none;
  background:var(--ink-2,var(--surface-2,rgba(237,231,218,.06)));
  border:1px solid var(--rule,var(--line,rgba(237,231,218,.10)));
  font:inherit;font-size:.84rem;font-weight:500;line-height:1.4;white-space:nowrap}
.tabs a{display:inline-flex;align-items:center;justify-content:center;
  padding:.38em 1.05em;border-radius:999px;text-decoration:none;
  color:var(--muted,#A69C89);transition:color .22s,background .22s}
.tabs a:hover{color:var(--parchment,var(--text,#EDE7DA))}
.tabs a.on{color:var(--ink,var(--bg,#14120F));background:var(--parchment,var(--text,#EDE7DA));
  font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.28);view-transition-name:tabs-on}
.tabs a:focus-visible{outline:2px solid var(--verdigris,var(--accent,#D4553F));outline-offset:2px}

/* under 900px the switch takes a row of its own under the mark, full width,
   its four segments sharing the track equally — the way a segmented
   control sits under a title on a phone */
@media(max-width:900px){
  :root{--hdr:126px}
  nav.tabbed{flex-wrap:wrap;row-gap:.6rem}
  nav.tabbed .tabs{order:9;flex-basis:100%;display:flex}
  nav.tabbed .tabs a{flex:1 1 0}
}
@media(prefers-reduced-motion:reduce){.tabs a{transition:none}}