body, input, textarea {
       font-family: monospace;
       font-size: 14px;
       line-height: 1.5;
   }
   textarea, input {
       width: 300px;
       padding: 4px;
    }

   .hidden { display: none; }
   
   .h3, h3 {
       font-size: 1.75rem;
   }
   
   .h2, h2 {
       font-size: 2rem;
   }
   
   .h1, h1 {
       font-size: 2.5rem;
   }


   h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
   }
			   
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        margin-bottom: .5rem;
        font-weight: 500;
        line-height: 1.2;
   }

   p {
    margin-top: 0;
    margin-bottom: 1rem;
   }

    
    caption {
      caption-side: bottom;
      padding: 10px;
      font-weight: bold;
    }

   figure {
      display: block;        /* block so it obeys width naturally */
      width: fit-content; /*      width: 480px;         constrain the whole figure */
      max-width: 450px;
      /*max-width: 100%;*/
      margin: 0 auto;       /* for centering */
    }

    figure img {
      display: block;        /* removes inline gap below image */
      width: 100%;           /* fills figure width exactly */
      height: 450px;         /* fixed height */
      object-fit: cover;     /* crop to fill, no distortion */
      object-position: center;
    }

    figure figcaption {
      width: 100%;           /* runs the full width of the image above */
      padding: 0.75rem 1rem;
      background: #1a1a1a;
      color: var(--color-primary);
      /* font-family: 'Source Serif 4', serif; */
/*      font-size: 0.875rem;
      font-weight: 300; */
      font-style: italic;
/*      letter-spacing: 0.02em;
      line-height: 1.5; */
      text-align: left;
      margin-bottom: 1rem;
      box-sizing: border-box;
    }

    figure figcaption strong {
/* font-family: 'Playfair Display', serif; */
      font-style: normal;
      font-weight: 400;
      color: #ffffff;
      display: block;
/*      margin-bottom: 0.2rem;
      font-size: 0.95rem;
      letter-spacing: 0.04em; */
   }
   

    .imageContainer {
	margin: 10px;
        position: relative;
       overflow:hidden;	
    }
    
    .homepageImage {

/*       height: 100%;
       width: 100%;*/
       /*-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
       from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));*/       
    }
    
    .homepageImageCaption {
/*       float: left;
       bottom: 0px;
       left: 0px;
       right: 0px;
       padding-left: 2px;
       position: absolute;*/
       z-index: 1000;
       font-weight: bold;
       background-color: rgba(0, 0, 0, 0.8);
    }
    .homepageImageLabelArticle {
       font-size: 0.75em;		
       float: left;
       top: 0px;
       left: 0px;
       position: absolute;
       padding-left: 5px;
       padding-right: 5px;       
       z-index: 1000;
       font-weight: bold;
       color: #FFFFFF;
       background-color: #FF0000;
    }
    .homepageImageLabelEntry {
       font-size: 0.75em;	
       float: left;
       top: 0px;
       left: 0px;
       position: absolute;
       padding-left: 5px;
       padding-right: 5px;       
       z-index: 1000;
       font-weight: bold;
       color: #000000;
       background-color: #EEBB55;
    }

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
}
.legend-item {
    list-style-type: none;
}

        @font-face {
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
            unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
        }
            
     .hljs {
         color: var(--color-primary);
         background: rgba(20, 20, 20, 1); /*rgba(255, 255, 255, 0.03);*/
	 border-radius: 6px;
         /*border: 1px solid #fff;*/
     }
    @media (prefers-color-scheme: light) {
       .hljs {
           color: var(--color-primary-light);
           background: rgba(255, 255, 255, 0.98);
       }

    }

    pre {
        position: relative;
    }

    .copy-code-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        color: var(--color-primary);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid var(--color-accent1);
        border-radius: 4px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.15s ease, background 0.15s ease;
    }

    .copy-code-btn svg {
        pointer-events: none;
    }

    pre:hover .copy-code-btn {
        opacity: 1;
    }

    .copy-code-btn:hover {
        background: rgba(255, 255, 255, 0.18);
        border-color: var(--color-hover-border);
    }

    .copy-code-btn.copied {
        border-color: var(--color-hover-border);
        color: var(--color-hover-border);
    }

    @media (prefers-color-scheme: light) {
        .copy-code-btn {
            color: var(--color-primary-light);
            background: rgba(0, 0, 0, 0.05);
            border: 1px solid var(--color-accent1-light);
        }

        .copy-code-btn:hover {
            background: rgba(0, 0, 0, 0.1);
            border-color: var(--color-hover-border-light);
        }

        .copy-code-btn.copied {
            border-color: var(--color-hover-border-light);
            color: var(--color-hover-border-light);
        }
    }
    
     
:root {
    --color-primary: #D0C7CA; /*ECDFCC*/
    --color-primary-light: #000000;
    
    --color-background:#160b0a; /* #181C14;*/
    --color-background-light:#CCCCCC; /* #181C14;*/
    
    --color-accent1: #999999; /*#3C3D37;*/
    --color-accent1-light: #444444;
    
    --color-accent2: #F6B8D0; /*Pastel Rose*/ /*#697565;*/
    --color-accent2-light: #D5A18E; /*Rosy Taupe*/
    
    --color-hover:#D0C7CA;
    --color-hover-light:#333333;
    
    --color-hover-border:#E7D27C;/*#EEBB55;*/ /*#d10a11;*/
    --color-hover-border-light:#FF0000/*#163588;*/
}





     body {
         font-family: 'Roboto Mono', sans-serif;
         margin: 0;
         padding: 0;
         height: 100%;
         background-repeat: no-repeat;
         background-attachment: fixed;

         background-color: var(--color-background);
	 background-image:linear-gradient(90deg,rgba(115, 104, 104, 0.4) 0%, rgba(207, 151, 151, 0.4) 0%, rgba(166, 134, 161, 0.4) 49%, rgba(130, 122, 96, 0.4) 100%);
         /*background-image: linear-gradient(to right top, #181c14, #181710, #17130d, #130e0a, #0d0807, #120a08, #160b0a, #1a0d0c, #25150f, #2e1c0e, #34250d, #36300d);*/
 	 /*background-image: linear-gradient(to right top,rgba(120, 120, 120, 1) 0%, rgba(99, 99, 99, 1) 33%, rgba(75, 75, 75, 1) 66%, rgba(66, 66, 66, 1) 100%);*/
         color: var(--color-primary); 
     }


    @media (prefers-color-scheme: light) {
        body {
         background-color: var(--color-background-light);
	 background-image:linear-gradient(90deg,rgba(215, 204, 204, 0.4) 0%, rgba(255, 251, 251, 0.4) 0%, rgba(255, 234, 255, 0.4) 49%, rgba(230, 222, 196, 0.4) 100%);
         color: var(--color-primary-light); 
        }
    }


     a:-webkit-any-link {

     }
     
     a,a:hover {
         text-decoration: none;
         border-bottom: 2px solid var(--color-hover-border);
         color: var(--color-hover);
     }

     @media (prefers-color-scheme: light) {
         a,a:hover {
             border-bottom: 2px solid var(--color-hover-border-light);
             color: var(--color-hover-light);
         }
     }	 

     #websiteTitle {
	 font-family: "Major Mono Display";
         font-optical-sizing: auto;
         font-weight: 700;	 
         font-style: bold;
         font-size: 20px;
         border-bottom: none;
         text-decoration: none;
         color: var(--color-primary);
     }

     @media (prefers-color-scheme: light) { 
         #websiteTitle {
             color: var(--color-primary-light);
         }
     }

	  
     h1, h2, h3, h4, h5, h6 {
         font-family: "Arvo", serif;
	 font-weight: 400;
	 font-style: normal;
         /*font-family: "Major Mono Display";*/         
         color: var(--color-accent2);
     }

     @media (prefers-color-scheme: light) { 
         h1, h2, h3, h4, h5, h6 {
             color: var(--color-accent2-light);
         }
     }

	  
     #logo {
        max-width:180px;
        max-height:100px;
        margin-top:1em;
        margin-bottom:1em;
     }

     h1 {
         margin-top:0px;
     }

     #worksheet_container {
         display: block;
         overflow: auto;
         width: 100%;
     }
     
     #worksheet {
         //width:100%;
         //height:100%;
     }
     
     #drawing {
         width: 100%;
     }
     
     header {
         text-align: center;
	 background: #696969;
	 background: linear-gradient(90deg,rgba(30, 30, 30, 0.2) 0%, rgba(20, 20, 20, 1) 33%, rgba(20, 20, 20, 1) 66%, rgba(30, 30, 30, 0.2) 100%);
         position: fixed;
         width: 100%;
         left: 50%;
         transform: translate(-50%, 0);
	 z-index: 2147483647; /* The MathJax-rendered Latex formulae pop over the header if I don't specify the z-index */
     }

     @media (prefers-color-scheme: light) {
 	  header {
  	      background: #A7A7A7;
  	      background: linear-gradient(90deg,rgba(220, 220, 220, 0.2) 0%, rgba(230, 230, 230, 1) 33%, rgba(230, 230, 230, 1) 66%, rgba(220, 220, 220, 0.2) 100%);
	  }
     }

     
     article {
         font-size: 18px;/*16px;*/
         max-width:50em;
         padding-top: 3em;
         padding-bottom: 16px;
         padding-left: 16px;
         padding-right: 16px;

         margin: auto;
     }

     .container {
         position: relative;
         width: 100%;
         height: 0;
         padding-bottom: 56.25%
     }

     .video {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
     }

     .quote-left, .quote-right {
        font-weight: 700;
        font-size: 22px;
        line-height: 28px;             
     }
        
     @media screen and (max-width: 767px) {
        .quote-left, .quote-right {
            float: none;
            max-width: 100%;
            width: 100%;
            margin-top: 10px;
            margin-right: 30px;
            margin-bottom: 30px;
            margin-left: 5px;
        }
     }

     @media screen and (min-width: 768px) and (max-width: 1190px) {
        .quote-left, .quote-right {
            width: 300px;
            position: relative;
            background-color: #fff;
            margin-top: 30px;
            margin-right: 30px;
            margin-bottom: 30px;
            margin-left: 30px;
        }

        .quote-left {
            float: left;
        }

        .quote-right {
            float: right;
        }
     }

     @media screen and (min-width: 1191px) {
         .quote-left, .quote-right {
             width: 300px;
             position: relative;
             color: var(--color-primary);             
             background-color: var(--color-background);
         }

         @media (prefers-color-scheme: light) { 
             .quote-left, .quote-right {
                 color: var(--color-primary-light);             
                 background-color: var(--color-background-light);
             }
	 }

        .quote-left {
            float: left;
            margin-top: 40px;
            margin-right: 40px;
            margin-bottom: 40px;
            margin-left: -65px;
        }

        .quote-right {
            float: right;
            margin-top: 40px;
            margin-right: -65px;
            margin-bottom: 40px;
            margin-left: 40px;
        }

     }

.dateLabel {
    display: table;
    margin-left: auto;
    font-style: italic;
    font-size: 1em;
    padding-left: 5px;
    padding-right: 5px;       
    z-index: 1000;
    color: var(--color-primary);
}

@media (prefers-color-scheme: light) { 
         .dateLabel {
                 color: var(--color-primary-light);             
             }
}

.floaty {
  float: left; /*added this line*/
}

.textInputWrapper {
  position: relative;
  width: 250px;
  margin: 0px 5px;
  --accent-color: var(--color-hover-border);
}

.textInputWrapper:before {
  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

.textInputWrapper:before,
.textInputWrapper:after {
  content: "";
  left: 0;
  right: 0;
  position: absolute;
  pointer-events: none;
  bottom: -1px;
  z-index: 4;
  width: 100%;
}

.textInputWrapper:focus-within:before {
  border-bottom: 1px solid var(--accent-color);
}

.textInputWrapper:before {
  transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
}

.textInputWrapper:focus-within:before {
  border-bottom: 1px solid var(--accent-color);
  transform: scaleX(1);
}

.textInputWrapper:focus-within:after {
  border-bottom: 2px solid var(--accent-color);
  transform: scaleX(1);
}

.textInputWrapper:after {
  content: "";
  transform: scaleX(0);
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  will-change: transform;
  border-bottom: 2px solid var(--accent-color);
  border-bottom-color: var(--accent-color);
}

.textInput::placeholder {
  transition: opacity 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  opacity: 1;
  user-select: none;
  color: rgba(255, 255, 255, 0.582);
}

.textInputWrapper .textInput {
  border-radius: 5px 5px 0px 0px;
  box-shadow: 0px 2px 5px rgb(35 35 35 / 30%);
  max-height: 36px;
  background-color: #252525;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 200ms;
  transition-property: background-color;
  color: #e8e8e8;
  font-size: 14px;
  font-weight: 500;
  padding: 12px;
  width: 100%;
  border-left: none;
  border-bottom: none;
  border-right: none;
}

.textInputWrapper .textInput:focus,
.textInputWrapper .textInput:active {
  outline: none;
}

.textInputWrapper:focus-within .textInput,
.textInputWrapper .textInput:focus,
.textInputWrapper .textInput:active {
  background-color: #353535;
}

.textInputWrapper:focus-within .textInput::placeholder {
  opacity: 0;
}


/* BUTTON */
.button {
  cursor: pointer;
  position: relative;
  padding: 5px 12px;
  font-size: 14px;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  background-color: transparent;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
}

.button::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: inherit;
  scale: 0;
  z-index: -1;
  background-color: var(--color-primary);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button:hover::before {
  scale: 3;
}

.button:hover {
  color: #212121;
  box-shadow: 0 0px 20px rgba(193, 163, 98,0.4);
}

.button:active {
  scale: 1;
}



/* ─── Core card container ─────────────────────────── */
.card {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
}
/* ─── Background image ────────────────────────────── */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slightly darken the whole image */
  filter: brightness(0.85); /* formerly 0.65 */
}
/* ─── Dark gradient scrim on the left side ────────── */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.45) 25%, /* formerly 55 */
    rgba(0, 0, 0, 0.0) 90% /* formerly 100 */
  );
}

/* ─── Text overlay ────────────────────────────────── */
.overlay-text {
  position: absolute;
  /* Vertically + horizontally positioned like the example */
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  z-index: 2;       /* sits above the ::after scrim */
  max-width: 55%;
}

.overlay-text .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.75);
/*  font-family: 'Source Sans 3', sans-serif;*/
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.overlay-text .eyebrow svg {
  flex-shrink: 0;
}

.overlay-text h1 {
  /*font-family: 'Playfair Display', Georgia, serif;*/
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.18;
  letter-spacing: -0.01em;
  /* Subtle text shadow for legibility over busy backgrounds */
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}





figure table {
  width: 100%;
  border-collapse: collapse;
/*  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.9rem;*/
  color: #d4c9bb;
}

figure table th {
/*  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;*/
  color: #e8dfd0;
  text-align: left;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid #6b5a52;
}

figure table td {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid #4a3a34;
  font-weight: 300;
  color: #c4b9ab;
}