/* ==============================================================================
   ОБЩИЕ СТИЛИ ВСПОМОГАТЕЛЬНЫХ СТРАНИЦ: /about, /history, 404
   Эти страницы не проходят через сборку Vite (about.html и 404.html лежат в
   public/ как есть, /history генерирует на сервере generate_history_page.sh),
   поэтому стили — отдельным файлом со стабильным именем. Раньше about и
   history шли вовсе без стилей (браузерный Times), а 404 — системным шрифтом:
   три разных шрифта на одном сайте.
   Шрифт и шкала весов — те же, что на главной (src/style.css, --fw-*).
   Файлы /fonts/*.woff2 кладёт в сборку плагин staticFontsPlugin
   (vite.config.js) — имена здесь должны совпадать с его STATIC_FONT_FILES.
   Диапазоны unicode-range — из @fontsource-variable/inter/wght.css: браузер
   качает только нужные подмножества (русский текст — latin + cyrillic).
============================================================================== */
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2-variations"),
         url("/fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations"),
         url("/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
         url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
         url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;
    /* Первый кадр фона-хамелеона главной: hsl(0 70% 61%) */
    --page-bg: #e15656;
}

/* База для всех трёх страниц (404 добавляет поверх свою раскладку) */
html {
    background: var(--page-bg);
    color: #000000;
    font-family: var(--font-sans);
    font-synthesis: none;
    /* Без этого iOS Safari раздувает шрифт в «широких» блоках — см. src/style.css */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ==============================================================================
   Текстовые страницы (about, history): <body class="page">
============================================================================== */
.page {
    box-sizing: border-box;
    max-width: 680px;
    margin: 0 auto;
    padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
             max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    font-size: 17px;
    font-weight: var(--fw-regular);
    line-height: 1.5;
}

.page h1 {
    margin: 0.7em 0 0.5em;
    font-size: clamp(32px, 8vw, 52px);
    font-weight: var(--fw-black);
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.page p {
    margin: 0 0 1em;
}

.page a {
    color: inherit;
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.page a:hover {
    text-decoration-thickness: 3px;
}

.page a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.8);
    border-radius: 2px;
}

.page strong {
    font-weight: var(--fw-semibold);
}

.page hr {
    margin: 2em 0 1.2em;
    border: 0;
    border-top: 2px solid #000000;
}

/* История эфира: «ЧЧ:ММ  Артист — Название», как блок истории на главной.
   В разметке <time> стоит после трека (так его читает скринридер и поисковик),
   визуально — колонкой слева с моноширинными цифрами. */
.page ol {
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
}

.page ol li {
    display: flex;
    align-items: baseline;
    gap: 1em;
    padding: 0.45em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    overflow-wrap: anywhere;
}

/* Время здесь с датой («14 oct, 16:39», generate_history_page.sh), длина
   плавает («9 oct» / «14 oct»): фиксированная колонка по самому длинному
   варианту, чтобы треки начинались ровно. Чуть мельче основного текста —
   служебная подпись, как на главной. */
.page ol li time {
    order: -1;
    flex: 0 0 auto;
    min-width: 7.4em;
    font-size: 0.9em;
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-medium);
    white-space: nowrap;
}