body {
    margin: 0;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    background-color: #fffef8;
    color: #222;
    line-height: 1.6;
    transition: background 0.3s, color 0.3s;
}

.high-contrast body {
    background-color: #000;
    color: #fff;
}

.site-header {
    text-align: center;
    padding: 2rem 1rem;
    border-bottom: 2px solid #000;
}
textarea, input, select {
    min-width: 280px;
}

.logo {
    max-width: 320px;
    height: auto;
    display: block;
    margin: 0 auto 0.5em;
}

.title {
    font-family: 'Courier New', monospace;
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    margin: 0;
}
/* Archive-specific message cards */
.message {
  padding: 1rem 1.5rem;
  margin: 2rem auto;
  max-width: 600px;
  font-style: italic;
  border-left: 4px solid #000;
  transition: border-color 0.3s;
  background: transparent;
}

.message[data-emotion="anger"]      { border-color: #e53935; }
.message[data-emotion="hope"]       { border-color: #43a047; }
.message[data-emotion="grief"]      { border-color: #5e5e5e; }
.message[data-emotion="joy"]        { border-color: #fbc02d; }
.message[data-emotion="numbness"]   { border-color: #757575; }
.message[data-emotion="fear"]       { border-color: #8e24aa; }

.quote-box {
  transition: color 0.4s ease;
  font-style: italic;
  background: transparent;
  margin: 2rem auto;
  padding: 1rem 2rem;
  max-width: 600px;
  border-left: none;
}

.meta {
    display: block;
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.5rem;
}



.subtitle {
    font-size: 1.2rem;
    font-weight: 300;
}

.main-nav {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    background-color: #000;
}
.autoplay-toggle {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.95rem;
    color: #ddd;
}

.nav-link {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.nav-link:hover {
    text-decoration: underline;
}

.content {
    padding: 2rem;
    text-align: center;
}



/* Emotion-specific overrides */
.quote-box[data-emotion="hope"]      { color: #1e88e5; } /* Virelin Blue */
.quote-box[data-emotion="anger"]     { color: #e53935; } /* Flame Red */
.quote-box[data-emotion="sorrow"]    { color: #5e5e5e; } /* Ash Grey */
.quote-box[data-emotion="joy"]       { color: #43a047; } /* Forest Green */
.quote-box[data-emotion="resilience"]{ color: #8e24aa; } /* Spirit Violet */
.quote-box[data-emotion="truth"]     { color: #00897b; } /* Deep Teal */
.quote-box[data-emotion="softness"]  { color: #f06292; } /* Blossom Pink */
.quote-box[data-emotion="pride"]     { color: #fbc02d; } /* Gold Yellow */
.quote-box[data-emotion="calm"]      { color: #90caf9; } /* Sky Blue */
.quote-box[data-emotion="dignity"]   { color: #6d4c41; } /* Earthen Brown */
.quote-box[data-emotion="bravery"]   { color: #f57c00; } /* Ember Orange */
.quote-box[data-emotion="revolution"]{ color: #d81b60; } /* Deep Rose */
.quote-box[data-emotion="justice"]   { color: #3949ab; } /* Indigo Truth */
.quote-box[data-emotion="freedom"]   { color: #00acc1; } /* Clear Cyan */
.quote-box[data-emotion="grief"]     { color: #757575; } /* Mourning Grey */
.quote-box[data-emotion="clarity"]   { color: #00c853; } /* Sharp Green */
.quote-box[data-emotion="acceptance"]{ color: #9e9d24; } /* Olive Understanding */
.quote-box[data-emotion="boldness"]  { color: #ab47bc; } /* Hero Purple */
.quote-box[data-emotion="endurance"] { color: #546e7a; } /* Steel Blue */

.site-footer {
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    color: #555;
    border-top: 1px solid #ccc;
}
#thank-you {
  background: #e0f7fa;
  color: #004d40;
  padding: 2rem;
  text-align: center;
  border: 2px dashed #00796b;
  max-width: 600px;
  margin: 2rem auto;
}

/* Submit form styling */
.submit-form textarea,
.submit-form input,
.submit-form select,
.submit-form button {
    width: 90%;
    max-width: 600px;
    margin: 0.5rem auto;
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: block;
}

.submit-form button {
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
}

.submit-form button:hover {
    background: #444;
}

/* Responsive layout */
@media screen and (max-width: 768px) {
    .main-nav {
        flex-direction: column;
        align-items: center;
    }

    .quote-box, .message {
        margin: 1rem;
    }
}