*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  color: #1c1c1a;
  background-color: #faf8f4;
  padding: 3rem 1.5rem;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

/* ── Header ── */

header {
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ccc7bc;
}

h1 {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.subtitle {
  font-style: italic;
  color: #666;
  font-size: 1rem;
}

/* ── CSS columns layout ── */

@media (min-width: 681px) {
  .panels {
    column-count: 2;
    column-gap: 4rem;
  }
}

/* ── Sections ── */

section {
  break-inside: avoid;
  display: flow-root; /* contains floated images */
  margin-bottom: 3rem;
}

h2 {
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #888;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 0.9em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: #2d4e78;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

em {
  font-style: italic;
}

/* ── Images ── */

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

.float-right {
  float: right;
  margin: 0.2em 0 0.8em 1.4em;
}

.float-left {
  float: left;
  margin: 0.2em 1.4em 0.8em 0;
}

/* Image sizes — percentages are relative to the column (section) width */
.small  { max-width: 33.33%; }
.medium { max-width: 50%; }
.wide   { width: 100%; margin: 1em 0; }

/* ── Mobile ── */

@media (max-width: 680px) {
  body {
    padding: 2rem 1rem;
    font-size: 17px;
  }

  h1 {
    font-size: 1.6rem;
  }

}