/*
 * The site's foundation: everything more than one kind of page needs.
 *
 * The tokens, the type, the header, the footer and the two controls that
 * appear everywhere. Loaded on every page; css/quiz.css and css/catalog.css
 * both build on it and are loaded after it.
 *
 * Rules the whole design obeys:
 * - every colour through the tokens below. White only for slips of paper, no
 *   dark theme, no gradient that is not paper texture;
 * - one column, 640px, on every device including desktop.
 *
 * Class names: .quizstandard-* are the theme's own; .quiz-engine-* are the
 * plugin's and are styled but never renamed, because its JS selects on them.
 */

:root {
    /*
     * The palette approved with the test page mock-up (Lex, 2026-09-17): a
     * folder somebody has pasted things into. Cold office paper (Lex,
     * 2026-09-17, mock-ups in architect/design/mockups/bg-cold/), warm black,
     * the blue of a ballpoint and of a rubber stamp, and three pastels for
     * tape and sticky notes. See architect/site-spec/PAGES.md, section 1.
     *
     * --sheet and --rule are mixed from this colour and follow it on their
     * own; the slips, the notes and the blue do not change with it.
     */
    --paper: #EDF0F4;
    --ink: #2B2A26;
    --blue: #2C4CB3;
    --blush: #F4C7C3;
    --mint: #CFE8DC;
    --butter: #F6E3A6;

    /*
     * White is for the slips of paper and nothing else: the answer cards, the
     * name field, the taped note. The four answer slips are four pale tints of
     * the pastels, in turn.
     */
    --slip: #FFFFFF;
    --slip-1: #FFF8E6;
    --slip-2: #FFF1EF;
    --slip-3: #EEF6F1;
    --slip-4: #EEF1FA;

    /* Secondary text, and the track a progress bar runs in. */
    --ink-soft: #5A564D;
    --ink-faint: #7A7568;
    --track: #E6DFCF;

    /*
     * Four faces, self-hosted, declared per language in inc/fonts.php:
     * - --font-ui, Golos Text: headings, questions, answers, buttons;
     * - --font-read, Literata: the intro, the verdict, the attachments;
     * - --font-mono, PT Mono: the document's labels;
     * - --font-hand, Caveat: what is written by hand in blue pen.
     */
    --font-ui: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-read: "Literata", Georgia, "Times New Roman", serif;
    --font-mono: "PT Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

    /*
     * Only under something that is stuck on: the cover photo, a slip, a note.
     * Soft and short.
     */
    --lift: 0 5px 12px -7px rgba(0, 0, 0, .4);

    /*
     * The names the rest of the theme was written against, pointed at the
     * palette above. The result screen and the certificate still use them and
     * get their own design later; until then they follow this skin instead of
     * breaking.
     */
    --stamp: var(--blue);
    --sheet: color-mix(in srgb, var(--paper) 93%, var(--ink));
    --rule: color-mix(in srgb, var(--ink) 22%, var(--paper));
    --line: 1px;
    --radius: 0;
    --tilt: -3deg;
    --font-d: var(--font-mono);
    --font-b: var(--font-read);

    /*
     * How much of the top of the screen the site covers, read by the engine
     * when it scrolls to the next question.
     *
     * Deliberately larger than the distance from the top of the document to
     * the first question. The engine subtracts this from the question's
     * position and clamps the result at zero, so with a generous value its
     * scroll always resolves to the very top - which is exactly the wanted
     * behaviour: standing at the top, nothing moves at all when an answer is
     * given; scrolled down, the page comes back up so the header is in view
     * again.
     */
    --quiz-engine-scroll-offset: 200px;
}

/*
 * Self-hosted, never Google Fonts: a third-party font request is a
 * render-blocking round trip to somebody else's server on the one screen that
 * has to be fast.
 *
 * The faces themselves are not declared here. Which two files a page needs
 * depends on its language - Cyrillic or Latin - so header.php prints the pair
 * for that language inline; see inc/fonts.php. Declaring them in this shared
 * sheet instead is what would make a Russian page fetch the Latin file too:
 * the digits and the dashes live in it.
 */

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    /*
     * Russian and Ukrainian compounds are long. A word that cannot fit its
     * line does not break by default - it simply runs out of the box, and on a
     * 375px phone a word like "sverhchuvstvitelnost" in Cyrillic overflows the
     * column by more than a hundred pixels. It is a property of the language,
     * not a defect of one heading, so the rule belongs here.
     *
     * break-word and not hyphens: auto - the browser carries no Russian
     * hyphenation dictionary. break-word acts only when a word genuinely
     * cannot fit, so every heading that fits today is laid out as before. The
     * property is inherited, so one declaration covers headings, questions,
     * results and answers alike.
     */
    overflow-wrap: break-word;
    background-color: var(--paper);
    /*
     * The grain of the paper: a fine, faint speckle, as on the mock-up. Drawn
     * rather than downloaded - a texture worth a request is a texture that
     * shows.
     */
    background-image: radial-gradient(rgba(0, 0, 0, .025) .6px, transparent .7px);
    background-size: 5px 5px;
}

* {
    box-sizing: border-box;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.quizstandard-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 18px 48px;
}

.quizstandard-title {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 20px 0 12px;
    text-wrap: balance;
}

/* ---------- site header: the brand left, the menu right, and it scrolls away ---------- */

/*
 * The same on every page (the approved mock-ups: test page, result screen,
 * catalogue, department, home): the brand and the menu on the first line, in
 * the form's typewriter face; under them, where a page has them, the trail,
 * the department note and the progress row, each on a line of its own. A grid
 * for that reason - everything else in the header is positioned out of the
 * flow: the checkbox, the menu panel, the overlay.
 *
 * Not pinned. Before a test starts the screen belongs to the cover, and a bar
 * over it would only take height from a phone.
 */
.quizstandard-header {
    position: relative;
    background: transparent;
}

.quizstandard-header-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    max-width: 640px;
    margin: 0 auto;
    padding: 14px 18px 6px;
}

.quizstandard-logo {
    grid-column: 1;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

/* The brand's last word in blue pen. */
.quizstandard-logo span {
    color: var(--blue);
}

/* Screen readers get the word, and so does everyone else, next to the lines. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * The slot the engine's progress bar is moved into while a test runs. Hidden
 * here, on every page, and shown by stage in css/quiz.css: an empty grid item
 * would still take a row of the header.
 */
.quizstandard-progress-slot {
    display: none;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
    margin-top: 10px;
}

.quizstandard-menu-toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/*
 * The menu button: three short lines and the word. Not a 44px target - it
 * sits alone in its corner with nothing to mis-tap, and on a phone every
 * pixel of the header comes out of the page's own first screen.
 */
.quizstandard-menu-button {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
}

.quizstandard-burger,
.quizstandard-burger::before,
.quizstandard-burger::after {
    display: block;
    width: 11px;
    height: 1.5px;
    background: var(--ink-soft);
    transition: transform .2s ease, background-color .2s ease;
}

.quizstandard-burger {
    position: relative;
}

.quizstandard-burger::before,
.quizstandard-burger::after {
    content: "";
    position: absolute;
    left: 0;
}

.quizstandard-burger::before { transform: translateY(-4px); }
.quizstandard-burger::after { transform: translateY(4px); }

.quizstandard-menu-toggle:checked + .quizstandard-menu-button .quizstandard-burger {
    background: transparent;
}

.quizstandard-menu-toggle:checked + .quizstandard-menu-button .quizstandard-burger::before {
    transform: rotate(45deg);
}

.quizstandard-menu-toggle:checked + .quizstandard-menu-button .quizstandard-burger::after {
    transform: rotate(-45deg);
}

/*
 * The trail: Home, then wherever the page sits. On its own line under the
 * brand, in small grey type.
 */
.quizstandard-crumbs {
    grid-column: 1 / -1;
    min-width: 0;
    margin-top: 8px;
}

.quizstandard-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-faint);
}

.quizstandard-crumbs li {
    max-width: 100%;
}

.quizstandard-crumbs li + li::before {
    content: "\2192";
    margin-right: 6px;
}

.quizstandard-crumbs a {
    color: inherit;
    text-decoration: none;
}

/* ---------- the paper kit: what every page is made of ---------- */

/* A strip of tape. Placed by whatever it holds down. */
.quizstandard-tape {
    position: absolute;
    z-index: 1;
    width: 74px;
    height: 22px;
    background: var(--blush);
    opacity: .9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

/* A sticky note that labels a page: "Registry", "Department". */
.quizstandard-eyebrow-note {
    display: inline-block;
    max-width: 100%;
    padding: 6px 10px;
    background: var(--butter);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    transform: rotate(-1.5deg);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .03em;
    color: var(--ink);
}

.quizstandard-eyebrow-note.is-mint {
    background: var(--mint);
}

/* A figure in a dashed blue frame: a count, a term of issue. */
.quizstandard-dashed {
    display: inline-block;
    max-width: 100%;
    padding: 8px 10px;
    border: 1.5px dashed var(--blue);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.2;
    color: var(--blue);
}

/* A section's heading: small capitals in blue. */
.quizstandard-section-h {
    margin: 0 0 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
}

/* The blue button, with a dashed line stitched inside it. */
.quizstandard-blue-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 17px;
    border: 0;
    border-radius: 14px;
    background: var(--blue);
    box-shadow: 0 8px 16px -8px rgba(44, 76, 179, .7);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--slip);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.quizstandard-blue-btn::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(255, 255, 255, .55);
    border-radius: 10px;
    pointer-events: none;
}

.quizstandard-menu-toggle:focus-visible + .quizstandard-menu-button {
    outline: 2px solid var(--stamp);
    outline-offset: 2px;
}

/*
 * The panel. Same paper and the same dot raster as the header above it and the
 * page behind it - a blank sheet made it read as a dialog dropped on the site
 * rather than a drawer pulled out of the header. The header's own bottom line
 * serves as its top border, so the panel draws only three sides.
 *
 * It scrolls inside itself rather than growing past the screen: fifteen topics
 * and five links do not fit under the header on a phone, and a menu that makes
 * the page behind it scroll loses the visitor's place in a test.
 */
.quizstandard-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--paper);
    background-image:
        repeating-linear-gradient(112deg, rgba(30, 27, 22, .022) 0 2px, transparent 2px 7px),
        repeating-linear-gradient(8deg, rgba(30, 27, 22, .016) 0 3px, transparent 3px 11px);
    border: var(--line) solid var(--ink);
    border-top: 0;
    box-shadow: var(--lift);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.quizstandard-menu-toggle:checked ~ .quizstandard-menu {
    display: block;
}

.quizstandard-menu-in {
    padding: 16px 14px 0;
}

/* All tests, as a poster: the one line in the panel that is a destination
   rather than a filter, with the size and the marker to match. */
.quizstandard-menu-all {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 12px;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-decoration: none;
}

.quizstandard-menu-all i {
    font-style: normal;
    display: inline-block;
    max-width: 100%;
    background: var(--blush);
    padding: 0 6px;
}

.quizstandard-menu-all em {
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    color: var(--stamp);
    white-space: nowrap;
}

/*
 * Two columns where there is room for them. Fifteen topics in one column is a
 * screen and a half of scrolling on a phone; at 521px and up the same list is
 * one glance.
 */
.quizstandard-menu-tags {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--line) solid var(--ink);
}

.quizstandard-menu-tags a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 2px dotted rgba(30, 27, 22, .3);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.quizstandard-menu-tags span {
    font-family: var(--font-d);
    font-size: 12px;
    font-weight: 700;
    color: var(--stamp);
    font-variant-numeric: tabular-nums;
}

/* A topic with nothing in it yet says so quietly. */
.quizstandard-menu-tags span.is-zero {
    color: var(--ink-soft);
    opacity: .7;
}

@media (max-width: 520px) {
    .quizstandard-menu-tags {
        grid-template-columns: 1fr;
    }

    .quizstandard-menu-tags a {
        padding: 8px 4px;
    }
}

/*
 * The service pages, on a black strip that runs the full width of the panel -
 * the footer of the menu, and the one piece of contrast the panel needs to
 * stop reading as one grey block. The negative margin is what takes it past
 * the panel's own padding to the border.
 */
.quizstandard-menu-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    list-style: none;
    margin: 14px -14px 0;
    padding: 12px 14px 13px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-d);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.quizstandard-menu-pages li {
    display: flex;
    align-items: center;
}

.quizstandard-menu-pages li + li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 10px;
    border-radius: 50%;
    background: var(--stamp);
}

.quizstandard-menu-pages a {
    padding: 2px 0;
    color: inherit;
    text-decoration: none;
}

.quizstandard-menu-overlay {
    display: none;
}

.quizstandard-menu-toggle:checked ~ .quizstandard-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 29;
    background: transparent;
    cursor: default;
}

.quizstandard-ib:active,
.quizstandard-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.quizstandard-ib:focus-visible,
.quizstandard-btn:focus-visible,
.quizstandard-faq summary:focus-visible {
    outline: 2px solid var(--stamp);
    outline-offset: 3px;
}

/* Busy while the picture renders. Not a spinner: a button that dims and
   stops responding says the same thing with no moving parts. */
.quizstandard-ib.is-busy,
.quizstandard-btn.is-busy {
    opacity: .55;
    pointer-events: none;
}

.quizstandard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--lift);
    transition: border-color .12s;
}

.quizstandard-btn-primary {
    background: var(--stamp);
    color: var(--paper);
}

.quizstandard-btn-ico {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quizstandard-chip {
    display: inline-block;
    /* Same shrink-to-fit trap as the result marker, see there. */
    max-width: 100%;
    font-family: var(--font-d);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--blush);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    padding: 4px 10px;
    text-decoration: none;
}

/* ---------- a plain page ---------- */

/*
 * For an ordinary page of text - about, contacts, the legal pages behind the
 * footer links. The same type as the rest of the skin (task 04, section 4):
 * the headline as loud as the one on the home page, the reading face for the
 * text, and the blue pen for links. Nothing on paper around it: a page of
 * words is not a document.
 */
/*
 * The gap above the headline. A page of text starts with its H1 directly under
 * the header - no poster, no eyebrow, nothing between them - so it needs more
 * air than a screen that opens with a picture.
 */
.entry {
    padding: 34px 0 0;
}

.entry-title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    text-wrap: balance;
}

.entry-content h2 {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 32px 0 8px;
}

.entry-content h3 {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.25;
    margin: 22px 0 6px;
}

.entry-content p,
.entry-content li {
    font-family: var(--font-read);
    font-size: 15.5px;
    line-height: 1.6;
}

/* The lead-in a paragraph starts with, in the heading face. */
.entry-content strong,
.entry-content b {
    font-family: var(--font-ui);
    font-weight: 600;
}

.entry-content a {
    color: var(--blue);
    text-decoration: underline dashed;
    text-underline-offset: 4px;
}

/*
 * The highlighted block on a text page - today the call for a reviewer on the
 * about page. A class on a plain div, because this site runs Classic Editor
 * and there are no block wrappers to hang one on: Lex writes it in the Text
 * tab and moves it wherever he wants. Same shape as the CTA on a result, so
 * the site has one way of saying "read this bit".
 */
.quizstandard-callout {
    margin: 22px 0;
    padding: 16px;
    background: var(--blush);
    border: var(--line) solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--lift);
}

.quizstandard-callout h2 {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}

.quizstandard-callout p {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.5;
}

.quizstandard-callout p:last-child {
    margin-bottom: 0;
    font-weight: 700;
}

.entry-empty {
    padding: 40px 0;
    font-weight: 600;
    color: var(--ink-soft);
}

/* ---------- footer ---------- */

/*
 * A rule, the brand, the service links and the languages, all in the form's
 * small grey type - the foot of a sheet of paper, as on the mock-ups.
 */
.quizstandard-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 34px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #D9D2C1;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--ink-faint);
}

.quizstandard-footer-brand {
    color: var(--ink);
}

/*
 * The service links, from a menu Lex assigns in wp-admin; nothing is printed
 * while none is.
 */
.quizstandard-foot-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.quizstandard-foot-links a,
.quizstandard-langs a {
    color: inherit;
    text-decoration: none;
}

.quizstandard-langs {
    display: flex;
    column-gap: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.quizstandard-langs b {
    font-weight: 400;
    color: var(--blue);
}

/* ---------- interaction states ----------
 *
 * Two things every control on this site owes the visitor: a cursor that says
 * it can be clicked, and a reaction when it is pointed at.
 *
 * Hover lives inside @media (hover: hover) on purpose. A phone has no hover -
 * it synthesises one on tap and then leaves it stuck on the last thing
 * touched, so a button the visitor already left goes on looking pressed. This
 * way a touch screen gets the :active press and nothing else.
 *
 * Pointed at, a control draws its rule in the stamp colour; pressed, it moves
 * a pixel down (:active, defined with the buttons above). :not(:active) keeps
 * the two from arguing when a pointer is both hovering and holding. Nothing
 * on this site lifts off the page: it is paper.
 */

button,
summary,
label[for],
[role="button"] {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .quizstandard-btn:hover:not(:active),
    .quizstandard-ib:hover:not(:active) {
        border-color: var(--stamp);
    }

    .quizstandard-ib:hover:not(:active) {
        box-shadow: var(--lift);
    }

    .quizstandard-share-row .quizstandard-ib:hover:not(:active) {
        box-shadow: var(--lift);
    }

    /* Cards that are links: the whole card answers, not just its text. */
    .quizstandard-promo a:hover,
    .quizstandard-person:hover {
        border-color: var(--stamp);
    }

    .quizstandard-promo a,
    .quizstandard-person {
        transition: border-color .12s;
    }

    /* Text links underline rather than move - a jumping word is noise. */
    .quizstandard-langs a:hover,
    .quizstandard-tear a:hover,
    .quizstandard-chip:hover,
    .quiz-engine-references a:hover {
        text-decoration: underline;
    }

    .quizstandard-logo:hover b {
        color: var(--ink);
    }

    /*
     * A topic is marked rather than underlined: the row already has a rule
     * under it, and a second line under the words on top of that reads as a
     * mistake. The mark is the same tape the site lays over a word anywhere
     * else.
     */
    .quizstandard-menu-tags a:hover {
        background: var(--blush);
    }

    .quizstandard-menu-all:hover i {
        background: var(--blush);
        box-shadow: 0 0 0 2px var(--blush);
    }

    /* On the dark strip the tape colour is the only one that reads. */
    .quizstandard-menu-pages a:hover {
        color: var(--blush);
    }

    .quizstandard-q-back:not(:disabled):hover {
        color: var(--ink);
        text-decoration: underline;
    }

    .quizstandard-about summary:hover,
    .quizstandard-faq summary:hover {
        background: var(--paper);
    }

    .quizstandard-menu-button:hover .quizstandard-burger,
    .quizstandard-menu-button:hover .quizstandard-burger::before,
    .quizstandard-menu-button:hover .quizstandard-burger::after {
        background: var(--stamp);
    }

    .quizstandard-menu-toggle:checked + .quizstandard-menu-button:hover .quizstandard-burger {
        background: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quizstandard-btn:hover:not(:active),
    .quizstandard-ib:hover:not(:active),
    .quizstandard-promo a:hover,
    .quizstandard-person:hover {
        transform: none;
    }
}