3 files changed, 108 insertions, 74 deletions

diff --git a/stylesheets/galerie.css b/stylesheets/galerie.css
index 26a5e88..dc974a9 100644
--- a/stylesheets/galerie.css
+++ b/stylesheets/galerie.css
@@ -23,7 +23,7 @@
     height: 100%;
     width: 100%;
     transition: filter 0.5s;
-    filter: grayscale(0.8) brightness(0.4);
+    filter: grayscale(0.5);
 }
 .mosaic img:hover {
     filter: none;
diff --git a/stylesheets/membre.css b/stylesheets/membre.css
index be585b7..d7eff56 100644
--- a/stylesheets/membre.css
+++ b/stylesheets/membre.css
@@ -4,50 +4,75 @@ main {
     grid-template-rows: auto 1fr;
 }
 
-main > h1 {
+main > .bio-title {
     grid-column: 1;
     grid-row: 1;
+}
+
+main > .bio-title > * {
+    margin: 0;
+}
+
+h1.name {
     text-transform: uppercase;
-    color: var(--member-h1);
+    color: var(--emph1-color);
 }
 
-#bio {
+h2.instrument {
+    font-weight: normal;
+    color: var(--emph2-color);
+}
+
+.bio {
     grid-column: 1;
     grid-row: 2;
-    justify-self: center;
     margin-right: 0.5em;
 }
 
-#bio dt, #bio dd {
+.bio dt, .bio dd {
     display: inline;
 }
 
-#bio dt {
+.bio dt {
     font-weight: bold;
-    color: var(--member-dt);
+    color: var(--emph2-color);
 }
 
-#bio dd {
+.bio dd {
     margin-left: 0;
 }
 
-#bio dl {
+.bio dl {
     margin-top: 0.2em;
     margin-bottom: 0.2em;
 }
 
 main > img {
     display: block;
-    /* Align with title; h1 typically has font-size 2em and margin
-     * .67em. */
-    margin-top: 1.33em;
     grid-column: 2;
     grid-row: 1 / -1;
 
     width: 100%;
     background-size: cover;
-    position: sticky;
-    top: 2em;
+}
+
+@media (min-width: 80em)
+{
+    /* CSS 2 appendix D: the vertical margin for h1 should be .67em, with
+     * font-size 2em. */
+    main {
+        --main-top-margin: 1.33em;
+    }
+
+    main > .bio-title {
+        margin: var(--main-top-margin) 0;
+    }
+
+    main > img {
+        margin-top: var(--main-top-margin);
+        position: sticky;
+        top: 2em;
+    }
 }
 
 @media (max-width: 80em)
@@ -59,7 +84,7 @@ main > img {
         justify-items: center;
     }
 
-    main > h1 {
+    main > .bio-title {
         grid-column: 1;
         grid-row: 1;
         text-align: center;
@@ -68,11 +93,9 @@ main > img {
     main > img {
         grid-column: 2;
         grid-row: 1;
-        position: static;
-        margin-top: auto;
     }
 
-    main > #bio {
+    main > .bio {
         grid-column: 1 / -1;
         grid-row: 2;
     }
@@ -80,7 +103,10 @@ main > img {
 
 @media (max-width: 40em)
 {
-    main > h1 {
+    main > .bio-title > h1 {
         font-size: 1.2em;
     }
+    main > .bio-title > h2 {
+        font-size: 0.8em;
+    }
 }
diff --git a/stylesheets/programmes.css b/stylesheets/programmes.css
index 88591c6..2da1e2c 100644
--- a/stylesheets/programmes.css
+++ b/stylesheets/programmes.css
@@ -1,78 +1,86 @@
-#program-list {
-    max-height: 60vh;
-    overflow: auto;
-    scrollbar-width: thin;
-    scrollbar-color: darkblue #8ad;
-}
-
-#program-list::-webkit-scrollbar {
-    width: 0.25em;
-    height: 0.25em;
+@media (min-width: 40em) {
+    main {
+        margin: 2em 4em 0 4em;
+    }
 }
 
-#program-list::-webkit-scrollbar-track {
-    background: #8ad;
+details.program:first-child {
+    border-top: 1px solid black;
 }
 
-#program-list::-webkit-scrollbar-thumb {
-    background: darkblue;
+details.program {
+    position: relative;
+    width: 100%;
+    border-bottom: 1px solid black;
 }
 
-.programs {
+details.program > summary {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 1fr));
-    grid-auto-rows: var(--cell-height);
+    grid-template-columns: 4fr 5fr 4em;
     grid-gap: 0.8em;
+    line-height: 2em;
+    list-style: none;
+    cursor: pointer;
 }
-
-.program {
-    background-color: #099;
+details.program > summary::-webkit-details-marker {
+    display: none;
+}
+/* Disable Chrome's outline; we already highlight this block
+   prominently enough IMO. */
+details.program > summary:focus {
+    outline: none;
 }
 
-.program a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    color: inherit;
-    text-decoration: none;
+details.program > summary > .name {
+    margin-left: 2em;
+    font-weight: bold;
+    color: #1f4e79;
 }
 
-.program .summary {
+details.program[open] > summary > .name,
+details.program[open] > summary > .composers {
+    color: #e05a00;
     font-weight: bold;
 }
 
-details summary .duration {
-    font-family: monospace;
+details.program > summary > img.button {
+    display: block;
+    width: 2em;
+    margin: auto 1em;
+}
+details.program > summary > img.button.close,
+details.program[open] > summary > img.button.open {
+    display: none;
+}
+details.program[open] > summary > img.button.close {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: 0;
 }
 
-@media (min-width: 40em) {
-    main {
-        display: grid;
-        grid-template-columns: 50% 50%;
-    }
+details.program > summary ~ * {
+    margin-left: 2em;
+}
 
-    .programs {
-        --cell-width: 10em;
-        --cell-height: 10em;
-    }
+details.program > *:nth-child(3) {
+    color: var(--gold);
+    font-weight: bold;
+}
 
-    .program a {
-        transition: color 0.5s;
-    }
-    .program:hover a {
-        color: white;
-    }
+details.program blockquote p::before {
+    content: open-quote;
+}
+details.program blockquote p::after {
+    content: close-quote;
+}
 
-    .details.active > *:first-child {
-        margin-top: 0;
-    }
+ol.pieces {
+    list-style: none;
+    padding-left: 0;
 }
 
-@media (max-width: 40em) {
-    .programs {
-        --cell-width: 8em;
-        --cell-height: 4em;
-    }
+ol.pieces > li.intermission {
+    margin-left: 4em;
+    font-style: italic;
 }