/* --------------------------------------------------
   Seven Spirals
   Andrew Hugill
---------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    background: #000;
    color: #f2f2f2;

    font-family: Georgia, "Times New Roman", serif;

    line-height: 1.5;

}

/* ---------- Navigation ---------- */

.topnav {

    position: absolute;

    top: 28px;
    right: 42px;

    display: flex;
    gap: 28px;

}

.topnav a {

    color: #bbbbbb;

    text-decoration: none;

    font-size: 0.95rem;
    letter-spacing: 0.08em;

    transition: color .25s;

}

.topnav a:hover {

    color: white;

}

/* ---------- Hero ---------- */

.hero {

    max-width: 900px;

    margin: 90px auto 70px auto;

    text-align: center;

    padding: 0 30px;

}

.hero h1 {

    font-size: clamp(2.7rem,5vw,4.5rem);

    font-weight: normal;

    letter-spacing: 0.04em;

    margin-bottom: 0.5rem;

}

.subtitle {
    color: #c6c6c6;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.work-type {
    padding-top: 0;
    color: #888;
    font-size: 0.95rem;
    font-style: normal;
}

.author {
    margin-top: 0.9rem;
    color: #aaa;
    letter-spacing: 0.10em;
    font-size: 1rem;
}

/* ---------- List ---------- */

.movement-list {

    max-width: 880px;

    margin: auto;

    padding: 0 30px 80px;

}

.movement {

    display: grid;

    grid-template-columns:

        54px
        42px
        1fr;

    gap: 22px;

    align-items: center;

    text-decoration: none;

    color: inherit;

    padding: 18px 0;

    border-bottom: 1px solid #222;

    transition:
        background .25s,
        transform .18s;

}

.movement:hover {

    background: rgba(255,255,255,.03);

    transform: translateX(5px);

}

/* ---------- Spiral ---------- */

.spiral {

    width: 46px;

    height: 46px;

    display: block;

}

/* ---------- Numerals ---------- */

.number {

    font-size: 1.35rem;

    text-align: center;

    font-weight: normal;

    letter-spacing: 0.08em;

}

/* ---------- Titles ---------- */

.details h2 {

    font-size: 1.25rem;

    font-weight: normal;

    margin-bottom: .20rem;

}

.details span {

    color: #888;

    font-size: .90rem;

}

.details p {

    color: #aaaaaa;

    font-size: .96rem;

}

/* ---------- Footer ---------- */

footer {

    max-width: 880px;

    margin: auto;

    padding: 40px 30px 70px;

    color: #666;

    text-align: center;

    font-size: .9rem;

}

.footer-line {

    height: 1px;

    background: #222;

    margin-bottom: 28px;

}

/* ---------- Numeral Colours ---------- */

.green   { color:#63d87a; }

.orange  { color:#d8893b; }

.blue    { color:#4f86ff; }

.red     { color:#e04d4d; }

.yellow  { color:#e0b83a; }

.violet  { color:#a45cff; }

.white   { color:#dddddd; }

/* ---------- Responsive ---------- */

@media (max-width:700px){

.topnav{

    position: static;

    justify-content: center;

    margin-top: 24px;

}

.hero{

    margin-top: 45px;

}

.movement{

    grid-template-columns:

        44px
        34px
        1fr;

    gap: 16px;

}

.spiral{

    width:38px;
    height:38px;

}

.details h2{

    font-size:1.1rem;

}

.details p{

    font-size:.9rem;

}

}

.movement.green .number,
.movement.green h2 {
    color: #63d87a;
}

.movement.orange .number,
.movement.orange h2 {
    color: #d8893b;
}

.movement.blue .number,
.movement.blue h2 {
    color: #4f86ff;
}

.movement.red .number,
.movement.red h2 {
    color: #e04d4d;
}

.movement.yellow .number,
.movement.yellow h2 {
    color: #e0b83a;
}

.movement.violet .number,
.movement.violet h2 {
    color: #a45cff;
}

.movement.white .number,
.movement.white h2 {
    color: #dddddd;
}

.details h2 span {
    color: #888;
}