:root {
  --base-font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  --base-font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

  --base-color-black: #171717;
  --base-color-green-jewel: #0f6838;
  --base-color-green-lime: #85c245;
  --base-color-pink: #bd0071;
  --base-color-red: #ff604a;
  --base-color-white: #fbfafa;

  --theme-font-display: var(--base-font-sans);
  --theme-font-heading: var(--base-font-serif);

  --theme-color-background: var(--base-color-black);
  --theme-color-copy: var(--base-color-white);

  --theme-content-width: 800px; /* Check image widths if this ever changes */
  --theme-large-width: 600px;
  --theme-gutter: 1rem;
}

@view-transition {
  navigation: auto;
}

html {
  background-color: var(--theme-color-background);
  color: var(--theme-color-copy);
  font-family: var(--theme-font-display);
}

body {
  margin: 0;
  padding: 0;

  /* Make content fill screen if too short (for double-bar bottom border at bottom or lower)  */
  display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns:100%;
  grid-template-areas: 'header' 'main' 'footer';
  min-height: 100svh;
}

header {
  grid-area: header;

  hr {
    border-top: var(--theme-gutter) solid var(--base-color-green-lime);
    border-bottom: var(--theme-gutter) solid var(--base-color-green-jewel);
    margin: 0;
  }
}

nav {
  text-align: center;
  font-size: 1.5rem;

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 0.5rem;
  }

  a {
    color: var(--theme-color-copy);
    padding: 0.25rem 0.5rem;
    transition: color 0.3s ease;
  }

  a:hover, a:focus-visible, a[aria-current=page] {
    color: var(--base-color-green-lime);
    border-bottom: 1px solid var(--base-color-green-lime);
  }
}

main {
  grid-area: main;
  padding: var(--theme-gutter);

  /* Then child grid to show main content in central column */
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr minmax(0, var(--theme-content-width)) 1fr;

  #wrapper {
    grid-area: 1 / 2 / 1 / 3;
  }

  #wrapper.full {
    grid-area: 1 / 1 / 1 / 4
  }

  a {
    text-decoration: underline;
    font-weight: 500;
  }
}

a {
  color: var(--theme-color-copy);
  text-decoration: none;

}

details {
  summary {
    cursor: pointer;
  }

  &::details-content {
    opacity: 0;
    transition:
      opacity 600ms,
      content-visibility 600ms allow-discrete;
  }

  &[open]::details-content {
    opacity: 1;
  }
}

footer {
  grid-area: footer;
  margin-top: auto; /* tie into `display: flex` on body to push footer to bottom of page if content is too short */
  text-align: center;

  hr {
    border-top: var(--theme-gutter) solid var(--base-color-red);
    border-bottom: var(--theme-gutter) solid var(--base-color-pink);
    margin: 0;
  }
}

.pronunciation {
  font-style: italic;
}

.hero {
  @media screen and (width >= 600px) {
    display: flex;
    gap: var(--theme-gutter);
  }

  blockquote {
    background: var(--base-color-green-lime);
    border-radius: var(--theme-gutter);
    border: 0.5rem solid var(--base-color-green-jewel);
    margin: 0;
  }

  p {
    margin: var(--theme-gutter);
  }

  p.credit {
    text-align: right;
  }

  img {
    border-radius: var(--theme-gutter);
  }

  picture {
    @media screen and (width < 600px) {
      display: block;
      text-align: center;
      margin: 1rem;
    }
  }
}

.priority_teasers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--theme-gutter);

  @media screen and (width >= 600px) {
    grid-template-columns: 1fr 1fr;

    .span-all {
      grid-column: span 2;
    }
  }

}

.priority_teaser {
  /* Hack around borders not having native gradient; define background with the gradient where the border would go (with transparent border below) */
  background: linear-gradient(var(--base-color-red) 0 0) padding-box, linear-gradient(to bottom, var(--base-color-pink), var(--base-color-red)) border-box;
  border-radius: var(--theme-gutter);
  border: 0.5rem solid transparent;
  color: var(--base-color-black);
  padding: 0.5rem var(--theme-gutter) 0;

  .priority_teaser__heading {
    margin-top: 0;
  }

  a {
    display: inline-block;
    color: var(--base-color-black);
    float: right;
    text-decoration: none;
    transition: transform 0.3s ease-in-out; 
  }

  & a:hover {
    text-decoration: none;
    transform: scale(1.5);
  }
}

section.gallery {
  display: flex;
  flex-wrap: wrap;
}

address {
  font-style: normal;
}