/* Self-hosted fonts, so every visitor sees the same type and no request
   leaves the site. Licenses: assets/fonts/*-license.txt */
@font-face { font-family: "Charter Web"; src: url("../fonts/charter-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Charter Web"; src: url("../fonts/charter-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Charter Web"; src: url("../fonts/charter-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Charter Web"; src: url("../fonts/charter-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Web"; src: url("../fonts/inter-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --bg: #fff;
  --fg: #000;
  --grey: #444;
  --gutter: 16px;
  --sans: "Inter Web", "Helvetica Neue", Arial, sans-serif;
  --serif: "Charter Web", Charter, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 3.5rem; } /* keep anchored headings clear of the menu icon */
body {
  min-height: 100svh;
  display: flex; flex-direction: column;
  font: 17px/1.45 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:hover, a[aria-current] { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
h1, h2, p { margin: 0; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.icon { display: inline-grid; place-items: center; width: 28px; height: 28px; }
.icon svg { width: 20px; height: 20px; fill: currentColor; }

/* header: menu icon top left */
.site-header {
  position: fixed; top: 0; left: 0; z-index: 20;
  padding: calc(var(--gutter) - 4px);
}
.menu-toggle .i-close, .menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: inline; }

.menu {
  position: fixed; top: 44px; left: var(--gutter); z-index: 15;
  display: flex; flex-direction: column; gap: .7em;
  min-width: 11rem;
  padding: .8em 1em;
  background: var(--bg);
  border: 1px solid var(--fg);
  font-size: .9rem; line-height: 1.35;
}
.menu[hidden] { display: none; }
.menu { max-height: calc(100svh - 60px); overflow-y: auto; }
.menu-group { display: flex; flex-direction: column; gap: .1em; }
.submenu { display: flex; flex-direction: column; gap: .1em; padding-left: 1em; }
.languages { display: flex; gap: .8em; }

/* a work: title, year, player */
.work-title { text-align: center; }
.work-title h1, .work-title h2 { font-size: 1.25rem; font-weight: normal; }
.work-title p { font-size: .8rem; color: var(--grey); margin-top: .15em; }
/* home: the subtitle above the title */
.work-title .doc-subtitle { font-size: 1rem; margin: 0 0 1.2em; }

.player {
  width: min(90vw, (100svh - var(--chrome)) * 16 / 9);
  margin: 1rem auto 0;
}
/* under the home video: the piece's title and its settings */
.video-caption { width: min(90vw, (100svh - var(--chrome)) * 16 / 9); margin: .9rem auto 0; }
.video-title { font-size: 1rem; }
.video-info { font-size: .8rem; color: var(--grey); margin-top: .2em; }
.frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.frame:fullscreen .media, .frame:-webkit-full-screen .media { object-fit: contain; }

.controls { display: flex; align-items: center; gap: 4px; margin-top: 6px; margin-left: -4px; }
.controls .fullscreen { margin-left: auto; margin-right: -4px; }
.play .i-play, .play.paused .i-pause { display: none; }
.play.paused .i-play { display: inline; }
.mute .i-off, .mute.muted .i-on { display: none; }
.mute.muted .i-off { display: inline; }

.volume {
  -webkit-appearance: none; appearance: none;
  width: 80px; height: 20px; background: transparent; cursor: pointer;
}
.volume::-webkit-slider-runnable-track { height: 1px; background: var(--fg); }
.volume::-moz-range-track { height: 1px; background: var(--fg); }
.volume::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; margin-top: -4px; border-radius: 50%; background: var(--fg); }
.volume::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--fg); }


/* home: title and sample video fill the first screen, text follows */
.hero {
  --chrome: 14rem; /* header + title + controls + the piece's title and settings around the video */
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 0 1rem;
}
.home .rows { padding-top: calc(var(--gutter) * 3); }

/* home, history, info and version pages: rows of text with an image or video
   beside it (two columns) or below it (one column) */
.rows { margin: 0 auto; padding: calc(var(--gutter) * 5) var(--gutter) calc(var(--gutter) * 4); }
.rows.two { max-width: calc(67rem + 2 * var(--gutter)); }
.rows.one { max-width: calc(44rem + 2 * var(--gutter)); }
.rows > .work-title { margin-bottom: 3rem; }
.rows h1 { margin: 0 0 1.45em; }
.rows .work-title h1 { font-size: 1.25rem; margin: 0; }
.rows h2 { margin: 2.5em 0 .8em; }
.rows h1 + h2 { margin-top: 0; }
/* section headings on text pages: small, bold sans, set apart from the serif text */
.rows h1:not(.work-title h1), .rows h2, .text h1, .text h2 {
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1.3;
}
.row { display: grid; gap: 1em 3rem; align-items: start; margin-bottom: 1em; }
.rows.two .row { grid-template-columns: minmax(0, 36rem) minmax(0, 28rem); }
.rows.one .row { grid-template-columns: minmax(0, 1fr); margin-bottom: 2em; }
.row-text p { margin: 0 0 1em; }
.row-text p:last-child { margin-bottom: 0; }
.rows.one .row-text { max-width: 36rem; }
/* quotations in a text (Kirbytext "> ") */
.row-text blockquote { margin: 0 0 1em 1.2em; font-style: italic; }

/* exhibition texts of earlier versions, laid out like their original sheets (records):
   title centred, credits and quotations set to the right, body text left */
.record { margin: 2em 0 1em; }
.record p, .record h4 { margin: 0 0 1em; }
.record .record-title { text-align: center; margin-bottom: 2em; }
.record .record-center { text-align: center; margin-bottom: 2em; }
.record .record-right { text-align: right; margin: 0; }
.record .record-right + .record-text, .record .record-right + blockquote, .record .record-right + .record-head { margin-top: 2em; }
.record blockquote { margin: 2em 0 2em 25%; text-align: right; font-style: normal; }
.record .record-source { display: inline-block; margin-top: .8em; }
.record .record-right-italic { text-align: right; font-style: italic; }
/* III (2018): the whole sheet in the text face, quotations smaller */
.record-iii .record-title { font-size: 1.15em; }
.record-iii blockquote, .record-iii .record-center { font-size: .85em; }
/* IV (2019): bold section heads in the heading face (as the sheet's bold Helvetica), italic quotations */
.record-iv .record-title, .record-iv .record-head { font-family: var(--sans); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.record-iv .record-head { margin-top: 2.5em; }
.record-iv blockquote { font-style: italic; margin-left: 10%; margin-bottom: 1.5em; }
.record-iv .record-source { margin-top: 0; }
.row-media { margin: .3em 0 0; }
.row-media img, .row-media video { display: block; width: 100%; height: auto; }
.row-media figcaption { font-size: .8rem; color: var(--grey); margin-top: .4em; }
@media (max-width: 760px) {
  .rows.two .row { grid-template-columns: minmax(0, 1fr); margin-bottom: 2em; }
}

/* home: pattern atlas, wider than the text column (like the video above) */
.atlas {
  --wide: min(67rem, 100vw - 2 * var(--gutter));
  width: var(--wide);
  margin: 0 0 2em calc((100% - var(--wide)) / 2);
  font-size: .8rem; line-height: 1.35;
}
/* index and table titles in the body style */
.atlas-index, .atlas h3 { font-size: 1rem; line-height: 1.45; font-weight: normal; font-style: italic; }
.atlas h3 { margin: 2.5em 0 .8em; }
.atlas-grid {
  display: grid; gap: 1.5em var(--gutter); align-items: start;
  grid-template-columns: 6.5rem repeat(4, minmax(0, 1fr));
}
.atlas-grid.cols-3 { grid-template-columns: 6.5rem repeat(3, minmax(0, 1fr)); }
.atlas-grid.ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4em var(--gutter); }
.atlas-corner, .atlas-col, .atlas-row { color: var(--grey); }
/* the beat atlas texts, in the body style and the width of the text column */
.atlas-text { max-width: 36rem; font-size: 1rem; line-height: 1.45; }
.atlas-text p { margin: 0 0 1em; }
.atlas-cell { margin: 0; }
.atlas-cell img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; outline: 1px solid #ddd; outline-offset: -1px; }
.atlas-cell figcaption { display: flex; flex-direction: column; margin-top: .4em; }
.atlas-mood { display: flex; align-items: center; gap: .2em; margin-left: -5px; }
.atlas-zoom { cursor: zoom-in; }
/* a still enlarged over the page; a click anywhere closes it */
.atlas-lightbox {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center; padding: var(--gutter);
  background: rgba(255, 255, 255, .96); cursor: zoom-out;
}
.atlas-lightbox[hidden] { display: none; }
.atlas-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; outline: 1px solid #ddd; outline-offset: -1px; }
.atlas-lightbox video { display: block; width: min(100%, (100svh - 2 * var(--gutter)) * 16 / 9); aspect-ratio: 16 / 9; background: #000; }
.atlas-mood, .atlas-data { color: var(--grey); }
.atlas-data { font-variant-numeric: tabular-nums; }
.atlas-play { width: 20px; height: 20px; flex: none; }
.atlas-play svg { width: 13px; height: 13px; }
.atlas-play .i-pause, .atlas-play.playing .i-play { display: none; }
.atlas-play.playing .i-pause { display: inline; }
.atlas-axis { display: none; }
/* narrow screens: two stills per line, each labelled with its own ranges */
@media (max-width: 760px) {
  .atlas .atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em var(--gutter); }
  .atlas-corner, .atlas-col { display: none; }
  .atlas-row { grid-column: 1 / -1; margin-top: .5em; }
  .atlas-axis { display: inline; }
  .atlas-cell .atlas-axis { display: block; color: var(--grey); }
}

/* reference: everything left-aligned on one edge, title, texts and atlas tables */
.page-reference .rows { margin: 0; }
.page-reference .rows.one { max-width: calc(67rem + 2 * var(--gutter)); }
/* texts wider than on the home page, to sit with the wide tables; still about 90 characters a line */
.page-reference .rows.one .row-text, .page-reference .atlas-text { max-width: 48rem; }
.page-reference .work-title { text-align: left; }
.page-reference .atlas { margin-left: 0; }

/* documentation pages (built from the Obsidian notes): one text column, wide tables, figures and atlases */
.doc { padding: calc(var(--gutter) * 4) var(--gutter) calc(var(--gutter) * 3); max-width: calc(67rem + 2 * var(--gutter)); }
.doc article > :is(p, ul, ol, h1, h2, h3, h4, blockquote, pre, .record) { max-width: 48rem; }
.doc h1 { font-size: 1.25rem; font-weight: normal; margin: 0 0 1.6em; }
.doc h2, .doc h3 {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
  margin: 2.6em 0 .9em;
}
.doc .num { color: var(--grey); }
.doc h2 .num, .doc h3 .num { color: inherit; }
.doc p, .doc ul, .doc ol { margin: 0 0 1em; }
.doc ul, .doc ol { padding-left: 1.2em; }
.doc li { margin-bottom: .3em; }
.doc a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; text-decoration-color: #bbb; }
.doc a:hover { text-decoration-color: currentColor; }
.doc code, .doc pre { font-family: ui-monospace, Menlo, monospace; font-size: .82em; }
.doc pre { background: #f2f2f2; padding: .8em 1em; overflow-x: auto; line-height: 1.4; margin: 0 0 1.2em; }
.doc table { width: 100%; border-collapse: collapse; font-size: .8rem; line-height: 1.35; margin: .4em 0 1.8em; }
.doc th { font-family: var(--sans); font-weight: 700; font-size: .7rem; color: var(--grey); text-align: left; letter-spacing: .02em; }
.doc th, .doc td { padding: .45em 1em .45em 0; border-bottom: 1px solid #ddd; vertical-align: top; }
.doc .table-wrap { overflow-x: auto; }
.doc-figure { margin: 1.4em 0 1.6em; max-width: 48rem; }   /* no wider than the text; the player has a fullscreen button */
.doc-figure img { display: block; width: 100%; height: auto; }
/* a video in the documentation (snippet video): the home page's player and caption, at the figures' width */
.doc .video-block { margin: 1.4em 0 1.6em; max-width: 48rem; }
.doc .video-block .player, .doc .video-block .video-caption { width: 100%; margin-left: 0; margin-right: 0; }
/* videos with a width from the note (> width: 350): side by side while they fit, one below the other on narrow screens */
/* a video played from YouTube: the poster with a play button until clicked */
.media.yt { padding: 0; border: 0; background: #000; cursor: pointer; }
.media.yt img { width: 100%; height: 100%; object-fit: contain; display: block; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; padding: .7rem .6rem .7rem .8rem; border-radius: 50%; background: rgba(0,0,0,.55); fill: #fff; }
.media.yt:hover .yt-play, .media.yt:focus-visible .yt-play { background: rgba(0,0,0,.8); }
.yt-note { font-size: .7rem; color: var(--grey); margin-top: 6px; }
.doc .video-sized { display: inline-block; vertical-align: top; width: 100%; margin-right: 1.5rem; }
.doc .video-sized:last-of-type { margin-right: 0; }
.doc .video-sized .video-block { margin: 1.4em 0 1.6em; }
.doc-figure figcaption { font-size: .8rem; color: var(--grey); margin-top: .4em; }
.doc-chapter { font-size: .8rem; color: var(--grey); margin-bottom: .3em; }
.doc-chapter a { text-decoration: none; }
.doc .doc-contents { list-style: none; padding: 0; }
.doc-contents a { text-decoration: none; }
.doc-contents a:hover { text-decoration: underline; }
.doc-pager { display: flex; justify-content: space-between; gap: 1em; max-width: 48rem; margin-top: 4em; padding-top: 1em; border-top: 1px solid #ddd; font-size: .9rem; }
.doc-pager a { text-decoration: none; }
.doc-pager a:hover { text-decoration: underline; }
.doc-pager .next { margin-left: auto; text-align: right; }
.doc .atlas { width: 100%; margin-left: 0; }
.doc-subtitle { color: var(--grey); }
.doc-credit { font-size: .8rem; color: var(--grey); }
.home .doc-start { margin: 0 auto; }
.menu .num { color: var(--grey); }
.menu .menu-home { font-size: 1.25em; }
.home-contents { font-size: .75rem; line-height: 1.5; margin-top: 2.5em; }
.home-contents p { margin: .8em 0 .1em; }
.home-contents ol { list-style: none; padding: 0 0 0 1em; margin: 0; }
.home-contents a { text-decoration: none; }
.home-contents .num { color: var(--grey); }

/* wide screens: the table of contents stays open as a column on the left */
@media (min-width: 1000px) {
  :root { --toc: 12rem; }
  body { padding-left: var(--toc); }
  .site-header { display: none; }
  .menu, .menu[hidden] {
    display: flex; top: 0; left: 0; bottom: 0; width: var(--toc); min-width: 0;
    border: 0; border-right: 1px solid #e5e5e5; overflow-y: auto; max-height: none;
    padding: calc(var(--gutter) * 2) var(--gutter);
    font-size: .75rem;
  }
  .player, .video-caption { width: min(90%, (100svh - var(--chrome)) * 16 / 9); }
  .home-contents { display: none; }
}

/* text: impressum, documentation */
.text { max-width: 36rem; padding: 0 var(--gutter); }
.page-default .text { padding-top: calc(var(--gutter) * 5); padding-bottom: calc(var(--gutter) * 4); }
.text h1 { margin: 0 0 1.45em; }
.text p { margin: 0 0 1em; }
.text h2 { margin: 2.5em 0 .8em; }
.text h1 + h2 { margin-top: 0; }

/* hidden on screen, still read by screen readers and search engines */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.site-footer {
  margin-top: auto;
  padding: 3rem var(--gutter) var(--gutter);
  text-align: center;
  font-size: .8rem; color: var(--grey);
}

/* text size tags: (small: …) and (large: …) */
.text-small { font-size: .8rem; }
.text-large { font-size: 1.3rem; line-height: 1.35; }