/* Top bar, wrap, the panel moulding, plain panelled sections. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--bar-top);
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--gutter);
  background: var(--panel);
  border-bottom: 1px solid var(--moulding);
}
.wordmark {
  font-weight: 500; font-size: 1.25rem; font-variant-caps: all-small-caps; letter-spacing: 0.06em;
  text-decoration: none;
}
.bar-name { display: none; }
@media (min-width: 900px) {
  .bar-name { display: inline; font-style: italic; font-size: var(--step--1); padding-left: var(--s2); border-left: 1px solid var(--moulding); line-height: 1.6; }
}

.wrap { width: 100%; max-width: 1312px; margin-inline: auto; padding-inline: var(--gutter); }
.panelled { position: relative; z-index: 2; background: var(--panel); padding-block: 56px; }
@media (min-width: 900px) { .panelled { padding-block: var(--s6); } }
.panelled h2 { font-size: var(--step-3); margin-bottom: var(--s3); }
.panelled p + p { margin-top: var(--s2); }

/* the one framing device: a rule with a second rule inset, like the wall panelling */
.mould {
  background: var(--pearl);
  border: 1px solid var(--moulding);
  box-shadow: inset 0 0 0 6px var(--pearl), inset 0 0 0 7px var(--moulding);
}