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

/* ========================================
   Base Body Styles + Sticky Footer Setup
   ======================================== */
html {
  height: 100%; }

body {
  margin: 0;
  color: #000;
  font-family: "Philosopher", sans-serif;
  font-size: 1.1em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: flex container pushes footer to bottom */
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

h1,
h2,
h3 {
  font-weight: 600;
  color: #000;
  font-family: "Philosopher", sans-serif;
  line-height: 1.5; }

h1 {
  color: #6C3082;
  font-size: 2.5em; }
  h1 a,
  h1 a:visited {
    text-decoration: none;
    color: #6C3082; }

h2 {
  font-size: 2em; }

a,
a:visited {
  color: #6C3082;
  text-decoration: underline;
  font-weight: bold; }

a:hover {
  color: #7851A9;
  text-decoration: underline; }

/* Center all images inside articles and ensure they fit the screen */
article img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Responsive Video Container */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Mathematical ratio for 16:9 video */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 2rem auto; /* Centers the container and adds vertical spacing */
}

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

/* Header - Full width, fixed height with bounds */
header {
  background: #6C3082;
  padding: 0px 15px;
  text-align: center;
  margin-top: 55px;
  /* Space for fixed nav */
  min-height: 120px;
  height: clamp(120px, 15vw, 200px);
  display: flex;
  justify-content: center;
  align-items: center; }

/* Header Tagline Styling */
.tagline {
  font-size: 3vw;
  color: #000;
  margin: 0; /* Keeps it neatly spaced */
  
  /* The "Eclipse" Effect: A tight bright white inner glow, and a wider soft outer glow */
  text-shadow: 
    0px 0px 10px rgba(255, 255, 255, 0.8), 
    0px 0px 20px rgba(0, 0, 0, 0.4);
}

/* Main content - grows to fill space, pushes footer down */
main {
  padding: 0 40px; /* Increased padding slightly so text doesn't touch the edges of the white box */
  max-width: 50em;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  flex: 1 0 auto;
  
  /* The Fix: Make the column opaque and float it above the particles */
  background-color: #FFFFFF;
  position: relative;
  z-index: 1; 
  
  /* Optional: A very subtle shadow to separate the reading column from the background */
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.05); 
}

time {
  color: #898989; }

.container {
  max-width: 50em;
  margin: 0 auto; }

/* ========================================
   Navigation - Flexbox with Mobile Support
   ======================================== */
aside {
  position: fixed;
  top: 0;
  left: 0;
  background: #FFF;
  width: 100%;
  z-index: 100;
  border-bottom: 1px solid white;
  box-shadow: 0px 1px 1px RGBA(4, 25, 54, 0.1);
  /* Main navigation menu */
  /* Hamburger button - hidden on desktop */
  /* Hamburger animation when open */
  /* Dropdown styles (kept for future use) */ }
  aside nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 50em;
    margin: 0 auto;
    padding: 0 1rem; }
  aside .nav-menu {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none; }
    aside .nav-menu li {
      position: relative; }
      aside .nav-menu li a {
        text-decoration: none;
        display: block;
        padding: 1rem;
        font-family: "Philosopher", sans-serif, sans-serif;
        font-size: 1em;
        line-height: 1.2;
        transition: background-color 0.2s ease, color 0.2s ease; }
        aside .nav-menu li a:hover, aside .nav-menu li a:active {
          background: #6C3082;
          text-decoration: none;
          color: #FFF; }
  aside .nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 101; }
  aside .hamburger {
    display: block;
    position: relative;
    width: 24px;
    height: 2px;
    background: #6C3082;
    transition: background 0.2s ease; }
    aside .hamburger::before, aside .hamburger::after {
      content: '';
      position: absolute;
      left: 0;
      width: 24px;
      height: 2px;
      background: #6C3082;
      transition: transform 0.3s ease; }
    aside .hamburger::before {
      top: -7px; }
    aside .hamburger::after {
      top: 7px; }
  aside .nav-toggle.is-open .hamburger {
    background: transparent; }
    aside .nav-toggle.is-open .hamburger::before {
      transform: rotate(45deg) translate(5px, 5px); }
    aside .nav-toggle.is-open .hamburger::after {
      transform: rotate(-45deg) translate(5px, -5px); }
  aside .dropdown {
    position: relative; }
  aside .dropdown .dropbtn {
    font-size: 1em;
    border: none;
    outline: none;
    color: #6C3082;
    padding: 1rem;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease; }
    aside .dropdown .dropbtn:hover {
      background: #6C3082;
      color: #FFF; }
  aside .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #FFF;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
    z-index: 10;
    border-radius: 0 0 4px 4px; }
    aside .dropdown-content a {
      color: #000;
      padding: 0.75rem 1rem;
      text-decoration: none;
      display: block;
      text-align: left;
      font-weight: normal; }
      aside .dropdown-content a:hover {
        background-color: #6C3082;
        color: #FFF; }
  aside .dropdown:hover .dropdown-content {
    display: block; }

/* ========================================
   Mobile Styles
   ======================================== */
@media screen and (max-width: 768px) {
  aside {
    /* Show hamburger on mobile */
    /* Hide menu by default on mobile */
    /* Show menu when open */
    /* Dropdown adjustments for mobile */ }
    aside nav {
      padding: 0.5rem 1rem; }
    aside .nav-toggle {
      display: block; }
    aside .nav-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: #FFF;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      z-index: 99; }
      aside .nav-menu li {
        width: 100%;
        text-align: center; }
        aside .nav-menu li a {
          padding: 1.25rem 2rem;
          font-size: 1.2em;
          border-bottom: 1px solid white; }
    aside .nav-menu.is-open {
      transform: translateX(0); }
    aside .dropdown-content {
      position: static;
      box-shadow: none;
      width: 100%;
      border-radius: 0; }
  /* Adjust header for mobile */
  header {
    margin-top: 35px;
    min-height: 100px;
    height: auto;
    padding: 1.5rem 15px; } }

/* ========================================
   Footer - Full width, sticky to bottom
   ======================================== */
footer {
  background: #6C3082;
  text-align: center;
  min-height: 60px;
  height: clamp(60px, 8vw, 100px);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Full width - matches header */
  width: 100%;
  /* Sticky footer: don't shrink */
  flex-shrink: 0;
  /* Remove the old margin, use margin-top for spacing from content */
  margin-top: auto;
  padding-top: 1rem;
  padding-bottom: 1rem; 
}

footer img {
  /* Prevent the image from ever being taller than the footer itself */
  max-height: 100%; 
  width: auto;
  
  /* This is the <img> equivalent of background-size: contain! */
  object-fit: contain; 
}

/* Particle Background Layer */
#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Pushes it strictly behind your content */
  pointer-events: none; /* Prevents it from blocking clicks on your links */
  transition: opacity 0.5s ease;
}

/* Ensure the containers trap the particles */
header, 
footer {
  position: relative; 
  overflow: hidden; 
}

/* The canvas containers for the specific particles */
.element-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Keep it strictly in the background of the header/footer */
  pointer-events: none;
}

/* Ensure your text and links sit above the new particle layer */
header > *, 
footer > * {
  position: relative;
  z-index: 1;
}

/* Hide entirely on mobile devices */
@media screen and (max-width: 768px) {
  #tsparticles {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  footer {
    min-height: 50px;
    height: auto;
    padding: 1rem; } }

/* --- Article Layout (Mobile-First) --- */
.article-layout {
    /* Flexbox naturally stacks the text on top and the sidebar on the bottom */
    display: flex;
    flex-direction: column; 
    
    /* Creates the anchor point for the desktop absolute positioning */
    position: relative; 
}

/* Base Sidebar Styling (Mobile - Sits cleanly at the bottom) */
.article-sidebar {
    position: relative;
    width: 100%;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 2px solid #eee; /* Horizontal line for mobile */
    border-left: none;
    padding-left: 0;
}

.sidebar-content h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #333;
}

/* --- Desktop Hanging Sidebar --- */
/* Only triggers when the screen is wide enough to safely fit the sidecar */
@media (min-width: 1200px) {
    .article-layout {
        /* Turns off Flexbox so the absolute positioning can take over */
        display: block; 
    }

    .article-sidebar {
        /* Rips it out of the bottom and pins it to the top right */
        position: absolute; 
        top: 0; 
        left: 100%; 
        
        width: 250px; 
        margin-left: 3rem; /* Creates the gap between text and sidebar */
        
        /* Swaps the mobile top-border for a desktop left-border */
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        border-left: 2px solid #eee;
        padding-left: 1.5rem;
    }
}

/* --- Directory Links Styling --- */
.adjacent-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.adjacent-links li {
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

.adjacent-links a {
    text-decoration: none;
    color: #6C3082; 
    font-weight: 500;
}

.adjacent-links a:hover {
    text-decoration: underline;
}

/**
 * Syntax highlighting styles
 */
.highlight {
  background: #fff; }
  .highlight .c {
    color: #998;
    font-style: italic; }
  .highlight .err {
    color: #a61717;
    background-color: #e3d2d2; }
  .highlight .k {
    font-weight: bold; }
  .highlight .o {
    font-weight: bold; }
  .highlight .cm {
    color: #998;
    font-style: italic; }
  .highlight .cp {
    color: #999;
    font-weight: bold; }
  .highlight .c1 {
    color: #998;
    font-style: italic; }
  .highlight .cs {
    color: #999;
    font-weight: bold;
    font-style: italic; }
  .highlight .gd {
    color: #000;
    background-color: #fdd; }
  .highlight .gd .x {
    color: #000;
    background-color: #faa; }
  .highlight .ge {
    font-style: italic; }
  .highlight .gr {
    color: #a00; }
  .highlight .gh {
    color: #999; }
  .highlight .gi {
    color: #000;
    background-color: #dfd; }
  .highlight .gi .x {
    color: #000;
    background-color: #afa; }
  .highlight .go {
    color: #888; }
  .highlight .gp {
    color: #555; }
  .highlight .gs {
    font-weight: bold; }
  .highlight .gu {
    color: #aaa; }
  .highlight .gt {
    color: #a00; }
  .highlight .kc {
    font-weight: bold; }
  .highlight .kd {
    font-weight: bold; }
  .highlight .kp {
    font-weight: bold; }
  .highlight .kr {
    font-weight: bold; }
  .highlight .kt {
    color: #458;
    font-weight: bold; }
  .highlight .m {
    color: #099; }
  .highlight .s {
    color: #d14; }
  .highlight .na {
    color: #008080; }
  .highlight .nb {
    color: #0086B3; }
  .highlight .nc {
    color: #458;
    font-weight: bold; }
  .highlight .no {
    color: #008080; }
  .highlight .ni {
    color: #800080; }
  .highlight .ne {
    color: #900;
    font-weight: bold; }
  .highlight .nf {
    color: #900;
    font-weight: bold; }
  .highlight .nn {
    color: #555; }
  .highlight .nt {
    color: #000080; }
  .highlight .nv {
    color: #008080; }
  .highlight .ow {
    font-weight: bold; }
  .highlight .w {
    color: #bbb; }
  .highlight .mf {
    color: #099; }
  .highlight .mh {
    color: #099; }
  .highlight .mi {
    color: #099; }
  .highlight .mo {
    color: #099; }
  .highlight .sb {
    color: #d14; }
  .highlight .sc {
    color: #d14; }
  .highlight .sd {
    color: #d14; }
  .highlight .s2 {
    color: #d14; }
  .highlight .se {
    color: #d14; }
  .highlight .sh {
    color: #d14; }
  .highlight .si {
    color: #d14; }
  .highlight .sx {
    color: #d14; }
  .highlight .sr {
    color: #009926; }
  .highlight .s1 {
    color: #d14; }
  .highlight .ss {
    color: #990073; }
  .highlight .bp {
    color: #999; }
  .highlight .vc {
    color: #008080; }
  .highlight .vg {
    color: #008080; }
  .highlight .vi {
    color: #008080; }
  .highlight .il {
    color: #099; }