:root {
  --bgcolor: rgb(182 64 64 / 1.0);
  /* --bgcolor: rgb(57 112 55 / 1.0);*/
  /* --bgcolor: rgb(57  112  55 / 1.0); */

  --text: rgb(0 0 0 / 0.7);

  --border: lightgrey;
  --links: rgb(95 115 217 / 1.0);
  --call-out: rgb(245 245 245 / 1);
  --CTA-bg: rgb(182 64 64 / 1.0);
  --CTA-text: rgb(255 255 255 / 1.0);
  --hr: rgb(180 78 93 / 1.0); /* holly berrry red */

  --body: var(--bgcolor);
  --header: white;
  --article: white;
  --footer: white;

  --sans-serif: system-ui, sans-serif;
  --serif:      "Hoefler Text", ui-serif, serif;
  --mono:       ui-monospace, monospace;
}

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

  body {
    margin: 0.0rem auto;
    padding: 0.0rem 0.0rem;
    display: flex;
    flex-direction: column;
    font-size: 1.0rem;
    line-height: 1.5;
    min-height: 100dvh;
    color: var(--text);
    background-color: var(--body);
    font-family: var(--sans-serif);

    &.hidden { display: none }
    
    header {
      color: var(--text);
      background-color: var(--header);
      
      nav { /* menu including logo */	  
	ul {
	  margin: 0.0rem;
	  padding: 0.0rem;
	  display: flex;
	  align-items: center;
	  
	  li {
            display: flex;
	    margin: 0.0rem 1.0rem;
	    padding: 0.0rem;
	    font-weight: bold;
	    
	    &:first-child { /* logo */
              margin: 0.0rem;
	      margin-right: auto;
	      
	      img {
                width: 25.5rem;
		height: auto;
		border-radius: 0.5rem;
	      }
	    }
	  }
	}
      }
    }
    
    main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0.0rem auto;
      padding: 0.0rem;
      
      article {
        display: flex;
        flex-direction: column;
        margin: clamp(1.2rem, calc(0.19 * 100vw - 5.0rem), 4.0rem);
        padding: 1.0rem 2.0rem;
        max-width: 52.0rem;
        border-radius: 0.5rem;
        background-color: var(--article);
	

	strong { font-weight: bold; }
	a { color: var(--links); }
	 
	header {
	  color: light-dark(var(--ltext), var(--dtext));
	  background-color: light-dark(var(--lbackground), var(--dbackground));
	  
	  h1 {
	    margin: 0.0rem;
	    padding: 0.0rem;
            line-height: 1.1;
	    font-size: clamp(2.0rem, -0.875rem + 8.333vw, 2.8rem);
	    font-weight: 500;	    
	    letter-spacing: -0.05rem;
	    text-align: left;
            font-family: 'Playfair Display', sans-serif;
	  }

	  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 { /* applies to all article sections. */
	  padding: 0.0rem 0.5rem;
	  margin: 0.0rem auto;
	  font-family: var(--serif);
	  font-size: clamp(1.2rem, -0.875rem + 8.333vw, 1.4rem);
	  
	  p { margin-block: 1rlh; }
          
          hr {
            overflow: visible;
            margin: 2.5rem 0.0rem 1.0rem 0.0rem;
            padding: 0.0rem;
            border: none;
            border-top: thin solid var(--text);
            text-align: center;
          
          &::after {
              content: "";
              position: relative;
              top: -1.0rem;
              font-size: 1.5rem;
              padding: 0.0rem 0.5rem;
            
            }
          }
          

          section#intro {  order: 1; }
	  
          &[data-type="listicle"] { /* listicle start */
            order: 2;
  
	    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: 1.1rem;
		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: var(--call-out);
	      }
	      
	      button { /* cta */
		order: 5;
		font-weight: bold;
		font-size: inherit;
	        color: var(--CTA-text);
	        background-color: var(--CTA-bg);
		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"] { /* grid start */
            order: 3;

	    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 */
      } /* end of article */
    } /* end of main */

    footer {
      margin: 0.0rem;
      margin-top: auto;
      padding: 4.0rem 2.0rem;
      padding-bottom: 0.0rem;
      min-height: 4.0rem;
      border-bottom-left-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      color: var(--text);
      background-color: var(--footer);
      
      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: var(--text); }
	}
      }
      
      p {
	width: 44.0rem;
	margin: 1.0rem auto;
        font-size: 0.875rem;
	
	&.copyright { text-align: center; }
	span { margin-right: 0.125rem; }
      }
    } /* end of footer */
  } /* end of body */
} /* end of html */