/*
 * StillNormal - tokens, type, the page shell. Every page loads this.
 *
 * The skin is architect/site-spec/SKIN.md: the palette and the type of the
 * author's own site - sand, paper, ink, amber - Literata for what is read as a
 * title or a quote, Onest for everything else. No dark theme. Gradients only
 * where a picture dissolves into the sand. Hover only on a real pointer.
 *
 * Layout: every full-bleed block holds a .stillnormal-container of its own -
 * 1240 wide with fluid side margins - so a band or a dark strip can run the
 * whole width of a desktop, and a phone gets one column (SKIN.md section 3).
 *
 * Class names: .stillnormal-* are the theme's own; .quiz-engine-* are the
 * plugin's and are styled but never renamed, because its JS selects on them.
 */

/* ---------- tokens ---------- */

:root {
    --sand: #efe2cf;
    --sand-deep: #e4d2b8;
    --paper: #faf5ec;
    --cream: #f3e7d6;
    --ink: #3a2a1c;
    --ink-soft: #7c6a56;
    --amber: #b3721f;
    --amber-deep: #95590f;
    --amber-light: #e0a95c;
    --dark: #2b1f17;
    --dark-deep: #231912;
    --rule: rgba(58, 42, 28, .16);
    --track: rgba(58, 42, 28, .12);
    --outline: rgba(58, 42, 28, .3);

    --display: "Literata", Georgia, "Times New Roman", serif;
    --text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

    --wrap: 1240px;
    --gutter: clamp(20px, 4vw, 56px);

    --radius-card: 22px;
    --radius-pill: 999px;

    /*
     * How much of the top of the screen the site covers, read by the engine
     * when it scrolls to the next question. The site pins nothing of its own
     * there; the engine adds its progress bar (fixed, css/test.css) itself.
     * This is the breathing room above the question it scrolls to.
     */
    --quiz-engine-scroll-offset: 16px;
}

/*
 * The fonts themselves are not declared here: which three files a page needs
 * depends on its language, so header.php prints them inline - see
 * inc/fonts.php.
 */

/* ---------- reset and body ---------- */

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

html {
    background: var(--sand);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--sand);
    color: var(--ink);
    font-family: var(--text);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

[hidden] {
    display: none !important;
}

/* ---------- layout ---------- */

.stillnormal-container {
    width: 100%;
    max-width: calc(var(--wrap) + 2 * var(--gutter));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.stillnormal-main {
    display: block;
    overflow-x: clip;
}

/* ---------- type ---------- */

.stillnormal-eyebrow {
    margin: 0 0 16px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber);
}

.stillnormal-h2 {
    margin: 0 0 16px;
    font-family: var(--display);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.stillnormal-h2 em {
    font-style: italic;
    color: var(--amber);
}

/* ---------- buttons ---------- */

/*
 * Pills: amber fill, an ink outline, and two for dark ground - paper and a
 * cream outline (SKIN.md section 5). Anything inline with text is capped at
 * the width of its line.
 */
.stillnormal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    min-height: 48px;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: var(--text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.stillnormal-btn--amber {
    background: var(--amber);
    color: #fff;
}

.stillnormal-btn--ghost {
    border-color: var(--outline);
}

.stillnormal-btn--paper {
    background: var(--paper);
    color: var(--ink);
}

.stillnormal-btn--cream {
    border-color: rgba(243, 231, 214, .35);
    color: var(--cream);
}

.stillnormal-btn:active {
    transform: translateY(1px);
}

.stillnormal-btn:disabled,
.stillnormal-btn.is-busy {
    opacity: .6;
    cursor: progress;
}

.stillnormal-btn-ico {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- header ---------- */

/*
 * The wordmark left, the navigation and the menu button right. Not pinned.
 * Everything else in the header is out of the flow: the checkbox, the menu
 * panel, the overlay; the progress row wraps onto a line of its own.
 */
.stillnormal-header {
    position: relative;
}

.stillnormal-header-in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 26px;
    row-gap: 0;
    min-height: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.stillnormal-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .005em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.stillnormal-logo em {
    font-style: italic;
    font-weight: 300;
}

/* The sign before the name: the same "±" as the favicon. */
.stillnormal-logo-mark {
    display: block;
    flex: none;
}

.stillnormal-mark-plus {
    stroke: var(--amber);
}

.stillnormal-mark-minus {
    stroke: var(--ink);
}

/* ---------- the menu: a checkbox, a button, a panel ---------- */

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

.stillnormal-menu-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 15px;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}

.stillnormal-menu-toggle:focus-visible + .stillnormal-menu-button {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
    border-radius: 4px;
}

.stillnormal-burger,
.stillnormal-burger::before,
.stillnormal-burger::after {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 1px;
    background: var(--ink);
    transition: transform .2s, background-color .2s;
}

.stillnormal-burger {
    position: relative;
}

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

.stillnormal-burger::before { transform: translateY(-5px); }
.stillnormal-burger::after { transform: translateY(5px); }

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

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

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

/*
 * The panel drops under the header, at the right edge of the container. It
 * scrolls inside itself rather than growing past the screen: fifteen topics do
 * not fit under the header on a phone.
 */
.stillnormal-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: var(--gutter);
    z-index: 30;
    width: min(420px, calc(100% - 2 * var(--gutter)));
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 22px 24px;
    border-radius: var(--radius-card);
    background: var(--paper);
    box-shadow: 0 18px 40px rgba(35, 25, 18, .16);
}

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

.stillnormal-menu-all {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--display);
    font-size: 20px;
    text-decoration: none;
}

.stillnormal-menu-all i {
    font-style: normal;
}

.stillnormal-menu-all em {
    font-family: var(--text);
    font-size: 14px;
    font-style: normal;
    color: var(--amber-deep);
}

.stillnormal-menu-tags,
.stillnormal-menu-pages {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stillnormal-menu-tags {
    padding: 10px 0;
}

.stillnormal-menu-tags a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 15px;
    text-decoration: none;
}

.stillnormal-menu-tags span {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.stillnormal-menu-tags span.is-zero {
    opacity: .5;
}

.stillnormal-menu-pages {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: 14px;
    color: var(--ink-soft);
}

.stillnormal-menu-pages a {
    text-decoration: none;
}

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

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

/* ---------- the thread ----------
 *
 * The site's signature (SKIN.md section 3): an amber line with a dot at the
 * top, each step sewn to it by a short stroke. The test page, the catalogue
 * and the home page share it; the result screen draws its own, larger.
 */

.stillnormal-tthread {
    position: relative;
    min-width: 0;
    padding-left: 64px;
}

.stillnormal-tthread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 0;
    width: 2px;
    background: var(--amber);
}

.stillnormal-tthread::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--amber);
}

.stillnormal-tstep {
    position: relative;
    margin: 0 0 22px;
}

.stillnormal-tstep::before {
    content: "";
    position: absolute;
    left: -64px;
    top: .6em;
    width: 24px;
    height: 2px;
    background: var(--amber);
}

.stillnormal-ttag {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--amber);
}

/* A row of buttons, wrapping. */
.stillnormal-btns {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
}

@media (max-width: 900px) {
    .stillnormal-tthread {
        padding-left: 38px;
    }

    .stillnormal-tstep::before {
        left: -38px;
        width: 16px;
    }
}

@media (hover: hover) and (pointer: fine) {
    a.stillnormal-ttag:hover {
        color: var(--amber-deep);
    }
}

/* ---------- plain pages ---------- */

.entry {
    padding-top: 24px;
    padding-bottom: 64px;
}

.entry-title {
    max-width: 18em;
    margin: 0 0 24px;
    font-family: var(--display);
    font-size: clamp(34px, 4.6vw, 58px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.entry-content {
    max-width: 40em;
}

.entry-content h2 {
    margin: 1.6em 0 .5em;
    font-family: var(--display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
}

.entry-content a {
    color: var(--amber-deep);
}

.entry-empty {
    padding-top: 40px;
    padding-bottom: 64px;
    color: var(--ink-soft);
}

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

.stillnormal-footer {
    margin-top: 24px;
}

.stillnormal-footer-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 28px;
    row-gap: 12px;
    padding-top: 26px;
    padding-bottom: 44px;
    border-top: 1px solid var(--rule);
    font-size: 14px;
    color: var(--ink-soft);
}

.stillnormal-foot-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stillnormal-foot-links a {
    text-decoration: none;
}

/* The languages: a drop-down that opens upwards, over the footer. */
.stillnormal-langs {
    position: relative;
}

.stillnormal-langs > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    list-style: none;
    color: var(--ink);
    cursor: pointer;
}

.stillnormal-langs > summary::-webkit-details-marker {
    display: none;
}

.stillnormal-langs > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
}

.stillnormal-langs[open] > summary::after {
    margin-top: 3px;
    transform: rotate(-135deg);
}

.stillnormal-langs ul {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 20;
    min-width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 0 12px 30px rgba(35, 25, 18, .16);
}

.stillnormal-langs li a {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink);
}

.stillnormal-footer-brand {
    margin-left: auto;
}

/* ---------- phone ---------- */

@media (max-width: 900px) {
    body {
        font-size: 16px;
    }

    .stillnormal-header-in {
        min-height: 52px;
        column-gap: 16px;
    }

    .stillnormal-footer-brand {
        margin-left: 0;
        flex-basis: 100%;
    }
}

/*
 * Desktop (Lex, 2026-09-29): the wordmark and the menu button side by side in
 * the middle, with air between them; the panel opens centred under them, its
 * topics in two columns. A phone keeps the wordmark left, the menu right.
 */
@media (min-width: 901px) {
    .stillnormal-header-in {
        justify-content: center;
        column-gap: 56px;
    }

    .stillnormal-logo {
        margin-right: 0;
    }

    .stillnormal-menu {
        left: 50%;
        right: auto;
        width: min(640px, calc(100% - 2 * var(--gutter)));
        transform: translateX(-50%);
    }

    .stillnormal-menu-tags {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 36px;
    }
}

/* The word "Menu" goes on a narrow phone; the three lines stay. */
@media (max-width: 420px) {
    .stillnormal-menu-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ---------- hover, only on a real pointer ---------- */

@media (hover: hover) and (pointer: fine) {
    .stillnormal-btn--amber:hover:not(:active) {
        background: var(--amber-deep);
    }

    .stillnormal-btn--ghost:hover:not(:active) {
        border-color: var(--ink);
    }

    .stillnormal-btn--cream:hover:not(:active) {
        border-color: var(--cream);
    }

    .stillnormal-menu-button:hover,
    .stillnormal-menu-tags a:hover,
    .stillnormal-menu-pages a:hover,
    .stillnormal-foot-links a:hover,
    .stillnormal-langs li a:hover {
        background: var(--sand);
        color: var(--amber-deep);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}