* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#canvas {
    position: absolute;
    background: white;
    z-index: 1;
    top: 0;
    left: 0;
}

#message {
    position: absolute;
    margin-top: 40px;
    margin-left: 12px;
    font-size: 100%;
    color: black;
    z-index: 10;
}

#navigation {
    position: absolute;
    top: 80%; /* Position at 80% down the screen for all devices */
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: clamp(0.5rem, 2vw, 3rem); /* Responsive gap with limits */
    font-family: 'Arial Black', Arial, sans-serif; /* Match logo font */
    font-size: clamp(1.5rem, 4.5vw, 6rem); /* Responsive font size smaller than logo */
    font-weight: 900; /* Match logo weight */
    letter-spacing: 0.2em; /* Match logo letter spacing */
    text-align: center;
    mix-blend-mode: screen; /* Match logo blend mode */
    z-index: 10;
}

/* Removed mobile-specific overrides - now using fully responsive vmin units */

#contact {
    color: white;
    pointer-events: auto; /* Override logo's pointer-events: none */
}

#contact a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

#contact a:hover {
    opacity: 1.0; /* Keep solid white */
}

#projects {
    color: white;
    cursor: pointer;
    position: relative;
    pointer-events: auto; /* Override logo's pointer-events: none */
}

#projects:hover {
    opacity: 1.0; /* Keep solid white */
}

#projects-dropdown {
    position: static; /* Remove absolute positioning */
    background: none; /* Remove button background */
    padding: 0; /* Remove padding */
    border-radius: 0; /* Remove border radius */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    margin-top: clamp(0.5rem, 1.5vw, 2rem); /* Responsive space from parent */
    white-space: nowrap;
    box-shadow: none; /* Remove drop shadow */
    display: flex; /* Horizontal layout */
    flex-direction: row;
    justify-content: center; /* Center the whole row */
    align-items: flex-start;
    gap: clamp(1rem, 3vw, 4rem); /* Gap between all items */
}

/* Spacers create invisible spacing */
.spacer {
    width: clamp(0.5rem, 1.5vw, 2rem); /* Smaller, balanced spacing */
    height: 1px; /* Minimal height */
    visibility: hidden; /* Invisible but takes up space */
    flex-shrink: 0; /* Don't let flex shrink the spacers */
}

#projects:hover #projects-dropdown {
    opacity: 1;
    visibility: visible;
}

.project-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative; /* For absolute positioning of dropdowns */
}

.project-name {
    color: white;
    text-decoration: none;
    font-family: 'Arial Black', Arial, sans-serif; /* Match header font */
    font-size: clamp(1.1rem, 3.4vw, 4.5rem); /* 75% of navigation size, responsive */
    font-weight: 900; /* Match header weight */
    letter-spacing: 0.2em; /* Match header letter spacing */
    mix-blend-mode: screen; /* Match header blend mode */
    opacity: 1.0; /* 100% opaque */
}

.project-name:hover {
    opacity: 1.0; /* Stay 100% opaque on hover */
}

/* Ensure links in project names are properly centered */
a.project-name {
    display: block; /* Make the link fill the container */
    text-align: center; /* Center the text */
}

.project-status {
    color: white;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(0.8rem, 2.5vw, 3rem); /* Smaller than project name */
    font-weight: 900;
    letter-spacing: 0.1em; /* Reduced letter spacing to fit better */
    mix-blend-mode: screen;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    position: absolute;
    top: 100%;
    margin-top: clamp(0.3rem, 1vw, 2rem);
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%); /* Center the (soon) text under each project */
}

/* Individual hover effects for each project */
#aegis-item:hover #aegis-soon {
    opacity: 1.0; /* 100% opaque */
    visibility: visible;
}

#gorgon-item:hover #gorgon-soon {
    opacity: 1.0; /* 100% opaque */
    visibility: visible;
}

/* Newtsim doesn't need a hover effect since it has no (soon) label */


#redacted-paragraph {
    position: absolute;
    top: 40%; /* Position at 40% down for all devices */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw; /* Responsive width for perfect rectangle */
    max-width: 80vmin; /* Scale with viewport size */
    min-width: 30vmin; /* Minimum width scales with viewport */
    z-index: 5;
    pointer-events: none;
    font-family: 'Times New Roman', serif; /* Use serif font for text measurement */
    font-size: 1.6vmin; /* Responsive font size */
    line-height: 1.2;
}

.redacted-line {
    display: flex;
    flex-wrap: nowrap; /* Don't wrap to maintain rectangle shape */
    gap: 4px; /* Space between words (like actual text) */
    margin-bottom: 4px; /* Gap between lines (like actual line spacing) */
    justify-content: center; /* Center each line horizontally */
    align-items: baseline; /* Align with text baseline */
}

.redacted-line:last-child {
    margin-bottom: 0; /* No gap after last line */
}

.redacted-word {
    height: 1.6vmin; /* Responsive height matching font size */
    background-color: black;
    display: inline-block;
    position: relative;
    /* Calculate width based on actual text content */
}

/* JavaScript will set exact widths based on text measurement */

.punctuation {
    color: white; /* Visible punctuation */
    font-family: 'Times New Roman', serif;
    font-size: 1.6vmin; /* Responsive font size */
    font-weight: normal;
    display: inline-block;
    margin: 0 0.1vmin; /* Responsive margin around punctuation */
    mix-blend-mode: screen;
    position: relative;
    top: -1.6vmin; /* Responsive alignment with text baseline */
}

#logo {
    position: absolute;
    top: 60%; /* Move down to 60% for all devices */
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(1.5rem, 5vw, 6rem); /* Smaller responsive font to ensure single line */
    font-weight: 900;
    color: white;
    z-index: 5;
    pointer-events: none;
    letter-spacing: clamp(0.05em, 0.5vw, 0.2em); /* Responsive letter spacing */
    text-align: center;
    mix-blend-mode: screen;
    white-space: nowrap; /* Force single line */
}