/* ============================================================
   musikakzente21 — EDITION
   The site as a printed edition catalogue: paper, ink, one vermilion.
   Vollkorn (text & display) · Archivo (nav, marks)
   ============================================================ */

:root {
  --paper: #FBFAF7;
  --ink: #171410;
  --ink-soft: #4A443A;
  --vermilion: #C22F1E;
  --hairline: #B9B2A4;
  --measure: 68ch;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scrollbar-color: var(--ink) var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Vollkorn", "Iowan Old Style", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--vermilion); color: var(--paper); }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }

a { color: inherit; caret-color: var(--vermilion); }

img { max-width: 100%; height: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: .5rem 1rem; z-index: 10;
  font-family: "Archivo", sans-serif; font-size: .85rem; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- masthead plate ---------- */

.masthead {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.2rem 1.25rem 0;
  text-align: center;
}

.mast-line {
  margin: 0 0 .4rem;
  font-family: "Archivo", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wordmark {
  display: inline-block;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark .mark-21 { color: var(--vermilion); font-style: normal; }
.wordmark:hover .mark-21 { color: var(--ink); }

.mainnav {
  margin-top: 1.3rem;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.mainnav::before {
  content: "";
  position: absolute; top: -6px; left: 0; right: 0;
  border-top: 1px solid var(--ink);
  transform-origin: center;
  animation: rule-in .9s cubic-bezier(.19,1,.22,1) both;
}
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .mainnav::before { animation: none; }
}

.mainnav ul {
  margin: 0; padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mainnav a {
  display: block;
  padding: .68rem .95rem .6rem;
  font-family: "Archivo", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.mainnav a:hover { color: var(--vermilion); }
.mainnav a[aria-current] {
  color: var(--vermilion);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}

/* ---------- page plate ---------- */

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

.plate { padding: 3rem 0 1.6rem; }

h1.display {
  margin: 0 0 .9rem;
  /* the page title sits at the composer-heading size (see .composer h2):
     the masthead is the loud voice, the title is a label above the text */
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lede { max-width: var(--measure); font-size: 1.15rem; }
.lede p { margin: 0 0 .7rem; }

/* ---------- catalogue entries (Neuigkeiten) ---------- */

.catalog { border-top: 3px solid var(--ink); }

.entry {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.5rem 0 1.7rem;
  border-top: 1px solid var(--hairline);
}
.catalog .entry:first-of-type { border-top: none; }

.entry .season {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.entry-body { max-width: var(--measure); overflow-wrap: anywhere; hyphens: auto; }
.entry-body p { margin: 0; }

/* ---------- links in running text ---------- */

.entry-body a, .prose a, .lede a, .worklist a {
  color: var(--ink);
  text-decoration-color: var(--vermilion);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .15s ease-out, text-decoration-thickness .15s ease-out;
}
.entry-body a:hover, .prose a:hover, .lede a:hover, .worklist a:hover {
  color: var(--vermilion);
  text-decoration-thickness: 2px;
}

/* ---------- side register / toc ---------- */

.page-grid, .werke-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 3.5rem;
  align-items: start;
}

.subnav-head {
  margin: 0 0 .6rem;
  font-family: "Archivo", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vermilion);
}

.subnav, .toc {
  border-top: 3px solid var(--ink);
  padding-top: .9rem;
}
.subnav ul, .toc ul {
  margin: 0; padding: 0; list-style: none;
}
.subnav li { border-top: 1px solid var(--hairline); }
.subnav li:first-child { border-top: none; }
.subnav a {
  display: block;
  padding: .5rem 0;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
}
.subnav a:hover { color: var(--vermilion); }


/* ---------- prose pages ---------- */

.prose { max-width: var(--measure); overflow-wrap: anywhere; hyphens: auto; }
.prose p { margin: 0 0 1.1rem; }
.prose h2 { font-size: 1.22rem; font-weight: 700; line-height: 1.25; margin: 2rem 0 .8rem; }
.prose img { display: block; margin: 1.5rem 0; }
.prose .stand { color: var(--ink-soft); }

/* ---------- Werke catalogue ---------- */

.pubrow {
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  font-family: "Archivo", sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pubrow a { text-decoration: none; border-bottom: 2px solid var(--vermilion); padding-bottom: .15rem; }
.pubrow a:hover { color: var(--vermilion); }
.pubrow span { color: var(--ink-soft); }

.werke-grid .toc {
  order: 2;
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.werke-grid .catalog { order: 1; }
.toc li { border-top: 1px solid var(--hairline); }
.toc li:first-child { border-top: none; }
.toc a {
  display: block;
  padding: .34rem 0;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
}
.toc a:hover { color: var(--vermilion); }
.toc .subnav-head + ul { margin-bottom: 1.6rem; }

.composer { padding: 2rem 0 .6rem; }
.composer h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  font-weight: 900;
  scroll-margin-top: 1.5rem;
}
.composer h2::after {
  content: "";
  display: block;
  width: 3.2rem;
  border-bottom: 3px solid var(--vermilion);
  margin-top: .5rem;
}
.worklist {
  margin: 0; padding: 0; list-style: none;
  max-width: var(--measure);
}
.worklist li { hyphens: auto;
  padding: .8rem 0;
  border-top: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}
.worklist li:first-child { border-top: none; }

/* ---------- colophon ---------- */

.colophon {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.2rem 1.25rem 3rem;
  border-top: 3px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.colophon p { margin: 0; font-size: .95rem; }
.colophon a { text-decoration-color: var(--vermilion); text-underline-offset: .22em; }
.colophon a:hover { color: var(--vermilion); }
.col-mark {
  font-family: "Archivo", sans-serif;
  font-size: .72rem !important;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- mobile ---------- */

@media (max-width: 820px) {
  .page-grid, .werke-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .werke-grid .toc { order: 0; position: static; max-height: none; }
  .subnav { margin-top: .5rem; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .masthead { padding-top: 1.6rem; }
  /* a print masthead wraps, it does not scroll */
  .mainnav a { padding: .5rem .55rem .44rem; font-size: .72rem; letter-spacing: .1em; }
  .plate { padding: 2.2rem 0 1.2rem; }
  .lede { font-size: 1.06rem; }
  .entry {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    padding: 1.2rem 0 1.4rem;
  }
  .colophon { flex-direction: column; gap: .4rem; }
}

/* de-emphasized span inside content headings (original had inline style) */
.prose h2 span { font-weight: 400; }

/* ============================================================
   PLATES — what is left of the plate apparatus
   The hall band is gone: it opened every page, then only
   Neuigkeiten, and now no page at all — the client's own
   decision, in three steps. What remains here is the INLINE
   plate, and it is not apparatus but content: the one archive
   picture the original Impressum carries, bound by the
   edition's rules and left at its natural size. The hall
   itself survives only as the fixed ground on wide screens,
   further down this file. Every page opens on the parent
   world's plain title plate, bare of photography.
   ============================================================ */

.plate-photo {
  margin: 0;
  border-top: 3px solid var(--ink);
  padding-top: .5rem;          /* the rule always reads, even over a dark plate */
}

.plate-img {
  position: relative;
  background: var(--hairline); /* a quiet ground before the image loads */
  line-height: 0;
}
.plate-img img {
  display: block;
  height: auto;
}

/* inline plate: a page's own picture inside the reading column, at its NATURAL
   size. A small archive scan stretched to the column is not a bigger picture,
   only a softer one, and it takes the page over; the column is a ceiling here,
   never a target. Hence width:auto + max-width:100%, not width:100%. */
.plate-photo.inline {
  margin: 1.6rem 0;
  border-bottom: 3px solid var(--ink);
  padding-bottom: .5rem;
  width: max-content;              /* the binding rules stop at the picture's own edge */
  max-width: 100%;
}
.plate-photo.inline .plate-img img { width: auto; max-width: 100%; height: auto; }
/* when a plate opens the reading column, its ink rule must start on the same
   line as the register's ink rule beside it, or the two columns read unhinged */
.prose > .plate-photo.inline:first-child { margin-top: 0; }

/* a page whose reading column has nothing in it does not keep the column.
   Laboratorium is that page: its one picture came off it on the client's
   instruction, so the register IS the page and takes the sheet at the
   reading measure, rather than standing in a 15rem gutter beside a void. */
.page-grid.register-only { grid-template-columns: minmax(0, 1fr); }
.page-grid.register-only > .subnav { max-width: var(--measure); }


/* ============================================================
   MEDIA & TABLES — the components the migration brings in
   jPlayer and its Flash fallback are gone; audio and video are
   native elements now, ruled and listed like everything else
   in the edition. Nothing here uses colour the world does not
   already own, and nothing rounds a corner.
   ============================================================ */

/* audio: a hairline-ruled list, the track named above its player,
   set in the same Archivo apparatus as the season marks */
.playlist {
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
  border-top: 3px solid var(--ink);
}
.playlist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: center;
  gap: .6rem 1.5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--hairline);
}
.playlist .track-title {
  font-family: "Archivo", sans-serif;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.playlist audio { width: 100%; height: 2.2rem; }

/* video: a plate like any other - ruled top and bottom, captioned in Archivo */
.videoplate {
  margin: 1.6rem 0;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: .5rem 0;
  max-width: var(--measure);
}
.videoplate video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);   /* the frame before the poster paints */
}
.videoplate figcaption {
  padding: .55rem 0 .1rem;
  font-family: "Archivo", sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* the fallback when a media file is absent: the material stays reachable
   as plain links rather than disappearing behind a player that cannot load */
.media-links {
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
  border-top: 1px solid var(--hairline);
}
.media-links li {
  padding: .55rem 0;
  border-bottom: 1px solid var(--hairline);
}

/* tables: werkverzeichnis is a real data table and must stay readable
   on a phone, so it scrolls inside its own frame rather than the page */
.table-wrap {
  margin: 1.4rem 0;
  overflow-x: auto;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.table-wrap th,
.table-wrap td {
  padding: .55rem .9rem .55rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}
.table-wrap th {
  font-family: "Archivo", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
}
.table-wrap tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  /* the player drops below its title rather than being squeezed beside it */
  .playlist li { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .table-wrap table { font-size: .88rem; }
}


/* ein loses Wort zwischen zwei Werkeinträgen im Original ("alternativ"):
   es gehört zu keinem der beiden, sondern verbindet sie - also setzen wir es
   als Zwischenzeile in der Apparat-Stimme, ohne Trennlinie darüber */
.worklist li.list-aside {
  border-top: none;
  padding: .2rem 0 .6rem;
  font-family: "Archivo", sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* ============================================================
   DER SAAL ALS GRUND — nur auf breiten Bildschirmen
   Mobil ist die Seite Papier von Rand zu Rand und bleibt es.
   Ab 75rem ist links und rechts so viel Platz, dass leeres Papier
   nicht mehr als Rand liest, sondern als Verlust. Dort tritt das
   Saalfoto hinter die Seite - fest stehend, wie auf der alten
   Website - und die Seite wird zu dem, was sie ohnehin sein will:
   ein gedrucktes Blatt, das auf dem Hallenboden liegt.

   Alles hier steht bewusst in EINEM min-width-Block. Was darunter
   passiert, bleibt damit unberuehrt - das ist keine Zusage,
   sondern Bauart.
   ============================================================ */

@media (min-width: 75rem) {
  body {
    background: var(--ink) url("img/bg4-hall.jpg") center center / cover no-repeat fixed;
  }

  /* die drei Bloecke stossen ohne senkrechten Abstand aneinander,
     also ergibt derselbe Grund auf allen dreien eine durchgehende Bahn */
  .masthead,
  main,
  .colophon {
    background: var(--paper);
  }

  /* die Kante des Blattes: eine Haarlinie, kein Schlagschatten -
     Schatten kennt diese Welt nicht, Haarlinien sind ihr Vokabular */
  .masthead {
    border-left: 1px solid var(--hairline);
    border-right: 1px solid var(--hairline);
  }
  main,
  .colophon {
    border-left: 1px solid var(--hairline);
    border-right: 1px solid var(--hairline);
  }

  /* unter dem Kolophon endet das Blatt; darunter liegt der Saal */
  .colophon { border-bottom: 1px solid var(--hairline); }
}