html {
  box-sizing:border-box;
  *, *:before,*:after { box-sizing:inherit; }

  body {
    margin: 0.0rem auto;
    padding: 0.0rem;
    font-size: 1.25rem;
    line-height: 1.5;
    overflow: auto;
    color: black;
    background-color: white;
    font-family: system-ui, "Helvetica Neue", Helvetica, sans-serif;
    
    header {
      margin: 0.0rem;
      padding: 0.0rem;
    }
    
    main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0.0rem auto;
      padding: 0.0rem;
      max-width: 75.0rem;
      min-height: calc(100vh - 20.0rem);
      
      article {
	margin: clamp(1.0rem, calc(0.19 * 100vw - 5.0rem), 4.0rem);

	strong { font-weight: bold; }

	a { color: rgb(20 110 180 / 1.0); }

	button {
	  color: rgb(255 255 255 / 1.0);
	  background-color: rgb(255 153 0 / 1.0);
	}
	 
	header {
	  h1 {
	    margin: 0.0rem;
	    padding: 0.0rem;
	    line-height: 1.1;
	    font-size: clamp(2.0rem, -0.875rem + 8.333vw, 3.6rem);
	    font-weight: 800;	    
	    letter-spacing: -0.125rem;
	    text-align: center;
	  }

	  ul { /* Byline*/
	    width: 100%;
	    margin: 0.0rem;
	    padding: 0.0rem;
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    
	    li {
	      margin: 0.0rem 0.25rem;
	      padding: 0.0rem 0.0rem;
	      display: flex;
	      align-items: center;
	      font-size: 1.25rem;
	      
	      img {
		height: auto;
		width: 100%;
		border-radius: 50%
	      }
	    }
	  }
	  
	  img {
	    height: auto;
	    width: 100%;
	    margin: 2.0rem 0.0rem;
	    margin-top: clamp(1.0rem, calc(0.19 * 100vw - 5.0rem), 2.0rem);
	    margin-bottom: clamp(1.0rem, calc(0.19 * 100vw - 5.0rem), 2.0rem);
	    border-radius: 0.5rem;
	  }
	}
	
	section {
	  padding: 0.0rem 0.5rem;
	  margin: 0.0rem auto;
	  max-width: 44.0rem;
	  font-size: clamp(1.25rem, -0.875rem + 8.333vw, 1.4rem);
	  font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif;
	  
	  p { margin: 1.0rem 0.0rem; }
	  
	  hr {
	    overflow: visible;
	    margin: 2.5rem 0.0rem 1.0rem 0.0rem;
	    padding: 0.0rem;
	    border: none;
	    border-top: thin solid black;
	    color: black;
	    text-align: center;
	    
	    &::after {
	      content: "//";
	      position: relative;
	      top: -1.0rem;
	      font-size: 1.25rem;
	      padding: 0.0rem 0.5rem;
	      background: white;
	    }
	  }
	}
      }
    }
    
    footer {
      margin: 0.0rem;
      padding: 4.0rem 2.0rem;
      min-height: 4.0rem;
      color: inherit;
      background-color: rgb(204 224 235 / 1.0);
      
      ul {
	width: 100%;
	margin: 0.25rem 0.5rem;
	padding: 0.0rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	li {
	  margin: 0.0rem 0.0rem;
	  padding: 0.25rem;
	  display: flex;
	  align-items: center;
	  white-space: nowrap;
	  color: rgb(20 110 180 / 1.0);
	  cursor: pointer;
	  font-weight: bold;
	  text-decoration: underline;
	}
      }
      
      p {
	width: 100%;
	margin: 0.5rem;
	
	&.copyright { text-align: center; }
	span { margin-right: 0.125rem; }
      }  
    }

    dialog[open] {
      display: flex;
      padding: 0.0rem 0.5rem;
      flex-direction: column;
      background-color: white;
      border: 1.0rem solid darkgrey;
      border-radius: 0.5rem;
      overflow: hidden;

      h1, h4, ul {
	margin: 0.5rem 1.0rem;
	padding: 0.0rem;
      }
      
      p {
	margin: 0.5rem 0.0rem;
	padding: 0.0rem;
	
	pre {
	  margin: 0.0rem 0.0rem;
	  padding: 0.0rem;
	}
      }
    }
  }
}