/* MAIN */
main {
    margin: 0;
    padding: 0;
}

main > h1 {
    background: linear-gradient(to right, var(--primary-brand-colour), var(--secondary-brand-colour));
    color: var(--whitest-colour);
    margin: 0;
    padding: 7vh clamp(5vw, var(--fake-preferred-size), 15vw);
    text-shadow:
        calc(1 / var(--base-size) * 1rem)
        calc(-1 / var(--base-size) * 1rem)
        calc(3 / var(--base-size) * 1rem)
        var(--primary-brand-colour);
    scroll-snap-align: start;
}

/* MAIN SECTION */
main > section {
    --cols: 2;
    --gap: calc(var(--standard-wmargin) * 2);
    --min: max(
        calc(18rem - var(--gap)),
        calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))
    );

    display: grid;
    align-content: center;
    column-gap: clamp(0rem, var(--fake-preferred-size), var(--gap));
    grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
    height: clamp(1vh, calc(var(--fake-preferred-size) * 100vh), 100vh);
    min-height: 100vh;
    padding: 0 clamp(calc(var(--standard-wmargin) / 2), var(--fake-preferred-size), var(--standard-wmargin));
    scroll-snap-align: start;
}

main > section:nth-of-type(even) {
    background: var(--light-colour);
}

/* SECTION > ARTICLE */
main > section > article {
    display: grid;
    align-content: start;
    text-align: justify;
}

main > section > article a:not([role='button'], :is(sup > a)) {
    color: var(--emphasis-colour);
    text-underline-offset: calc(5 / var(--base-size) * 1rem);
    text-decoration: underline;
    text-decoration-thickness: calc(0.5 / var(--base-size) * 1rem);
    transition-duration: 500ms;
}

main > section > article a:not([role='button']):hover {
    opacity: 0.6;
}

main > section > article a[role='button'] {
    background: var(--emphasis-colour);
    border-radius: calc(100 / var(--base-size) * 1rem);
    color: var(--whitest-colour);
    display: inline-block;
    font-size: var(--size);
    font-weight: bold;
    line-height: 1rem;
    margin-top: var(--standard-hmargin);
    padding-block: calc(12 / var(--base-size) * 1rem);
    padding-inline: calc(32 / var(--base-size) * 1rem);
    text-align: center;
    text-decoration: none;
    transition-duration: 500ms;
}

main > section > article a[role='button']:hover {
    background: var(--primary-brand-colour);
}

main > section > article blockquote {
    display: grid;
    align-items: start;
    color: var(--emphasis-colour);
    grid-template-columns: min-content 1fr;
    column-gap: 0;
    font-size: calc(var(--l-font-size) * 1.15);
    margin: 0;
    text-align: left;
}

main > section > article h2 + blockquote {
    margin: 3rem 0 0 0;
}

main > section > article blockquote:before {
    content: '“';
    font-family: serif;
    font-weight: bold;
    font-size: 6rem;
    line-height: 0.75;
    padding: 0 0.5rem 0 0;
}

main > section > article > h2 {
    color: var(--primary-brand-colour);
    font-size: clamp(var(--l-font-size), var(--fake-preferred-size), calc(var(--xl-font-size) * 0.65));
    font-weight: bold;
    line-height: 120%;
    text-align: left;
    margin: var(--standard-wmargin) 0 0 0;
    padding-bottom: 0.5rem;
}

main > section > article > h2 > small {
    display: block;
    font-size: clamp(var(--m-font-size), var(--fake-preferred-size), calc(var(--l-font-size) * 0.65));
    line-height: calc((clamp(var(--m-font-size), var(--fake-preferred-size), calc(var(--l-font-size) * 0.65))) * 1.15);
    margin-top: calc((clamp(var(--m-font-size), var(--fake-preferred-size), calc(var(--l-font-size) * 0.65))) * 0.5);
}

main > section > article > p {
    font-size: var(--l-font-size);
    color: var(--dark-colour);
    line-height: 1.75rem;
    margin: 2rem 0;
    padding: 0;
    text-align: justify;
}

main > section > article > p > small {
    font-size: calc(var(--l-font-size) * 0.75);
}

main > section > article > :is(ol, ul) {
    color: var(--neutral-colour);
    line-height: 1.75rem;
    font-size: calc(var(--l-font-size) * 0.85);
    list-style-position: outside;
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}

main > section > article > :is(ol, ul) > li {
    margin: 0;
    padding: 0 0 0 0.5rem;
    text-align: left;
}

main > section > article > ol > li::marker {
    color: var(--emphasis-colour);
    font-weight: bold;
}

main > section > article > ul > li::marker {
    color: var(--emphasis-colour);
    content: "✔";
    font-weight: bold;
}

main > section > article :not(blockquote) strong {
    color: var(--dark-colour);
}

main > section > article sup {
    font-size: 70%;
}

main > section > article sup a[rel='help'] {
    color: var(--emphasis-colour);
    cursor: help;
    text-decoration: none;
}


/* SECTION > DIV */
main > section > div {
    display: grid;
    align-items: end;
    align-self: center;
}

main > section > div > blockquote {
    font-size: clamp(calc(var(--l-font-size) * 1.2), var(--fake-preferred-size), calc(var(--l-font-size) * 1.55));
    color: var(--primary-brand-colour);
    line-height: clamp(1.75rem, var(--fake-preferred-size), 2.25rem);
    margin: 0;
    padding: 2rem 0 0 0;
}

main > section > div:nth-child(1) > :is(blockquote, blockquote + p) {
    text-align: left;
}

main > section > div:nth-child(2) > :is(blockquote, blockquote + p) {
    text-align: right;
}

main > section > div > blockquote mark {
    background: var(--primary-brand-colour);
    color: var(--whitest-colour);
    display: inline-block;
    font-family: var(--font-brand);
    font-size: 115%;
    font-weight: bold;
    margin: clamp(1rem, var(--fake-preferred-size), 1.5rem) 0;
    padding: 0.75rem 1.2rem;
    transform: rotate(-2deg);
}

main > section > div > blockquote + p {
    margin: clamp(0px, var(--fake-preferred-size), 2.5rem) 0;
    padding: 0;
}

main > section > div > blockquote + p > a {
    background: var(--emphasis-colour);
    border-radius: 100%;
    color: var(--whitest-colour);
    font-size: clamp(0px, var(--fake-preferred-size), var(--xl-font-size));
    padding: 0 clamp(0px, var(--fake-preferred-size), calc(6 / var(--base-size) * 1rem));
    text-decoration: none;
}

main > section > div > blockquote + p > a:hover {
    background: var(--primary-brand-colour);
}

main > section > div figure {
    display: grid;
    justify-items: center;
    margin: 1rem;
    padding: 0;
}

main > section > div img {
    display: block;
    height: auto;
    max-width: 65%;
    width: 65%;
}