/* Global Styles */
body {
    background-color: #000;
    color: #FFF;
    font-family: 'Press Start 2P', cursive;
    padding: 20px;
    font-size: 16px; 
    text-align: center; 
}

h1 {
    font-size: 24px; 
    margin-bottom: 30px;
}

/* Navigation Styles */
nav ul {
    list-style-type: none; 
    padding: 0;
    margin-bottom: 30px; 
}

nav li {
    display: inline-block; 
    margin: 0 15px; 
}

nav a {
    color: #FFF; 
    text-decoration: none; 
}

nav a:hover {
    color: #AAA; 
}

/* Active page link */
nav a.active {
    color: #AAA; /* Use hover color to show it's active */
}

/* Homepage Logo */
.logo {
    display: block;
    margin-left: auto;    /* Auto margin left */
    margin-right: auto;   /* Auto margin right */
    margin-top: 10px;     /* Space above the logo */
    
    opacity: 0.4;         /* 40% transparent */
    
    /* Constrain the logo size */
    width: 80%;
    max-width: 1280px;    
    height: auto;         /* Maintain aspect ratio */
}

/* Content Wrapper for sub-pages */
.content-wrapper {
    max-width: 800px;
    margin: 40px auto; /* Center the block */
    text-align: left; /* Override body's center align */
}

.content-wrapper h2 {
    font-size: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #FFF;
    padding-bottom: 10px;
}

.content-wrapper h3 {
    font-size: 16px;
    color: #AAA;
    margin-top: 25px;
    margin-bottom: 15px;
}

.content-wrapper p, .content-wrapper ul {
    font-size: 14px; /* Slightly smaller for readability */
    line-height: 1.7;
    margin-bottom: 15px;
}

.content-wrapper ul {
    list-style-type: square;
    margin-left: 20px;
    padding-left: 10px;
}

.content-wrapper blockquote {
    font-style: italic;
    border-left: 4px solid #AAA;
    padding-left: 20px;
    margin: 25px 0;
    color: #DDD;
    font-size: 14px;
    line-height: 1.7;
}

.content-wrapper strong {
    color: #FFF;
}

.persona-section {
    margin-bottom: 40px;
}

/* --- STYLES FOR STORYBOARD --- */

.storyboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px; /* Space between panels */
    width: 100%;
}

.storyboard-panel {
    background-color: #1a1a1a; /* Dark gray bg */
    border: 2px solid #555; /* Gray border */
    padding: 15px;
    text-align: left;
    box-shadow: 5px 5px #333333; /* Pixelated shadow */
    display: flex;
    flex-direction: column; /* Stack image on top of text */
}

.storyboard-panel img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border: 2px solid #333;
    margin-bottom: 15px;
}

.storyboard-panel p {
    font-size: 12px; /* Smaller text for captions */
    line-height: 1.6;
    flex-grow: 1; 
}

/* --- NEW STYLES FOR DESIGN DOCS PAGE --- */

.sub-nav-list {
    list-style-type: none; /* Turn off default bullets */
    text-align: left;
    max-width: 600px;
    margin: 20px auto;
    padding-left: 0;
}

.sub-nav-list li {
    margin-bottom: 25px; /* Space out the links */
    background-color: #1a1a1a;
    border: 2px solid #555;
    padding: 15px;
    box-shadow: 5px 5px #333;
}

.sub-nav-list a {
    font-size: 16px; /* Make sub-links a bit bigger */
    color: #00FFFF; /* Bright cyan for links */
    text-decoration: none;
    display: block; /* Make the whole link clickable */
    margin-bottom: 5px;
}

.sub-nav-list a:hover {
    text-decoration: underline;
}

/* The small description text on the sub-nav */
.sub-nav-list p {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 0;
    color: #AAA;
}