/* Chor kartu: "Holzvogel". The carved folk-art bird of the logo sets the voice: its green, its notched bands
   (Kerbschnitt) as the one ornament, a carved-letter face for names, dates and navigation, a book serif for the texts
   as in a concert programme. DESIGN.md says why. The site starts light (color-scheme below) and visitors switch it in
   the foot (scheme.js). Layers, in this order, so a later one wins without specificity games. */
@layer tokens, base, compositions, components, utilities;

/* Fonts, both SIL Open Font License 1.1, subset to German Latin (fonts.md › Serving); the licence fields stay in the
   files (name IDs 13, 14).
   Amarna, wght 400-700: github.com/ijvanl/Amarna at 22819baf (2025-11-19), fonts/variable/Amarna[wght].ttf.
   Libertinus Serif Regular 7.051: github.com/alerque/libertinus release v7.051, static/TTF. Reserved names
   ("Linux Libertine", "Biolinum", "STIX Fonts") are not used. Fallback faces measured with Capsize 4 from the subsets. */
@font-face {
  font-family: "Amarna";
  src: url("/design/amarna-2682f28a.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Amarna Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 101.9968%;
  descent-override: 34.8282%;
  line-gap-override: 0%;
  size-adjust: 100.4933%;
}
@font-face {
  font-family: "Libertinus Serif";
  src: url("/design/libertinus-serif-5f1c378e.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libertinus Serif Fallback";
  src: local("Georgia");
  ascent-override: 96.5002%;
  descent-override: 26.5538%;
  line-gap-override: 0%;
  size-adjust: 92.6423%;
}

@layer tokens {
:root {
  /* the owner's start (DESIGN.md › Colour): light */
  color-scheme: light;
  /* paper: a cool white with a breath of the logo's green (not cream); night: a deep forest green, for the posters */
  --paper: light-dark(#f6f8f5, #0f1813);
  --ink: light-dark(#15231a, #e4ece6);
  --muted: light-dark(#42544a, #a7b8ac);
  --line: light-dark(#c6d2c9, #304237);
  /* the logo's green (#136e3a), a shade deeper for 7:1 on paper: links, the current page, dates, the notched bands */
  --accent: light-dark(#105f33, #86cf9e);
  --focus-color: light-dark(#105f33, #e8c468);
  /* the logo always sits on a light disc, as the drawing was made for light paper */
  --medallion: #f6f8f5;
  /* Kerbschnitt: a row of notched triangles, as on the bird's back */
  --kerb: conic-gradient(from 135deg at 50% 0, var(--accent) 90deg, #0000 0) 0 0 / 10px 6px repeat-x;
  --kerb-height: 6px;

  /* type: carved letters for names, dates and navigation; a book serif for the texts */
  --carved: "Amarna", "Amarna Fallback", "Optima", "Candara", sans-serif;
  --serif: "Libertinus Serif", "Libertinus Serif Fallback", "Iowan Old Style", "Palatino Linotype", serif;
  --sans: var(--carved);
  --tiny: 13px;
  --small: 15px;
  --body: clamp(18.5px, 17px + 0.25vw, 20px);
  --lead: clamp(21px, 18px + 0.6vw, 25px);
  --regular: 400;
  --medium: 500;
  --bold: 600;
  --leading: 1.55;
  --tight: 1.08;
  --caps-tracking: 0.08em;

  /* space: an 8 px grid; the gutter keeps clear of the phone's safe areas */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --gutter: max(
    clamp(var(--s4), 4vw, var(--s8)),
    env(safe-area-inset-left),
    env(safe-area-inset-right)
  );

  /* lines and shapes: rectangles; the only circle is the logo */
  --hairline: 1px;
  --heavy: 3px;
  --control-border: 1.5px;
  --focus: 3px;
  --focus-offset: 2px;
  --target: 44px;

  /* widths: the rail on wide screens, the column for images, the measure for text */
  --rail: 15rem;
  --column: 46rem;
  --measure: 33em;
}
}

@layer base {
*,
::before,
::after {
  box-sizing: border-box;
}
:root {
  -webkit-text-size-adjust: 100%;
}
/* a visitor's choice over the owner's start: the kept one (scheme.js), or a radio checked on this page */
:root[data-scheme="light"],
:root:has(input[name="scheme"][value="light"]:checked) {
  color-scheme: light;
}
:root[data-scheme="dark"],
:root:has(input[name="scheme"][value="dark"]:checked) {
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--regular) var(--body) / var(--leading) var(--serif);
  overflow-wrap: anywhere;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
p,
figure,
fieldset {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-family: var(--carved);
  font-weight: var(--bold);
  line-height: var(--tight);
  overflow-wrap: normal;
  text-wrap: balance;
}
strong {
  font-family: var(--carved);
  font-weight: var(--bold);
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: var(--focus) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
}

@layer compositions {
/* phone: head, main, foot in one column; the main takes the free height, so the foot sits at the bottom */
.frame {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-inline: var(--gutter);
}
.frame > main {
  flex: 1;
  width: 100%;
  max-width: var(--column);
}
/* wide: the logo and the navigation stand in a rail on the left, like the index of a concert programme */
@media (width >= 60rem) {
  .frame {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, var(--column));
    grid-template-rows: auto 1fr auto;
    justify-content: center;
    column-gap: clamp(var(--s12), 6vw, 96px);
  }
  .frame > .site-head {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .frame > :not(.site-head) {
    grid-column: 2;
  }
  .frame > .draft-note {
    grid-row: 1;
  }
  .frame > main {
    grid-row: 2;
  }
  .frame > .site-foot {
    grid-row: 3;
  }
}
}

@layer components {
/* the head: on the phone the medallion, the name and the menu button in a row, the motto under them */
.site-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name button" "motto motto";
  align-items: center;
  column-gap: var(--s4);
  padding-top: max(var(--s3), env(safe-area-inset-top));
}
.site-name {
  grid-area: name;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--target);
  color: var(--ink);
  text-decoration: none;
}
.site-name .mark {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--medallion);
}
.site-name .name {
  font-family: var(--carved);
  font-size: 26px;
  font-weight: var(--bold);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.motto {
  grid-area: motto;
  margin-top: var(--s2);
  padding-bottom: var(--s3);
  color: var(--muted);
  font-family: var(--carved);
  font-size: var(--small);
  letter-spacing: 0.02em;
}
.menu-open {
  grid-area: button;
}

/* the navigation: a column of plain links; the current page in green with a carved diamond before it. On a narrow
   screen it sits behind the menu button as a popover panel: no script, Esc and a tap beside it close it, and the
   browser tells assistive technology whether it is open. A browser without popover ignores the attribute and shows
   the list, so the button appears only where :popover-open is known. 60rem in both queries: ten entries need the
   rail. */
.nav ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink);
  font-family: var(--carved);
  font-size: 18px;
  font-weight: var(--medium);
  text-decoration: none;
}
.nav a:hover {
  color: var(--accent);
  text-decoration: underline 1px;
  text-underline-offset: 0.25em;
}
.nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: var(--bold);
}
.nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -20px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  rotate: 45deg;
}
:is(.menu-open, .menu-close) {
  display: none;
  place-items: center;
  width: var(--target);
  height: var(--target);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
:is(.menu-open, .menu-close) svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
@supports selector(:popover-open) {
  @media (width < 60rem) {
    .menu-open {
      display: grid;
    }
    .nav:popover-open {
      inset: 0 0 auto;
      width: auto;
      max-height: 100dvh;
      margin: 0;
      padding: max(var(--s3), env(safe-area-inset-top)) var(--gutter) var(--s6) calc(var(--gutter) + 20px);
      border: 0;
      background: var(--paper) var(--kerb);
      background-position: bottom left;
      color: var(--ink);
      overflow-y: auto;
    }
    .nav:popover-open .menu-close {
      display: grid;
      margin-left: auto;
    }
    .nav:popover-open a {
      min-height: 48px;
      font-size: 22px;
    }
    .nav::backdrop {
      background: rgb(0 0 0 / 0.45);
    }
  }
}

/* wide: the rail. The medallion large, the name and motto under it, then the navigation; it stays in view while a
   long page scrolls when the window is tall enough to hold it whole */
@media (width >= 60rem) {
  .site-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: var(--s12) var(--s8);
    padding-left: 20px;
  }
  .site-name {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s4);
  }
  .site-name .mark {
    width: 128px;
    height: 128px;
  }
  .site-name .name {
    font-size: 30px;
  }
  .motto {
    margin-top: var(--s1);
    padding-bottom: var(--s6);
    font-size: 16px;
  }
  .motto::after {
    content: "";
    display: block;
    width: 100px;
    height: var(--kerb-height);
    margin-top: var(--s6);
    background: var(--kerb);
  }
  .nav[popover] {
    display: block;
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: none;
    color: inherit;
  }
  .nav a {
    font-size: 17px;
  }
}
@media (width >= 60rem) and (height >= 47rem) {
  .site-head {
    position: sticky;
    top: 0;
    align-self: start;
  }
}

/* the page: the title, a band of notches, then the text */
main {
  padding-block: var(--s6) var(--s16);
}
@media (width >= 60rem) {
  main {
    padding-top: calc(var(--s12) + 40px);
  }
}
main > article > h1 {
  font-size: clamp(38px, 26px + 2.6vw, 60px);
  letter-spacing: -0.01em;
}
main > article > h1::after {
  content: "";
  display: block;
  height: var(--kerb-height);
  margin-top: var(--s4);
  background: var(--kerb);
}
main > article > h1 + * {
  margin-top: var(--s8);
}

/* text Martin writes (Markdown) */
.prose > * {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: 0.85em;
}
.prose :is(ul, ol) {
  margin-block: 0;
  padding-left: 1.2em;
}
.prose ul > li::marker {
  content: "–  ";
  color: var(--accent);
}
.prose li + li {
  margin-top: 0.2em;
}
/* a section: a short notched band over its heading, as the original's green rule over each date */
.prose h2 {
  margin-top: 2.2em;
  font-size: clamp(25px, 21px + 0.6vw, 30px);
}
.prose h2::before {
  content: "";
  display: block;
  width: 50px;
  height: var(--kerb-height);
  margin-bottom: var(--s4);
  background: var(--kerb);
}
.prose h3 {
  margin-top: 1.8em;
  font-size: clamp(21px, 19px + 0.3vw, 23px);
}
.prose > :first-child {
  margin-top: 0;
}
.prose :is(h2, h3) + * {
  margin-top: 0.5em;
}
/* a heading over headings (Vergangenes: the year over its events) is a large figure with a full band */
.prose h2:has(+ h3) {
  margin-top: 2.6em;
  font-family: var(--serif);
  font-weight: var(--regular);
  font-size: clamp(44px, 32px + 2.4vw, 64px);
  font-variant-numeric: lining-nums;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.prose h2:has(+ h3)::before {
  width: 100%;
}
.prose h2:has(+ h3) + h3 {
  margin-top: 0.9em;
}
/* the date line: a heading's first paragraph that opens in bold (Termine, Vergangenes). The date in green, the
   place after it quieter. In the serif's figures: Amarna draws 1 like I, so "11.10." would read "II.I0." */
.prose :is(h2, h3) + p:has(> strong:first-child) {
  margin-top: 0.4em;
  color: var(--muted);
  font-size: 1.02em;
  line-height: 1.45;
}
.prose :is(h2, h3) + p > strong:first-child {
  color: var(--accent);
  font-family: var(--serif);
  font-weight: var(--regular);
  font-synthesis: none;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.02em;
}
/* a paragraph that holds only an image: the image as wide as the column, a poster no taller than the window */
.prose > p:has(> img) {
  max-width: none;
  margin-block: 1.6em;
}
.prose img {
  width: auto;
  max-height: min(85svh, 1000px);
}
.prose blockquote {
  margin-inline: 0;
  padding-left: var(--s4);
  border-left: var(--heavy) solid var(--accent);
}
.prose hr {
  height: var(--kerb-height);
  margin-block: 2em;
  border: 0;
  background: var(--kerb);
}
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.prose :is(th, td) {
  padding: var(--s2) var(--s4) var(--s2) 0;
  border-bottom: var(--hairline) solid var(--line);
  text-align: left;
  vertical-align: top;
}
.prose th {
  font-family: var(--carved);
  font-weight: var(--bold);
}

/* a register: every heading followed by a list (Repertoire: the composer, then the pieces). On wide screens in
   columns like a programme's index; a composer and the pieces never part */
.prose:has(> h2 + ul):not(:has(> h2 + :not(ul))) {
  column-width: 19rem;
  column-gap: var(--s12);
}
.prose:has(> h2 + ul):not(:has(> h2 + :not(ul))) > * {
  max-width: none;
}
.prose:has(> h2 + ul):not(:has(> h2 + :not(ul))) > h2 {
  margin-top: 1.3em;
  padding-top: var(--s2);
  border-top: var(--hairline) solid var(--line);
  font-size: 20px;
  break-after: avoid;
}
.prose:has(> h2 + ul):not(:has(> h2 + :not(ul))) > h2:first-child {
  margin-top: 0;
}
.prose:has(> h2 + ul):not(:has(> h2 + :not(ul))) > h2::before {
  content: none;
}
.prose:has(> h2 + ul):not(:has(> h2 + :not(ul))) > ul {
  margin-top: 0.3em;
  break-inside: avoid;
}
/* a piece: a green note instead of the dash (Richard picked draft b's register, 2026-10-25) */
.prose:has(> h2 + ul):not(:has(> h2 + :not(ul))) > ul > li::marker {
  content: "♪  ";
}

.lead,
.home .prose > p:first-child {
  max-width: 30em;
  font-size: var(--lead);
  line-height: 1.45;
}

.skip {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 20;
  padding: var(--s2) var(--s3);
  background: var(--paper);
  font-family: var(--carved);
}
.skip:focus {
  top: var(--s2);
}

/* the foot: the notched band, the legal links, the switch */
.site-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--s4) var(--s8);
  padding-block: var(--s8) max(var(--s8), env(safe-area-inset-bottom));
  background: var(--kerb);
  background-position: top left;
  color: var(--muted);
  font-family: var(--carved);
  font-size: var(--small);
}
.site-foot p {
  margin: 0;
  flex-basis: 100%;
  order: 2;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink);
  font-size: 16px;
  font-weight: var(--medium);
}

/* the visitor's switch, small at the foot (Richard, 2026-10-25): "Darstellung: Hell Dunkel" as quiet text, the
   chosen word in ink and underlined; each word keeps a full target. The radios sit under the words, so it works by
   keyboard and without JavaScript */
.scheme {
  display: flex;
  align-items: center;
  gap: 0 var(--s3);
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--tiny);
}
.scheme legend {
  float: left;
  padding: 0;
  margin-right: var(--s1);
}
.scheme label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  color: var(--muted);
  cursor: pointer;
}
.scheme input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.scheme label:has(:checked) {
  color: var(--ink);
  text-decoration: underline var(--accent) 2px;
  text-underline-offset: 0.3em;
}
.scheme label:has(:focus-visible) {
  outline: var(--focus) solid var(--focus-color);
  outline-offset: 1px;
}

/* the Vorschau only: the faint watermark over the page head, and the marks of drafts */
.vorschau-mark {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  font: 800 clamp(3rem, 15vw, 10rem) / 1.1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  opacity: 0.1;
}
.draft-note {
  margin-top: var(--s4);
  padding: var(--s2) var(--s3);
  border: var(--control-border) dashed var(--ink);
  font-family: var(--carved);
  font-size: var(--small);
  font-weight: var(--medium);
}
.draft {
  font-family: var(--carved);
  font-size: var(--tiny);
  font-weight: var(--bold);
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--muted);
}

/* forced colours drop backgrounds: the notched bands become plain rules, the medallion keeps its circle */
@media (forced-colors: active) {
  main > article > h1::after,
  .prose h2::before,
  .motto::after,
  .prose hr {
    background: none;
    border-top: 2px solid CanvasText;
    height: 0;
  }
  .site-foot {
    border-top: 2px solid CanvasText;
  }
  .site-name .mark {
    forced-color-adjust: none;
  }
  .nav a[aria-current="page"] {
    text-decoration: underline 2px;
  }
}
}