/*
 * Apologies to Steven Galloway
 * Main stylesheet
 */


/* =========================================================
   RESET / BASE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;

    background: #ffffff;
    color: #202124;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   PAGE
   ========================================================= */

main {
    max-width: 65ch;
    margin: 0 auto;
    padding: 2rem;
}


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

.site-header {
    margin: 0 0 4rem;
    padding: 3.5rem 0 2.5rem;

    border-bottom: 1px solid #d8d8d8;
}

.site-header h1 {
    margin: 0 0 1rem;
    padding: 0;

    color: #111111;

    font-size: 2.65rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.introduction {
    margin: 0;
    padding: 0;

    color: #555555;

    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   APOLOGY SECTIONS
   ========================================================= */

.apology {
    margin: 0 0 3rem;
    padding: 0;
}

.apology + .apology {
    padding-top: 3rem;
    border-top: 1px solid #dddddd;
}


/* =========================================================
   STANDARD APOLOGY HEADINGS
   Used for Chelsea Rooney
   ========================================================= */

.apology h2 {
    margin: 0 0 1.75rem;
    padding: 0;

    color: #111111;

    font-size: 1.35rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -0.015em;
}


/* =========================================================
   SETTLING DEFENDANTS' HEADINGS

   Used only for:
   Brit Bachmann
   Theresa Smalec
   Kiera Anderson
   Ari Rombough
   Marcel Kosman

   Same typography as the body text, with the underline
   appearing in the agreed apologies. No added bold,
   italics, enlargement, or other typographic emphasis.
   ========================================================= */

.apology h2.settlement-heading {
    margin: 0 0 1.75rem;
    padding: 0;

    color: #292929;

    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.65;
    letter-spacing: normal;

    text-decoration-line: underline;
    text-decoration-style: solid;
}


/* =========================================================
   APOLOGY TEXT
   ========================================================= */

.apology-text {
    margin: 0;
    padding: 0;

    color: #292929;

    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.65;
    letter-spacing: normal;
}

.apology-text p {
    margin: 0 0 1.35em;
    padding: 0;

    font: inherit;
}

.apology-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SIGNATURES

   No bold, italics, underlining, enlargement, or other
   typographic emphasis is applied to the signatures.
   ========================================================= */

.signature {
    margin-top: 2em;
}

.signature span {
    display: block;
}

.signature span + span {
    margin-top: 1em;
}


/* =========================================================
   PREVIOUS APOLOGIES
   ========================================================= */

.previous-apologies {
    margin-top: 4rem;
    padding-top: 0;
}

.section-heading {
    margin: 0 0 3rem;

    padding: 0.9rem 0 1.1rem;

    border-top: 2px solid #222222;
    border-bottom: 2px solid #222222;

    color: #111111;

    font-size: 2.6rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.035em;
}

.previous-apology h3 {
    margin: 0 0 1.25rem;
    padding: 0;

    color: #111111;

    font-size: 1.15rem;
    font-weight: 650;
    line-height: 1.3;
}


/* =========================================================
   APOLOGY SCREENSHOTS
   ========================================================= */

.apology-screenshot {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
}


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

@media (max-width: 600px) {

    body {
        font-size: 16px;
    }

    main {
        max-width: none;
        padding: 1.25rem;
    }


    /* Site header */

    .site-header {
        margin-bottom: 3rem;
        padding: 2.5rem 0 2rem;
    }

    .site-header h1 {
        margin-bottom: 0.85rem;

        font-size: 2rem;
        line-height: 1.12;
        letter-spacing: -0.03em;
    }

    .introduction {
        font-size: 1rem;
        line-height: 1.5;
    }


    /* Apology sections */

    .apology {
        margin-bottom: 2.5rem;
    }

    .apology + .apology {
        padding-top: 2.5rem;
    }


    /* Chelsea Rooney heading */

    .apology h2 {
        margin-bottom: 1.5rem;

        font-size: 1.2rem;
        line-height: 1.3;
    }


    /*
     * Settling Defendants' headings
     * Explicitly restated for mobile.
     */

    .apology h2.settlement-heading {
        margin-bottom: 1.5rem;

        font-size: 1rem;
        font-weight: 400;
        font-style: normal;
        line-height: 1.65;
        letter-spacing: normal;

        text-decoration-line: underline;
        text-decoration-style: solid;
    }


    /* Apology text */

    .apology-text {
        font-size: 1rem;
        line-height: 1.65;
    }


    /* Previous apologies */

    .previous-apologies {
        margin-top: 4rem;
    }

    .section-heading {
        margin-bottom: 3rem;
        padding: 0.8rem 0 1rem;

        font-size: 2.1rem;
        line-height: 1.1;
    }

    .previous-apology h3 {
        margin-bottom: 1.25rem;

        font-size: 1.15rem;
        line-height: 1.3;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

    main {
        padding: 1rem;
    }

    .site-header {
        padding-top: 2rem;
    }

    .site-header h1 {
        font-size: 1.8rem;
    }

    .section-heading {
        font-size: 1.9rem;
    }


    /*
     * Keep Settling Defendants' headings identical
     * to body typography on small screens.
     */

    .apology h2.settlement-heading {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.65;
    }
}