*,
*::before,
*::after { box-sizing: border-box; border-color: var(--line); }

html { -webkit-text-size-adjust: var(--fill); }

body {
    min-height: var(--view-h);
    margin: 0;
    background-color: var(--canvas);
    color: var(--charcoal);
    font-family: var(--font-body);
    font-size: var(--fs-13);
    line-height: var(--lh-155);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
p { margin: 0; }

img { display: block; max-width: var(--fill); }

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

button:not(:disabled),
[role="button"] { cursor: pointer; }

:focus-visible { outline: var(--len-2) solid var(--ogblue); outline-offset: var(--len-2); }

input:focus-visible { outline: none; }

[hidden] { display: none !important; }

[data-subject="mathematics"] {
    --subject-strong: var(--subject-mathematics);
    --subject-light: var(--subject-mathematics-light);
}

[data-subject="maths-methods"] {
    --subject-strong: var(--subject-maths-methods);
    --subject-light: var(--subject-maths-methods-light);
}

[data-subject="specialist-maths"] {
    --subject-strong: var(--subject-specialist-maths);
    --subject-light: var(--subject-specialist-maths-light);
}

[data-subject="biology"] {
    --subject-strong: var(--subject-biology);
    --subject-light: var(--subject-biology-light);
}

[data-subject="chemistry"] {
    --subject-strong: var(--subject-chemistry);
    --subject-light: var(--subject-chemistry-light);
}

[data-subject="physics"] {
    --subject-strong: var(--subject-physics);
    --subject-light: var(--subject-physics-light);
}

[data-subject="english"] {
    --subject-strong: var(--subject-english);
    --subject-light: var(--subject-english-light);
}

[data-subject="selective-entry"] {
    --subject-strong: var(--subject-selective-entry);
    --subject-light: var(--subject-selective-entry-light);
}

[data-subject="ucat"] {
    --subject-strong: var(--subject-ucat);
    --subject-light: var(--subject-ucat-light);
}

[data-subject="neutral"] {
    --subject-strong: var(--navy);
    --subject-light: var(--ds-blue-lightest);
}

.page {
    position: relative;
    min-height: var(--view-h);
    overflow: hidden;
    background-color: var(--canvas);
    padding: var(--len-48) var(--len-16) var(--s48);
}

.page-done { display: flex; flex-direction: column; justify-content: center; }

.mark {
    position: absolute;
    left: var(--len-24);
    top: var(--len-28);
    display: none;
    width: var(--len-32);
    height: var(--len-32);
}

.shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--fill);
    max-width: var(--len-880);
    margin-inline: auto;
}

.shell-wide { max-width: var(--len-1120); }

.wordmark { height: var(--len-28); width: auto; }

.flow { width: var(--fill); margin-top: var(--len-32); }

.page-done .flow { margin-top: 0; }

@media (min-width: 40rem) {
    .page { padding: var(--s48) var(--len-24); }

    .mark { display: block; left: var(--len-32); top: var(--len-32); }
}