html, body {
  overflow-x: hidden;
}

body {
  margin: 0;

  font-family: "PT Serif";
  font-size: 1.20rem;
  background: oklch(0.35 0.09 145);
  color: #c2c7d0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 2.30rem;
}

@media (min-width:  576px) { section { max-width:  510px; border-radius: 0.4rem; } }
@media (min-width:  768px) { section { max-width:  700px; } }

header {
  display: flex;
  justify-content: center;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  list-style: none;
  column-gap: 0.3em;
}

nav ul li {
  padding: 0;
  white-space: nowrap;
}

nav ul li::before {
  content: "• ";
}

#title h1 {
  display: flex;
  flex-direction: column;
  color: #f0f0f0;
}
  
#title a {
  text-decoration: none;
}

#title .upper {
  margin: 0;
  font-size: 260%;
  display: flex;
  text-align: left;
}

#title .lower {
  margin: 0;
  margin-top: -10px;
  margin-right: 8px;
  font-size: 140%;
  display: flex;
  text-align: right;
}

section {
  width: 100%;
  background: #181c25;
  padding: 0.70rem 1.20rem;
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3);
  line-height: 140%;
  box-sizing: border-box;
}

h2, h3 {
  font-family: "EB Garamond";
  font-variant: small-caps;
  margin-top: 0.6em;
  margin-bottom: 5px;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

figure figcaption {
  font-style: italic;
  font-size: 80%;
  color: #aaa;
}

a, a:visited, a:hover {
  color: #8cc;
}

#Notices dl dt::before {
  content: 'ⓘ';
  color: #09c;
  font-weight: bold;
  font-size: 140%;
  padding-right: 0.3em;
  padding-left: 0.2em;
}

#Notices dl dt {
  font-weight: bold;
}

#Notices dl dd {
  margin-left: 3em;
}

#Publications table {
  /*white-space: nowrap; */
  width: 100%;
}

#Publications dl dt {
  font-weight: bold;
  margin-top: 0.7rem;
  margin-bottom: 0.3rem;
}

#Publications dl dd::before {
  content: '\1F4C4 ';
  padding-right: 0.3em;
}

#Councillors dl {
  margin-left: 2em;
}

#Councillors dl dt {
  font-weight: bold;
  margin-top: 0.4em;
}

.county-map {
  position: relative;
}

.county-map .pin {
  position: absolute;
  left: 0;
  top: 0;
}

footer {
  font-size: 80%;
  font-style: italic;
  color: #aaa;
}