/* geser.net — the shell, in his own look (Silvan, 22.09.2026: the front page's identity, not the
   socio.ch serif): white page, black Arial, the greys #EAECEA / #EFEFEF of his front page, bold
   black links. The front and memorial pages (body.bare) carry their own rules; this file gives
   the tokens and the masthead the re-templated pages use (build-reader.mjs copies the built
   stylesheet to /_site.css and reads it by the --paper token). Legacy pages are styled by
   legacy.css, not here. Light only, as his site was. */

:root {
  --paper: #ffffff;
  --grey: #eaecea;
  --grey2: #efefef;
  --ink: #111111;
  --ink-soft: #333333;
  --meta: #444444;
  --rule: #c9c9c9;
  --link: #111111;
  --accent: #111111;
  --measure: 70ch;
  /* the serif token is kept for the reader rules but points at his face */
  --sans: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --serif: var(--sans);
  color-scheme: light;
}

html { background: var(--paper); color: var(--ink); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 40em) { body { font-size: 1rem; } }

a { color: var(--link); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 52rem; margin: 0 auto; padding: 1rem 1rem 2.5rem; }

/* masthead: his grey name bar (the front page's .namebar), the site name bold on the left, the
   line about him italic on the right */
.masthead {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 1.5rem;
  background: var(--grey);
  padding: 0.85rem 1.25rem;
  margin: 0 0 1.5rem;
}
.masthead a { text-decoration: none; color: var(--ink); }
.masthead a:hover { text-decoration: underline; }
.masthead .site { font-weight: 700; font-size: 1.2rem; }
.masthead .uni { font-style: italic; font-weight: 700; font-size: 0.9rem; color: var(--ink); }

/* colophon: the small grey foot of the front page */
footer.colophon { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 0.9rem 0 1.5rem; color: var(--meta); font-size: 0.8rem; }
footer.colophon p { margin: 0 0 0.35rem; max-width: 70ch; }
footer.colophon a { font-weight: 400; color: var(--meta); text-decoration: underline; }

/* search (Pagefind UI), when a page carries one: dressed as part of the page, not a widget.
   The variables are Pagefind's own; its stylesheet sets the defaults on :root, ours on .search. */
.search {
  margin: 0 0 1.5rem; max-width: 58ch;
  --pagefind-ui-scale: 0.9;
  --pagefind-ui-font: var(--sans);
  --pagefind-ui-primary: var(--link);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--paper);
  --pagefind-ui-border: var(--rule);
  --pagefind-ui-tag: var(--grey);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 2px;
}
.search label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#search .pagefind-ui__search-input { font-weight: 400; }
#search .pagefind-ui__search-input::placeholder { color: var(--meta); opacity: 1; }
#search .pagefind-ui__search-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
#search .pagefind-ui__search-clear { color: var(--meta); font-weight: 400; }
#search .pagefind-ui__message { font-weight: 400; color: var(--meta); font-style: italic; }
#search .pagefind-ui__result { padding: 0.9rem 0 1rem; }
#search .pagefind-ui__result-title { font-weight: 700; }
#search .pagefind-ui__result-title .pagefind-ui__result-link { color: var(--link); }
#search .pagefind-ui__result-excerpt { color: var(--ink-soft); }
#search .pagefind-ui__result-excerpt mark { background: var(--grey); color: var(--ink); font-weight: 700; }
#search .pagefind-ui__button { font-weight: 400; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* PDF links: a small document glyph after the link text, in the link's own colour (an SVG mask
   filled with currentColor: navy, black or oxblood as the page decides). The pseudo is a plain
   inline box holding a word joiner (U+2060, zero width, no break before it), the glyph sits in its
   left padding: it never wraps onto a line of its own, and underlines skip padding. Image links
   get none; ?query and #page forms are covered. FrontPage and Word often colour the text with an
   inner <font color>, a styled span or a span.auto-styleN: when such a carrier ends the link (up
   to three levels deep) the glyph goes inside the innermost one and takes that colour. Guarded so
   that a browser without masks adds nothing rather than a coloured square. ASCII only. */
@supports (mask-image: none) or (-webkit-mask-image: none) {
  :is(a[href$=".pdf" i], a[href$=".PDF"], a[href*=".pdf?" i], a[href*=".pdf#" i]):not(:has(
      > :is(font[color], [style*="color" i], span[class]):last-child,
      > :last-child > :is(font[color], [style*="color" i], span[class]):last-child,
      > :last-child > :last-child > :is(font[color], [style*="color" i], span[class]):last-child))::after,
  :is(a[href$=".pdf" i], a[href$=".PDF"], a[href*=".pdf?" i], a[href*=".pdf#" i])
    :is(font[color], [style*="color" i], span[class]):is(
      a > :last-child, a > :last-child > :last-child, a > :last-child > :last-child > :last-child):not(:has(
      > :is(font[color], [style*="color" i], span[class]):last-child,
      > :last-child > :is(font[color], [style*="color" i], span[class]):last-child))::after {
    content: "\2060";
    display: inline;
    padding-left: 0.85em;
    margin-left: 0.3em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 1.5h7l4 4v9h-11z'/%3E%3Cpath d='M10.5 1.5v4h4'/%3E%3Cpath d='M6 8.75h6M6 11.5h6'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; -webkit-mask-position: right center; -webkit-mask-size: 0.85em 0.85em;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 1.5h7l4 4v9h-11z'/%3E%3Cpath d='M10.5 1.5v4h4'/%3E%3Cpath d='M6 8.75h6M6 11.5h6'/%3E%3C/svg%3E");
    mask-repeat: no-repeat; mask-position: right center; mask-size: 0.85em 0.85em;
  }
  a:has(img)::after, a:has(img) ::after { content: none; }
}