/* custom css for Max */
/* base */
@import url("reset.css");

@font-face {
  font-family: TrueSans; 
  src: url(fonts/TrueSans-RegularWeb.woff); 
  src: url(fonts/TrueSans-RegularWeb.woff2);
}

html {
  font-size: 1rem;
}

hr {
    display: none;
}

/* and then */

body {
  font-family: 'TrueSans', Helvetica, Arial, sans-serif;
  font-size: 1.7rem;
  line-height: 2.1rem;
  letter-spacing: .005rem;
}

header, main, footer {
  width: calc(100vw - 3rem);
  margin: .75rem 1.5rem 20vh 1.5rem;
}

main {
  max-width: 50rem;
  margin: 2rem auto 5rem auto;
}

.home {
  position: relative;
  background-size: contain;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

a, a:visited, a:hover, a:active {
  color: #000;
  text-decoration: none;
}

  a:hover, 
  main a, main a:visited, main a:hover, main a:active,
  div.footnotes a, div.footnotes a:visited, div.footnotes a:hover, div.footnotes a:active  {
    border-bottom: 2.5px solid #000; 
  }

h1, h2, h3, h4 {
}

p {
  margin-bottom: 1.2rem;
}

nav {
  z-index: 999;
}

nav ul li {
  display: inline;
  margin-right: .75rem;
}

/* footnotes */

sup {
  vertical-align: baseline;
  position: relative; 
  top: -.5rem;
  margin-left: .1rem;
}

div.footnotes {
  margin-top: 2rem;
}

  div.footnotes ol li {
    font-size: 1.1rem;
    line-height: 1.3rem;
    list-style-type: decimal;
    margin-block-start: .5rem;
    margin-block-end: .5rem;
    list-style-position: inside;
  }

  div.footnotes ol li p {
    display: inline;
  } 

  a.footnote-backref {
    border: 0;
  }

/* images */

/* Your existing styles */
.media-grid {
  margin-top: 5.5rem;
  overflow-x: auto;
  line-height: normal !important;
}

.media-item {
  display: inline-block;
  margin: 0;
}

.media-img {
  display: inline-block;
  max-height: 200px;
  max-width: 200px;
  margin: 0 1.7rem 1.7rem 0;
}

a.lightbox-trigger {
  border: 0!important;
}

/* Featherlight overrides */
.featherlight .featherlight-content {
  border-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: 100vh !important;
  
  /* vertical centering */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Also center the image itself */
.featherlight .featherlight-image {
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  display: block !important;
  margin: auto !important;
}

/* Ensure the featherlight container is full screen */
.featherlight {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Dark background overlay */
.featherlight {
  background: #fff !important;
}

/* Hide default close button */
.featherlight-close-icon {
    display: none !important;
}

/* Add custom close via pseudo-element on the overlay */
.featherlight:before {
  content: "close";
  position: fixed;
    top: .75rem;
    right: 1.5rem;
  cursor: pointer;
  z-index: 99999;
  pointer-events: auto;
}

.featherlight:before:hover {
  background: rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.4);
  transform: scale(1.05);
}

/* Make featherlight clickable to close */
.featherlight {
  cursor: pointer;
}

/* But prevent cursor pointer on content */
.featherlight .featherlight-content {
  cursor: default;
}

/* mobile */

@media only screen and (max-width: 540px) {

  body {
    font-size: 1.3rem;
    line-height: 1.6rem;
  }

  header {
    margin-bottom: 3.6rem;
    line-height: 1.6rem;
  }

  main {
    margin: 0 1.5rem 3rem 1.5rem;
  }

  .home {
    height: 100vw;
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
  }

      .home nav ul li a, .home nav ul li a:visited, .home nav ul li a:hover, .home nav ul li a:active {
      /*color: #fff !important;*/
    }

  .media-img {
    display: inline-block;
    max-height: 120px;
    max-width: 120px;
    margin: 0 1.6rem 1.6rem 0;
  }

}