/* The bar at the head of every page.
 *
 * It brings its colours itself and inherits none. Since 20 August 2026 the
 * tokens are called the same everywhere, set by `css/base.css`, and that is
 * exactly why the masthead cannot take them: the drafts `glass` and `plates`
 * give the same names other values, `glass` a dark palette. A bar meant to look
 * the same on every page would then hang on the page it stands on. The values
 * below are its own.
 *
 * **Inverted since 29 August 2026** after
 * workshop/design/design_handoff_top-menu/README.md. It was a line of thirteen
 * pixels in the apparatus face on the paper ground, and a first-time visitor did
 * not find the ways in; Stefan: „das top menu muss deutlicher werden, so dass
 * die navigation verständlicher wird." It carries the six names in the work
 * face at twenty pixels on a grey-green ground now, and it is the loudest thing
 * above the headline.
 *
 * `--masthead-height` is the only value that works outwards: the chapter bars
 * stick below it with `top: var(--masthead-height, 0)` instead of sliding over
 * it while scrolling.
 */

:root {
  /* The height, and it has to be **exact**: the chapter bar sticks at
     `top: var(--masthead-height)`, and a value one pixel too small lets it slide
     under this bar. It is set rather than measured — 18 px of air above a line
     of 23, and 16 below. The current page carries 14 of those 16 and two pixels
     of gold, so both come to the same 57. */
  --masthead-height: 57px;

  /* The ground of the bar. Stefan chose the tone on 29 August 2026: a
     desaturated grey-green, quiet enough to carry paper-coloured type. */
  --mh-base:  #465853;
  /* Paper on that ground, and paper dimmed for what stands beside the names. */
  --mh-ink:  #f6f3ea;
  --mh-far:   #b8c4bd;
  /* Gold for the dark ground, and **not** the `--gold` of the text: #8f6710
     goes muddy on this green. */
  --mh-gold:  #c9a45c;
  --mh-rule:  rgb(246 243 234 / .25);
  /* The same apparatus stack as in `reading.css` since 15 August 2026; Optima
     before it was too thin in the stroke. */
  --mh-font: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --mh-work: "Christ Charter", Charter, "Bitstream Charter", Georgia, serif;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  box-sizing: border-box;
  margin: 0;
  background: var(--mh-base);
  color: var(--mh-ink);
}

/* The names stand over the page column, and the ground runs the whole width of
   the window. The right edge belongs to the language block, which carries its
   own padding: it sticks to that edge, and a padding on the box that scrolls
   would leave a strip of ground in which the names show through beside „NB". */
.masthead-inner {
  display: flex;
  align-items: stretch;
  gap: 30px;
  box-sizing: border-box;
  height: var(--masthead-height);
  max-width: var(--page);
  margin: 0 auto;
  padding-left: var(--page-edge);
  /* Six names in the work face need about 760 px, more than a small laptop
     holds. The bar scrolls sideways rather than dropping one. */
  overflow-x: auto;
  scrollbar-width: none;
}
.masthead-inner::-webkit-scrollbar { display: none; }

/* The way home, and the landing page shows none. It is built like one of the
   six names beside it — same face, same size, same padding, so that the baselines
   line up and the row reads as one row. The whole word „Startseite" would take
   83 px of a bar that holds 1140 and push „Bildergalerie" under the language
   switch; „Start" takes 45, and the whole word stands in the title. */
.masthead-home {
  display: block;
  flex: 0 0 auto;
  padding: 18px 0 14px;
  font-family: var(--mh-work);
  font-size: 20px;
  line-height: 23px;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  /* A step behind the six works, and no further: `--mh-far` would put twenty
     pixels of type at 4,2 to 1 on this green, under the 4,5 that anything below
     24 px needs. This mix stands at 4,9. */
  color: color-mix(in srgb, var(--mh-ink) 78%, var(--mh-base));
}
.masthead-home:hover,
.masthead-home:focus-visible { color: var(--mh-gold); }

/* `list-style` and nothing more. The row of names is laid out on its own class
   below: `.masthead ul` is (0,1,1) and beat `.language-panel` at (0,1,0), so
   the drop-down inherited `display: flex` and set its three languages side by
   side. Measured, the panel was 259 px wide and one line tall. */
.masthead ul { list-style: none; }
/* The six names are one element in both arrangements: a row on a wide screen, a
   panel under the bar on a narrow one. The `popover` attribute would hide it
   until it is opened, so the wide branch overrides that — an author rule beats
   the browser's own, whatever the specificity — and the switch that opens it is
   itself hidden there. So the six links exist once and not twice, and a reading
   voice does not read them through twice either. */
.masthead-pages {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  position: static;
  margin: 0;
  padding: 0;
  gap: 30px;
  inset: auto;
  width: auto;
  background: none;
  border: 0;
  overflow: visible;
}
.masthead-pages a {
  display: block;
  /* 18 above, 14 below and two pixels of rule: 57, the height of the bar. The
     rule is transparent until the page is the one being read, so that nothing
     moves when it takes its colour. With 16 below **and** the two pixels the
     link stood 59 tall in a bar of 57 and hung two pixels out at the bottom. */
  padding: 18px 0 14px;
  font-family: var(--mh-work);
  font-size: 20px;
  line-height: 23px;
  color: var(--mh-ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.masthead-pages a:hover { color: var(--mh-gold); }
/* The page one stands on keeps the paper colour and takes the gold as a rule
   under it. Two pixels of gold in place of two of the sixteen below the line,
   so that the height of the bar does not move. */
.masthead-pages a.is-here { border-bottom-color: var(--mh-gold); }

.masthead a:focus-visible {
  outline: 2px solid var(--mh-gold);
  outline-offset: 2px;
}

/* A page still being written says so beside its name. None at present. */
.masthead-draft {
  margin-left: .4em;
  font-family: var(--mh-font);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mh-gold);
}

/* -------------------------------------------------------- The language switch
 *
 * Laid out on 11 August 2026. It stands on the far right and not among the
 * works, because it is not a page: it changes not the place but the language of
 * the same place.
 *
 * It appears only where at least two languages have something to show
 * (lib/Language.php, `offered()`).
 *
 * It sticks to the right edge of the window and brings its own ground, so that
 * the names slide **under** it when the bar scrolls instead of past it. The
 * hairline on its left is the seam.
 *
 * **A drop-down since 29 August 2026.** The three codes stood side by side and
 * cost 130 px of a bar that holds 1140, and on a content page the six names plus
 * the way home wanted 1185: „Bildergalerie" lay under the switch at every
 * desktop width. Squeezing the three saved 18 px and was not worth the look;
 * Stefan: „mach ein drop down draus. das spart soooooo viel platz." The bar now
 * carries the current code alone, 99 px with the design's own spacing, and 79
 * where the page edge falls to 20. What opens is the languages by name.
 */
.masthead-languages {
  position: sticky;
  right: 0;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 0 var(--page-edge) 0 20px;
  background: var(--mh-base);
  font-family: var(--mh-font);
  font-size: 12px;
}
/* No rule where nothing runs underneath, and a shadow where something does.
   `js/masthead.js` measures whether the bar is wider than the window and sets
   the class; CSS has no question for it. A hairline stood here always, and on a
   bar with room to spare it separated two pieces of the same ground. */
.is-cut .masthead-languages {
  box-shadow: -12px 0 12px -8px rgb(14 18 16 / .55);
}

/* The trigger: the code of the language one is reading, and a chevron drawn out
   of two borders. No sign from a font — the eighth rule of the house forbids
   pictographs, and this is geometry. */
.language-open {
  display: flex;
  align-items: center;
  gap: 7px;
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--mh-ink);
  cursor: pointer;
  white-space: nowrap;
}
.language-open:hover { color: var(--mh-gold); }
.language-open::after {
  content: "";
  width: .38em;
  height: .38em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-.1em, -.1em);
}

/* The panel drops from under the bar and ends where the page column ends, so
   that it hangs on the switch that opened it. A popover lies in the top layer
   and is therefore not cut by the bar's own `overflow-x`; light dismiss and
   escape come from the platform, without a line of JavaScript. */
.language-panel {
  position: fixed;
  top: var(--masthead-height);
  right: max(0px, calc((100% - var(--page)) / 2));
  left: auto;
  bottom: auto;
  margin: 0;
  padding: 8px 0;
  min-width: 10rem;
  border: 0;
  background: var(--mh-base);
  color: var(--mh-ink);
  font-family: var(--mh-font);
  font-size: 13px;
  list-style: none;
}
.language-panel::backdrop { background: none; }
.language-panel a {
  display: block;
  padding: 8px 22px;
  color: var(--mh-far);
  text-decoration: none;
  white-space: nowrap;
}
.language-panel a:hover { color: var(--mh-ink); }
.language-panel a.is-here {
  color: var(--mh-ink);
  box-shadow: inset 3px 0 0 var(--mh-gold);
}

/* The switch, the wordmark, the way home in the list and the subtitle under
   each name belong to the narrow bar alone. On a wide screen the house on the
   left leads home, and the six names stand in one line that has no room for a
   second. */
.masthead-menu,
.masthead-mark,
.masthead-page-home,
.masthead-line { display: none; }

/* ---------- schmale Schirme ------------------------------------------ */

/*
 * The bar on a narrow screen, after
 * workshop/design/design_handoff_startseite_mobile/README.md.
 *
 * Six names in the work face need about 760 px, and on a phone two and a half
 * of them were to be seen; the rest lay behind the language switch and had to
 * be dragged into view. Three things stand in the bar now — the switch that
 * opens the names, the name of the man, the language — and the six names come
 * down as a panel under it.
 */
@media (max-width: 46rem) {
  :root { --masthead-height: 52px; }

  .masthead-inner {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 0;
    padding: 0 14px;
    overflow: visible;
  }

  /* A tap area of 44 px round three strokes of 20 by 1.5. */
  .masthead-menu {
    display: flex;
    flex-direction: column;
    gap: 4.5px;
    justify-self: start;
    appearance: none;
    padding: 6px;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .masthead-bar {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--mh-ink);
  }

  /* The name of the man in the middle, and on a subpage it is the way home as
     well. The house stands beside it on a wide screen and would be a second
     door to the same room. */
  .masthead-mark {
    display: block;
    justify-self: center;
    font-family: var(--mh-work);
    font-size: 19px;
    color: var(--mh-ink);
    text-decoration: none;
    white-space: nowrap;
  }
  .masthead-home { display: none; }

  /* The names as a panel under the bar, over the full width. */
  .masthead-pages {
    position: fixed;
    display: block;
    inset: var(--masthead-height) 0 auto 0;
    width: auto;
    margin: 0;
    padding: 6px 0 14px;
    background: var(--mh-base);
    border: 0;
    border-top: 1px solid var(--mh-rule);
  }
  .masthead-pages:not(:popover-open) { display: none; }
  /* First in the panel and set off by a rule: it leads out of the six works
     rather than to a seventh. */
  .masthead-page-home {
    display: block;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mh-rule);
  }
  .masthead-pages a {
    display: block;
    padding: 9px 20px;
    font-size: 21px;
    line-height: 1.3;
    border-bottom: 0;
  }
  /* The subtitle under the name, in the apparatus face and a step back, so
     that the name carries the entry and the line explains it. It says what the
     doors of the landing page say under the same name, out of the same key.
     Gerechnet auf dem Grund der Leiste: 4,9 zu 1, über den 4,5, die dreizehn
     Pixel brauchen; `--mh-far` gäbe dort nur 4,2. */
  .masthead-line {
    display: block;
    margin-top: 1px;
    font-family: var(--mh-font);
    font-size: 13px;
    line-height: 1.35;
    color: color-mix(in srgb, var(--mh-ink) 78%, var(--mh-base));
  }
  .masthead-pages a.is-here {
    box-shadow: inset 3px 0 0 var(--mh-gold);
  }

  .masthead-languages {
    justify-self: end;
    padding: 0;
    margin: 0;
    background: none;
  }
  .language-panel { top: var(--masthead-height); }
}

/* The reading views are a full-screen grid with `overflow: hidden` on the body
   and one single row. The bar gets a row of its own across all the columns
   there, or it would stand in the first column and the text would slip beside
   it. `body.view` is more specific than the `body` of the draft sheets and wins
   regardless of the loading order. */
body.view {
  grid-template-rows: auto minmax(0, 1fr);
}
body.view > .masthead {
  grid-column: 1 / -1;
}

/* The two older drafts of the reading edition, `glass` and `plates`, keep a
 * drawer of their own that breaks at 1080 px and sets its button at
 * `top: 1rem`; both thereby lay under the masthead. The workshop draft and
 * every other register page take their drawer from `css/register.css`, which
 * knows the masthead's height itself.
 */
@media (max-width: 1080px) {
  body.ansicht--glass #index,
  body.ansicht--plates #index { top: var(--masthead-height); }
  body.ansicht--glass #index-toggle,
  body.ansicht--plates #index-toggle { top: calc(var(--masthead-height) + .55rem); }
}