html {
  margin: 0 auto;
  max-width: 720px;

  --accent: #0c399b;
}

body {
  font: 12pt/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 3em 1em;
  padding: 0 1em;
  letter-spacing: .02em;
  border-top: 5px solid var(--accent);
  border-bottom: 5px solid var(--accent);
}

header {
}

main {
  clear: both;
  margin-top: 2em;
}

h1 {
  font-size: 2em;
  letter-spacing: .07em;
  margin: 0;
}
h2 {
  font-size: 1.2em;
  margin: 0;
  color: var(--accent);
}

a {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  border-bottom: .1em solid;
}

p.tagline, p.region {
  margin: 0;
  letter-spacing: .04em;
}
p.region {
  font-style: italic;
}

p.brief {
  font-weight: bold;
}

ul {
  margin: 0.5em 0;
  padding: 0 0 0 1em;
  list-style: square;
}
ul > li {
  margin: 0 0 1em;
}
ul > li::marker {
  color: var(--accent);
}

img.profile {
  height: 7em;
  float: left;
  margin: 0 1em 0 0;
}

@media screen and (max-width: 600px) {
  body {
    margin: 1.5em 1em;
    font-size: 10pt;
  }
}

@media screen and (max-width: 400px) {
  img.profile {
    display: none;
  }
}