/* === INTER FONTS (already set up correctly) === */

/* === BASE === */

html, body {
    margin: 0;
    padding: 0;
  }
  
  /* Root background: overscroll images */
  html {
    background: #1a1a1a url("stars-overscroll.webp") top center / cover no-repeat;
  }
  html:has(body.light-mode) {
    background: #f8f5e9 url("clouds-overscroll.webp") top center / cover no-repeat;
  }
  
  /* Base body styles */
  body {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    position: relative; /* stacking context for #top-bg */
    background: #1a1a1a; /* solid charcoal */
  }
  
  body.light-mode {
    color: #000000;
    background: #f8f5e9; /* solid ivory */
  }
  
  /* Sky band at top of page (scrolls away with content) */
  #top-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: clamp(320px, 70vh, 720px);
    z-index: 0;        
    pointer-events: none;
  
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
  }
  
  /* Ensure content paints above */
  main { position: relative; z-index: 1; }
  
  /* Dark mode band */
  body:not(.light-mode) #top-bg {
    background-image: url("stars.webp");
  }
  
  /* Light mode band */
  body.light-mode #top-bg {
    background-image: url("clouds.webp");
  }  

  
p {
    font-weight: 200;
    font-size: 16px;
    line-height: 1.55;       /* a little tighter */
    margin-bottom: 1.1em;
    color: #f2f2f2;          /* almost white, uneven */
  }

  p {
    font-weight: 200;
    font-size: 16px;
    line-height: 1.75;       /* more air between lines */
    margin-top: 1em;
    margin-bottom: 4em;      /* much more space between paragraphs */
  }
  
  /* --- HEADERS --- */
  h1 {
    font-weight: 900;
    margin: 0.2em 0 0.3em;
    letter-spacing: -0.05em;
    line-height: 0.95;
    text-transform: uppercase;
  }
  
  h2 {
    font-size: 1em;          /* smaller */
    font-weight: 700;          /* bold */
    text-decoration: underline;/* underline */
    margin-top: 1em;  
    margin-bottom: 0em; /* keeps the break before thesis starts */
    color: #f0d9a1;            /* dirty beige */
    text-transform: uppercase; /* all caps */
  }
  
  
  h3 {
    font-size: 1em;
    font-weight: 700;
    margin-top: 2em;          /* extra separation before thesis */
    margin-bottom: 0.8em;     /* space under thesis */
    color: #d8c48c;           /* dirty beige */
    text-transform: uppercase;
  }  
  
  
  /* === LINKS === */
  a, a:visited {
    color: #ffffff;
    text-decoration: underline;
  }
  a:hover, a:active {
    color: #f0d9a1;          /* beige on hover */
    background-color: #2a2a2a;
  }

  main > nav {
    font-size: 16px;
    font-weight: 400;
    padding: -1rem 0;   /* ↑ this one line makes the bar taller */
  }
  
  /* === SIDEBAR === */

  /* --- SIDEBAR TEXT --- */
#sidebar {
    font-size: 15px;      /* smaller than body */
    line-height: 1;     /* tighter vertical spacing */
    font-weight: 300;     /* lighter, less demanding */
    color: #bbb;          /* faded grey */
  }
  
  #sidebar a.active {
    color: #f0d9a1;          /* sync with h2 */
    font-weight: bold;
  }
  #sidebar {
    position: fixed;
    top: 0;
    left: 20px;
    width: 120px;
    z-index: 1000;
  }
  @media (min-width: 769px) {
    #sidebar { top: 20px; }
  }
  @media (max-width: 768px) {
    #sidebar {
      display: none;
      position: static;
      top: auto;
    }
  }
  #sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #sidebar > ul > li {
    margin-bottom: 18px;
  }
  #sidebar ul ul li {
    margin: 3px 0;
  }
  
  /* === GLITCHY SECTION NUMBERS === */
  .flipped {
    display: inline-block;
    transform: rotate(180deg) scaleX(-1);
    text-shadow: 1px 1px 2px red, -1px -1px 2px cyan;
  }

  #sidebar a {
    text-shadow: 1px 1px 2px red, -1px -1px 2px cyan;
  }
  
  
  /* === MAIN BODY === */
  main {
    margin-left: 170px;
    margin-right: 1.5in;    /* ~1.5 inch margin on the right */
    max-width: none;        /* let it expand */
  }
  @media (max-width: 768px) {
    main {
      margin-left: 0;
      margin-right: 0;    /* override the 1.5in */
      max-width: 100%;
      padding: 0 12px;    /* just a little breathing room */
    }
  }  
  
  .glitch-rgb {
    position: relative;
    display: inline-block;
  }
  
  .glitch-rgb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;   /* all images fill the container width */
    height: auto;  /* preserve aspect ratio */
    margin-left: 0;
  }  
  
  .glitch-rgb .base {
    position: relative;
    z-index: 1;   /* sits below */
  }
  
  .glitch-rgb .ghost {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;   /* sits above the base */
    opacity: 0;   /* hidden by default */
    transition: opacity 0s;
    mix-blend-mode: difference;
    pointer-events: none;
  }
  
  .glitch-rgb .red {
    transform: translateX(-2px);
  }
  
  .glitch-rgb .cyan {
    transform: translateX(2px);
  }

  @media (max-width: 768px) {
    .glitch-rgb {
      width: 110vw;        /* really wide on phones */
      max-width: none;    /* no artificial cap */
      margin-left: 0;     /* center it */
    }
    .glitch-rgb img {
      position: absolute;
      top: 0;
      left: 0;
      width: 110%;
      height: auto;
      margin-left: 0;
    }
  }
      
  
  .hero-block {
    position: relative; /* all children are in same context */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: -20px; 
    margin-bottom: 0em;
    isolation: isolate;          /* NEW: makes this a stacking context */
    z-index: 1;
  }

  .hero-block .glitch-rgb {
    position: relative;
    width: 80vw;        /* scales with screen */
    max-width: 600px;   /* cap so desktop isn’t absurd */
    aspect-ratio: 1/1;  /* square frame — adjust if your art is taller/wider */
    margin: 0 auto;     /* center */
  }
  
  .hero-block .glitch-rgb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;        /* force into the frame */
    height: 100%;
    object-fit: contain; /* preserve art proportions */
  }
  
  
  .hero-block h1 {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;             /* stretch across page */
    text-align: left;        /* align letters with left edge */
    font-size: 10rem;        /* fixed big size */
    line-height: 0.9;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    white-space: normal;     /* text wraps instead of shrinking */
    word-break: break-word;  /* force wrap if needed */
    mix-blend-mode: normal;  /* or your chosen blend */
  }  
  
  .hero-block h1 span {
    display: inline-block;
    position: relative;  /* lets us adjust top/left */
  }  
  
/* .hero-block h1 span:nth-child(odd) {
  top: -0.05em;
}
.hero-block h1 span:nth-child(even) {
  top: 0.05em;
} */
  
@keyframes letter-flicker {
    0%   { opacity: 1; }
    20%  { opacity: 0; }
    40%  { opacity: 1; }
    60%  { opacity: 0; }
    80%  { opacity: 1; }
    100% { opacity: 1; }
  }
  
  .hero-block h1 span.flicker {
    animation: letter-flicker 0.4s linear;
  }
  
  .hero-block .slogan {
    position: absolute;
    top: 65%;
    left: 10%;               /* anchor 10% from left edge */
    transform: none; 
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 400;         /* lighter than CERBERUS */
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: #ffffff;              /* light grey instead of beige */
    text-decoration: none;    /* remove global underline */
    z-index: 10;
  
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-block .slogan .word {
    display: inline-block;
    position: relative;
  }
  
  .hero-block .slogan-top {
    position: absolute;
    top: 35%;              /* tweak as needed to sit nicely above CERBERUS */
    left: 50%;
    font-size: 1.5rem;
    line-height: 1.1;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-decoration: none;
    z-index: 10;
  
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  
  .hero-block .slogan-top .word {
    display: inline-block;
    position: relative;
  }    

  .hero-block .intro-note {
    position: absolute;
    top: 10%;            /* above the .slogan-top (35%) */
    right: 3%;
    max-width: 30rem;
    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: 400;
    margin: 0;
    text-align: right;
    color: #efeae0;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    z-index: 12;
  }
  
  .hero-block .intro-note .intro-cta {
    font-weight: 600;
    white-space: nowrap;
  }
  
  body.light-mode .hero-block .intro-note {
    color: #111;
    text-shadow: none;
  }
          

  /* === MOBILE FIXES (below 768px) === */
  @media (max-width: 768px) {
    /* CERBERUS text */
    .hero-block h1 {
      font-size: 18vw;
      white-space: nowrap;
      text-align: center;
      line-height: 1;
      top: 70%;                 /* 🔑 controls CERBERUS vertical position */
      left: 50%;
      transform: translate(-50%, -50%);
    }
  
    /* Stack flow for intro */
    .hero-block {
      flex-direction: column;
      align-items: center;
      margin-top: 1em;
      position: relative;
    }
    .hero-block .intro-note {
      position: static;
      order: -1;
      max-width: 90%;
      margin: 1.5em auto 1.5em;   /* 🔑 top margin added */
      text-align: center;
      font-size: 1rem;
      line-height: 1.4;
    }
  
    /* Slogans anchored above/below CERBERUS */
    .hero-block .slogan-top {
      position: absolute;
      top: 63%;                 /* just above CERBERUS */
      left: 50%;
      transform: translateX(-50%);
      font-size: clamp(0.9rem, 4vw, 1.2rem);
      text-align: center;
      width: 90%;
    }
    .hero-block .slogan {
      position: absolute;
      top: 75%;                 /* just below CERBERUS */
      left: 50%;
      transform: translateX(-50%);
      font-size: clamp(0.9rem, 4vw, 1.2rem);
      text-align: center;
      width: 90%;
    }
  
    /* Image container fills hero vertically */
    .hero-block .glitch-rgb {
      width: 90vw;
      max-width: 500px;
      margin: 0 auto;
      aspect-ratio: 1/1;        /* keep square */
      position: relative;
      top: -20%;   /* 🔑 move the image upward */
    }
    .glitch-rgb img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  
    /* Keep toggle pinned */
    #mode-toggle {
      top: 10px;
      right: 10px;
    }
  }
    
  
 /* === LIGHT/DARK MODE TOGGLE === */
#mode-toggle {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: url("moon.png") center/cover no-repeat;
    cursor: pointer;
    z-index: 2000;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 0 12px rgba(200, 200, 255, 0.6),
                0 0 24px rgba(150, 150, 255, 0.4); /* glow on moon */
  }
  
  /* light mode button shows sun, no glow */
  body.light-mode #mode-toggle {
    background-image: url("sun.png");
    box-shadow: none;
  }
  
  /* smooth transitions */
  body {
    transition: background-color 0.4s, color 0.4s;
  }
  
  /* === DARK MODE (default) === */
  body {
    background-color: #1a1a1a;  /* charcoal */
    color: #ffffff;             /* main text */
  }
  
  p {
    color: #f2f2f2;
  }
  
  h2 {
    color: #f0d9a1;             /* dirty beige */
  }
  
  h3 {
    color: #d8c48c;             /* dirty beige variant */
  }
  
  a, a:visited {
    color: #ffffff;
  }
  a:hover, a:active {
    color: #f0d9a1;
    background-color: #2a2a2a;
  }
  
  /* === LIGHT MODE === */
  body.light-mode {
    background-color: #f8f5e9;  /* warm ivory */
    color: #222222;             /* near-black text */
  }
  
  body.light-mode p {
    color: #333333;             /* softer black body text */
  }
  
  body.light-mode h2,
  body.light-mode h3 {
    color: #654321;             /* earthy brown headers */
  }
  
  body.light-mode a,
  body.light-mode a:visited {
    color: #222222;
  }
  
  body.light-mode a:hover,
  body.light-mode a:active {
    color: #654321;
    background-color: #f0e8d2;
  }

  /* Hero slogans: white in dark mode, black in light mode */
body.light-mode .hero-block .slogan,
body.light-mode .hero-block .slogan-top {
  color: #000000;
}

/* Light mode: cycle images (green, cyan, white, ascii) */
body.light-mode .hero-block .glitch-rgb .base {
    filter: hue-rotate(180deg) saturate(1.5) brightness(1.2);
  }
  
  /* Special case: ASCII base needs true invert */
  body.light-mode .hero-block .glitch-rgb .base[src*="ascii"] {
    filter: invert(1) contrast(1.2);
  }
  
  /* Light mode: ghost overlays should follow the base shift */
  body.light-mode .hero-block .glitch-rgb .red,
  body.light-mode .hero-block .glitch-rgb .cyan {
    filter: hue-rotate(180deg) saturate(1.2) brightness(1.1);
    mix-blend-mode: exclusion !important;
  }