:root{ --cyan: 0,243,255; }

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Space Grotesk', ui-sans-serif, system-ui, Arial, sans-serif;
}

body{
  min-height:100vh;
  background:#000;
  color:#fff;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* Background layers */
#bg-net{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
#bg-vignette{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background: radial-gradient(ellipse at center,
    transparent 55%,
    rgba(0,0,0,.35) 80%,
    rgba(0,0,0,.65) 100%);
}

/* Header / Menu */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 2rem;
  background:transparent;
}
.logo{
  font-family: Arial, sans-serif; /* keep TOXOS non–Space Grotesk */
  font-size:2rem;
  font-weight:900;
  font-style:italic;
  color:rgb(var(--cyan));
  text-shadow:0 0 10px rgba(var(--cyan), .7);
  letter-spacing:2px;
  text-decoration:none;
}
.logo:visited { color: rgb(var(--cyan)); }

.hamburger{
  font-size:1.8rem;
  cursor:pointer;
  color:rgb(var(--cyan));
  text-shadow:0 0 8px rgba(var(--cyan), .7);
  transition:transform .3s;
  z-index:11;
}
.hamburger:hover{
  transform:scale(1.1);
  text-shadow:0 0 12px rgba(var(--cyan), 1);
}

.menu{
  position:fixed;
  top:0; right:-300px;
  width:300px; height:100vh;
  background: linear-gradient(
    to right,
    rgba(20,20,30,0.55) 0%,
    rgba(40,40,50,0.45) 40%,
    rgba(210,210,220,0.18) 100%
  );
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  transition:right .3s ease;
  z-index:12;
  padding:4rem 2rem;
  box-shadow:-5px 0 25px rgba(0,0,0,.45);
  border-left: 1px solid rgba(255,255,255,0.08);
}
.menu.active{ right:0; }
.menu ul{ list-style:none; }
.menu li{ margin:1.5rem 0; }
.menu a{
  color:rgb(var(--cyan));
  text-decoration:none;
  font-size:1.5rem;
  display:block;
  padding:.5rem 0;
  text-shadow:0 0 5px rgba(var(--cyan), .5);
  transition:all .3s;
}
.menu a:hover{
  color:#fff;
  text-shadow:0 0 10px rgba(0,243,255,1);
}
.close-menu{
  position:absolute;
  top:1rem; right:1rem;
  font-size:1.5rem;
  cursor:pointer;
  color:rgb(var(--cyan));
  text-shadow:0 0 8px rgba(var(--cyan), .7);
}

/* Content */
.content{
  position:relative;
  z-index:9;
  padding:2rem;
  max-width:1200px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;            /* keep heading centered */
  padding:6rem 2rem 3rem;       /* extra top space under fixed header */
}

/* Manifesto: collapsible + typewriter */
.manifesto{
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  max-width: 800px;
  width: 100%;
}
.manifesto-summary{
  display: grid;
  justify-items: center;
  gap: .4rem;
  list-style: none;
  cursor: pointer;
  outline: none;
}
.manifesto summary::-webkit-details-marker{ display:none; }
.manifesto summary::marker{ content: ''; }

.manifesto h2{
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700; /* use the loaded weight explicitly */
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

/* Arrow image that flips when open */
.arrow-icon{
  display:block;
  width: 28px; height: 28px;
  filter: drop-shadow(0 0 6px rgba(0,243,255,.75));
  transition: transform 250ms ease, opacity 200ms ease;
  opacity: .9;
}
.manifesto[open] .arrow-icon{ transform: rotate(180deg); }

/* Container roll (keeps the area from popping open) */
.manifesto .manifesto-content{
  display:block;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height 700ms ease, opacity 500ms ease;
}
.manifesto[open] .manifesto-content{
  max-height:3000px;
  opacity:1;
}

/* Left-align the typed text while keeping the block centered */
.manifesto .manifesto-inner{
  text-align:left;          /* stops lines from “sliding in” from center */
  max-width: 78ch;
  margin-inline:auto;
}

/* Paragraph styling */
.manifesto p{
  line-height: 1.8;
  margin: 1.2rem 0 0;
  font-size: 1.1rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* Caret on the paragraph currently being typed (matches JS .typing class) */
.manifesto p.typing::after{
  content:'';
  display:inline-block;
  width:2px;
  height:0.9em;
  background: rgba(0,243,255,.9);
  margin-left:2px;
  vertical-align:-0.12em;
  animation: blinkCaret .8s steps(1,end) infinite;
}
@keyframes blinkCaret { 50% { opacity:0; } }

/* Responsive tweaks */
@media (max-width:768px){
  .menu{ width:250px; }
  header{ padding:1.2rem; }
}
@media (max-width:480px){
  header{ padding:1rem; }
  .logo{ font-size:1.7rem; }
  .manifesto h2{ font-size:2rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .manifesto .manifesto-content{ transition:none; max-height:none; opacity:1; }
}

/* Smaller body text for the home-page manifesto only */
#manifesto-details .manifesto-inner p{
  font-size: 0.95rem;   /* was 1.1rem */
  line-height: 1.7;
}

/* Optional: tweak smaller on phones */
@media (max-width: 480px){
  #manifesto-details .manifesto-inner p{
    font-size: 0.9rem;
  }
}