html {
    font-size: 90%; /* This makes 1rem equal to 10px (if browser default is 16px) */
}

:root {
    --page-width: 50vw;
    --gap-between-pages: 2vh;

    /* Figma frames are drawn at 1512px; the site reads best at 90% of that.
       Fixed-size UI (navbar, sidebar, toolbar, About page) applies this with
       `zoom`, so its px values stay identical to the Figma measurements. */
    --ui-scale: 0.9;

    /* The cover and every page share one size: a single page fills the
       screen with equal space above and below. The space above is measured
       from the top of the window — the cover rises into the navbar's empty
       middle band, which reads as the same black background. The width cap
       keeps it clear of the navbar links (right) and sidebar (left). */
    --screen-gap: 32px;
    --base-page-width: max(
        320px,
        min(
            calc((100svh - 2 * var(--screen-gap)) * 720 / 1024),
            calc(100vw - 512px)
        )
    );
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Inter Tight", sans-serif;
}

body {
    margin: 0;
    background: #000;
    color: white;
}

button {
    background-color: transparent;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    cursor: pointer;
}

/* div {
    border: 0.5px solid white;
} */

svg * {
    width: 40px;
    height: 40px;
    vector-effect: non-scaling-stroke;
}

/* =========================
   Reader tokens & utilities
   ========================= */

:root {
    --ink-2: rgba(255, 255, 255, 0.74);
    --ink-3: rgba(255, 255, 255, 0.48);
    --rule: rgba(255, 255, 255, 0.12);
    --chip: rgba(20, 20, 20, 0.92);
    --sheet: #0c0c0c;
    --warn: #ff8a8a;

    --nav-h: var(--navbar-height-visual, 78.3px);
    --gap: 15px;         /* page ↔ margin */
    --bubble: 30px;
    --line-glow: 18px;   /* thickness of a line's highlight and the name underline that continues it */
    --page-w: 480px;     /* set by reader.js */

    /* Soft deceleration for things arriving, quick acceleration for things
       leaving, gentle overshoot for things settling */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
}

[hidden] {
    display: none !important;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* The site's signature: a soft bar in the chapter colour (set --rgb) */
.glow {
    background: linear-gradient(
        to bottom,
        rgba(var(--rgb), 0) 0%,
        rgba(var(--rgb), 0.5) 25%,
        rgba(var(--rgb), 1) 50%,
        rgba(var(--rgb), 0.5) 75%,
        rgba(var(--rgb), 0) 100%
    );
}

/* Glow underline drawn over the lower half of the text above it */
.glow-ul {
    display: block;
    height: 28px;
    margin-top: -13px;
    position: relative;
    z-index: 2;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1001;
    max-width: calc(100% - 32px);
    padding: 9px 14px;
    border-radius: 6px;
    background: var(--chip);
    color: #fff;
    font-size: 0.85rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
    transform: translate(-50%, 10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.3s var(--ease-out);
}

.toast.on {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .page-reader *,
    .page-reader *::before,
    .page-reader *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}