* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #090b0e;
    color: #e8eaed;
    font-family: Arial, Helvetica, sans-serif;
}

main {
    max-width: 1050px;
    margin: 0 auto;
    padding: 70px 30px;
}

.hero {
    text-align: center;
    padding: 60px 0 80px;
}

.eyebrow,
.section-label {
    font-size: 12px;
    letter-spacing: 3px;
    color: #8d949e;
    font-weight: bold;
}

#doom-clock {
    margin-top: 32px;
    text-align: center;
}

.count-days {
    font-size: clamp(90px, 15vw, 170px);
    line-height: .82;
    font-weight: 700;
    letter-spacing: -8px;
}

.count-days span {
    display: block;
    margin-top: 25px;

    font-size: 13px;
    line-height: 1;
    letter-spacing: 5px;

    color: #8d949e;
}

.count-time {
    margin-top: 25px;

    font-family: monospace;
    font-size: 32px;
    letter-spacing: 5px;

    color: #aeb4bc;
}

.count-time i {
    padding: 0 8px;
    color: #555d66;
    font-style: normal;
}

.doom-date {
    margin-top: 30px;

    font-size: 18px;
    letter-spacing: 4px;

    color: #d6d9dd;
}

.movement {
    margin-top: 25px;
    font-size: 15px;
}

.danger {
    color: #ff6666;
}

.safe {
    color: #6dd59c;
}

.definition {
    max-width: 680px;
    margin: 35px auto 0;
    line-height: 1.7;
    color: #a5abb4;
}

.pressures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    padding: 40px 0;
    border-top: 1px solid #252930;
    border-bottom: 1px solid #252930;
}

.pressure span {
    font-size: 12px;
    letter-spacing: 2px;
    color: #90969f;
}

.pressure strong {
    display: block;
    font-size: 42px;
    margin: 8px 0 15px;
}

.bar {
    height: 5px;
    background: #24282e;
}

.fill {
    height: 100%;
}

.fill.capability {
    background: #d45b5b;
}

.fill.control {
    background: #5ab785;
}

.assessment {
    padding: 60px 0;
    border-bottom: 1px solid #252930;
}

.assessment p {
    max-width: 800px;
    font-size: 21px;
    line-height: 1.65;
}

.assessment small {
    color: #777e87;
}

.events {
    padding-top: 60px;
}

.event {
    padding: 35px 0;
    border-bottom: 1px solid #252930;
}

.event-meta {
    display: flex;
    gap: 20px;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #777e87;
}

.event-meta .capability {
    color: #ff6b6b;
}

.event-meta .control {
    color: #6dd59c;
}

.event-meta .mixed {
    color: #d6bd6a;
}

.event h2 {
    font-size: 22px;
    margin: 12px 0;
}

.event p {
    color: #a9afb7;
    line-height: 1.6;
    max-width: 850px;
}

.event a {
    color: #c5cad1;
    text-decoration: none;
    font-size: 13px;
}

.event a:hover {
    text-decoration: underline;
}

.review-warning {
    margin-top: 50px;
    padding: 25px;
    border: 1px solid #d45b5b;
    color: #ff7777;
    text-align: center;
    font-weight: bold;
}

@media (max-width: 700px) {

    main {
        padding: 30px 20px;
    }

    .hero {
        padding: 40px 0 60px;
    }

    .pressures {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .hero h1 {
        letter-spacing: -1px;
    }

    #doom-clock .time {
        display: block;
        margin: 8px 0 0;
    }
}

/* Voting buttons etc. */
.vote-section {
    padding: 60px 0;
    border-bottom: 1px solid #252930;
}

.vote-section h2 {
    margin-top: 18px;
    font-size: 25px;
}

.vote-section p {
    max-width: 700px;
    color: #9da4ad;
    line-height: 1.6;
}

.vote-buttons {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.vote-button {
    background: transparent;
    border: 1px solid #343a42;
    color: #b7bdc5;

    padding: 15px 25px;

    cursor: pointer;

    font-weight: bold;
    letter-spacing: 1px;
}

.vote-button:hover {
    border-color: #777;
}

.vote-button.closer.selected {
    color: #ff7777;
    border-color: #d45b5b;
}

.vote-button.further.selected {
    color: #6dd59c;
    border-color: #5ab785;
}

.vote-button span {
    margin-right: 7px;
}

.vote-results {
    display: flex;
    gap: 30px;

    margin-top: 25px;

    color: #777e87;
    font-size: 13px;
}

.vote-results strong {
    color: #d8dce1;
    margin-right: 3px;
}

@media (max-width: 700px) {

    .vote-buttons {
        flex-direction: column;
    }

    .vote-results {
        flex-direction: column;
        gap: 8px;
    }
}

/* EVENTs */
.events-header {
    padding: 40px 0 60px;
    border-bottom: 1px solid #252930;
}

.events-header .eyebrow {
    margin-top: 50px;
}

.events-header h1 {
    margin: 15px 0;
    font-size: clamp(42px, 7vw, 70px);
    letter-spacing: -2px;
}

.events-header p {
    max-width: 650px;
    color: #9da4ad;
    line-height: 1.6;
}

.back-link,
.all-events-link a {
    color: #8d949e;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
}

.back-link:hover,
.all-events-link a:hover {
    color: #e8eaed;
}

.all-events-link {
    padding: 35px 0 10px;
    text-align: center;
}

.event-date {
    color: #c7cbd0 !important;
}

.event-category {
    display: inline-block;
    margin-bottom: 10px;

    color: #777e87;

    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.why-it-matters {
    max-width: 850px;

    margin: 20px 0;
    padding-left: 20px;

    border-left: 2px solid #343a42;
}

.why-it-matters strong {
    font-size: 10px;
    letter-spacing: 2px;
    color: #777e87;
}

.why-it-matters p {
    margin: 8px 0 0;
}

.source-link {
    display: inline-block;
    margin-top: 8px;
}

/* FOOTER SPAM */
.site-footer {
    margin-top: 100px;
    padding: 35px 0 45px;

    border-top: 1px solid #171a1f;

    text-align: center;
}

.footer-keywords {
    font-size: 10px;
    letter-spacing: 1.8px;
    line-height: 2;

    color: #454b53;
}

.footer-keywords span {
    padding: 0 8px;
    color: #30353b;
}

.footer-note {
    margin-top: 10px;

    font-size: 10px;
    color: #353a41;
}

.footer-credit {
    margin-top: 18px;
    font-size: 10px;
    letter-spacing: 1px;
    color: #30353b;
}

.footer-credit a {
    color: #4b525b;
    text-decoration: none;
}

.footer-credit a:hover {
    color: #8d949e;
}

/* -------------------------------------------------
   Contact
------------------------------------------------- */

.contact-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 60px 0 100px;
}

.contact-heading {
    margin-top: 60px;
    margin-bottom: 50px;
}

.contact-heading h1 {
    margin: 12px 0 15px;

    font-size: clamp(48px, 8vw, 76px);
    letter-spacing: -3px;
}

.contact-heading p {
    max-width: 600px;

    color: #8d949e;
    line-height: 1.6;
}


.contact-form label {
    display: block;

    margin: 25px 0 8px;

    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;

    color: #737b85;
}


.contact-form input,
.contact-form textarea {
    width: 100%;

    padding: 15px;

    border: 1px solid #252a31;
    border-radius: 3px;

    background: #0d1014;
    color: #d6d9dd;

    font: inherit;

    outline: none;
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #555e69;
}


.contact-form textarea {
    min-height: 220px;
    resize: vertical;
}


.contact-form button {
    margin-top: 30px;
    padding: 15px 28px;

    border: 1px solid #3c444d;
    border-radius: 3px;

    background: #15191e;
    color: #d6d9dd;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;

    cursor: pointer;
}


.contact-form button:hover {
    background: #1c2127;
}


/*
 * Spam honeypot.
 * Keep outside visible page instead of display:none.
 */
.contact-honeypot {
    position: absolute;

    width: 1px;
    height: 1px;

    left: -10000px;

    overflow: hidden;
}


.contact-error,
.contact-success {
    margin-top: 40px;
    padding: 25px;

    background: #0d1014;
}


.contact-error {
    border-left: 2px solid #b85c5c;
    color: #d58c8c;
}


.contact-success {
    border-left: 2px solid #57a773;
}


.contact-success strong {
    font-size: 11px;
    letter-spacing: 2px;

    color: #8ec7a2;
}


.contact-success p {
    color: #8d949e;
}


.contact-success .contact-return {
    margin-top: 25px;

    font-size: 11px;
    color: #555d66;
}


.contact-success a {
    display: inline-block;

    margin-top: 15px;

    color: #8ec7a2;

    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;

    text-decoration: none;
}


.contact-success a:hover {
    color: #b5dfc3;
}