@font-face {
  font-family: "Manicotti-Regular";
  src: url("Manicotti.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@layer page {
  .wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 61rem;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
  }

  section {
    clear: both;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
    border: none;
  }

  figure {
    margin: 0.5em auto;
  }

  /* old-site "fill" bleed: figures span slightly past the wrapper */
  .fill {
    margin-left: -7.25%;
    width: 114.5%;
    max-width: 114.5%;
  }

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

  a {
    color: #359893;
    text-decoration: none;
  }
  a:hover {
    color: #56c4be;
  }

  h1 {
    font-family: "Manicotti-Regular", serif;
    font-size: 6em;
    font-weight: 400;
    margin: 0.05em 0 0;
    padding: 0 0 0.03em;
    overflow: visible;
    text-align: left;
  }

  h2 {
    font-family: "Manicotti-Regular", serif;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.2em;
    margin: 2rem 0 1rem;
  }

  h3 {
    font-weight: 400;
  }

  p {
    margin: 0 0 1em;
    font-size: 1.1em;
    line-height: 1.5;
  }

  /* Hero / infobar — Manicotti's brand orange */
  .infobar {
    background: #f85e22;
    color: #efefef;
    border: 0;
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: center;
  }
  .infobar h1 {
    color: #fdfdfd;
    text-align: center;
  }
  .infobar h3 {
    letter-spacing: 0.1em;
    text-align: center;
  }
  .infobar a {
    color: #fdfdfd;
    text-decoration: none;
  }

  .try-buy-pdf {
    text-align: center;
    margin-top: 1em;
  }

  .button {
    -moz-appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    background: #fff;
    color: #f85e22;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0 0.25em;
    padding: 0.6em 1.25em 0.4em;
    opacity: 0.85;
  }
  .button:hover {
    opacity: 1;
  }

  /* Light beige editorial sections */
  #story,
  #cyrillic-greek,
  #extras,
  .tertiary,
  .post-content,
  .more-button {
    background: #edeae2;
    color: #111;
  }

  #cyrillic-greek .button {
    background: #359893;
    color: #fdfdfd;
  }

  /* Cyrillic/Greek specimen sits on the orange field */
  #cyrillic-greek-specimen {
    background: #f85e22;
  }
  #cyrillic-greek-specimen a:hover {
    opacity: 0.92;
  }

  .post-content figcaption {
    font-size: 0.85em;
    font-style: italic;
    text-align: center;
    margin-top: 0.5em;
    color: #555;
  }

  .more-button {
    font-family: "Manicotti-Regular", serif;
    text-transform: none;
    text-align: center;
  }
  .more-button a {
    font-size: 4em;
    line-height: 1.2em;
    color: #359893;
  }

  @media screen and (max-width: 40rem) {
    h1 { font-size: 3.5em; }
    h2 { font-size: 1.8em; }
  }
}