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

  body {
    margin: 0.0rem auto;
    padding: 0.0rem;
    font-size: 1.0rem;
    font-family: system-ui, "Helvetica Neue", Helvetica, sans-serif;
    line-height: 1.5;
    overflow: auto;
    color: black;
    background-color: white;
    
    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(184 9 9 / 1); }

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

	  blockquote {
	    margin: 0.75rem;
	    padding: 0.0rem;
	    font-size: clamp(1.0rem, -0.875rem + 8.333vw, 1.4rem);
	    text-align: center;
	  }

	  img {
	    height: auto;
	    width: 100%;
	    margin-top: clamp(1.0rem, calc(0.19 * 100vw - 5.0rem), 4.0rem);
	    margin-bottom: clamp(1.0rem, calc(0.19 * 100vw - 5.0rem), 4.0rem);
	    border-radius: 0.5rem;
	  }
	}

	section {
	  padding: 0.0rem 0.5rem;
	  margin: 0.0rem auto;
	  max-width: 44.0rem;
	  font-size: clamp(1.0rem, -0.875rem + 8.333vw, 1.4rem);
	  font-family: "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.5rem;
	      padding: 0.0rem 0.5rem;
	      background: white;
	    }
	  }

	  &[data-type="listicle"] {
	    ul {
	      display: flex;
	      flex-direction: column;
	      margin: 0.0rem 0.0rem;
	      padding: 0;
	      list-style: none;
	      counter-reset: list-number;
	    }
	    
	    li {
	      display: flex;
	      flex-direction: column;
	      margin: 0.0rem 0.0rem;
	      
	      h1 {
		order: 1;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		margin: 0.0rem;
		padding: 0.0rem;
		line-height: 1.1;
		font-size: clamp(1.5rem, -0.875rem + 8.333vw, 2.0rem);
		counter-increment: list-number;
		
		&:before {
		  content: counter(list-number) ".";
		  margin-right: 0.5rem;
		}
		
		p {
		  margin: 0.0rem;
		  padding: 0.0rem;
		}
	      }
	      
	      figure {
		order: 2;
		margin: 0.0rem;
		padding: 0.0rem;
		
		img {
		  width: 100%;
		  height: auto;
		  border-radius: 0.5rem;
		}
	      }
	      
	      article {
		order: 3;
		margin: 0.0rem;
		padding: 0.0rem;
		
		ul, li {
		  list-style: initial;
		  display: list-item;
		  margin-left: 2.5rem;
		}
		
		li {
		  margin: 0;
		  padding: 0;
		}
	      }
	      
	      aside { /* call-out */
		order: 4;
		padding: 1.0rem;
		margin: 1.0rem 0.0rem;
		border-radius: 0.25rem;
		color: black;
		background-color: rgb(245 245 245 / 1);
	      }
	      
	      button { /* cta */
		order: 5;
		font-weight: bold;
		font-size: inherit;
		white-space: normal;
		border-radius: 0.25rem;
		width: 100%;
		border: none;
		margin-bottom: 1.5rem;
		padding: 1.0rem;
		vertical-align: middle;
		overflow: hidden;
		text-align: center;
		cursor: pointer;
	      }
	      
	      hr { margin: 2.5rem 0.0rem 1.0rem 0.0rem;  order: 6; } 
	    }
	  } /* end of listicle */
	  
	  &[data-type="grid"] {
	    article {
	      margin: 0.0rem;
	      padding: 0.0rem;
	      
	      h1 { font-size: clamp(1.5rem, -0.875rem + 8.333vw, 2.0rem); }
	      
	      ul {
		width: 100%;
		margin: 0.0rem 0.0rem;
		padding: 0.0rem;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-around;
		align-content: center;
		
		li {
		  margin: 1.0rem 0.25rem;
		  padding: 0.0rem;
		  display: flex;
		  align-items: center;
		  cursor: pointer;
		  
		  figure {
		    margin: 0.0rem;
		    padding: 0.0rem;
		    width: 13.5rem;
		    
		    img {
		      width: 100%;
		      height: auto;
		      border-radius: 0.5rem;
		    }
		    
		    figcaption { font-size: 1.0rem; }
		  }
		}
	      }
	    }
	  } /* end of &#grid */
	} /* end of section */
      }
    }
    
    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.0rem;
	padding: 0.0rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	
	li {
	  margin: 0.0rem 0.25rem;
	  padding: 0.25rem;
	  display: flex;
	  align-items: center;
	  white-space: nowrap;
	  
	  a { color: rgb(133 191 75 / 1.0); }
	}
      }
      
      p {
	width: 100%;
	margin: 0.5rem;
	
	&.copyright { text-align: center; }
	span { margin-right: 0.125rem; }
      }
    }
  }
}