/* --- minimal modern reset --- */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
body {
  margin: 0;                 /* removes the “weird margin” */
}
body, select, input, textarea {
    color: #333;
}
img {
  max-width: 100%;
  height: auto;
}
ul {
  list-style: none; /* keep your nav lists clean */
}
blockquote {
    padding: 16px; background: #eee;
}
body {
    font-size: 110%;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
}
.mra-ipa {
    font-family: "Noto Serif", serif;
}
article {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 16px;
}
@media (min-width: 600px) {
    article {
        padding: 0 20px;
    }
}
article > * + * {
    margin-top: 1.5rem;
}
h1 {
    font-size: 1.8rem;
    margin-top: 0; /* important */
}
h2 {
    font-size: 1.4rem;
}
h3 {
    font-size: 1.2rem;
}
h1, h2, h3 {
    line-height: 1.25;
    margin-top: 2rem;
}
p {
    margin: 0;
    max-width: 65ch;
}
p + p {
    margin-top: 2rem;
}
li + li {
    margin-top: 0.5rem;
}
.mra-date, .mra-copyright {
    font-size: medium;
    color: #666;
}
.mra-copyright {
    margin-top:0;
}
img {
    vertical-align: top;
}
.mra-article i {
    font-style:italic;
    font-weight:bold;
}
.articles-index-page ul {
  list-style: none;
  padding-left: 0;
}
.articles-index li {
  padding-top:8px;
}
.articles-index li .mra-date {
  font-size:small;
  display:none; /*hidden for now*/
}
.articles-index li a {
    font-weight:bold; 
}
ul li, ol li {
    margin-bottom:1em;
}
ul, ol {
    line-height:120%;
}
.mra-indent {
    margin-left:40px;
}
ol .mra-examples li {
    margin-bottom:0;
}
ul, .mra-bullets {
    list-style-type:disc;
}
.mra-no-bullets {
    list-style-type:none;
    padding-left:0;
}
.mra-list-horizontal li {
    display: inline;
    list-style-type: none;
    padding-right: 0px;
}

.mra-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.35em;
}

.mra-table {
    margin-bottom:1em;
}
.mra-table tr, th, td {
    vertical-align:top;
    text-align:left;
    padding:0.5em;
    border:1px solid gray;
}
table.no-borders tr, table.no-borders td {
    border: none;
}
table.no-padding, table.no-padding tr, table.no-padding td {
    margin:0;
    padding:0;
    padding-bottom:0;
    padding-right:0.5em;
}
.mra-table .bold td {
    font-weight:bold;
}
a {
    text-decoration:none;
}
.mra-responsive {
  width: 100%;
  height: auto;
}
.mra-highlight {
    background-color:Yellow;
}
.mra-container {
  border-radius: 5px;
  background-color: WhiteSmoke;
  padding: 20px;
  display:inline-block;
}
.mra-inset {
  border-radius: 5px;
  background-color: lightgray;
  padding: 20px;
  display:inline-block;
}
/* --- simple readable content rhythm --- */