html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #e8d8ad;
    color: #2f2b24;
    line-height: 1.7;
}

/* ==========================================
   HEADER
========================================== */

header {
    position: relative;
    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        ),
        url("../images/stem_complex_winter.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: white;
    text-align: center;

    padding: 7rem 2rem;
}

header h1 {
    margin: 0;
    font-size: 3.5rem;
    font-weight: 700;
}

.subtitle {
    margin-top: 1rem;
    font-size: 1.35rem;
    font-weight: 400;
}

header::after {
    content: "";
    display: block;
    width: 140px;
    height: 2px;
    background: rgba(255,255,255,.8);
    margin: 2rem auto 0 auto;
}

/* ==========================================
   MAIN
========================================== */

main {
    max-width: 900px;
    margin: auto;
    padding: 50px 30px;
}

.intro {
    font-size: 1.15rem;
    margin-bottom: 60px;
}

/* ==========================================
   SECTION TITLES
========================================== */

h2,
.accordion summary {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1e2345;
}

h2 {
    margin-top: 2.2rem;
    margin-bottom: 1.5rem;
}

/* ==========================================
   PAST TALKS ACCORDION
========================================== */

.accordion {
    margin-bottom: 2rem;
    border-radius: 18px;
    overflow: hidden;
    background: #f8efd0;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

.accordion summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 1.5rem;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::before {
    content: "▶";
    display: inline-block;
    margin-right: .7rem;
    font-size: .7em;
    transition: transform .2s;
}

.accordion[open] summary::before {
    transform: rotate(90deg);
}

.accordion-content {
    padding: 0 1.5rem 1.5rem;
}

/* Cards inside Past Talks */

.past-card {
    background: #fcf7e7;
    border-radius: 12px;
    padding: 20px;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.past-card h3 {
    margin-top: 0;
    margin-bottom: .35rem;
}

.past-card h4 {
    margin: 0;
    color: #5b4630;
    font-weight: normal;
}

/* ==========================================
   NEXT TALK
========================================== */

.next {
    background: #efe2a7;
    border-left: 6px solid #caa33d;
}
.next-date {
    color: #5f5b54;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.talk-location {
    color: #6b665e;
    font-size: 0.95rem;
    font-weight: 400;
    margin-top: -0.3rem;
    margin-bottom: 1rem;
}

.talk-info {
    margin: 0 0 0.8rem 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #6b665e;
}

/* ==========================================
   TIMELINE
========================================== */

.timeline {
    border-left: 4px solid #a67c52;
    padding-left: 35px;
}

.event {
    position: relative;
    margin-bottom: 60px;
}

.event::before {
    content: "";
    position: absolute;
    left: -44px;
    top: 10px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #a67c52;
}

.date {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #7b5e3c;
}

.date .time {
    font-size: 0.9em;
    font-weight: 500;
}

/* ==========================================
   UPCOMING TALKS CARD
========================================== */

.card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.card h3 {
    margin-top: 0;
    margin-bottom: 5px;
}

.institution {
    font-size: 0.85em;
    font-weight: 400;
    color: #6b665e;
    margin-left: 0.5rem;
}

.card h4 {
    margin-top: 0;
    font-weight: normal;
    color: #5b4630;
}

/* ==========================================
   TALK SOURCE COLORS
========================================== */

/* ItaCa Fest */
.card.itaca,
.past-card.itaca {
    background: #e8ddf2;
}
/* Individual talks inside an ItaCa Fest card */

.itaca-talk {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(47, 43, 36, 0.15);
}

.itaca-talk:first-child {
    padding-top: 0;
}

.itaca-talk:last-of-type {
    border-bottom: none;
}

.itaca-talk h3 {
    margin: 0 0 0.2rem 0;
}

.itaca-talk h4 {
    margin: 0;
    font-weight: normal;
    color: #5b4630;
}

/* Math + Stat Colloquium */
.card.mathstat,
.past-card.mathstat {
    background: #dcecf2;
}

/* ==========================================
   EXTERNAL COLLOQUIUM LABEL
========================================== */

.card.mathstat,
.past-card.mathstat,
.card.itaca,
.past-card.itaca {
    position: relative;
}

/* Math + Stat Colloquium label */
.host {
    position: absolute;
    top: 15px;
    right: 18px;

    font-size: 1.17em;
    font-weight: 600;

    color: #536b78;
    text-decoration: none;
}

.host:hover {
    color: #344a56;
    text-decoration: underline;
}

.card.itaca .host,
.past-card.itaca .host {
    color: #68527a;
}

.card.itaca .host:hover,
.past-card.itaca .host:hover {
    color: #493957;
}

.card.mathstat h3,
.past-card.mathstat h3 {
    padding-right: 180px;
}

/* ==========================================
   LINKS
========================================== */

.links {
    margin-top: 20px;
}

.links a {
    margin-right: 20px;
    text-decoration: none;
    color: #8b3a3a;
    font-weight: bold;
}

.links a:hover {
    color: #b84d4d;
}

/* Links in the introduction */

.intro a {
    color: #6f5a3c;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.intro a:hover {
    color: #4f3f2b;
}

/* Speaker webpage links */

.speaker-link,
.speaker-link:visited {
    color: inherit;
    text-decoration: none;
}

.speaker-link:hover {
    color: #8b3a3a;
    text-decoration: none;
}

/* ==========================================
   FOOTER
========================================== */

footer {
    text-align: center;
    padding: 30px;
    margin-top: 60px;
    background: #d8c18d;
}

/* ==========================================
   SYMBOLS
========================================== */

.math-symbol {
    font-family: "Cambria Math", "Times New Roman", serif;
    font-size: 1.05em;
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:700px){

    header{
        padding:4rem 1.5rem;
        background-position:center;
    }

    header h1{
        font-size:2.2rem;
        line-height:1.2;
    }

    .subtitle{
        font-size:1.1rem;
    }

    main{
        padding:30px 20px;
    }

    h2,
    .accordion summary{
        font-size:1.35rem;
    }

    .timeline{
        padding-left:20px;
    }

    .event::before{
        left:-29px;
    }

    .card,
    .past-card{
        padding:18px;
    }
    .card.mathstat h3,
    .past-card.mathstat h3 {
        padding-right: 0;
        padding-top: 1.8rem;
    }

    .host {
        top: 12px;
        right: 15px;
        font-size: 0.85rem;
    }
}