/* mhm.css */

@font-face {
  font-family: "MHM Vollkorn";
  font-weight: normal;
  font-style: normal;
  src: url("MHMVollkorn-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "MHM Vollkorn";
  font-weight: normal;
  font-style: italic;
  src: url("MHMVollkorn-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "MHM Vollkorn";
  font-weight: bold;
  font-style: normal;
  src: url("MHMVollkorn-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "MHM Vollkorn";
  font-weight: bold;
  font-style: italic;
  src: url("MHMVollkorn-BoldItalic.woff2") format("woff2");
}
:root {
    font-family: "MHM Vollkorn", serif;
    font-variant-ligatures:
        contextual
        discretionary-ligatures;
    font-variant-numeric:
        proportional-nums
        lining-nums;
    /* consider also ss13 */
}

:root{
    /* The rest is more or less font-independent */
    font-size: 1.25rem; /* Typically 20px, but accessable. This is now 1rem. */
    text-rendering: optimizeLegibility;
    line-height: 1.3;
}

/* ((a+b)/a)=(a/b),(a+b)=1 ==> b = 0.3819660112501051rem */

body, main {
    padding: 1rem;
}

main {
    max-width: 40rem;
    border: 0.15rem solid black;
    margin: 0 auto;
}

h2, p {
    margin-bottom: 0.6rem;
}
p {
    margin-top: 0;
}

h1 {
    font-size: 2rem;
    margin-bottom: 0;
}

h2 {
    font-size: 1.33rem;
}

img.headshot {
    max-width: 100%;
    max-height: 80vh;
    margin: 0 auto 1em auto;
    display: block;
    text-align: center;
}


@media (min-width: 43em) { /* REMEMBER these are not rem! */
    img.headshot {
        float: right;
        max-width: 50%;
        max-height: unset;
        margin: 0 0 1em 1em;
    }
    .events-container {
        display: grid;
        grid-template-areas: "lhs . rhs";
        grid-template-columns: 1fr 2rem /*3.32rem*/ 1fr;
        width: fit-content;
        margin: 0 auto;
    }
    .events-container > section {
    }
    .events-container > section:nth-child(1) {
        grid-area: lhs;
    }
    .events-container > section:nth-child(2) {
        grid-area: rhs;
    }
}

.events-container > section > p:first-child {
    font-size: 1.16rem;
    font-style: italic;
    margin-bottom: 0;
}

main > header > p:first-child {
    /* in loving memory of */
    font-style: italic;
    margin-bottom: 0;
}

h1, .events-container > section > h2 {
    margin-top: 0;
}

section {
    margin-top: 1.66rem;
}

.events-container > section, :not(.events-container) > section > p {
    max-width: 32.66rem;
}

.sc {
    font-variant-caps: small-caps;
}

@supports ((font-variant-position: super)and (font-variant-position: sub)
           and (not ((-webkit-appearance: -apple-pay-button)
                     or (-webkit-appearance: color-well)))) {
    /*
      Safari claims to support font-variant-position, but it doesn't work!!!
      Thus, we need to detect Safari (after Blink forked from WebKit).
      The `-apple-pay-button` value is documented by [Apple] at, so hopefully
      they will be reliable. Per [MDN], they are "Available on the web
      starting in iOS 10.1 and macOS 10.12.1". There are older Safari
      versions that [would] [seem] also to be affected, so also test
      `color-well` as a fallback.

      [Apple]: https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css#3667431
      [MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
      [would]: https://caniuse.com/css-featurequeries
      [seem]: https://caniuse.com/mdn-css_properties_font-variant-position

      Per https://bug-148413-attachments.webkit.org/attachment.cgi?id=261847
      and https://groups.google.com/a/chromium.org/g/blink-dev/c/wQ_8T-AXLFA
      the issue might be that Firefox is performing synthesis. Given that
      `font-feature-settings: "sups"` doesn't work, this seems likely,
      but I haven't gotten it to work in Safari with **any** font thus far.
   */
    sup, sub {
        font-size: unset;
        position: unset;
        line-height: unset;
        vertical-align: unset;
    }
    sup {
        font-variant-position: super;
    }
    sub {
        font-variant-position: sub;
    }
}

a:link, a:visited {
    text-decoration: none;
    font-weight: bold;
    color: #E07400;
}
a:hover, a:active {
    color: black;
    background-color: /*#ed9e25*/ #F4C57E;
}