/*


*/
@import url(/assets/gallerist/application-116e36c344494ed5a83c0155ca1e00ae45eb4f38819f0c73a69308a1835f6191.css);
@import url(/assets/jscalendar/calendar-system-fec961d57fdb6a26ecd6bc67a726d562ee4a9dfe7483381b401aedd9620ef54e.css);
div.error {
  border: red solid 1px;
  padding: 6px;
  border-radius: 8px;
  color: red;
  display: inline-block; }
  div.error .suggest {
    text-align: right;
    color: black; }
    div.error .suggest a,
    div.error .suggest a:link,
    div.error .suggest a:visited {
      font-style: italic; }

svg.hatch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1; }

/**** my form ***************************************************************/
img.required {
  width: 8px;
  vertical-align: 0.1em;
  margin-left: 4px; }

form.my .hint {
  font-size: 80%;
  line-height: 1.1em;
  color: #999999; }
  form.my .hint p {
    font-size: inherit;
    line-height: inherit; }
  form.my .hint p,
  form.my .hint p {
    margin: 4px 0px; }

form.my div.grid, form.my fieldset.grid {
  display: grid;
  grid-template-columns: auto auto; }

form.my fieldset {
  background: #fafaff;
  border: solid 1px #dddddd;
  border-radius: 8px;
  padding: 6px;
  display: inline-block; }

form.my .how-to {
  display: inline-block; }
  form.my .how-to .title {
    position: relative;
    color: blue;
    font-style: italic;
    margin: 2px 0 2px 16px;
    font-size: 90%; }
    form.my .how-to .title img {
      height: 20px;
      margin-right: 6px;
      vertical-align: bottom; }
  form.my .how-to .title:hover .how-to-info {
    display: inline-block;
    z-index: 10;
    bottom: 1px; }
  form.my .how-to .how-to-info {
    white-space: normal;
    display: none;
    background-color: white;
    position: absolute;
    width: 360px;
    padding: 24px;
    border: 4px #999999 solid;
    border-radius: 24px;
    color: black;
    font-style: normal; }
    form.my .how-to .how-to-info h2 {
      margin: 0 0 16px 0;
      font-size: 1.7em; }
    form.my .how-to .how-to-info ul {
      margin-left: 12px;
      padding: 0; }
    form.my .how-to .how-to-info em {
      border: #dddddd 1px solid;
      display: inline-block;
      padding: 2px 4px;
      font-style: normal;
      font-family: monospace;
      line-height: 1.1em;
      background-color: #f3f3f3;
      border-radius: 6px;
      color: blue; }
    form.my .how-to .how-to-info mark {
      display: inline-block;
      line-height: 1em;
      padding: 2px; }

form.my .error {
  border: solid 3px red; }

form.my label {
  background-color: inherit;
  display: inline-block; }

form.my span.label-text {
  border-radius: 4px 4px 0 0;
  background-color: var(--label-bg);
  color: var(--label-text);
  padding: 3px 10px 4px 10px;
  line-height: 1.6em;
  display: inline;
  white-space: nowrap; }
  form.my span.label-text img {
    width: 8px;
    vertical-align: 0.1em;
    margin-left: 4px; }

form.my span.label-text:after {
  content: "\a";
  white-space: pre-wrap; }

form.my input[type="image"] {
  display: inline-block;
  height: 1.2em;
  vertical-align: middle;
  max-width: 1.2em;
  margin: 4px !important; }

form.my select.right {
  text-align: right; }

form.my .info {
  vertical-align: top;
  display: inline-block;
  margin: 10px; }
  form.my .info p {
    line-height: 1.1em;
    font-size: 80%;
    color: #999999; }

form.my div.row {
  display: table-row;
  margin: 0;
  padding: 0;
  line-height: 0; }
  form.my div.row label {
    display: table-cell; }

form.my div.error-listing {
  margin: 0 0 12px 24px; }
  form.my div.error-listing h2 {
    text-align: left; }
  form.my div.error-listing ul {
    margin: 0 0 0 24px;
    list-style-type: "\26d4"; }
    form.my div.error-listing ul li {
      padding-left: 4px; }

/*** model menu *************************************************************/
span.has-menu {
  position: relative;
  vertical-align: top;
  display: inline-block;
  white-space: normal; }
  span.has-menu .model-menu {
    border: solid 1px #cccccc;
    background-color: #fafaff;
    padding: 16px;
    border-spacing: 3px;
    /* if display: table then padding won't work, but this will */
    border-collapse: separate;
    position: absolute;
    z-index: 100;
    top: auto;
    display: none;
    text-align: center;
    font-size: 15px;
    font-family: roboto, verdana, arial;
    font-weight: normal;
    line-height: 1.7em; }
    span.has-menu .model-menu a {
      display: inline;
      padding: 2px;
      white-space: nowrap; }
    span.has-menu .model-menu a:after {
      content: "\a";
      white-space: pre; }
    span.has-menu .model-menu div {
      white-space: nowrap; }

span.has-menu:hover div.model-menu {
  display: table; }

/*** for auto complete ********************************************************/
div.auto_complete {
  width: 350px;
  background: #fff;
  position: absolute;
  z-index: 10; }
  div.auto_complete ul {
    border: 1px solid #888;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none; }
    div.auto_complete ul li {
      margin: 0;
      padding: 3px; }
    div.auto_complete ul li.selected {
      background-color: #ffb; }
    div.auto_complete ul ul strong.highlight {
      color: #800;
      margin: 0;
      padding: 0; }

#pic-blackout.hide {
  background-color: white;
  width: 100%;
  height: 1px;
  display: none;
  position: absolute;
  opacity: 0;
  z-index: 200;
  /* other attributes must be defined in html */
  left: 0px;
  top: 0px;
  transition: background-color 3s; }

#pic-blackout.show {
  display: block;
  opacity: 0.8;
  background-color: black;
  transition: background-color 3s;
  left: 0;
  top: 0; }

#large-pic {
  margin: 0pt auto;
  position: absolute;
  top: 0%;
  background-color: #fff;
  visibility: hidden;
  padding: 12px;
  z-index: 201; }

.draggable-thing {
  position: relative;
  cursor: move; }

/*** bits and pieces **********************************************************
*/
img.tools {
  max-width: 0.7em !important;
  max-height: 0.7em !important;
  vertical-align: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
  border: none !important; }

/*** bits and pieces **********************************************************
*/
div.multi-search .result-controls {
  margin: 14px 6px 6px 6px; }

div.multi-search .result-sum-box {
  border-bottom: 1px double var(--border-color);
  padding-bottom: 1px;
  margin-bottom: 6px; }

div.multi-search .result-sum {
  font-size: 13px;
  font-weight: bold;
  display: none;
  line-height: 14px;
  padding: 3px 3px 3px 26px;
  background-color: var(--hl-moderate); }
  div.multi-search .result-sum .link-text a {
    font-family: "Playfair Display", serif;
    font-size: 14px; }

div.multi-search tr.alt-row {
  background-color: var(--table-alt-row); }

div.multi-search .area {
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 3px; }

div.multi-search .result {
  display: none; }

div.multi-search .bar {
  border-top: 6px solid var(--bg-card);
  margin: 4px 0 0 0; }

.indicator {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  border: 2px solid var(--border-light);
  border-top-color: var(--accent-link);
  display: inline-block;
  border-radius: 50%;
  animation: spin 0.7s linear infinite; }

@keyframes spin {
  to {
    transform: rotate(360deg); } }

.delete-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: text-top;
  background-color: var(--ui-delete);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h4l1 1H5L6 2z'/%3E%3Crect x='2' y='4' width='12' height='1.5' rx='0.5'/%3E%3Cpath d='M3.5 6.5h9l-1 8h-7l-1-8zm2 1.5v5h1v-5H5.5zm3 0v5h1v-5H8.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 2h4l1 1H5L6 2z'/%3E%3Crect x='2' y='4' width='12' height='1.5' rx='0.5'/%3E%3Cpath d='M3.5 6.5h9l-1 8h-7l-1-8zm2 1.5v5h1v-5H5.5zm3 0v5h1v-5H8.5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain; }

div.lg-preview {
  display: inline-block;
  cursor: pointer;
  position: relative;
  margin: 12px; }
  div.lg-preview img {
    max-width: 480px;
    max-height: 300px;
    object-fit: cover; }
  div.lg-preview div.control {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 6px 12px;
    border-radius: 3px;
    font-size: 14px; }

table.pics {
  margin: 16px auto 0 auto;
  border-spacing: 12px;
  border-collapse: separate; }
  table.pics td {
    vertical-align: top; }
    table.pics td select {
      margin-top: 12px; }
    table.pics td .gallery {
      text-align: right; }
    table.pics td img {
      max-width: 180px;
      margin: 0;
      padding: 0; }

table.list-table td div.gallery-pics {
  font-size: 80%; }

table.pic-properties {
  border-spacing: 1;
  border-collapse: collapse; }
  table.pic-properties th {
    font-weight: normal;
    background-color: #EAEAEE;
    white-space: nowrap;
    padding: 0 4px;
    text-align: right;
    border-top: white solid 1px;
    vertical-align: top; }
  table.pic-properties td {
    padding: 0 4px; }

.weblinks .list {
  margin: 8px 16px 0 0;
  padding: 0;
  list-style-type: none; }

.weblinks li {
  padding-bottom: 8px;
  padding-top: 8px; }

.weblinks .edit {
  display: none; }

.weblinks .view {
  padding-left: 20px;
  margin: 4px 0;
  line-height: 1.2em;
  text-indent: -20px; }
  .weblinks .view a {
    color: var(--text-body); }
  .weblinks .view img {
    vertical-align: text-top; }
  .weblinks .view .title {
    vertical-align: 1px;
    font-weight: bold; }
  .weblinks .view .title:after {
    content: "\a";
    white-space: pre; }
  .weblinks .view .comment {
    font-size: 95%; }
    .weblinks .view .comment .par-break {
      height: 0.5em; }

.weblinks .new {
  text-align: left;
  font-size: 13px;
  margin: 4px 12px 8px 200px; }

.weblinks .view-image {
  border-radius: 2px;
  margin: 0 6px 0 12px;
  max-height: 140px;
  max-width: 110px;
  float: right; }

body,
p,
ol,
ul,
td {
  font-family: roboto, verdana, arial;
  font-size: 15px;
  line-height: 1.5em;
  padding: 0;
  margin: 0; }

a {
  text-decoration: none; }

a:link {
  color: #999999; }

a:visited {
  color: #a6a6a6; }

div#header {
  height: 55px;
  position: relative;
  border-bottom: 1px solid #dddddd; }

div#content {
  clear: both;
  margin: 0; }

div#content a:hover {
  background-color: #dddddd; }

img#logo {
  float: right;
  max-width: 50%;
  margin-right: 30px; }

div.juicebox {
  width: 100%;
  height: 500px;
  display: block; }

span.has-post {
  width: 14px;
  vertical-align: middle;
  display: inline-block;
  background: url(/assets/blogger/post_icon.svg) no-repeat center; }

figure {
  display: table; }

figure.left {
  margin: 14px 14px 0px 0;
  float: left; }

figure.right {
  margin: 14px 0 0px 14px;
  float: right; }

figure.middle {
  margin: 8px auto; }
  figure.middle img {
    max-width: 100%; }

figure.wide {
  margin: 8px 0; }
  figure.wide img {
    width: 100% !important; }

figcaption {
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  display: table-caption;
  caption-side: bottom;
  margin: 0; }

.image-right {
  float: right;
  margin-left: 14px; }

p + p,
figure + p {
  margin-top: 0.9em; }

h1 {
  font-family: 'Yanone Kaffeesatz', serif;
  font-size: 30px;
  font-weight: 600;
  color: black;
  line-height: 1.0em;
  margin: 4px 0 12px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px dotted #dddddd; }
  h1 a:hover,
  h1 a:visited,
  h1 a:active,
  h1 a:link {
    text-decoration: none;
    color: black; }

h2 {
  font-family: "roboto condensed", "sans-serif";
  text-align: center;
  line-height: 1.2em;
  font-weight: 200;
  font-size: 25px;
  color: black;
  margin: 12px 0 8px 0; }
  h2 a:visited,
  h2 a {
    color: black !important; }

h3 {
  font-family: "Roboto Condensed", arial;
  line-height: 24px;
  font-size: 21px;
  font-weight: 700;
  margin: 14px 0 8px 0; }

h3.for-tag {
  text-align: right;
  font-weight: 300;
  margin: 4px 8px 16px 4px; }
  h3.for-tag b {
    font-weight: 700; }

#notification {
  background-color: #E8FB51;
  padding: 3px 6px;
  text-align: center;
  display: table;
  margin: 0 auto 6px auto; }

.summary {
  overflow: auto; }
  .summary h2 {
    margin-bottom: 18px; }
  .summary .thumb-left img {
    float: left;
    margin: 0 12px 0 0; }
  .summary .thumb-right img {
    float: right;
    margin: 0 0 0 12px; }
  .summary .more {
    margin: 0 8px 0 0; }

.summary + .summary {
  margin-top: 12px; }

div#sidebar {
  padding: 6px 12px 12px 12px;
  text-align: center;
  background-color: #fafaff;
  border: solid #dddddd;
  border-width: 1px 1px 1px 1px;
  border-bottom-right-radius: 32px;
  margin-bottom: 18px; }
  div#sidebar a {
    color: #666666; }
  div#sidebar a:visited {
    color: #999999; }
  div#sidebar .post {
    padding: 16px; }
  div#sidebar h2 {
    margin-bottom: 12px; }

.summary {
  overflow: inherit;
  clear: both; }
  .summary .end {
    clear: both; }

div#sidebar,
div#sidebar p {
  font-family: arial, sans-serif; }

div.sidebar-line {
  margin: 12px auto 0 auto;
  border-top: 1px solid #dddddd;
  padding-bottom: 12px;
  width: 120px; }

.archive {
  display: inline; }

.tag-link {
  display: inline-block;
  padding: 0 8px;
  margin: 3px 0;
  color: #666666;
  white-space: nowrap;
  background-color: #eaeaee;
  border-radius: 12px; }
  .tag-link a,
  .tag-link a:visited {
    color: #666666 !important; }
  .tag-link em {
    min-width: 12px;
    display: inline-block;
    border-radius: 12px;
    padding: 0 6px;
    margin-right: -8px;
    font-style: normal;
    font-weight: normal;
    border-left: solid 1px #afafaf; }

div.social-sharing-buttons {
  text-align: center;
  padding: 24px 0 4px 0 !important; }
  div.social-sharing-buttons a:hover {
    top: -5px;
    max-height: 30px;
    max-width: 30px;
    position: relative;
    background-color: transparent !important; }
  div.social-sharing-buttons img {
    border: 0;
    max-width: 28px;
    max-height: 28px !important; }

/****** twitter ***************************************************************/
.twitter {
  margin: 11px 0 22px 0;
  width: 296px;
  float: right; }

/****** narrow screen ***************************************************************/
@media all and (max-width: 900px) {
  div.top-menu {
    display: inline-block;
    position: relative;
    padding: 0;
    float: left;
    padding: 15px;
    height: 20px;
    width: 20px;
    background: url(/assets/blogger/hamburger-menu.png) no-repeat center;
    background-size: 20px 20px; }
    div.top-menu ul#menu {
      position: absolute;
      top: 1px;
      z-index: 10;
      background-color: #666666;
      display: none;
      margin: 0;
      padding: 0 0 12px 0;
      list-style: none;
      border-radius: 0px 0px 12px 12px; }
      div.top-menu ul#menu li {
        display: block;
        padding: 6px 24px; }
      div.top-menu ul#menu a {
        padding: 0;
        color: #fff;
        text-decoration: none;
        font: Arial, Helvetica, sans-serif;
        color: white;
        font-size: 1.5em;
        line-height: 1.5em;
        text-transform: uppercase;
        border-bottom: 4px solid transparent; }
      div.top-menu ul#menu a:hover {
        color: #fff;
        border-bottom: #dddddd 4px solid; }
      div.top-menu ul#menu a#menucurrent,
      div.top-menu ul#menu a#menuhighlight {
        padding: 0;
        color: #aaa;
        border-bottom: #dddddd 4px solid; }
  div.juicebox {
    width: 100%;
    height: 80vw; }
  div.lg-preview img {
    max-width: 100%;
    max-height: 80vw; }
  div.top-menu:hover ul#menu {
    display: block;
    width: 20em; }
  div#fixed-header {
    width: 100%;
    background-color: white; }
  div#container {
    width: 100%;
    color: black; }
  div#text {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px 0;
    padding: 16px;
    border: 1px solid #dddddd;
    border-radius: 0px; }
  div#wide-text {
    width: 100%;
    margin: 10px 0 20px 0;
    padding: 16px;
    border: 1px solid #dddddd;
    border-radius: 0 0 16px 16px; }
  div#sidebar {
    padding: 24px 0;
    box-sizing: border-box;
    width: 100%;
    border-radius: 0px;
    -moz-column-count: 2;
    -moz-column-gap: 1px;
    column-count: 2; }
    div#sidebar .side-box,
    div#sidebar .post {
      width: 38vw;
      padding: 4px;
      /* all should do the same */
      break-inside: avoid-column;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      display: table;
      /* for ie */ }
  img#logo {
    max-width: 90%;
    margin-right: 10px; }
  .banner {
    padding: 6px 0 2px 0; }
    .banner img#banner {
      width: 100%;
      margin: 0;
      border-radius: 0px; }
  .actions-wrap {
    display: none; }
  div#footer-content {
    width: 100%;
    margin: auto; }
  figure.left img,
  figure.right img,
  .thumb-left img,
  .thumb-right img {
    border-radius: 2px;
    max-width: 38vw;
    max-height: 38vw; }
  .weblinks .view {
    width: 100%; } }

#text ul {
  margin: 0.5em 0; }
  #text ul li {
    margin-left: 2.0em; }

/****** very narrow screen ************************************************************/
@media all and (max-width: 500px) {
  div#sidebar {
    padding: 24px 0;
    box-sizing: border-box;
    width: 100%;
    border-radius: 0px;
    -moz-column-count: 1;
    -moz-column-gap: 1px;
    column-count: 1; } }

/****** wide screen ***************************************************************/
@media all and (min-width: 900px) {
  div.top-menu {
    display: inline-block;
    padding: 0;
    margin: 0; }
    div.top-menu ul#menu {
      margin: 0;
      padding: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      list-style: none;
      font-size: 16px; }
      div.top-menu ul#menu li {
        margin: 0 30px 0 0;
        padding: 12px 0 0 0;
        float: left; }
      div.top-menu ul#menu a {
        padding: 0;
        float: left;
        color: #000;
        text-decoration: none;
        font: 70%/150% Arial, Helvetica, sans-serif;
        text-transform: uppercase;
        border-bottom: 4px solid transparent; }
      div.top-menu ul#menu a:hover {
        color: #000;
        border-bottom: #dddddd 4px solid; }
      div.top-menu ul#menu a#menucurrent,
      div.top-menu ul#menu a#menuhighlight {
        padding: 0;
        color: #000;
        border-bottom: #dddddd 4px solid; }
  div#fixed-header {
    width: 920px;
    background-color: white; }
  div#container {
    margin: 0 auto;
    color: black;
    width: 920px; }
  div#text {
    float: left;
    width: 568px;
    margin: 0 0 20px 0;
    padding: 16px;
    border: 1px solid #dddddd;
    border-radius: 0 0 16px 16px; }
  div#wide-text {
    width: 888px;
    margin: 10px 0 20px 0;
    padding: 16px;
    border: 1px solid #dddddd;
    border-radius: 0 0 16px 16px; }
  div#sidebar {
    float: right;
    width: 272px; }
  .banner {
    padding: 14px 0 10px 0; }
    .banner img#banner {
      max-width: 920px;
      margin: 0 0 0 0;
      border-radius: 4px; }
  .actions-wrap {
    position: relative; }
    .actions-wrap .action {
      background-color: #E8FB51;
      border-radius: 4px;
      padding: 2px 4px;
      line-height: 1em;
      position: absolute;
      top: -20px;
      display: inline-block;
      font-style: italic; }
  div#footer-content {
    width: 920px;
    margin: auto; }
  figure.right img,
  figure.left img,
  .thumb-left img,
  .thumb-right img {
    border-radius: 2px;
    max-width: 270px;
    max-height: 270px; }
  .weblinks .view {
    width: 360px; } }

/*** end screens ************************************************************************/
.banner {
  margin: 0;
  position: relative; }

.banner-caption {
  line-height: 14px;
  text-align: right;
  font-size: 12px;
  font-family: Arial, sans-serif;
  position: absolute;
  bottom: 6px;
  color: #aaa;
  right: 6px; }

/****** displaying posts ************************************************************/
.quote {
  background-color: #fafaff;
  padding: 4px;
  border-radius: 6px;
  margin: 0px 22px 4px 22px;
  font-style: italic; }

.divider {
  margin: 16px -16px 16px -16px;
  height: 20px;
  background-color: #fafaff;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd; }

div.video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0; }
  div.video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/****** links to posts on sidebar ************************************************/
.post-link {
  text-align: left;
  margin: 4px 12px 0 6px;
  line-height: 18px; }

.post-link .icon {
  width: 60px;
  text-align: center;
  float: left;
  margin-right: 10px; }

.post-link .icon img {
  border-radius: 2px;
  max-width: 60px;
  max-height: 60px; }

.icon {
  vertical-align: text-top; }

.picture-center {
  display: block;
  margin: 20px auto 20px auto;
  border-radius: 4px; }

/****** drop cap ********************************************************************/
.firstLetter {
  font-family: georgia, serif;
  display: block;
  float: left;
  margin-top: -0.25em;
  /* use -0.205em for two lines */
  margin-left: -0.10em;
  margin-right: 0.5em;
  height: 2.8em;
  color: #b8b8b8; }
  .firstLetter span {
    font-size: 3.53em;
    /* use 3.33em for two lines */
    line-height: 1.0em; }

.firstLetter + span {
  margin-left: -0.3em; }

#manage {
  border: solid 1px #dddddd;
  padding: 8px;
  width: 904px;
  margin: 0 auto 16px auto;
  clear: both; }

/****** the footer ************************************************************/
div#footer {
  font-family: Arial, non-serif;
  background-color: #5B5B60;
  height: 200px;
  clear: both;
  color: #bbb;
  margin: 0;
  padding: 0;
  text-align: center;
  padding-top: 6px;
  border-top: #dddddd 6px solid; }
  div#footer a,
  div#footer a:visited {
    color: #bbb;
    text-decoration: underline; }
  div#footer table {
    width: 100%; }
    div#footer table td {
      padding: 8px; }
  div#footer .name {
    width: 50px;
    font-family: "roboto condensed", "sans-serif";
    font-size: 50px;
    line-height: 55px;
    font-weight: bold;
    text-shadow: -1px -1px 1px #bbb, 1px 1px 1px #111;
    color: #5B5B60;
    opacity: 0.3; }
  div#footer .links {
    width: 50px;
    white-space: nowrap;
    line-height: 1.4em;
    text-align: left;
    font-size: 13px; }
    div#footer .links b {
      color: #5B4CC2;
      margin: 0 4px; }
    div#footer .links a {
      text-transform: lowercase;
      text-decoration: none;
      color: #bbb; }
  div#footer .copyright {
    font-size: 11px;
    text-align: left;
    font-style: italic; }

/**** list table ***********************************************************/
table.list-table {
  margin: 0;
  border-collapse: collapse;
  width: 100%; }
  table.list-table th {
    text-align: center;
    font-weight: bold; }
  table.list-table td {
    vertical-align: top;
    padding: 4px; }
    table.list-table td img {
      max-width: 60px;
      max-height: 60px; }
  table.list-table tr:nth-child(odd) {
    background-color: #eaeaee; }

td.action-link a {
  background-color: black;
  color: white;
  padding: 0 3px 0 3px;
  margin: 0 1px 0 1px; }

td.action-link a:hover,
td.action-link td.action-link a:active {
  color: red; }

/****** pics table *********************************************************/
table.pics {
  margin: 16px auto 0 auto;
  border-spacing: 12px;
  border-collapse: separate; }
  table.pics td {
    vertical-align: top; }
    table.pics td select {
      margin-top: 12px; }
    table.pics td .gallery {
      text-align: right; }
    table.pics td img {
      max-width: 180px;
      margin: 0;
      padding: 0; }

input[type="submit"] {
  margin: 12px 0 12px 0; }

/***** the tables table ******************/
table.table-index {
  margin: 0 auto 0 auto; }

/****** side actions ************************************************/
.actions {
  text-align: center;
  background-color: #fafaff;
  padding: 12px;
  border-radius: 6px;
  position: absolute; }
  .actions a,
  .actions a:link {
    color: #dddddd !important;
    text-decoration: none; }
  .actions a:hover {
    background-color: #5B5B60 !important;
    color: #fff !important; }

/** for bg1 **********/
.topic h2 {
  text-align: right; }

/*** post bar *****************************************************************/
.topic-posts {
  padding: 0px 0px 12px 0;
  margin: 0; }

.topic-posts h3 {
  font-family: lobster;
  font-size: 22px;
  color: black;
  margin: 0 0 16px 0;
  padding: 12px 0 2px 0;
  text-align: center; }

a.post-link {
  display: block; }

.post-head {
  text-align: left;
  display: table-row;
  color: black; }
  .post-head div.pic {
    display: table-cell;
    padding: 8px 8px 4px 8px;
    width: 100px; }
    .post-head div.pic img {
      max-width: 100px;
      max-height: 100px;
      border-radius: 2px; }
  .post-head div.text {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    padding: 8px 8px 8px 0; }
    .post-head div.text .title {
      font-family: "roboto condensed", "sans-serif";
      font-size: 130%;
      line-height: 1.1em; }
    .post-head div.text p {
      display: inline-block;
      margin-top: 0.2em;
      line-height: 1.1em;
      font-size: 85%; }

.post-active {
  border-radius: 6px;
  box-shadow: inset 3px 3px 6px #666666; }

.topic-list div {
  margin: 6px 0 6px 30px;
  text-align: left; }

div#sidebar .topic-list a {
  font-family: "roboto condensed", "sans-serif";
  font-weight: light;
  font-size: 20px;
  color: black; }

.topic-list a:visited {
  color: black; }

/**** mfiles ********************************************************************/
.mfile {
  white-space: nowrap; }

img.file-icon {
  max-height: 16px !important;
  max-width: 16px !important;
  vertical-align: middle;
  margin-right: 1px; }

span.file-icon svg {
  height: 16px;
  max-width: 16px; }

/*** google maps **************************************************************/
#google-map {
  margin: 40px auto 0 auto;
  width: 100%;
  height: 370px; }

#google-method {
  margin: 8px 6px 6px 20px; }

#google-directions {
  font-size: 12px;
  line-height: 1.2em;
  margin: 2px auto 2px auto;
  width: 100%; }

#google-directions td {
  line-height: 1.2em;
  font-size: 12px; }

.par-break {
  height: 0.6em; }

/*** popup menu ***************************************************************/
div#options {
  top: 0px;
  position: absolute;
  visibility: hidden; }

div.menu {
  border: solid 1px #cccccc;
  background-color: white;
  text-decoration: none;
  padding: 12px;
  position: absolute;
  opacity: 1.0;
  text-align: right;
  opacity: 0.9; }

div.error-page h1 {
  margin: 1.2em 0;
  color: var(--ui-delete, red);
  font-size: 36px; }

div.error-page .location {
  font-family: 'Courier New', Courier, monospace;
  margin-bottom: 12px; }

div.error-page .message {
  margin-bottom: 12px;
  background-color: var(--date-due-bg, pink);
  color: var(--text-primary, #333333);
  display: inline-block;
  padding: 4px; }

div.error-page .pre {
  font-family: 'Courier New', Courier, monospace;
  white-space: pre; }

div.error-page div.params {
  margin: 12px 0;
  display: inline-block;
  padding: 4px;
  background-color: var(--bg-card, #efefef);
  color: var(--text-primary, #333333); }

div.error-page div.back-link a {
  font-style: italic;
  color: var(--text-muted, #999999); }

div.shout-notice {
  background-color: var(--cat-green-bg, greenyellow);
  color: var(--text-primary, #333333);
  padding: 12px;
  margin: 12px 0; }
  div.shout-notice .debug {
    margin: 1em;
    padding: 12px;
    max-width: 800px;
    max-height: 30em;
    overflow: scroll;
    background-color: var(--bg-card, #dddddd); }
  div.shout-notice .rows {
    margin: 1em;
    font-size: 110%; }
  div.shout-notice .query {
    margin: 1em;
    padding: 12px;
    max-width: 800px;
    max-height: 20em;
    overflow: scroll;
    background-color: var(--bg-code, #efefef); }

div.shout-fatal {
  background-color: var(--ui-delete, red);
  color: white;
  padding: 12px;
  margin: 12px 0; }

form.my fieldset {
  background: #fafaff; }
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/barlow-condensed-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/barlow-condensed-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/roboto-condensed-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/roboto-condensed-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/source-sans-3-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/source-sans-3-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face {
  font-family: 'ziperheadregular';
  src: url(/ziperhead.woff2) format("woff2"), url(/ziperhead.woff) format("woff");
  font-weight: normal;
  font-style: normal; }

:root {
  --mrco-text-font: 'Source Sans 3', roboto, verdana, arial, sans-serif; }

p,
ol,
ul,
td {
  font-family: var(--mrco-text-font); }

/* Page titles.
 *
 * blogger/blog.scss:121 sets h1 to Yanone Kaffeesatz. That gem is shared with
 * five other sites so it cannot change there, and Yanone has now been retired
 * from mrco -- with ziperhead carrying the wordmark, a second idiosyncratic
 * face was one voice too many. Without this override the title would fall back
 * to serif.
 *
 * PT Sans Narrow is narrower than Roboto Condensed, which matters because
 * piece titles run to 41 characters ("But thou didst not leave his soul in
 * hell"). Compared against the real longest titles at 344px: PT Sans Narrow
 * fits noticeably more per line, and being a quiet humanist face it carries
 * 40px without shouting. Headings (h2) use it too, so titles and headings are
 * one voice. Roboto Condensed still does the small uppercase labels, tags and
 * badges. Colour stays as the gem sets it.
 */
h1 {
  font-family: 'Barlow Condensed', 'roboto condensed', sans-serif;
  font-weight: 400;
  /* 400 rather than the gem's 600, and 40px rather than 30px. At bold 30px a
     41-character title became a dense two-line slab on a phone; taller and
     lighter reads as a title instead of a wall. Barlow Condensed 300 is
     lighter again -- 29% less ink than PT Sans Narrow 400 by pixel coverage,
     which is what made League Gothic unusable here despite fitting better. */
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: 0; }

h2 {
  text-align: left;
  font-family: 'Barlow Condensed', 'roboto condensed', sans-serif;
  font-weight: 400;
  font-size: 22px;
  margin: 12px 0;
  /* Was -1px, and that was left behind by mistake.
   *
   * It dates from when this rule said `roboto condensed`, which is the wider
   * of the two faces and takes a little tightening at 22px. Switching to PT
   * Sans Narrow made it wrong: the face is already narrow, so a further -1px
   * closed the counters up and the words read as one run of letters. The h1
   * override in the same commit sets letter-spacing: 0 for exactly this
   * reason; h2 was missed.
   *
   * Matching h1 at 0 also keeps titles and headings one voice, which was the
   * point of moving both to the same face. */
  letter-spacing: 0; }

.summary {
  overflow: inherit;
  clear: both; }
  .summary .end {
    clear: both; }

img.file-icon {
  height: 16px; }

span.file-icon svg {
  height: 16px;
  max-width: 16px; }

/* File rows: a coloured type block, then the file name, then its actions.
 *
 * The 16px SVG icons all read as "a document" at that size and their varied
 * silhouettes never lined up into a column. Three letters say which kind, and
 * the fixed block width gives the sidebar a left edge. Colour is decoration
 * on top of the letters, not the information, so it survives greyscale.
 *
 * Plain CSS -- no nesting or variables -- ahead of the move off sassc.
 */
.file-action {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 7px 0;
  font-size: 15px;
  line-height: 1.35;
  flex-wrap: wrap; }

.file-tag {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 2px 4px;
  border-radius: 3px;
  color: #ffffff;
  font-family: 'roboto condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 15px;
  text-align: center;
  text-transform: uppercase; }

.file-action a {
  color: #1a1a1a;
  text-decoration: none; }

.file-action a:hover {
  text-decoration: underline; }

/* The name, when there is nothing behind it to download. */
.file-action .file-name.none {
  color: #6b6b6b; }

.file-action .sep {
  color: #a8a8ac;
  margin: 0 2px; }

table.table-index td {
  padding: 0.04em 0.2em; }

form.my {
  margin-left: 24px; }
  form.my fieldset.top {
    vertical-align: top; }
  form.my fieldset {
    background-color: #f3f3f3;
    margin: 8px; }
    form.my fieldset legend {
      background: repeating-linear-gradient(45deg, #cccccc, #cccccc 1px, #f3f3f3 1px, #f3f3f3 2px);
      padding: 2px 8px;
      margin-left: 8px;
      border-radius: 6px;
      line-height: 1em;
      font-size: 85%; }
    form.my fieldset label {
      line-height: 1.3em;
      vertical-align: top; }
      form.my fieldset label span.label-text {
        background-color: inherit;
        padding: 0 0 0 4px;
        margin: 0;
        color: #999999 !important;
        font-size: 90%;
        line-height: 1em; }

div.cal .controls {
  display: table;
  margin: 0 auto 12px auto;
  font-size: 200%;
  font-family: 'roboto condensed', sans-serif;
  font-weight: bold; }
  div.cal .controls .nav {
    display: table-cell;
    width: 3em;
    text-align: center; }
  div.cal .controls .month {
    display: table-cell;
    width: 10em;
    color: black;
    text-align: center; }

div.cal .content {
  background: white;
  border-radius: 12px; }
  div.cal .content .week-header {
    text-align: center; }
    div.cal .content .week-header .week-no {
      color: #999999;
      border-bottom: 1px solid #999999;
      display: inline-block;
      font-style: italic;
      padding: 0 3em;
      margin: 1.2em 0 1.5em 0;
      letter-spacing: 0.4em; }
  div.cal .content .week {
    -moz-column-count: 7;
    -moz-column-gap: 1px;
    column-count: 7;
    column-gap: 1px;
    text-align: center;
    padding: 6px; }
    div.cal .content .week .day {
      display: table;
      width: 100%;
      -webkit-column-break-inside: avoid;
      border-radius: 10px;
      margin: 1px 0; }
      div.cal .content .week .day .day-name {
        display: table-cell;
        height: 100%;
        width: 3.5em;
        vertical-align: middle;
        font-weight: bold; }
      div.cal .content .week .day .day-num {
        padding: 4px 1.1em 4px 4px;
        font-family: 'roboto condensed', sans-serif;
        font-size: 200%;
        color: black;
        text-align: center; }
    div.cal .content .week .in-month {
      background-color: #f3f3f3; }
    div.cal .content .week .out-month {
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1o2MEg1cSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjIiIGhlaWdodD0iMiIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDEzNSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iIzEwMTAxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1o2MEg1cSkiIG9wYWNpdHk9IjAuMjIiLz48L3N2Zz4="); }
  div.cal .content .item {
    box-sizing: border-box;
    width: 100%;
    padding: 1px;
    display: inline-block;
    margin: 0 0 1px 0; }
    div.cal .content .item span.has-menu {
      margin: 1px 0 2px 0;
      display: inline-block;
      hyphens: auto; }
    div.cal .content .item span.has-menu a {
      overflow-x: hidden; }
  div.cal .content .member {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1JSVFciIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iI0JERERFOCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1JSVFcpIiBvcGFjaXR5PSIxIi8+PC9zdmc+"); }
  div.cal .content .piece {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1JSVFciIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iI0Q1QkFFOCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1JSVFcpIiBvcGFjaXR5PSIxIi8+PC9zdmc+"); }
  div.cal .content .post {
    background: linear-gradient(to bottom, #F3FFD6 0%, #E8FABE 20%, #E8FABE 80%, #D7E8B0 100%); }

.actions-wrap .actions {
  background: repeating-linear-gradient(45deg, #ffffff, #ffffff 1px, #f3f3f3 1px, #f3f3f3 2px); }

table.list-table {
  border: 1px solid #f3f3f3; }
  table.list-table tr:nth-child(2n+1) {
    background-color: #f3f3f3; }
  table.list-table .vertical-header {
    white-space: nowrap;
    vertical-align: top;
    height: 6em; }
    table.list-table .vertical-header div {
      writing-mode: vertical-rl;
      width: 1em; }
  table.list-table td .note {
    text-align: right;
    font-size: 90%;
    color: blue;
    line-height: 1.1em; }
  table.list-table td.bool {
    text-align: center;
    width: 1em; }
  table.list-table img.member {
    max-height: 100px;
    max-width: 100px; }
  table.list-table td.emph1 {
    color: green; }
  table.list-table td.emph3 {
    color: purple; }
  table.list-table td.emph2 {
    color: blue; }

table.properties {
  background-color: #e9e9e9;
  border-spacing: 1px; }
  table.properties th.emph1 {
    background-color: lightgreen; }
  table.properties th.emph2 {
    background-color: lightblue; }
  table.properties > tbody > tr > th {
    font-weight: normal;
    text-align: right;
    background-color: #f3f3f3;
    padding: 4px;
    vertical-align: top; }
  table.properties > tbody > tr > td {
    padding: 4px;
    background-color: white;
    vertical-align: top; }
    table.properties > tbody > tr > td img.member {
      max-height: 120px; }
    table.properties > tbody > tr > td .member-bookings {
      column-count: 1;
      text-align: center; }
      table.properties > tbody > tr > td .member-bookings div.text {
        text-align: left;
        display: block; }
        table.properties > tbody > tr > td .member-bookings div.text span {
          font-size: inherit;
          display: inline; }
        table.properties > tbody > tr > td .member-bookings div.text span.date {
          padding: 0 3px; }
        table.properties > tbody > tr > td .member-bookings div.text span.year {
          font-weight: bold; }
      table.properties > tbody > tr > td .member-bookings div.list {
        display: inline-block;
        border: #E9E9E9 1px solid;
        height: 12em;
        margin-top: 12px;
        overflow: auto;
        width: 16em; }
        table.properties > tbody > tr > td .member-bookings div.list div {
          display: table-row; }
          table.properties > tbody > tr > td .member-bookings div.list div a,
          table.properties > tbody > tr > td .member-bookings div.list div span {
            display: table-cell;
            padding: 0 12px;
            text-align: right; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f3f3f3; }
  body a,
  body a:visited,
  body a:link {
    color: black; }
  body p a {
    text-decoration: underline; }
  body a.action,
  body a.action:visited,
  body a.action:link {
    color: #aaaaaa;
    color: black;
    font-size: 95%;
    font-style: italic;
    margin: 6px 0;
    display: inline-block; }

#container {
  background-color: white;
  border-radius: 0;
  height: auto; }
  #container .banner {
    text-align: center;
    padding-top: 4px;
    margin: 8px 0 18px 0; }
  #container #header {
    border: none;
    height: 80px; }
    #container #header .logo {
      padding: 14px 0 12px 20px;
      background-color: black;
      font-family: 'ziperheadregular', serif;
      color: #ffffff; }
    #container #header .top-menu #menu {
      margin-left: 24px; }
      #container #header .top-menu #menu form {
        margin: -6px 0 0 0; }
        #container #header .top-menu #menu form input {
          margin: 0; }
  #container #content {
    display: inline-block;
    float: none; }
    #container #content h1 {
      border: none;
      margin-bottom: 36px;
      line-height: 1em; }
    #container #content h2 {
      line-height: 1em; }
    #container #content h3 {
      font-weight: 500; }
    #container #content span.has-menu {
      /* image-url(), not an ERB asset_path. sassc-rails supplies this
         function, so the file needs no .erb pass -- it was the only ERB tag in
         2900 lines. Output is identical: a digested /assets/ URL. */
      background-image: url(/assets/burger_menu_block-f5d754d715b99a28029ab13fba2f2f1d0be2b89be4ad88ab7f32e2e3551fd173.svg);
      background-repeat: no-repeat;
      background-size: 0.65em 1.1em;
      background-position: top left;
      padding-left: 0.65em; }
    #container #content #alert {
      display: table;
      border-radius: 8px;
      padding: 3px 6px;
      margin: 12px 0 12px 12px;
      text-align: center;
      color: red !important;
      background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1o2MEg1cSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjIuNSIgaGVpZ2h0PSIyLjUiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIuNSIgc3Ryb2tlPSIjRUEyMDIwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPiA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm5fWjYwSDVxKSIgb3BhY2l0eT0iMC4zMyIvPjwvc3ZnPg==");
      background-color: white; }
    #container #content #notification {
      margin: 12px 0 12px 12px;
      text-align: center;
      background: repeating-linear-gradient(-45deg, aquamarine, aquamarine 1px, #f3f3f3 1px, #f3f3f3 2px); }
      #container #content #notification .btn {
        display: inline-block;
        font-style: italic;
        font-size: 11px;
        padding-right: 12px; }
      #container #content #notification #btn-control {
        display: none; }
      #container #content #notification #btn-control:checked + label > table {
        display: inline-block; }
      #container #content #notification table {
        display: none;
        background-color: black;
        border-collapse: separate;
        border-spacing: 1px; }
        #container #content #notification table td {
          font-size: 14px;
          font-family: "Oxygen Mono", monospace;
          font-style: normal;
          background-color: white;
          padding: 2px; }
        #container #content #notification table .com {
          vertical-align: top;
          text-align: left; }
        #container #content #notification table .out {
          text-align: left;
          white-space: pre; }
      #container #content #notification pre {
        font-size: 12px;
        line-height: 14px; }
    #container #content #wide-text {
      border: none; }
    #container #content #text {
      padding: 0 22px 22px 22px;
      border: none;
      float: none;
      display: inline-block; }
    #container #content .firstLetter {
      font-family: 'ziperheadregular', georgia; }
    #container #content #sidebar {
      vertical-align: top;
      display: inline-block;
      float: none;
      border: none;
      background-color: #f3f3f3; }
      #container #content #sidebar .top {
        margin: -14px -12px 4px -12px;
        height: 8px;
        background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1o2MEg1cSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjIiIGhlaWdodD0iMiIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDEzNSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iIzEwMTAxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1o2MEg1cSkiIG9wYWNpdHk9IjAuMjIiLz48L3N2Zz4="); }
      #container #content #sidebar > div.admin-only > a,
      #container #content #sidebar div.members-only > a, #container #content #sidebar > a {
        /* must be on separate line */
        margin: 0.6em 0 0 0;
        display: block; }
      #container #content #sidebar a + a {
        margin-top: 0.3em; }
      #container #content #sidebar a.emph {
        font-weight: bold; }
      #container #content #sidebar .members-only,
      #container #content #sidebar .admin-only {
        display: inline-block;
        width: 100%; }
      #container #content #sidebar .note {
        width: 80%;
        margin-top: 24px;
        text-align: left;
        font-style: italic;
        line-height: 1.2em;
        padding-left: 8px;
        font-size: 90%;
        border-left: 8px solid #E8FB51; }
      #container #content #sidebar .file-action {
        margin: 2px 0; }
      #container #content #sidebar a.reminder {
        font-weight: bold;
        color: red; }
      #container #content #sidebar .current {
        font-weight: bold;
        text-decoration: none; }

#footer {
  /* Darker than the page.
   *
   * The footer field WAS #F3F3F3 -- which is exactly the body colour set at the
   * top of this file. The footer and the page background were the same grey, so
   * there was no footer, just a region where the white container stopped. This
   * is a real step down from the body without going dark enough to turn the
   * black link text into a contrast problem: #2a2a2a on #E4E4E6 is about 10:1,
   * where AA asks 4.5.
   *
   * Every other value in this section is derived from this one -- wordmark ink,
   * both emboss shadows, and the two rules. Change this and they all move. */
  background-color: #E4E4E6 !important;
  /* No rule between page and footer.
   *
   * There was one, and it earned its place while both fields were #f3f3f3 --
   * with nothing else to separate them, a line was the separation. Once the
   * field went darker the step in colour does that job on its own, and the line
   * became a second answer to a question already answered: it read as heavy,
   * and it drew attention to the join rather than to the footer.
   *
   * The square bottom corners on #container are KEPT. They were squared so the
   * line would have something straight to run along, but the flat meeting of
   * white and grey is cleaner than the old curve regardless.
   *
   * This also switches off the gem's own 6px $light-border. */
  border-top: none !important;
  /* the gem pins the footer at 200px and centres it; neither survives contact
     with a wrapping flex row */
  height: auto !important;
  text-align: left !important;
  padding: 26px 0 30px !important;
  /* The other half of the sticky footer -- see the flex column on body.
     !important because the gem writes `div#footer { margin: 0 }`, which is one
     element more specific than this block's selector; without it the margin
     never applied and the band below the footer stayed. */
  margin-top: auto !important; }

#footer-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 28px;
  box-sizing: border-box;
  padding: 0 22px;
  /* the gutter #text and #sidebar already use */ }

#footer .name {
  width: auto !important;
  /* gem: 50px */
  font-family: 'ziperheadregular', georgia, serif !important;
  font-size: 30px !important;
  font-weight: normal !important;
  line-height: 1.05 !important;
  /* ink just ABOVE the #E4E4E6 field, shadow top left, light edge bottom right */
  color: #f0f0f2 !important;
  text-shadow: -1px -1px 1px #a9a9ab, 1px 1px 1px #ffffff !important;
  opacity: 1 !important;
  /* gem drops it to 0.3; the ink colour carries it now */ }

#footer ul.links {
  width: auto !important;
  /* gem: 50px */
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 30px;
  font-size: 14px;
  line-height: 1.6 !important; }

#footer ul.links li {
  margin: 0; }

#footer a,
#footer a:visited {
  color: #2a2a2a !important;
  text-decoration: underline;
  text-underline-offset: 3px; }

/* The straight rule: one line across the full width, with the credit under it.
   It gives the block a base and separates the functional sentence from the
   decoration above it.
 *
 * `div#footer`, not `#footer`: the gem writes div#footer .copyright, which is
   one element more specific, so a plain #footer .copyright silently lost its
   font-size and font-style and the credit stayed 11px italic. Matching the
   gem's selector is enough, because mrco.scss is imported after it. */
div#footer .copyright {
  flex-basis: 100%;
  /* No rule above this. There was one, to give the block a base and separate
     the credit from the decoration -- but the footer field is already a
     distinct colour from the page, so the line was drawing a boundary inside
     something that was not ambiguous. Space does it without the ink. */
  padding-top: 4px;
  margin-top: 12px;
  font-size: 13px;
  color: #3a3a3a !important;
  font-style: normal; }

/* Stacked, the two ends of the row have nothing to sit at opposite ends of. */
@media all and (max-width: 640px) {
  #footer-content {
    justify-content: flex-start; }
  #footer .name {
    font-size: 26px !important; } }

div.priska-form fieldset {
  max-width: 600px; }
  div.priska-form fieldset .question {
    margin-bottom: 1em; }
    div.priska-form fieldset .question ul {
      margin-left: 2em; }
    div.priska-form fieldset .question div.yes-no {
      margin-left: 1em;
      margin-top: 0.5em; }
    div.priska-form fieldset .question img.required {
      width: 8px;
      vertical-align: 0.1em;
      margin-left: 4px; }

div.priska-form div.note {
  max-width: 600px;
  font-style: italic;
  margin: 0.5em; }

div.priska-form div.notice {
  max-width: 500px;
  margin: 1em;
  padding: 1em;
  border: 2px solid red;
  border-radius: 8px;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1o2MEg1cSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjIuNSIgaGVpZ2h0PSIyLjUiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIuNSIgc3Ryb2tlPSIjRUEyMDIwIiBzdHJva2Utd2lkdGg9IjEiLz48L3BhdHRlcm4+PC9kZWZzPiA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm5fWjYwSDVxKSIgb3BhY2l0eT0iMC4zMyIvPjwvc3ZnPg==");
  text-align: left; }
  div.priska-form div.notice ol {
    margin: 1em 0 0 2em; }

div.priska-form div.alert {
  font-style: normal;
  color: red;
  padding: 6px;
  text-align: center;
  background-color: #FFEEEE; }

div.youtube-video {
  margin: 0 auto;
  width: 60%; }
  div.youtube-video .note {
    font-size: 90%;
    font-style: italic;
    line-height: 1.3em;
    margin: 6px 0 12px 0; }

a.jump {
  font-size: 220%;
  vertical-align: -0.2em; }

div.calendar-info {
  width: 600px;
  background-color: #f3f3f3;
  padding: 8px;
  border-radius: 8px;
  margin: -16px auto 32px auto; }
  div.calendar-info p {
    margin: 0 0 0.5em 0; }
  div.calendar-info .other-member {
    text-align: right; }
  div.calendar-info form.my {
    margin: 0 0 0 auto; }
    div.calendar-info form.my input {
      margin: 0; }

.members-list {
  column-count: 2; }

span.group td,
div.group td {
  padding: 8px; }

span.group h2,
div.group h2 {
  clear: both; }

span.group .title,
div.group .title {
  font-weight: bold; }

span.group .leader,
span.group .deputy,
div.group .leader,
div.group .deputy {
  font-style: italic; }

span.group .contact,
div.group .contact {
  font-style: italic; }

span.group .members,
div.group .members {
  column-count: 2; }

.two-columns {
  column-count: 2; }

.three-columns {
  column-count: 3;
  height: auto; }

div.has-form {
  background-color: lightgreen;
  border-radius: 4px; }

div.has-not-form {
  display: inline-block;
  padding: 1px 4px;
  background-color: #FFEEEE; }
  div.has-not-form a {
    color: red !important; }

div.needs-form {
  margin-top: 4px !important; }

.priska-list div.event,
.booking-plan div.event {
  margin-bottom: 2em; }
  .priska-list div.event div.signature,
  .booking-plan div.event div.signature {
    font-weight: bold;
    margin-bottom: 8px; }
  .priska-list div.event div.members,
  .booking-plan div.event div.members {
    column-count: 2; }
    .priska-list div.event div.members a.action,
    .booking-plan div.event div.members a.action {
      display: inline;
      margin: 3px 0; }

.priska-list .form-status,
.booking-plan .form-status {
  display: inline-block;
  width: 5em;
  text-align: center; }
  .priska-list .form-status span.has-form,
  .booking-plan .form-status span.has-form {
    background-color: lightgreen;
    padding: 4px; }

.priska-list .transition-0,
.booking-plan .transition-0 {
  font-size: 90%;
  color: blue; }

.priska-list .transition-1,
.booking-plan .transition-1 {
  font-size: 90%;
  color: purple; }

.priska-list table.room-bookings,
.booking-plan table.room-bookings {
  border-collapse: collapse; }
  .priska-list table.room-bookings tr,
  .booking-plan table.room-bookings tr {
    font-size: 11px;
    line-height: 1.1em;
    height: 6em; }
  .priska-list table.room-bookings td,
  .booking-plan table.room-bookings td {
    vertical-align: middle; }
  .priska-list table.room-bookings td.name,
  .booking-plan table.room-bookings td.name {
    padding-left: 12px; }
  .priska-list table.room-bookings td.time-bar,
  .booking-plan table.room-bookings td.time-bar {
    font-size: 11px;
    line-height: 1.1em; }
    .priska-list table.room-bookings td.time-bar div.offset,
    .booking-plan table.room-bookings td.time-bar div.offset {
      background-color: beige;
      display: table-cell;
      height: 5em; }
    .priska-list table.room-bookings td.time-bar div.booked,
    .booking-plan table.room-bookings td.time-bar div.booked {
      padding: 2px;
      background-color: lightblue;
      display: table-cell;
      height: 5em;
      text-align: center;
      vertical-align: middle; }

.priska-list table.door-events tr.event,
.booking-plan table.door-events tr.event {
  border-top: dotted 1px blue;
  background-color: #f0f0f0; }

.priska-list table.door-events th,
.booking-plan table.door-events th {
  padding: 18px 0 6px 0;
  text-align: left; }

.priska-list table.door-events td.data,
.booking-plan table.door-events td.data {
  text-align: center;
  padding: 0px 4px; }

.priska-list table.door-events td.out,
.booking-plan table.door-events td.out {
  background-color: #AAAAFF; }

.priska-list table.door-events td.text,
.booking-plan table.door-events td.text {
  background-color: white; }

.priska-list table.door-events td.time,
.booking-plan table.door-events td.time {
  font-style: italic; }

.priska-list table.door-events td.in,
.booking-plan table.door-events td.in {
  background-color: #AAD4AA; }

.priska-list table.door-events td.time-bar div.offset,
.booking-plan table.door-events td.time-bar div.offset {
  background-color: beige;
  display: inline-block; }

.priska-list table.door-events td.time-bar div.booked,
.booking-plan table.door-events td.time-bar div.booked {
  background-color: lightblue;
  display: inline-block; }

.priska-list table.door-events td.time-bar div.in,
.booking-plan table.door-events td.time-bar div.in {
  background-color: #AAD4AA;
  display: inline-block;
  width: 10px; }

.priska-list table.door-events td.time-bar div.out,
.booking-plan table.door-events td.time-bar div.out {
  background-color: #AAAAFF;
  display: inline-block;
  width: 10px; }

div.application-form div.intro {
  width: 600px;
  margin: 0px 32px 16px 32px; }

table.month {
  background-color: #ffffff;
  border-radius: 12px 12px 7px 7px;
  border-spacing: 1px;
  border-collapse: separate; }
  table.month td.day {
    background-color: #f3f3f3;
    vertical-align: top; }
  table.month td.outside-month {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1o2MEg1cSIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjIiIGhlaWdodD0iMiIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDEzNSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iIzEwMTAxMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1o2MEg1cSkiIG9wYWNpdHk9IjAuMjIiLz48L3N2Zz4="); }
  table.month td.today {
    border: 3px solid #D6682E; }
  table.month td.bottom-row {
    line-height: 6px; }
  table.month div.event {
    margin: 4px 2px;
    padding: 4px;
    border-radius: 6px;
    text-align: center; }
    table.month div.event a,
    table.month div.event a:visited {
      color: black; }
  table.month div.day-no {
    margin: 2px;
    padding-right: 4px;
    line-height: 1.4em;
    font-size: 90%;
    background-color: white;
    border-radius: 4px 4px 14px 4px;
    text-align: center;
    font-weight: bold; }
    table.month div.day-no a,
    table.month div.day-no a:visited {
      color: #666666; }
  table.month th {
    font-weight: bold;
    padding: 4px 8px 4px 8px;
    color: black; }

div.month-name {
  font-family: 'Barlow Condensed', 'roboto condensed', sans-serif;
  color: black;
  font-size: 26px;
  /* 400, not bold: Barlow Condensed ships only 400, so `bold` here would ask
     the browser to synthesise one. The month name is a heading, not emphasis. */
  font-weight: 400;
  /* The 90px indent lined the name up with a table that no longer starts
     there -- the grid is full-width now. */
  margin: 22px 0 10px 0; }

table.small-month {
  margin: 12px auto 0 0; }
  table.small-month th {
    font-size: 80%; }
  table.small-month td {
    font-size: 80%; }
    table.small-month td .day-no {
      width: 16px; }

table.big-month {
  width: 80%;
  margin: 0 auto 24px auto; }
  table.big-month td {
    min-width: 87px; }
    table.big-month td .day-no {
      width: 22px; }
    table.big-month td div.note {
      margin: 0 1px 1px 1px;
      padding: 4px;
      font-size: 0.9em;
      line-height: 1.2em;
      background-color: #f3f3f3; }
      table.big-month td div.note .group-rehearsal {
        text-align: center;
        padding: 4px 0; }
      table.big-month td div.note .event-name {
        text-align: center;
        padding: 4px 0;
        text-decoration: underline; }
      table.big-month td div.note .event {
        margin-bottom: 4px;
        font-size: 15px; }
      table.big-month td div.note div.location {
        font-size: 70%;
        line-height: 1.2em;
        text-align: right;
        margin-top: 4px; }

div.concert-note {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1JSVFciIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iI0Q1QkFFOCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1JSVFcpIiBvcGFjaXR5PSIxIi8+PC9zdmc+"); }

div.rehearsal-note {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1JSVFciIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iI0JERERFOCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1JSVFcpIiBvcGFjaXR5PSIxIi8+PC9zdmc+"); }

div.agm-note {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1JSVFciIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iI0JFRThCQSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1JSVFcpIiBvcGFjaXR5PSIxIi8+PC9zdmc+"); }

div.workshop-note {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1JSVFciIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iIzdGRkZENCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1JSVFcpIiBvcGFjaXR5PSIxIi8+PC9zdmc+"); }

div.recital-note {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1JSVFciIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iIzdGRkZENCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1JSVFcpIiBvcGFjaXR5PSIxIi8+PC9zdmc+"); }

div.task-note {
  background: repeating-linear-gradient(-45deg, #FFE955, #FFE955 1px, #f3f3f3 1px, #f3f3f3 2px); }

div.committee-note {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1JSVFciIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxsaW5lIHgxPSIwIiB5PSIwIiB4Mj0iMCIgeTI9IjIiIHN0cm9rZT0iI0ZGREVBMiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9wYXR0ZXJuPjwvZGVmcz4gPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1JSVFcpIiBvcGFjaXR5PSIxIi8+PC9zdmc+"); }

/* Term marks keep their own rendering: small-caps and orange.
 *
 * They are NOT events -- nobody attends "start of term" -- so they are
 * deliberately marked as a different class of thing rather than styled like a
 * rehearsal. I greyed them out at one point on the grounds that they were the
 * loudest thing in the grid; that was wrong, the distinction is the point.
 *
 * Only the hue is nudged, from #D6682E to #B4521F. The original is 3.6:1 on
 * white and 3.4:1 on the tinted weekend columns, and these are 12px bold links
 * -- too small to count as large text, so AA wants 4.5. #B4521F reads as the
 * same orange and gives 5.0:1 and 4.8:1. */
div.start-of-term-note,
div.end-of-term-note,
div.start-of-year-note {
  font-variant: small-caps; }
  div.start-of-term-note a,
  div.end-of-term-note a,
  div.start-of-year-note a {
    color: #B4521F !important;
    font-weight: bold; }

/* Plain CSS on purpose -- no SCSS variables or mixins, so this survives the
   move off sassc unchanged. The per-block differences are custom properties;
   the shared rule below reads them.

   The tint is a whole rgba() rather than a colour plus a separate opacity,
   because `rgb(R G B / A)` slash syntax is a hazard under libsass, which can
   read the slash as division. Keep the four tints in step by hand. */
div.members-only,
div.admin-only,
div.ask-login {
  /* border-box matters in the sidebar: the gem sets width:100% on these
     blocks, which resolves against the CONTENT box. Without border-box their
     own padding and border are added on top, so the block overflowed the
     sidebar's 22px right padding and left a 4px gutter instead. */
  box-sizing: border-box;
  --restricted-stroke: 1px;
  /* members and admin must match: a heavier
                                 admin line reads as obtrusive */
  --restricted-gap: 7.5px;
  --restricted-border-style: solid;
  position: relative;
  background-image: repeating-linear-gradient(var(--restricted-angle), var(--restricted-tint) 0 var(--restricted-stroke), transparent var(--restricted-stroke) var(--restricted-gap));
  border: 1px var(--restricted-border-style) var(--restricted-border);
  /* Square, was 8px.
   *
   * The refresh has been getting more angular -- #container lost its 32px
   * bottom corners when the footer got its own field -- and the restricted
   * frame is the one thing on the page that is meant to read as a frame rather
   * than as furniture. Square says that; a soft 8px radius made it look like a
   * card.
   *
   * Corners are deliberately NOT squared across the board. Date chips,
   * thumbnails and the Join us button keep their radius, so square now means
   * one thing only: this box is a restriction. Everything you touch or read
   * stays rounded, and the two read apart at a glance -- which is the same
   * argument as "a border means restricted", carried by shape.
   *
   * A 45deg notch cut into one corner was built and rejected
   * (public/notch.html, kept out of git): a clipped box loses its border along
   * the diagonal, so the frame needed two stacked clipped layers and the label
   * pill had to move out of ::before into real markup -- a lot of machinery
   * for a 20px detail. */
  border-radius: 0;
  padding: 26px 8px 8px 8px;
  margin: 6px 0; }

div.members-only::before,
div.admin-only::before,
div.ask-login::before {
  content: var(--restricted-label);
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 9px;
  background-color: var(--restricted-tag-bg);
  color: #fff;
  font-family: 'roboto condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Only the bottom right is rounded, and only slightly.
   *
   * Three of the pill's corners are not free: top-left IS the block's corner,
   * and the top and left edges run along the frame. So those follow the block
   * and are square -- the old 8px 0 8px 0 rounded the top-left to sit inside a
   * rounded frame, and against a square one that left a visible nick.
   *
   * The bottom right is the only corner that projects into the field, and
   * leaving it hard made the pill look clipped rather than placed. This is
   * joinery, not a shape statement, so it does not contradict "square means
   * restricted" -- the frame is still square.
   *
   * 8px, which is what that corner always was -- only the top-left changed.
   * 3px and 5px were tried against it: 3px is invisible at this size, and 5px
   * is tidy but reads as a chamfer rather than as a corner. */
  border-radius: 0 0 8px 0; }

/* Members is GREY, not blue.
 *
 * The site is black, white and photographs, with colour used sparingly. The
 * members-only block is the common case -- it is on the homepage, the event
 * page, the piece page, the member page -- so making it the one permanently
 * coloured thing on every screen spent the budget on the least exceptional
 * element. Grey puts it back in the palette.
 *
 * Admin stays GREEN, and that is the point rather than an inconsistency: there
 * are only a few admins, so those blocks are rare, and the one accent left on
 * the page is the one that says "you are about to change something". Colour
 * now marks the exception instead of the norm.
 *
 * Nothing is lost by it. The members/admin distinction was never carried by
 * hue -- 45deg against -45deg was chosen so the pair survives in greyscale
 * (see the note on div.admin-only below), which is exactly the case this now
 * makes permanent for one of the two.
 *
 * Mid grey rather than darker: at the tag especially, a near-black pill starts
 * competing with the page title and the section ribbons, which are the two
 * things that are meant to be black on the page. It was first set at #55555b
 * and still competed, so it has come up two steps.
 *
 * #75757c IS THE FLOOR and should not be nudged lighter. The tag carries white
 * text at 11px bold, which needs 4.5:1; this is 4.57:1. #7a7a82 is 4.26 and
 * #8a8a92 is 3.43, both failing. Going lighter than this means changing what
 * the tag IS -- near-black on a light chip, which was built and looked at
 * (public/lighter.html, kept out of git) and rejected because the tag stops
 * reading as a marker and becomes a quiet chip.
 */
div.members-only {
  --restricted-tint: rgba(100, 100, 108, 0.12);
  --restricted-angle: 45deg;
  --restricted-label: "Members only";
  --restricted-tag-bg: #75757c;
  --restricted-border: #d0d0d3; }

/* Green, not the old purple: purple is blue plus red, so under the common
   red-green deficiencies it collapses towards the blue it is meant to contrast
   with. The mirrored angle is what keeps the two apart in greyscale, which is
   why the stroke width can stay identical to members. */
div.admin-only {
  --restricted-tint: rgba(20, 140, 70, 0.16);
  --restricted-angle: -45deg;
  --restricted-label: "Admin only";
  --restricted-tag-bg: #14682f;
  --restricted-border: #a6d8b8; }

/* The signed-out counterpart of a members-only block. Same frame, same hatch,
   same label -- a DASHED border is the only structural difference, saying
   "locked" rather than "you have this". Previously a red hatch at 33%, which
   worked (it is what stopped members reporting features as broken when they
   had simply not logged in) but read as an error and shared no visual language
   with the block a member sees in its place. */
div.ask-login {
  /* Follows members to grey, and to the same lightness -- the whole value of
     the pair is that a visitor sees the same frame in the same place a member
     sees the real thing. Keep these four in step with div.members-only. */
  --restricted-tint: rgba(100, 100, 108, 0.12);
  --restricted-angle: 45deg;
  --restricted-label: "Members only";
  --restricted-tag-bg: #75757c;
  --restricted-border: #d0d0d3;
  --restricted-border-style: dashed;
  display: block; }

div.ask-login .teaser {
  font-weight: 700;
  font-size: 105%;
  margin-bottom: 2px; }

div.ask-login .prompt {
  font-size: 95%; }

/* Black rather than the old blue link colour.
 *
 * This is the one place where going grey costs something: blue read as "sign
 * in and this is yours", and a grey block reads closer to "unavailable". The
 * login word is what has to carry the invitation now, so it stays bold and
 * underlined and goes to full black -- more contrast against the grey field
 * than the blue had, not less. */
/* :visited spelled out -- in a sidebar, blogger's div#sidebar a:visited
   (0,1,1,2) outranks div.ask-login a (0,0,1,2) and would fade the one word the
   whole block exists to offer to #999. See the note on a.join-us. */
div.ask-login a,
div.ask-login a:visited,
#sidebar div.ask-login a,
#sidebar div.ask-login a:visited {
  color: #1a1a1a;
  font-weight: 700;
  text-decoration: underline; }

td.admin-only {
  border-right: 2px solid #F2DFF9; }

div.group-info div.group-list + div.info,
div.group-info div.info + div.group-list,
div.people div.group-list + div.info,
div.people div.info + div.group-list {
  margin-top: 1.5em; }

div.group-info div.group-list,
div.people div.group-list {
  margin-left: 0;
  display: inline-block;
  padding: 6px;
  margin-left: 1.5em; }
  div.group-info div.group-list div.group,
  div.people div.group-list div.group {
    margin: 0.4em 0 0 0; }
    div.group-info div.group-list div.group .title,
    div.people div.group-list div.group .title {
      display: inline-block; }
    div.group-info div.group-list div.group .leader,
    div.people div.group-list div.group .leader {
      font-style: italic; }
    div.group-info div.group-list div.group .group-contact,
    div.people div.group-list div.group .group-contact {
      display: inline-block;
      background-color: white;
      font-style: italic;
      margin: .2em 0 .4em 1.5em; }
    div.group-info div.group-list div.group .note,
    div.people div.group-list div.group .note {
      float: none;
      display: block;
      margin: .4em 0 .4em 1.5em;
      line-height: 1.3em; }
      div.group-info div.group-list div.group .note p,
      div.people div.group-list div.group .note p {
        line-height: inherit; }

div.officers div.officer {
  width: 300px;
  margin-left: 120px;
  margin-top: 12px;
  display: inline-block; }
  div.officers div.officer img.member {
    float: right;
    width: 80px;
    border-radius: 6px; }
  div.officers div.officer .role {
    font-weight: bold; }
  div.officers div.officer .description ul {
    margin: 12px 0 12px 24px; }
  div.officers div.officer a.contact {
    font-style: italic; }

div.groups {
  margin-left: 132px; }
  div.groups div.group {
    line-height: 1.4em;
    margin-top: 12px;
    width: 450px;
    display: inline-block; }
    div.groups div.group .title {
      margin-left: -12px; }
    div.groups div.group .contact {
      font-style: italic;
      display: block; }
    div.groups div.group .note p {
      width: 250px;
      float: right;
      color: black;
      font-style: italic;
      line-height: 1.3em; }

table {
  border-collapse: collapse; }
  table td {
    padding: 6px 1px 6px 1px; }
  table td.from {
    background-color: #ddffdd;
    padding-right: 2px;
    white-space: nowrap; }
  table td.to {
    background-color: #E5F3FF;
    padding-left: 2px;
    white-space: nowrap; }
  table tr.is-set {
    border-top: 1px dotted #aaaaaa;
    background-color: #f3f3f3; }
    table tr.is-set td.del {
      text-align: center;
      background-color: red; }

div.email-preview div.text {
  border: solid 1px #DDDDDD;
  padding: 12px; }

div.download div.debug {
  text-align: right; }
  div.download div.debug .btn {
    display: inline-block;
    font-style: italic;
    font-size: 11px;
    padding-right: 12px; }
  div.download div.debug .listing {
    font-style: normal;
    display: none;
    font-size: 9px;
    line-height: 12px; }
  div.download div.debug #btn-control {
    display: none; }
  div.download div.debug #btn-control:checked + label > .listing {
    display: inline-block; }

/* The instrument parts grid.
 *
 * Plain CSS, no nesting, ahead of the move off sassc.
 *
 * ORDERING IS UNTOUCHED -- still one flat alphabetical list. Members find
 * their instrument in it perfectly well, and Instrument has no section column,
 * so grouping by orchestral family would need new data rather than new CSS.
 *
 * What changes is the column mechanism. It was `column-count: 3`, three
 * columns at every width, which at 390px gives each name about 110px and
 * breaks them mid-phrase: "tenor saxophone 1" wrapped so that the "1" sat
 * alone on the next line and read as a part called 1. Since 14 of the 82 names
 * differ from a sibling ONLY by that trailing number, that is the worst thing
 * the layout could do. auto-fill with a 150px minimum lets the browser pick
 * the count from the width instead -- three columns in the main column, two on
 * a phone -- and no name breaks at either.
 *
 * Ellipsis was considered for the same reason and is wrong here: it truncates
 * from the right, so "clarinet in Bb 1" through "clarinet in Bb 7" would all
 * render identically.
 */
div.download .parts-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px; }

div.download .parts-head .title {
  margin: 0;
  font-style: normal;
  font-family: 'roboto condensed', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b6b; }

div.download .parts-count {
  font-family: 'roboto condensed', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b; }

div.download .parts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 18px; }

/* The whole cell is the target, not just the words. Adjacent entries are
   "flute 1" and "flute 2", so a mis-tap downloads the wrong part -- a
   genuinely annoying failure on a phone in a rehearsal. */
div.download .parts-list .part a,
div.download .parts-list .part.no-file {
  display: block;
  box-sizing: border-box;
  padding: 10px 8px;
  font-size: 15px;
  line-height: 1.2;
  border-radius: 3px;
  text-decoration: none;
  color: #1a1a1a; }

div.download .parts-list .part a:hover {
  background-color: rgba(0, 0, 0, 0.06);
  text-decoration: underline; }

@media (pointer: coarse) {
  div.download .parts-list .part a,
  div.download .parts-list .part.no-file {
    min-height: 44px; } }

/* Unavailable instruments: greyed AND struck through. Grey alone was too weak
   to separate them at a glance from the ones you can actually download. */
div.download .parts-list .part.no-file {
  display: none;
  color: #9a9a9a;
  background-color: transparent;
  text-decoration: line-through;
  text-decoration-color: #bcbcbc;
  text-decoration-thickness: 1px; }

/* The disclosure, without JavaScript. The checkbox precedes the list and the
   note so `~` can reach both; it is clipped rather than display:none so it
   still takes keyboard focus. */
.parts-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; }

.parts-toggle:checked ~ .parts-list .part.no-file {
  display: block; }

div.download .parts-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: #6b6b6b; }

div.download .parts-note label {
  color: #1a1a1a;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer; }

div.download .parts-note .when-shown {
  display: none; }

.parts-toggle:checked ~ .parts-note .when-shown {
  display: inline; }

.parts-toggle:checked ~ .parts-note .when-hidden {
  display: none; }

/* Focus has to be visible on the LABEL, since the checkbox itself is clipped. */
.parts-toggle:focus-visible ~ .parts-note label {
  outline: 2px solid #1466b0;
  outline-offset: 2px; }

div.merge-pdfs {
  margin-top: 36px; }

/* Event page.
 *
 * One rule decides whether anything gets a border: a box means restricted
 * access, members-only or admin-only, and nothing else. Those blocks already
 * draw themselves; everything here is about NOT drawing the rest. Sections are
 * separated by space and a quiet heading instead.
 *
 * Plain CSS -- no nesting or variables -- ahead of the move off sassc.
 */
/* Date on one line, time and venue on the next. No container: the type
   hierarchy does the work. See EventDecorator#when_and_where.
 *
 * .cu-row is the homepage "coming up" list, which renders the same decorator
 * method. Listed here rather than restated in the homepage section so there is
 * one definition of what when_and_where looks like -- if these ever diverge it
 * should be a decision, not a drift. The homepage suppresses the .when line
 * (the date chip already carries the date) and tightens the margin; those two
 * overrides live with the rest of the homepage rules. */
div.event .when,
.cu-row .when {
  font-size: 15px;
  /* the site's standard body size -- the proportions the
                      mockup had, where its 17px sat against a 16px body */
  line-height: 1.4;
  color: #5f5f5f;
  margin-bottom: 2px; }

div.event .facts,
.cu-row .facts {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 10px; }

div.event .facts .time,
.cu-row .facts .time {
  font-weight: 600; }

div.event .facts .sep,
.cu-row .facts .sep {
  color: #8a8a8a;
  padding: 0 8px; }

div.event .facts .venue,
.cu-row .facts .venue {
  color: #5f5f5f; }

/* Headings inside a restricted block, ANYWHERE on the site.
 *
 * The whole value of the members-only / admin-only language is that a member
 * recognises it instantly wherever it appears -- piece page, event page,
 * member page, sidebars. That only holds if the blocks look the same on every
 * page, so this is deliberately not scoped to one of them.
 *
 * h2 and h3 both appear inside these blocks in existing views ("Music Files",
 * "Media Files", "Other Files"), so both are levelled to the same quiet
 * signpost. The words label a region; they are not content. */
div.members-only > h2,
div.members-only > h3,
div.admin-only > h2,
div.admin-only > h3,
div.ask-login > h2,
div.ask-login > h3,
div.event h2,
#sidebar div.merge-pdfs h2 {
  font-family: 'roboto condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5f5f5f;
  margin: 0 0 12px 0;
  line-height: 1.2; }

/* Restricted blocks in a sidebar sit in a narrower column and stack, so they
   need a little air between them and less padding than in the main column. */
#sidebar div.members-only,
#sidebar div.admin-only,
#sidebar div.ask-login {
  margin-bottom: 14px; }

/* The sidebar's grey panel and its hatched cap are gone, everywhere.
 *
 * This used to be conditional -- :has(div.members-only) and friends -- because
 * only the restricted blocks needed to escape the panel: they draw their own
 * frame, so sitting one inside a grey rounded box gave a box inside a box
 * saying the same thing.
 *
 * The condition has outlived its purpose. Every refreshed sidebar sits on
 * white, so the pages that still showed the panel were exactly the ones nobody
 * had reached yet -- Join, Rehearsals and Subscriptions, which have no
 * restricted block and so kept the grey and the hatch while About, next to
 * them in the same list, did not. Unconditional is now both simpler and more
 * consistent, and it removes the :has() dependency altogether.
 *
 * Three ids on both, to beat the rules that draw them. */
#container #content #sidebar {
  background-color: transparent; }

#container #content #sidebar > .top {
  display: none; }

/* With the grey panel gone the restricted blocks sat hard against the right
   edge of the container. Match the 22px the text column already uses, so both
   columns breathe the same amount at the page border. */
#container #content #sidebar {
  /* border-box is load-bearing, not tidiness. #sidebar is a 272px inline-block
     beside a 612px #text inside a 920px container; adding padding on top of
     that width pushed the pair over the line and the sidebar wrapped BELOW the
     text column. With border-box the padding comes out of the 272px instead. */
  box-sizing: border-box;
  /* Now that #content is flex the sidebar's right edge is the container edge,
     so this is simply the gutter -- the same 22px #text leaves on the left.
     No leftover slack to compensate for. */
  padding-right: 22px;
  padding-left: 0; }

/* The sheet-music download: the one real member action in a sidebar, so the
   select and the button fill the column and clear the 44px touch minimum
   rather than being two small inline controls. */
/* div.merge-pdfs carries a 36px top margin for when it appears in the main
   column. Inside a members-only box that margin sits between the tag and the
   heading, so the title floated well below the top border. */
#sidebar div.merge-pdfs {
  margin-top: 0;
  /* The sidebar centres its text. That suits a short list of links, but a
     heading, a sentence, a select and a button read as a ragged stack when
     centred -- left-aligning gives them one edge to sit on. */
  text-align: left; }

/* Everything in the block shares one left edge. form.my carries a 24px
   left margin site-wide, which indented the select and button relative to the
   heading and hint above them; inside a narrow sidebar that reads as a mistake
   rather than as structure. */
#sidebar div.merge-pdfs form.my,
#sidebar div.merge-pdfs form.my fieldset {
  margin-left: 0;
  padding-left: 0; }

#sidebar div.merge-pdfs .hint {
  color: #5f5f5f;
  font-size: 14px;
  font-style: normal;
  line-height: 1.4;
  margin: 0 0 10px 0;
  padding-left: 0;
  border-left: 0;
  /* .note's yellow-green bar reads as an annotation here */
  width: auto; }

#sidebar div.merge-pdfs select {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  font-size: 15px;
  border: 1px solid #9a9a9a;
  border-radius: 6px;
  background-color: #fff;
  margin-bottom: 10px; }

#sidebar div.merge-pdfs input[type="submit"] {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  background-color: #1a1a1a;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-family: 'Source Sans 3', roboto, verdana, arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer; }

#sidebar div.merge-pdfs input[type="submit"]:hover {
  background-color: #000; }

/* Public sidebar content -- see ApplicationHelper#side_box.
 *
 * Same heading as a restricted block so the column reads as one system; no
 * frame, because a border here means restricted and nothing else. */
div.side-box {
  margin-bottom: 18px; }

div.side-box > h2 {
  font-family: 'roboto condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5f5f5f;
  margin: 0 0 8px 0;
  line-height: 1.2; }

div.side-box > a {
  display: block;
  padding: 5px 0; }

/* ---------------------------------------------------------------------------
 * Authored content (.rich-text)
 *
 * Everything a member writes in CKEditor -- event playlists, piece notes, the
 * about and privacy pages -- comes out as unstructured HTML: <p>, <ul>, <ol>,
 * and the occasional inline style. It is wrapped in .rich-text by the event
 * and piece decorators so it can be styled WITHOUT catching app-generated
 * lists, which have their own classes and their own rules.
 *
 * What this cannot fix: inline styles written into the content itself, such as
 * the <span style="color:#FF0000">NEW VERSION</span> in a playlist. Those beat
 * any stylesheet rule short of !important, and overriding an author's explicit
 * choice is the wrong instinct anyway.
 * ------------------------------------------------------------------------ */
.rich-text ul,
.rich-text ol {
  margin: 0.6em 0;
  padding-left: 1.6em; }

.rich-text li {
  padding: 3px 0;
  line-height: 1.5; }

/* Nested lists tighten up rather than compounding the outer spacing */
.rich-text li > ul,
.rich-text li > ol {
  margin: 2px 0; }

.rich-text p {
  margin: 0.7em 0; }

.rich-text p:first-child {
  margin-top: 0; }

/* ---------------------------------------------------------------------------
 * The playlist, numbered -- EVENT PAGE ONLY.
 *
 * The list is authored in CKEditor as a plain <ul>, so the numbers come from a
 * CSS counter rather than from the markup. Scoped to div.event so authored
 * lists everywhere else keep their bullets; scoped to a DIRECT child so a
 * nested list inside a playlist item stays a normal bullet list.
 *
 * The number is absolutely positioned rather than a flex item. The mockup used
 * flex, which is fine for hand-written markup, but a playlist row holds mixed
 * inline content -- a link, an italic subtitle, a red "NEW VERSION" span -- and
 * as flex items those stop behaving as prose and will not wrap together.
 * Absolute positioning puts the number in a gutter and leaves the row's content
 * in normal inline flow.
 * ------------------------------------------------------------------------ */
div.event .rich-text:has(.playlist-head) > ul,
div.event .rich-text:has(.playlist-head) > ol {
  list-style: none;
  counter-reset: playlist;
  margin-left: 0;
  padding-left: 0;
  /* the gem indents lists 1.6em; the number gutter replaces it */ }

div.event .rich-text:has(.playlist-head) > ul > li,
div.event .rich-text:has(.playlist-head) > ol > li {
  counter-increment: playlist;
  position: relative;
  /* Tight rows: a playlist is scanned, not read. min-height is dropped rather
     than set to a touch target -- these are links in a list, and the row is
     already ~26px, close enough that padding it out to 44 would stretch a
     ten-piece programme by a third of a screen for little gain. */
  padding: 2px 0 2px 30px; }

/* blog.scss indents list items with `#text ul li { margin-left: 2em }`. That
   carries an id, so it beats any selector built only from div.event and
   .rich-text and the playlist stayed indented ~43px from the paragraph above
   it. Matching the id here brings the numbers back under the text. Both
   column ids are covered: the event page uses #text when a sidebar is present
   and #wide-text when it is not. */
#text div.event .rich-text:has(.playlist-head) > ul > li,
#text div.event .rich-text:has(.playlist-head) > ol > li,
#wide-text div.event .rich-text:has(.playlist-head) > ul > li,
#wide-text div.event .rich-text:has(.playlist-head) > ol > li {
  margin-left: 0; }

/* [@playlist:NAME@] -- the programme heading, in the same voice as the
   SCHEDULE and ATTENDANCE signposts, replacing a hand-typed
   "Playlist for this rehearsal:" line. Its presence is also what switches the
   numbering on above, so a list of directions to the venue does not get
   numbered like a programme. */
div.event .rich-text .playlist-head {
  display: block;
  /* a span, so it is valid inside CKEditor's <p> */
  margin: 22px 0 10px 0; }

div.event .rich-text .playlist-head .what {
  font-family: 'roboto condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5f5f5f; }

div.event .rich-text .playlist-head .who {
  font-size: 13px;
  color: #8a8a8a;
  margin-left: 10px; }

div.event .rich-text:has(.playlist-head) > ul > li::before,
div.event .rich-text:has(.playlist-head) > ol > li::before {
  content: counter(playlist);
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  text-align: right;
  font-size: 13px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  color: #8a8a8a; }

/* Piece links expanded from [@piece:NAME@]. The list around them is authored
   prose, so weight is the only thing separating the titles from the sentence
   they sit in. */
.rich-text a.piece-link {
  font-weight: 600;
  text-decoration: none; }

.rich-text a.piece-link:hover {
  text-decoration: underline; }

/* Group rehearsal rows: the time column does the aligning, so no frames */
div.event ul.groups {
  list-style: none;
  margin: 0;
  padding: 0; }

div.event ul.groups > li.slot {
  padding: 7px 0;
  margin-left: 0; }

div.event ul.groups > li.slot > .t {
  display: inline-block;
  min-width: 9.5em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #5f5f5f; }

div.event ul.groups > li.slot > .g {
  font-weight: 600; }

div.event ul.groups > li.slot > .r {
  color: #8a8a8a;
  font-size: 95%;
  padding-left: 8px; }

div.event ul.groups > li.slot.mine > .t,
div.event ul.groups > li.slot.mine > .g {
  color: #1a1a1a; }

div.event ul.groups > li.slot > .you {
  font-family: 'roboto condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1466b0;
  border: 1px solid #a9cdf3;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 8px; }

/* The one action on the page: weight and space, not a frame. */
div.bookings .rsvp {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin: 14px 0 4px 0; }

div.bookings .rsvp .q {
  font-family: 'roboto condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2; }

div.bookings .rsvp .sub {
  font-size: 13.5px;
  color: #5f5f5f; }

div.bookings .rsvp select {
  min-height: 44px;
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid #9a9a9a;
  border-radius: 6px;
  background-color: #fff; }

div.send-email .members {
  column-count: 4;
  column-rule-width: 0px;
  column-gap: 0;
  border: 2px solid #f3f3f3; }
  div.send-email .members div.member {
    display: inline-block;
    padding: 2px;
    min-width: 140px; }

div.send-email div.event {
  margin: 0 0 10px 10px;
  width: 600px; }

div.send-email div.commands {
  margin-left: 6em; }

div.send-email div.groups {
  columns: 3; }
  div.send-email div.groups div.group {
    margin: 0; }
  div.send-email div.groups .title {
    margin: 0;
    font-weight: normal;
    display: inline-block; }

div.send-email form fieldset span.info {
  font-size: 90%;
  line-height: 1.1em;
  vertical-align: middle;
  display: inline-block;
  margin: 8px; }

div.send-email form select.big-box {
  height: 12em; }

div.send-email form .fields {
  text-align: center;
  margin-top: 16px; }
  div.send-email form .fields fieldset {
    text-align: left; }

table.list-table td.mp3,
table.list-table td.midi,
table.list-table td.no {
  text-align: center; }

.book .note {
  margin-bottom: 12px; }

.piece .mfile {
  margin-left: 24px; }

.mfile {
  display: inline-block;
  margin: 1px 0; }
  .mfile .date {
    margin-left: 6px;
    font-size: 70%;
    display: inline-block;
    background-color: #ddddee;
    color: blue;
    line-height: 1.0em;
    border-left: 1px #aaaaaa solid;
    border-top: 1px #aaaaaa solid;
    padding: 1px 3px;
    border-radius: 2px; }
  .mfile .piece-note {
    white-space: pre-wrap;
    background-color: #e6e6e6;
    font-style: italic;
    padding: 4px 6px;
    border-radius: 4px;
    color: #777777;
    margin: 3px 16px;
    font-size: 80%;
    text-align: left;
    line-height: 1.1em; }

.indicator {
  display: none;
  background: url(/assets/rorutils/indicator.gif) no-repeat left;
  padding-left: 30px; }

.result-sum {
  display: none;
  padding: 4px;
  background: repeating-linear-gradient(45deg, #cccccc, #cccccc 1px, #f3f3f3 1px, #f3f3f3 2px); }

.result {
  display: none; }

.bar {
  margin: 4px 0 0px 0; }

div.payment-list .date,
div.periods .date {
  font-style: italic;
  font-family: 'roboto condensed'; }

div.payment-list .amount,
div.periods .amount {
  color: darkblue; }

div.payment-list .period a,
div.periods .period a {
  color: purple; }

div.payment-list .concession,
div.periods .concession {
  color: red; }

div.payment-list a.paid-for,
div.periods a.paid-for {
  text-decoration: underline;
  text-decoration-style: dashed; }

div.payment-list span.note,
div.periods span.note {
  font-size: 90%;
  color: #aaaaaa; }

table.payments-inline {
  margin: 12px 0 8px 0;
  border: 1px #cccccc solid; }
  table.payments-inline td {
    padding: 1px 4px; }
  table.payments-inline td.amount {
    text-align: right; }
  table.payments-inline td.date {
    text-align: center;
    white-space: nowrap; }
  table.payments-inline td {
    vertical-align: top; }
  table.payments-inline td.bool {
    color: green;
    text-align: center; }

div.payment-list {
  font-size: 90%; }
  div.payment-list div.payment {
    margin: 3px 0;
    line-height: 1.2em;
    text-indent: -1.5em;
    margin-left: 1.5em; }

div.periods span.range {
  font-style: italic;
  font-family: 'roboto condensed'; }

div.periods h2 {
  text-decoration: underline;
  text-transform: capitalize; }

div.periods h3 {
  font-size: 20px;
  text-transform: capitalize; }

div.periods div.term {
  margin: 0.5em 0 1em 0;
  padding: 4px;
  border-radius: 8px;
  background-color: #f7f7f7;
  display: inline-block; }

.my-twitter-widget {
  margin: 24px 0; }

/* The ziperhead ribbon. Lighter, but by SIZE and SPACE rather than by giving up
 * the device -- the black fill, the skew and the wordmark face all stay.
 *
 * It read as too heavy on the homepage, where three of them stack down one
 * column. Two causes, and neither was the black:
 *
 *   * The slab was simply large. 1.1em with 24px of side padding and 4px of
 *     tracking makes a wide, tall bar for two short words.
 *   * 16px above it, against 12px of default margin below the content before
 *     it, gave the ribbon less air than the paragraphs around it -- so it sat
 *     right on top of the section it was labelling and the page read as a
 *     stack of bars rather than as sections.
 *
 * A white-on-black outline version and a no-box version were both tried
 * (public/tune.html, kept out of git); shrinking the slab and letting it
 * breathe was the one that kept the ribbon feeling like the ribbon.
 */
.section-title {
  background-color: black;
  color: white;
  padding: 1px 18px;
  /* Air is the other half of the fix, and asymmetric on purpose: more above
     than below, so the ribbon binds to the section it heads rather than
     floating between two of them. */
  margin: 34px 0 20px -40px;
  transform: skew(-12deg, -4deg);
  letter-spacing: 3px;
  display: inline-block;
  font-family: 'ziperheadregular';
  font-size: 0.92em; }

/* The first ribbon on a page has the banner above it, which already supplies
   the space; 34px on top of that just pushes the content down. */
.section-title:first-child {
  margin-top: 12px; }

div.more {
  text-align: right;
  padding-right: 32px;
  font-style: italic;
  margin-bottom: 12px; }
  div.more a,
  div.more a:visited {
    color: black;
    text-decoration: underline; }

div.event em.time {
  padding: 2px;
  font-style: normal; }

div.event em.location {
  font-style: italic; }

div.event div.summary {
  margin: 12px 0 0 0; }

div.event img.thumb {
  border-radius: 2px;
  max-width: 250px;
  max-height: 250px; }

div.event div.text {
  margin: 16px 0 0 0; }

div.event ul.groups {
  margin-left: 2em; }

div.bookings {
  column-count: 1;
  padding: 6px 0;
  /* The 2px #f3f3f3 frame is gone. It sat inside the members-only block's own
     border, so the attendance list was a box inside a box, and against the
     hatch a pale grey frame reads as an artefact rather than a boundary. The
     members-only block is the boundary. */
  margin: 12px 0 16px 0;
  /* yes / no / maybe.
     Was bold text on a #f3f3f3 chip, which is nearly the same value as the
     hatch behind it -- the labels washed out exactly where the eye needs to
     land first. Now opaque white so the hatch cannot show through, with a
     coloured edge to anchor it and uppercase letterspacing to read as a
     heading rather than as another name in the list. */
  /* The signed-in member's own row. They now appear in the lists like everyone
     else -- previously their booking was pulled out into the selector and
     shown nowhere else, so setting yourself to "yes" left no trace under yes.
     Marking it means you can still find yourself in a list of 25. */ }
  div.bookings .type {
    margin: 14px 0 8px 0;
    padding: 3px 10px 3px 8px;
    display: inline-block;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1a1a1a;
    background-color: #ffffff;
    border-left: 3px solid #1466b0;
    border-radius: 0 3px 3px 0; }
  div.bookings span.member {
    padding: 0 4px 0 32px; }
  div.bookings div.members {
    /* font-size: 90%; */
    line-height: 1.2em;
    /* Width-driven rather than a fixed count. `column-count: 3` gave three
       columns at every width, so on a phone each one was ~80px and names like
       "Beate Pauschmann" wrapped onto two lines, which made the columns
       interleave and become genuinely hard to read.

       column-width is a MINIMUM: the browser fits as many as will hold, so
       this is still three columns on desktop and drops to one on a phone with
       no breakpoint to maintain. 9em is sized to the longest names in the
       register rather than picked for looks. */
    column-count: auto;
    column-width: 9em;
    margin-left: 32px; }
  div.bookings div.member {
    margin-left: 0px; }
  div.bookings div.member.me {
    font-weight: 700;
    border-left: 3px solid #1466b0;
    padding-left: 6px;
    margin-left: -9px; }

/* The 32px indents are a desktop luxury; on a phone they are 8% of the screen
   spent on nothing. The bookings panel also carries its own 2px border, which
   now sits inside the members-only block's border -- one box inside another
   saying the same thing. Dropped at narrow widths, where the space matters. */
/* The 32px indents are a desktop luxury; on a phone they are 8% of the screen
   spent on nothing, and reclaiming them is what lets two name columns fit
   without wrapping instead of collapsing to one. */
@media all and (max-width: 700px) {
  div.bookings div.members {
    margin-left: 12px; }
  div.bookings span.member {
    padding-left: 12px; } }

select.booker {
  position: relative; }

@keyframes booker-flash {
  from {
    left: 0px; }
  to {
    background-color: greenyellow;
    left: 20px; } }

img.thumb:nth-of-type(even) {
  float: right; }

img.thumb:nth-of-type(odd) {
  float: left;
  margin: 6px 12px 6px 0; }

.text ul,
.text ol,
.post ul,
.post ol {
  margin: 12px 0 12px 36px; }

/* The public face, and for a member the page they land on. Three blocks in the
 * main column -- coming up, the blog, this month -- and the member's own
 * business in the sidebar.
 *
 * The ziperhead .section-title ribbons are KEPT. They are the brand, and they
 * tie the page to the wordmark; the quiet uppercase heading is used only where
 * a ribbon cannot go (see the sidebar note below).
 *
 * Plain CSS -- no nesting or variables -- ahead of the move off sassc.
 */
/* ---- coming up ---------------------------------------------------------- */
/* Rows separated by a hairline, not a border: on this site a border means
   restricted, so the separator is deliberately lighter than one. */
.coming-up .cu-row {
  display: flex;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid #f0f0f0; }

.coming-up .cu-row:last-child {
  border-bottom: 0; }

/* Fixed width so the titles beside it line up into a column. 58px fits "Wed"
   and a two-digit day at the sizes below without wrapping. */
.coming-up .date-chip {
  flex: 0 0 58px;
  box-sizing: border-box;
  text-align: center;
  padding: 6px 0 7px;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background-color: #fafafa; }

/* A chip is stacked lines, so each part is a block. */
.coming-up .date-chip .dow,
.coming-up .date-chip .mon,
.coming-up .date-chip .yr {
  display: block;
  font-family: 'roboto condensed', sans-serif;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: #6b6b6b; }

.coming-up .date-chip .dnum {
  display: block;
  font-family: 'Barlow Condensed', 'roboto condensed', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05; }

/* The year appears only on events outside the current year, and is the least
   important line in the chip when it does. */
.coming-up .date-chip .yr {
  font-size: 9.5px;
  color: #8a8a8a; }

/* Concerts are the one event type a visitor is looking for, so the chip warms
   up. Colour is the only signal that separates it, which is acceptable here
   because nothing depends on noticing it -- the title still says "concert". */
.coming-up .cu-row.concert .date-chip {
  background-color: #fff7e8;
  border-color: #e8d3a8; }

.coming-up .cu-body {
  min-width: 0;
  /* lets long titles wrap instead of stretching the flex row */ }

.coming-up .cu-title {
  font-family: 'Barlow Condensed', 'roboto condensed', sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  margin-bottom: 2px; }

/* The chip already states the date, so when_and_where's first line would say it
   twice. The times and venue on the second line are what is left to say. */
.coming-up .cu-row .when {
  display: none; }

.coming-up .cu-row .facts {
  margin-bottom: 0; }

.coming-up .cu-summary {
  font-size: 14.5px;
  line-height: 1.45;
  margin-top: 4px; }

/* post_summary emits its own paragraph; without this the row gains an extra
   blank line of leading under the venue. */
.coming-up .cu-summary p {
  margin: 0; }

/* An event backed by a post brings post_summary's own "read more" link with it.
   The title above already links to the same event, so the second link is noise
   in a three-line row. */
.coming-up .cu-summary .more {
  display: none; }

/* CKEditor writes inline font sizes into authored text -- the December concert
   summary carries style="font-size:18px" -- which made one row's summary larger
   than the next one's. An inline style can only be beaten by !important; it is
   confined to this block, where the summary is a fixed-size supporting line
   rather than authored body copy. */
.coming-up .cu-summary span[style] {
  font-size: inherit !important; }

/* ---- blog summaries ----------------------------------------------------- */
/* The gem floats the thumbnail and lets text wrap round it. mrco's override of
   the partial keeps .thumb-left but puts the text in its own .summary-body, so
   the pair can be a flex row: the two summaries then align with each other
   instead of each finding its own shape.
 *
 * Below 700px the existing rule further down un-floats the thumbnail and the
 * row stacks -- that is why display:block is restored there rather than here. */
.summary:has(.summary-body) {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 6px 0 16px; }

.summary .thumb-left {
  flex: 0 0 168px; }

.summary .thumb-left img {
  float: none;
  /* the gem floats this; inside a flex row the float does nothing
                  useful and confuses the height calculation */
  display: block;
  /* Scale to the column and keep the aspect ratio. This was `height: 112px`
     with object-fit: cover, which made every thumbnail the same height and so
     kept the summaries tidily aligned -- but cover CROPS anything that is not
     roughly 3:2. The "It Takes a City" logo is square and lost the bottom of
     its ring, which for a charity's logo is the one thing not to do to it.
     Alignment is not worth cropping the picture; the rows are close enough in
     height without it. */
  width: 100%;
  height: auto;
  border-radius: 4px;
  max-height: none; }

.summary .summary-body {
  min-width: 0; }

.summary .summary-body h2 {
  margin-top: 0; }

/* ---- this month --------------------------------------------------------- */
/* The month grid sat at about 330px inside a 560px column, which left the
   section looking unfinished and gave the day numbers ~14px hit areas. Filling
   the column costs nothing and buys roughly 44px cells. */
#text table.small-month {
  width: 100%;
  table-layout: fixed; }

/* A floor, not a fixed height -- the same treatment as the calendar page's
   big-month. `height` on a table cell is a MINIMUM, so 52px was being paid by
   every week whether anything happened in it or not. 34px here rather than the
   calendar's 40px because the chips are smaller; a week with an event grows to
   fit on its own. */
#text table.small-month td.day {
  height: 34px;
  vertical-align: top; }

/* ---- "new post" --------------------------------------------------------- */
/* blogger's posts/_new_post renders for `admin_logged_in? || logged_in?`, so
   this is a MEMBER action, not an admin one -- it must not take the green admin
   colour, and it must not take a border either, because a border here means
   restricted and this is simply a thing a member may do.
 *
 * What it loses is the yellow sticker and the absolute top:-20px, which lifted
 * it out of the flow and sat it on top of whatever followed -- on this page,
 * the "coming up" ribbon. Quiet uppercase label voice, in the flow, above the
 * first ribbon.
 *
 * Scoped to home and blog -- the two pages that list posts, and neighbours in
 * the nav, so leaving one yellow and the other not would read as a mistake.
 * .actions-wrap is also used by blogger's generic `page` template and by the
 * login form; those are different contexts and are left alone pending a look at
 * them, which is a separate decision rather than an oversight. */
body.page-home .actions-wrap .action,
body.page-blog .actions-wrap .action {
  position: static;
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  font-family: 'roboto condensed', sans-serif;
  font-style: normal;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.09em;
  font-weight: 700;
  line-height: 1.4; }

/* Back in the flow, it needs its own space below; absolute positioning meant it
   previously took none. */
body.page-home .actions-wrap,
body.page-blog .actions-wrap {
  margin-bottom: 14px; }

/* ---- sidebar ------------------------------------------------------------ */
/* blogger's div#sidebar centres everything. That suited a short list of links;
   it does not suit a statement like the next rehearsal, and it leaves every
   block in the column ragged down both edges. The restricted blocks and
   side_box sections read left, like the rest of the site.
 *
 * Scoped to those blocks rather than to #sidebar itself, so any older sidebar
 * content elsewhere on the site keeps the centring it was written for. */
#sidebar div.members-only,
#sidebar div.admin-only,
#sidebar div.ask-login,
#sidebar div.side-box {
  text-align: left; }

/* A ribbon cannot go in the sidebar: skew(-12deg, -4deg) needs bleed room on
   the left and slack on the right, and in a 272px column the skewed right
   corner runs past the page edge. Sidebar headings therefore use the quiet
   uppercase label -- the same one the restricted blocks use for their own
   headings, so the column still reads as one thing. Two heading treatments,
   chosen by position rather than by whim. */
#sidebar .label {
  display: block;
  font-family: 'roboto condensed', sans-serif;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: #6b6b6b;
  margin-bottom: 1px; }

/* The single most useful fact on the page for a signed-in member, so it is set
   as a statement rather than as another link in a list. */
/* Colour and :visited stated, not inherited. Left to the gem this is #666
   unvisited and #999 once visited -- and at 20px, a washed-out grey is a poor
   showing for the single most useful fact on the page. See a.join-us. */
#sidebar .next-rehearsal a,
#sidebar .next-rehearsal a:visited {
  font-family: 'Barlow Condensed', 'roboto condensed', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  display: block;
  margin: 0;
  color: #1a1a1a; }

#sidebar .next-rehearsal .where {
  font-size: 13.5px;
  line-height: 1.35;
  color: #5f5f5f; }

/* Same separator treatment as the event page's .facts line. */
#sidebar .next-rehearsal .where .sep {
  color: #8a8a8a;
  padding: 0 6px; }

#sidebar .my-groups {
  margin-top: 12px; }

#sidebar .side-blurb {
  margin: 0 0 12px 0;
  line-height: 1.45; }

/* The one thing a visitor is here to do, so it is a button and clears the 44px
   touch minimum. Not a border in the restricted sense -- it is filled, which is
   what keeps it from reading as "members only". */
/* :visited must be spelled out, here and for the two links below.
 *
 * blogger sets `div#sidebar a { color: #666 }` and
 * `div#sidebar a:visited { color: #999 }`. The first is (0,1,0,2) and loses to
 * a rule carrying a class -- but the second is (0,1,1,2), which has the same
 * class count as `#sidebar a.join-us` (0,1,1,1) and one more element, so it
 * wins. The symptom is exact and worth remembering: the control paints in the
 * right colour and then turns grey a moment later, when the browser resolves
 * history and the :visited rule applies.
 *
 * It is also invisible to a screenshot. A fresh headless browser has no
 * history, so :visited never matches and the render looks correct -- which is
 * how sampling the pixels of this button gave a confident, wrong answer. */
#sidebar a.join-us,
#sidebar a.join-us:visited {
  display: inline-block;
  background-color: #1466b0;
  color: #ffffff;
  font-family: 'roboto condensed', sans-serif;
  text-transform: uppercase;
  /* The label read as grey against the blue, and the colour was not the cause
     -- it was already #fff. Sampling the render: 3140 pixels of fill against
     190 pixels of pure white, everything else an antialiased blend. Roboto
     Condensed at 700 is narrow-stemmed, and at 12.5px with letter-spacing the
     stems land under a pixel, so the glyphs are mostly edge. Bigger type puts
     solid white back inside the strokes; less tracking stops the letters from
     thinning further. White on #1466b0 is 5.9:1, so contrast was never the
     problem on paper -- only on screen. */
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 6px; }

#sidebar a.join-us:hover {
  background-color: #0f4f88; }

/* ---- narrow screens ----------------------------------------------------- */
@media all and (max-width: 899px) {
  /* Stacked, the sidebar falls after the main column, so a member's next
     rehearsal ended up below a full month grid -- the last thing on the page.
     #content is already flex-column here (see the layout section), so ordering
     is a one-liner and the markup does not move.
   *
   * Only on the homepage: elsewhere the sidebar holds actions for the page
   * above it and belongs after it. */
  body.page-home #container #content > div#sidebar {
    order: -1; } }

@media all and (max-width: 700px) {
  /* The flex row from above would keep the thumbnail beside the text in a
     column too narrow for it; the existing un-float rule further down expects
     the summary to be a normal block again. */
  .summary:has(.summary-body) {
    display: block; }
  .summary .thumb-left img {
    height: auto; } }

/* Small blocks that live inside a sidebar and were never part of a page
   redesign: the About page-group links, and the blog archive.

   Plain CSS -- no nesting or variables -- ahead of the move off sassc. */
/* ---- the About page group ---- */
/* 12px of left padding on every item, so the current one's 3px bar plus its
   9px of padding lands the text in exactly the same place as the rest. */
#sidebar .page-group > div {
  padding: 7px 0 7px 12px;
  line-height: 1.3; }

#sidebar .page-group a {
  color: #1a1a1a;
  text-decoration: none; }

#sidebar .page-group a:hover {
  text-decoration: underline; }

/* The page you are on. page_group_link already renders it as a bare div rather
   than a link -- so it was correctly not clickable, and looked identical to
   everything that was. A left bar and weight say "you are here" without adding
   a border, which on this site means restricted. */
#sidebar .page-group .current {
  font-weight: 700;
  color: #1a1a1a;
  /* The bar sits ON the column's left edge, flush with the left border of the
     admin block below it. It used to hang 12px further out, which read as a
     misalignment rather than as a marker. 3px bar + 9px padding = the 12px the
     other items pad by, so the text stays on one line with them. */
  border-left: 3px solid #1a1a1a;
  padding-left: 9px;
  margin-left: 0; }

/* ---- the blog archive ---- */
/* Years as a wrapped set, not a paragraph and not a column.
 *
 * The gem emits one plain div per year with nothing between them, so eight
 * years ran together as a grey paragraph -- prose rather than eight things you
 * can pick, at tap targets a few pixels tall.
 *
 * A single vertical column was tried in between and rejected: eight full-width
 * rows made a short list into a tall one, for values that are four characters
 * wide. Wrapping keeps the block compact and still gives every year a real
 * target. */
.archive-years {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px; }

a.archive-year {
  display: inline-block;
  padding: 7px 11px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.72);
  color: #1a1a1a;
  text-decoration: none;
  font-family: 'roboto condensed', sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  line-height: 1.1; }

a.archive-year:hover {
  background-color: #ffffff;
  text-decoration: underline; }

/* The sidebar has a legacy rule to space a stacked list of links:
       #container #content #sidebar a + a { margin-top: 0.3em }
   It reaches these chips too, so every year except the first carried a 4px top
   margin -- and because the flex row stretches, a top margin makes an item
   SHORTER rather than lower: 29px against 2018's 33px, which left the first
   year sitting proud of the rest of the row. 0.3em at 13.5px is 4.05px, which
   is exactly what was measured.
 *
 * THREE ids, to match the rule being overridden. A one-id selector loses to it
 * however many classes it carries -- the same trap as the sidebar gutters. */
#container #content #sidebar a.archive-year,
#container #content #sidebar a.archive-year + a.archive-year {
  margin: 0; }

/* Two views of the same month, both rendered server-side, one hidden by CSS.
 *
 * PHONE IS THE PRIMARY DEVICE for this site, so the ladder is not a fallback:
 * seven equal columns at 390px is about 50px each, which cannot hold an event.
 * The ladder turns the weekday into an INDENT instead, which keeps the two
 * things the grid is actually for -- reading one weekday down a single edge to
 * spot a missing rehearsal, and noticing an event on an unusual day.
 *
 * A clustered-week layout was built and rejected first: it collapses empty days
 * so busy days can expand, which is far more compact, but a day with no event
 * and a day that collapsed look identical -- so a term break stops being
 * visible, and that absence is exactly what people come to check.
 *
 * Plain CSS -- no nesting or variables -- ahead of the move off sassc.
 */
.cal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap; }

.cal-step {
  display: flex;
  gap: 8px; }

.cal-step a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #d8d8db;
  border-radius: 6px;
  color: #1a1a1a;
  text-decoration: none;
  font-family: 'roboto condensed', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase; }

.cal-step a:hover {
  background-color: #f3f3f3; }

.cal-venue {
  color: #5f5f5f;
  margin: 2px 0 20px; }

/* Only as wide as it needs to be.
 *
 * A restricted block is display:block by default, so this one stretched the
 * full width of the page for a name field and a button -- a lot of hatched
 * green for a control most visitors never see. inline-block shrinks it to its
 * contents.
 *
 * The max-width is the other half: shrink-to-fit sizes to MAX-CONTENT, so
 * without it the instruction sentence would set the width and the box would be
 * nearly as wide as before. 26em wraps the sentence to two lines and still
 * leaves the field and button side by side on one. */
div.admin-only.book-for {
  display: inline-block;
  width: auto;
  /* Plain max-width, NOT min(26em, 100%): sassc reads min() as the Sass
     function and cannot mix em with %, which takes the asset build down. An
     inline-block is capped by its container anyway, so the guard is redundant. */
  max-width: 26em; }

div.admin-only.book-for form.my {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0; }

/* ---- the grid ---- */
/* Equal columns. The table was content-sized, so the Sunday column swelled to
   fit the rehearsals and Mon-Sat collapsed to about 30px of empty cells. */
table.big-month {
  width: 100%;
  table-layout: fixed;
  margin: 0 0 10px 0; }

/* A floor, not a fixed height.
 *
 * `height` on a table cell is a MINIMUM -- the row grows to fit whatever is in
 * it -- so 92px was being paid by every week whether or not anything happened
 * in it. Most weeks hold one Sunday rehearsal, so most of that was empty.
 *
 * 40px keeps an empty week tall enough to read as a week and to leave the day
 * number a comfortable target, and lets a busy week take what it needs: the
 * 28 September row, with an AGM and a rehearsal stacked, sizes itself. */
table.big-month td.day {
  height: 40px;
  padding: 3px; }

/* Saturday and Sunday on a beige field.
 *
 * A wash reads better than the boundary rule that briefly replaced it: it says
 * "these two columns" rather than "something changes here", which is what you
 * want when the job is running an eye down the Sunday column.
 *
 * The reason it was abandoned once is that the grid uses border-collapse:
 * separate with 1px of border-spacing, so the lines between cells are the
 * table's WHITE background showing through -- and a near-white tint (#fbfaf7)
 * swallowed them. Beige at #ece8de is 19 steps off white, which is enough for
 * the gaps to read; the earlier judgement that they vanished was made from a
 * downscaled screenshot and does not survive looking at actual pixels.
 */
table.big-month td:nth-child(6),
table.big-month td:nth-child(7),
table.small-month td:nth-child(6),
table.small-month td:nth-child(7) {
  background-color: #ece8de; }

table.big-month td.outside-month:nth-child(6),
table.big-month td.outside-month:nth-child(7),
table.small-month td.outside-month:nth-child(6),
table.small-month td.outside-month:nth-child(7) {
  background-color: #e4dfd1; }

/* ---- an event, in either view ---- */
div.event.rehearsal-note,
div.event.concert-note,
div.event.agm-note,
div.event.committee-note,
div.event.workshop-note,
div.event.recital-note,
div.event.no-rehearsal-note,
div.event.start-of-term-note,
div.event.end-of-term-note,
div.event.start-of-year-note,
div.event.social-event-note {
  background-image: none;
  /* the old 11% hatch is invisible at this size */
  border-left: 3px solid #b9b9be;
  background-color: #f1f1f2;
  border-radius: 3px;
  padding: 4px 6px;
  margin: 3px 0 0 0;
  font-size: 12px;
  line-height: 1.25; }

div.event .ev-name a {
  font-weight: 600;
  text-decoration: none;
  color: #1a1a1a; }

div.event .ev-time,
div.event .ev-at,
div.event .ev-note {
  color: #5f5f5f;
  font-size: 11.5px; }

div.event .ev-at {
  color: #8a5a12; }

/* The hues are the ones already in this file, decoded from the base64 hatch
   patterns further up: rehearsal #BDDDE8, concert #D5BAE8, AGM #BEE8BA,
   committee #FFDEA2, workshop/recital #7FFFD4. Used as a pale fill plus a
   deeper left edge, because at 12px a 1px hatch at 11% reads as nothing. The
   type NAME is always written, so colour reinforces and never carries alone. */
div.event.rehearsal-note {
  background-color: #eaf4f8;
  border-left-color: #5b9ab4; }

div.event.concert-note {
  background-color: #f4ecf9;
  border-left-color: #9a6fb8; }

div.event.agm-note {
  background-color: #edf7ec;
  border-left-color: #6aa864; }

div.event.committee-note {
  background-color: #fdf3e0;
  border-left-color: #d0a24e; }

div.event.workshop-note,
div.event.recital-note {
  background-color: #e6faf4;
  border-left-color: #3fa98c; }

/* "No rehearsal" is a STATEMENT, not an absence -- the orchestra saying so --
   and one of the things people come to the calendar to check. Quiet grey made
   it read as filler. */
div.event.no-rehearsal-note {
  background-color: transparent;
  background-image: repeating-linear-gradient(-45deg, #f0efec 0 1px, transparent 1px 6px);
  border-left-color: #b9b3a4;
  color: #6b6355; }

/* Unfilled and hairline-edged, so a term mark does not read as an attendable
   block -- but the small-caps orange from the rule above is left alone. */
div.event.start-of-term-note,
div.event.end-of-term-note,
div.event.start-of-year-note {
  background-color: transparent;
  border-left-color: #e4d3c6; }

/* ---- the ladder ---- */
.ladder {
  display: none; }

.lrow {
  display: flex;
  align-items: flex-start;
  gap: 8px; }

/* weekday as indent: Monday flush left, Sunday furthest right */
.lrow.d0 {
  margin-left: 0; }

.lrow.d1 {
  margin-left: 9px; }

.lrow.d2 {
  margin-left: 18px; }

.lrow.d3 {
  margin-left: 27px; }

.lrow.d4 {
  margin-left: 36px; }

.lrow.d5 {
  margin-left: 45px; }

.lrow.d6 {
  margin-left: 54px; }

.lrow .ld {
  flex: 0 0 46px;
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding-top: 5px;
  font-family: 'roboto condensed', sans-serif; }

.lrow .ld i {
  font-style: normal;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a9a9a; }

.lrow .ld b {
  font-weight: 400;
  font-family: 'Barlow Condensed', 'roboto condensed', sans-serif;
  font-size: 15px;
  color: #8a8a8a; }

.lrow.has .ld b {
  font-size: 18px;
  color: #1a1a1a; }

.lrow.slim {
  min-height: 19px; }

.lrow.has {
  margin-bottom: 5px; }

.lrow.today .ld b {
  color: #c05a17;
  font-weight: 700; }

.lbody {
  flex: 1 1 auto;
  min-width: 0; }

.lbody div.event {
  font-size: 14px;
  padding: 6px 8px; }

.lbody div.event .ev-time,
.lbody div.event .ev-at,
.lbody div.event .ev-note {
  font-size: 13px; }

/* The rule that closes a week, with its number on it. Week numbers are not
   for everyone, which is why they sit in the rule rather than in a column. */
.wgap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0 10px;
  color: #b0b0b4;
  font-family: 'roboto condensed', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase; }

.wgap::before {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid #e6e6e8; }

.ladder .wgap:last-child {
  display: none; }

@media all and (max-width: 700px) {
  table.big-month,
  table.small-month {
    display: none; }
  .ladder {
    display: block; } }

div.activity table.list-table {
  margin-top: 3em;
  width: auto; }
  div.activity table.list-table tr.good {
    background-color: #EDFBED; }
  div.activity table.list-table tr.good:nth-child(2n+1) {
    background-color: #E1F7E1; }
  div.activity table.list-table td img.member {
    max-width: 50px; }
  div.activity table.list-table td.date {
    font-size: 90%;
    font-style: italic; }
  div.activity table.list-table td.bool {
    border-left: 1px #cccccc solid; }
  div.activity table.list-table tr.bad td.above {
    background-color: pink; }

div.data-consent h1 {
  font-size: 24px;
  line-height: 1.2em;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5em !important; }

div.data-consent table {
  width: 70%;
  margin: 0 auto;
  border-collapse: collapse; }
  div.data-consent table td {
    padding: 1em;
    border: 1px #aaaaaa solid; }

/****** narrow screen ***************************************************************/
@media all and (max-width: 900px) {
  #container {
    border-radius: 0;
    padding-bottom: 0;
    border-bottom: 8px solid #cccccc; }
    #container #header div.top-menu {
      cursor: pointer;
      z-index: 10;
      float: left;
      padding: 0;
      height: 40px;
      width: 60px; }
      #container #header div.top-menu form input {
        font-size: 20px; }
      #container #header div.top-menu ul {
        padding-top: 3em; }
    #container #header .logo {
      font-size: 1.5em;
      line-height: 1.2em; }
    #container span.has-menu {
      position: static;
      touch-action: none; }
      #container span.has-menu > a {
        pointer-events: none; }
      #container span.has-menu div.model-menu {
        padding-top: 1em;
        font-size: 18px;
        line-height: 30px;
        position: fixed;
        text-align: right !important;
        left: auto;
        right: 0;
        top: 0;
        height: 100%;
        width: 50%;
        background-color: #efefef;
        border-right: #cccccc 1px solid; }
    #container div.send-email .members {
      column-count: 2; }
    #container div.bookings {
      column-count: 1; }
      #container div.bookings div.members {
        column-count: 2; }
    #container div.priska-list .members {
      column-count: 1; }
    #container table.list-table span.shrinkable {
      display: inline-block;
      width: 4em;
      overflow: hidden;
      text-overflow: ellipsis; }
    #container #content {
      /* Same air as the desktop rule -- only the left bleed changes, because
         the narrow-screen gutter is 22px rather than 40px. Without restating
         the vertical margins here the phone kept the old cramped 16px. */ }
      #container #content .section-title {
        margin: 34px 0 20px -16px; }
      #container #content .section-title:first-child {
        margin-top: 12px; }
      #container #content form.my {
        margin: 0;
        padding: 0; }
      #container #content div#wide-text {
        padding: 12px 12px 12px 12px;
        width: inherit;
        margin: 0; }
      #container #content table.month th {
        padding: 2px 2px; }
      #container #content div.calendar-info {
        width: 100%; }
      #container #content table.big-month {
        width: 100%;
        margin: 0; }
        #container #content table.big-month td {
          min-width: 0px; }
        #container #content table.big-month .note {
          padding: 4px 2px; }
        #container #content table.big-month div.event {
          white-space: normal; }
          #container #content table.big-month div.event .has-menu {
            display: inline-block;
            margin-bottom: 0.9em; }
      #container #content #sidebar {
        padding: 0;
        margin: 0;
        width: 100%;
        display: block; }
        #container #content #sidebar .my-twitter-widget {
          margin: 16px 32px; }
        #container #content #sidebar .top {
          display: block;
          margin: 0;
          width: 100%; } }

/****** very narrow screen ************************************************************/
/****** wide screen ***************************************************************/
@media all and (min-width: 900px) {
  #container #header .logo {
    font-size: 2em; }
  #container #sidebar {
    padding-bottom: 24px; } }

/****** fluid layout **************************************************************
 *
 * blogger/blog.scss pins the whole estate to a fixed 920px column above 900px
 * (div#container, div#footer-content, div#fixed-header, and a 568/272 float
 * pair for text/sidebar). That gem is shared with bg1, blog, michael, mywines
 * and oppidan, so the widths are overridden HERE rather than changed there.
 *
 * Below 900px nothing changes -- the existing full-width phone layout already
 * handles that and is not affected by any of this.
 */
/* Kept at the gem's 920px on purpose: the desktop layout is unchanged and the
   text column stays at a comfortable measure. The fix is that the width is now
   a MAXIMUM rather than a fixed size, so a viewport between 900 and 920px no
   longer overflows into a horizontal scrollbar.

   Raise --mrco-max-width to widen the site. Custom properties cannot be used in
   a @media condition, but these are values inside declarations, so they can. */
:root {
  --mrco-max-width: 920px; }

@media all and (min-width: 900px) {
  div#container,
  div#footer-content,
  div#fixed-header {
    width: 100%;
    max-width: var(--mrco-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box; }
  /* Two columns as flex rather than the gem's inline-block pair.
   *
   * The gem puts a 568px #text next to a 272px #sidebar inside 920px, which do
   * not add up -- so the row carried leftover space whose size depended on
   * inline-block whitespace. Every attempt to give the sidebar a gutter
   * matching the text column's 22px ended in a magic number that needed
   * re-checking whenever a width moved, and adding padding once pushed the
   * pair over the line so the sidebar wrapped BELOW the text.
   *
   * Flex removes the arithmetic: the sidebar keeps its 272px, the text column
   * takes whatever is left, and gap owns the space between them. The sidebar's
   * right edge lands on the container edge, so padding-right: 22px means
   * exactly 22px.
   *
   * This was tried and reverted earlier in the refresh because it shifts the
   * text column by ~12px, which changes where summary text wraps around a
   * floated thumbnail -- the homepage concert post lost its caption. TE has
   * since confirmed that content can be regenerated, and every page is being
   * reviewed anyway, so the trade is worth it.
   *
   * It also means the mobile layout below can simply become a column.
   */
  #container #content {
    display: flex;
    align-items: flex-start;
    gap: 22px; }
  div#text {
    float: none;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    /* without this a wide table refuses to shrink and overflows */ }
  div#sidebar {
    float: none;
    flex: 0 0 272px;
    width: 272px; }
  div#wide-text {
    width: auto;
    max-width: 100%; }
  .banner img#banner {
    max-width: 100%; } }

/* Below the desktop breakpoint the same flex container simply stacks. The
   gem's narrow-screen rules already set both columns to width:100%; making the
   direction explicit means the order is controlled here rather than emerging
   from the widths, and the sidebar sits under the content as it should. */
@media all and (max-width: 899px) {
  #container #content {
    display: flex;
    flex-direction: column;
    gap: 0; }
  #container #content > div#text,
  #container #content > div#sidebar {
    width: 100%;
    flex: 0 0 auto; }
  /* The narrow-screen rules zero the sidebar's padding while #text keeps its
     22px, so stacked they did not line up -- the sidebar ran edge to edge and
     looked wider than the content above it. Same gutters as #text. */
  #container #content > div#sidebar {
    padding-left: 22px;
    padding-right: 22px; }
  /* blog.scss:427 flows the narrow-screen sidebar in TWO columns. That suited a
     short list of links; with restricted blocks in there it puts the .top
     hatch strip in column one and the block itself in column two, so the strip
     appears to the LEFT of the box rather than above it. One column. */
  #container #content div#sidebar {
    -moz-column-count: 1;
    column-count: 1; }
  /* ...and the OTHER half of that two-column layout, which was missed.
   *
   * blog.scss:433 gives .side-box and .post `width: 38vw` -- half the screen,
   * because they were meant to sit two abreast. The column count went back to
   * one above but the width stayed, so a full-width sidebar contained a
   * 148px-wide paragraph on a 390px phone: "We are an amateur orchestra in
   * Cambridge, open to players of all levels" wrapped over five short lines
   * with two thirds of the screen empty beside it.
   *
   * Three ids to clear div#sidebar .side-box, which is one class-and-element
   * more specific than a bare #sidebar would be. */
  #container #content div#sidebar .side-box,
  #container #content div#sidebar .post {
    width: 100%; }
  /* The hatched cap is NOT hidden here. It still earns its place above plain
     sidebar content, where it caps the column; it is dropped only when a
     restricted block is present and draws its own frame -- see the :has()
     rules further up. */ }

/****** post summaries on narrow screens ******************************************
 *
 * .thumb-left/.thumb-right float the summary image (blog.scss:192). On a wide
 * screen that is exactly right -- the text wraps around the image and reads
 * well, so the floats are LEFT ALONE there.
 *
 * On a phone the column is too narrow for text to wrap sensibly beside a 38vw
 * image, and a short paragraph gets its tail stranded underneath: the summer
 * concert post currently renders as "Tickets are now available" / poster /
 * "from http://...". Below 700px the image simply stops floating and stacks.
 */
@media all and (max-width: 700px) {
  .summary .thumb-left,
  .summary .thumb-right {
    display: block; }
    .summary .thumb-left img,
    .summary .thumb-right img {
      float: none;
      display: block;
      margin: 0 0 10px 0;
      max-width: 100%;
      max-height: none; } }

/* experiment with new forms */
form.my fieldset.uform-group {
  --cols: repeat(auto-fit, minmax(180px, 1fr));
  display: grid;
  grid-template-columns: var(--cols);
  gap: 12px 16px;
  margin-bottom: 16px; }
  form.my fieldset.uform-group .uform-group__title {
    grid-column: 1 / -1;
    font-weight: 600;
    padding: 0 4px; }

@media (max-width: 600px) {
  .uform-group {
    --cols: 1fr; } }

.uform-field {
  display: flex;
  flex-direction: column; }
  .uform-field input:not([type="checkbox"]):not([type="file"]),
  .uform-field textarea,
  .uform-field select {
    width: 100%;
    box-sizing: border-box; }

.uform-field--full {
  grid-column: 1 / -1; }

.uform-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 12px; }

.uform-flags-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 24px;
  align-items: start; }