/* =============================================================================
   style-remake.css — ironhead.id
   Mobile-first. Структура: Settings → Generic → Elements → Layout →
   Components → Utilities → Site-specific.

   Единицы:
   - px   : borders, shadows, letter-spacing — не масштабируются никогда
   - rem  : шрифты и крупные отступы — относительно корневого font-size,
            уважает системные настройки пользователя
   - em   : padding/margin внутри компонента — относительно его font-size
   - %    : ширины колонок
   - clamp: плавная типографика без ступенчатых breakpoint-скачков
   ============================================================================= */


/* ── Settings: Custom Properties ─────────────────────────────────────────── */
/*
   Все повторяющиеся значения — здесь. Менять цвет ссылок или шрифт
   нужно в одном месте, а не по всему файлу.
*/

:root {
    /* Fonts */
    --font-body:    'Georgia', 'Times New Roman', serif;
    --font-ui:      'Helvetica', 'Tahoma', sans-serif;
    --font-mono:    Monaco, 'Lucida Console', monospace;
    --font-display: 'Rubik-Mono-One-Regular', sans-serif;

    /* Colors */
    --color-text:         black;
    --color-text-muted:   #999;
    --color-link:         blue;
    --color-link-visited: purple;
    --color-border:       lightgray;
    --color-bg:           #fff;
    --color-selection:    #b3d7fd;

    /* Typography scale (fluid via clamp)
       Формула: clamp(min, intercept + slope·vw, max)
       Точки: 16px @ 375px viewport, 19px @ 1400px viewport
       slope = (19−16)/(1400−375) ≈ 0.293vw
       intercept = 16 − 0.293×3.75 = 14.9px ≈ 0.93rem               */
    --text-base: clamp(1rem, 0.93rem + 0.293vw, 1.2rem);

    /*  h1: 28px @ 375 → 44px @ 1400  (slope ≈ 1.56vw)  */
    --text-h1: clamp(1.75rem, 1.15rem + 1.56vw, 2.75rem);

    /*  h2: 22px @ 375 → 34px @ 1400  (slope ≈ 1.17vw)  */
    --text-h2: clamp(1.375rem, 0.925rem + 1.17vw, 2.125rem);

    /*  h3: 18px @ 375 → 26px @ 1400  (slope ≈ 0.78vw)  */
    --text-h3: clamp(1.125rem, 0.825rem + 0.78vw, 1.625rem);

    /*  h4–h6: такой же размер как body, просто жирные  */
    --text-h4: var(--text-base);

    /* Spacing scale — кратно 4px, в rem
       Везде где отступ должен масштабироваться с текстом используем em.
       Везде где фиксированный пробел между блоками — rem.           */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.5rem;    /* 24px */
    --space-6:  2rem;      /* 32px */
    --space-7:  2.5rem;    /* 40px */
    --space-8:  3rem;      /* 48px */
    --space-10: 4rem;      /* 64px */
    --space-12: 5rem;      /* 80px */

    /* Breakpoints нельзя использовать в custom properties внутри @media,
       поэтому они задокументированы здесь только для справки:
       --bp-sm: 640px  --bp-md: 768px  --bp-lg: 960px  --bp-xl: 1200px */
}


/* ── Generic: Font-face ───────────────────────────────────────────────────── */

@font-face {
    font-family: 'Rubik-Mono-One-Regular';
    src: url('../fonts/Rubik-Mono-One-Regular.ttf.woff') format('woff'),
         url('../fonts/Rubik-Mono-One-Regular.ttf.svg#Rubik-Mono-One-Regular') format('svg'),
         url('../fonts/Rubik-Mono-One-Regular.ttf.eot'),
         url('../fonts/Rubik-Mono-One-Regular.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;   /* текст виден сразу со system-font, шрифт подгружается */
}


/* ── Generic: Reset ───────────────────────────────────────────────────────── */
/*
   Минимальный reset: только box-sizing и убираем margin у body.
   Normalize.css не нужен — у нас небольшой проект с известными браузерами.
*/

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

body { margin: 0; }

/* Selection */
::selection { background: var(--color-selection); color: initial; text-shadow: none; }


/* ── Elements: Base HTML ──────────────────────────────────────────────────── */
/*
   Стили для голых HTML-элементов без классов.
   Это определяет внешний вид статического контента из Markdown.
*/

/* --- Root typography ------------------------------------------------------- */

html {
    /* rem-база. Все clamp() считаются от этого значения.
       Если пользователь в браузере поставил 20px — rem становится 20px
       и весь текст масштабируется корректно.                          */
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-text-size-adjust: 100%;   /* предотвращает iOS от авто-увеличения шрифта */
}

body {
    /* font-size задан здесь (не на html) чтобы rem оставался чистым базовым
       и не смешивался с масштабом тела.                               */
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
}

/* --- Links ----------------------------------------------------------------- */

a         { color: var(--color-link); text-decoration: underline; }
a:hover   { color: var(--color-link); text-decoration: underline; }
a:visited { color: var(--color-link-visited); }

/* Якорные ссылки (id-атрибуты) — без декорации */
a[id] { color: var(--color-text); text-decoration: none; box-shadow: none; }

/* --- Inline elements ------------------------------------------------------- */

b, strong { font-weight: bolder; }
em        { color: var(--color-text); }   /* UIkit делает em серым — нам не нужно */
small     { font-size: 0.875em; }          /* em: относительно родителя */

sub, sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup { top: -0.5em;    margin-left: 0.15em; margin-right: 0.2em; }
sub { bottom: -0.25em; }

abbr[title] { text-decoration: underline dotted; }
address     { font-style: normal; }

/* Зачёркнутый текст — спойлер-эффект */
s       { color: var(--color-text); background-color: var(--color-text); text-decoration: none; }
s:hover { color: white; }

mark { background: yellow; color: var(--color-text); }

/* --- Media ----------------------------------------------------------------- */

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

img:not([src]) { visibility: hidden; min-width: 1px; }
iframe { border: 0; }

/* --- Block spacing ─────────────────────────────────────────────────────────
   Owl selector (* + *) даёт единый ритм без margin-bottom у последнего
   элемента. Используем margin-top чтобы пространство принадлежало
   нижнему элементу (ему это нужно, а не верхнему).
   20px ≈ 1.25rem — один базовый блок вертикального ритма.
   ─────────────────────────────────────────────────────────────────────── */

p, ul, ol, dl, pre, address, figure, fieldset { margin: 0; }

* + p,
* + ul,
* + ol,
* + dl,
* + pre,
* + address,
* + figure,
* + fieldset { margin-top: var(--space-4); }   /* 16px между блоками */

/* --- Lists ----------------------------------------------------------------- */

ul, ol { padding-left: var(--space-6); }   /* rem: не зависит от шрифта родителя */

/* Вложенные списки: отступ и пробел снизу через em
   (em: пропорционально к font-size самого элемента, не корню)       */
ol > li > ol, ol > li > ul,
ul > li > ol, ul > li > ul {
    margin-top: 0.5em;
    margin-left: 1em;
    margin-bottom: 0.5em;
}

li { margin-bottom: 0.125em; }   /* минимальный воздух между пунктами */

dt { font-weight: 700; }
dd { margin-left: 0; }

/* --- Headings ──────────────────────────────────────────────────────────────
   font-size через clamp: плавно масштабируется от мобилки до десктопа
   без breakpoint-скачков. line-height уменьшается с размером —
   крупные заголовки читаются с меньшим межстрочником.
   margin-bottom в em: отступ пропорционален размеру заголовка.
   ─────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 {
    font-family: var(--font-ui);
    font-weight: bold;
    color: var(--color-text);
    text-transform: none;
    word-wrap: break-word;
    margin: 0;
}

/* Owl для заголовков: отступ сверху через rem, не em —
   он должен быть фиксированным «разделом», не расти с размером     */
* + h1, * + .uk-h1,
* + h2, * + .uk-h2,
* + h3, * + .uk-h3,
* + h4, * + .uk-h4,
* + h5, * + .uk-h5,
* + h6, * + .uk-h6 { margin-top: var(--space-7); }   /* 40px */

h1 + *, .uk-h1 + *,
h2 + *, .uk-h2 + *,
h3 + *, .uk-h3 + *,
h4 + *, .uk-h4 + * { margin-top: var(--space-3); }   /* 12px после заголовка */

h1, .uk-h1 { font-size: var(--text-h1); line-height: 1.15; }
h2, .uk-h2 { font-size: var(--text-h2); line-height: 1.25; }
h3, .uk-h3 { font-size: var(--text-h3); line-height: 1.35; }
h4, .uk-h4,
h5, .uk-h5,
h6, .uk-h6 { font-size: var(--text-h4); line-height: 1.5; }

/* --- Blockquote ------------------------------------------------------------ */

blockquote {
    margin: 0;
    font-size: 1em;     /* em: относительно контекста, не корня */
    line-height: 1.5;
    font-style: normal;
    color: var(--color-text);
    padding: 1em var(--space-5);   /* em по вертикали — ритм с текстом */
}

* + blockquote { margin-top: var(--space-4); }

blockquote p:last-child { margin-bottom: 0; }

blockquote p,
blockquote li { font-size: 0.9em; }   /* em: меньше контекста на 10% */

blockquote footer {
    margin-top: var(--space-3);
    font-size: 0.875em;
    line-height: 1.5;
}

/* --- Pre / code ------------------------------------------------------------ */
/*
   font-size: medium = 16px — ключевое слово браузера, аналог 1rem.
   white-space: pre-wrap — переносит длинные строки (важно на мобиле).
*/

pre {
    font-family: var(--font-mono);
    font-size: medium;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    border: none;
    color: inherit;
    margin: 0;
    tab-size: 4;
}
* + pre { margin-top: var(--space-4); }

pre code { font-family: var(--font-mono); }

/* --- HR -------------------------------------------------------------------- */

hr, .uk-hr {
    border: 0;
    border-top: 1px solid var(--color-border);   /* px: линия всегда 1px */
    margin: 0;
    overflow: visible;
}

* + hr, * + .uk-hr { margin-top: var(--space-4); }

/* --- Misc ------------------------------------------------------------------ */

details, main { display: block; }
summary       { display: list-item; cursor: pointer; }
template      { display: none; }


/* ── Layout: Container & Grid ─────────────────────────────────────────────── */

.uk-container {
    display: flow-root;
    box-sizing: content-box;     /* padding не входит в max-width — UIkit-поведение */
    max-width: 1200px;
    margin-inline: auto;         /* современная замена margin: 0 auto */
    padding-inline: var(--space-2);   /* mobile: минимальные поля */
}

.innerspace {
    margin-left: var(--space-4);    /* 16px */
    margin-right: var(--space-6);   /* 32px */
}

@media (min-width: 768px) {
    .uk-container { padding-inline-start: var(--space-5); }   /* 24px */
}

@media (min-width: 960px) {
    .uk-container { padding-inline-start: var(--space-7); }   /* 40px */
}

.uk-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}
.uk-grid > *    { min-width: 0; }
.uk-grid-small  { gap: var(--space-4); }


/* ── Components ───────────────────────────────────────────────────────────── */

/* --- Tile ------------------------------------------------------------------ */

.uk-tile       { display: block; padding: var(--space-5); }
.uk-tile-muted { background: #f8f8f8; }

/* --- Overlay & position ---------------------------------------------------- */

.uk-overlay { padding: var(--space-5); }

.uk-position-center {
    position: absolute !important;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}

.uk-position-left {
    position: absolute !important;
    top: 0; bottom: 0; left: 0;
}

/* --- Inline ---------------------------------------------------------------- */

.uk-inline {
    display: inline-block;
    position: relative;
    max-width: 100%;
    vertical-align: middle;
}

/* --- Heading line ─────────────────────────────────────────────────────────
   Линии растягиваются на 2000px в каждую сторону и обрезаются overflow:hidden.
   calc(.2px + .05em) — толщина линии чуть растёт с размером текста.
   ─────────────────────────────────────────────────────────────────────── */

.uk-heading-line { overflow: hidden; }

.uk-heading-line > * {
    display: inline-block;
    position: relative;
}

.uk-heading-line > *::before,
.uk-heading-line > *::after {
    content: '';
    position: absolute;
    top: calc(50% - calc(0.2px + 0.05em) / 2);
    width: 2000px;
    border-bottom: calc(0.2px + 0.05em) solid var(--color-border);
}

.uk-heading-line > *::before { right: 100%; margin-right: calc(5px + 0.3em); }
.uk-heading-line > *::after  { left:  100%; margin-left:  calc(5px + 0.3em); }

/* --- Dropcap --------------------------------------------------------------- */
/*
   Буква плавает влево и занимает высоту нескольких строк.
   font-size в em — относительно font-size параграфа.
   line-height: 0.85 — убирает лишнее пространство над буквой.
*/

.uk-dropcap::first-letter,
.uk-dropcap > p:first-of-type::first-letter {
    display: block;
    float: left;
    font-family: var(--font-display);
    font-size: 4.5em;
    line-height: 0.85;
    margin-right: 0.1em;
    margin-top: 0.05em;
}

/* --- Dividers -------------------------------------------------------------- */

.uk-divider-small {
    border: 0;
    margin: 0;
}
.uk-divider-small::after {
    content: '';
    display: block;
    border-top: 1px solid var(--color-border);
    width: 100px;
}

.uk-divider-icon {
    position: relative;
    height: 0;
    border-top: 1px solid var(--color-border);
    text-align: center;
    margin: var(--space-6) 0;
}
.uk-divider-icon::before,
.uk-divider-icon::after {
    content: '';
    position: absolute;
    top: -1px;
    border-top: 1px solid var(--color-border);
    width: calc(50% - 40px);
}
.uk-divider-icon::before { left: 0; }
.uk-divider-icon::after  { right: 0; }

/* --- Navigation ─────────────────────────────────────────────────────────────
   uk-navbar-container — позиционирование.
   uk-subnav — flex-строка с переносом (nav на мобиле занимает несколько строк).
   margin-left/padding-left = 0 (UIkit-дефолт -20px/20px убран).
   ─────────────────────────────────────────────────────────────────────── */

.uk-navbar-container   { position: relative; }
.uk-navbar-transparent { background: transparent; box-shadow: none; }

.uk-navbar-left,
.uk-navbar-right,
[class*="uk-navbar-center"] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.uk-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uk-subnav > * {
    flex: none;
    padding-left: 0;
    position: relative;
}

/* Первый дочерний элемент li (ссылка или текст) */
.uk-subnav > * > :first-child {
    display: flex;
    align-items: center;
    column-gap: 0.25em;
    color: var(--color-text);
    font-size: 0.875rem;      /* rem: nav-текст фиксирован, не зависит от контекста */
    text-transform: uppercase;
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.uk-subnav > * > a:hover    { color: #444; text-decoration: none; }
.uk-subnav > .uk-active > a { color: var(--color-text); }

.uk-subnav-pill { margin-left: 0; }
.uk-subnav-pill > * { padding-left: 0; }

.uk-subnav-pill > * > :first-child {
    padding: 0.3em 0.6em;    /* em: padding масштабируется с font-size nav */
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.uk-subnav-pill > * > a:hover,
.uk-subnav-pill > * > a:active {
    background-color: rgba(0,0,0,0.08);
    color: var(--color-text);
    text-decoration: none;
}

.uk-subnav-pill > .uk-active > a,
.uk-subnav-pill > .uk-active > a:hover {
    background-color: rgba(0,0,0,0.08);
    color: var(--color-text);
    box-shadow: 0 -3px 0 var(--color-text);   /* px: декоративная черта */
    border: 1px solid var(--color-border);
}

/* --- Label ----------------------------------------------------------------- */
/*
   padding в em — пропорционально font-size самого лейбла.
   border-radius: 0 — намеренно, стиль сайта без скруглений.
*/

.uk-label {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0;
    padding: 0 0.6em;
    text-transform: none;
    background: transparent;
    box-shadow: none;
    vertical-align: baseline;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    margin: 0.3em 0.3em 0.3em 0;
}

.uk-label:visited,
.uk-label:hover { color: var(--color-text); text-decoration: none; }

.uk-label:hover {
    background: var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.active { background-color: var(--color-border); }

/* --- Button ─────────────────────────────────────────────────────────────────
   font-size: medium = 16px (ключевое слово, не rem/em) — кнопка не
   должна масштабироваться вместе с заголовками.
   padding в px — фиксированный hit-target.
   box-shadow в px — декоративная тень, не масштабируется.
   ─────────────────────────────────────────────────────────────────────── */

.uk-button {
    display: inline-block;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    font-family: var(--font-mono);
    font-size: medium;
    text-transform: none;
    box-shadow: 8px 8px 0 0 var(--color-text);
    padding: 0 40px 0 28px;
}

.uk-button:hover {
    box-shadow: 8px 8px 0 0 var(--color-text);
}

.uk-button-large {
    padding: 0 40px;
    line-height: 55px;     /* px: фиксированная высота кнопки */
    font-size: 1.25rem;
}

.uk-button-primary {
    background-color: #175af3;
    color: white;
    transform: translate(0, 0);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.uk-button-primary:hover {
    background-color: blue;
    transform: translate(2px, 2px);
    box-shadow: 6px 6px 0 0 var(--color-text);
}

.uk-button-primary:visited { color: white; }

/* --- Search ─────────────────────────────────────────────────────────────────
   height: 2.4rem — высота поля в rem, масштабируется с корневым font-size.
   padding-left: 2.4rem — место под иконку поиска, равно высоте поля.
   ─────────────────────────────────────────────────────────────────────── */

.uk-search          { display: inline-block; position: relative; }
.uk-search-default  { width: 100%; }

.uk-search-input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    overflow: visible;
    font: inherit;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: transparent;
}

.uk-search-default .uk-search-input {
    display: block;
    width: 100%;
    height: 2.4rem;
    padding: 0 var(--space-2) 0 2.4rem;   /* левый padding = ширина иконки */
    font-size: 1rem;
}

.uk-search-input::placeholder { color: var(--color-text-muted); }

.uk-search-default .uk-search-input:focus {
    background-color: var(--color-bg);
    border-color: var(--color-text);
    outline: none;
}

.uk-search-icon {
    position: absolute;
    top: 0; left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;   /* rem: совпадает с height поля */
    height: 2.4rem;
}


/* ── Utilities ────────────────────────────────────────────────────────────── */
/*
   Утилиты идут последними среди uk-классов чтобы всегда побеждать компоненты.
   Используем !important только там где это семантически верно (remove-утилиты).
*/

/* --- Width ----------------------------------------------------------------- */

.uk-width-1-1 { width: 100%; }
.uk-width-1-2 { width: 50%; }
.uk-width-1-3 { width: 33.333%; }
.uk-width-2-3 { width: 66.667%; }
.uk-width-2-5 { width: 40%; }

@media (min-width: 640px) {
    .uk-width-1-1\@s { width: 100%; }
    .uk-width-1-2\@s { width: 50%; }
    .uk-width-1-3\@s { width: 33.333%; }
    .uk-width-2-3\@s { width: 66.667%; }
    .uk-width-2-5\@s { width: 40%; }
}

@media (min-width: 768px) {
    .uk-width-1-1\@m { width: 100%; }
    .uk-width-1-2\@m { width: 50%; }
    .uk-width-1-3\@m { width: 33.333%; }
    .uk-width-2-3\@m { width: 66.667%; }
    .uk-width-2-5\@m { width: 40%; }
}

@media (min-width: 960px) {
    .uk-width-1-1\@l { width: 100%; }
    .uk-width-1-2\@l { width: 50%; }
    .uk-width-1-3\@l { width: 33.333%; }
    .uk-width-2-3\@l { width: 66.667%; }
    .uk-width-2-5\@l { width: 40%; }
}

/* --- Margin ---------------------------------------------------------------- */

.uk-margin                { margin: var(--space-5) 0; }
.uk-margin-top            { margin-top: var(--space-5); }

.uk-margin-small-top      { margin-top: var(--space-4); }
.uk-margin-small-bottom   { margin-bottom: var(--space-4); }
.uk-margin-small-left     { margin-left: var(--space-4); }
.uk-margin-small-right    { margin-right: var(--space-4); }

.uk-margin-medium         { margin: var(--space-7) 0; }
.uk-margin-medium-top     { margin-top: var(--space-7); }
.uk-margin-medium-bottom  { margin-bottom: var(--space-7); }

.uk-margin-large          { margin: var(--space-7) 0; }
.uk-margin-large-top      { margin-top: var(--space-7); }
.uk-margin-large-bottom   { margin-bottom: var(--space-7); }

.uk-margin-xlarge-top     { margin-top: var(--space-10); }
.uk-margin-xlarge-bottom  { margin-bottom: var(--space-10); }

@media (min-width: 960px) {
    .uk-margin-large          { margin: var(--space-10) 0; }
    .uk-margin-large-top      { margin-top: var(--space-10); }
    .uk-margin-large-bottom   { margin-bottom: var(--space-10); }
    .uk-margin-xlarge-top     { margin-top: var(--space-12); }
    .uk-margin-xlarge-bottom  { margin-bottom: var(--space-12); }
}

.uk-margin-remove        { margin: 0 !important; }
.uk-margin-remove-top    { margin-top: 0 !important; }
.uk-margin-remove-bottom { margin-bottom: 0 !important; }
.uk-margin-remove-left   { margin-left: 0 !important; }
.uk-margin-remove-right  { margin-right: 0 !important; }

/* --- Padding --------------------------------------------------------------- */

.uk-padding-small          { padding: var(--space-4); }
.uk-padding-remove         { padding: 0 !important; }
.uk-padding-remove-top     { padding-top: 0 !important; }
.uk-padding-remove-bottom  { padding-bottom: 0 !important; }

/* --- Float align ─────────────────────────────────────────────────────────
   На мобилке изображения не плавают — они полноширинные.
   float только с md breakpoint.
   ─────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .uk-align-right\@s { float: right; margin-left: var(--space-5); }
    .uk-align-left\@s  { float: left;  margin-right: var(--space-5); }
}

@media (min-width: 768px) {
    .uk-align-right, .uk-align-right\@m { float: right; margin-left: var(--space-5); }
    .uk-align-left,  .uk-align-left\@m  { float: left;  margin-right: var(--space-5); }
}

@media (min-width: 960px) {
    .uk-align-right\@l { float: right; margin-left: var(--space-5); }
    .uk-align-left\@l  { float: left;  margin-right: var(--space-5); }
}

/* --- Visibility ------------------------------------------------------------ */

.uk-hidden { display: none !important; }

@media (max-width: 639.98px)  { .uk-visible\@s { display: none !important; } }
@media (max-width: 767.98px)  { .uk-visible\@m { display: none !important; } }
@media (max-width: 959.98px)  { .uk-visible\@l { display: none !important; } }

@media (min-width: 768px) { .uk-hidden\@m { display: none !important; } }
@media (min-width: 960px) { .uk-hidden\@l { display: none !important; } }

/* --- Text ------------------------------------------------------------------ */

.uk-text-small  { font-size: 0.875rem; line-height: 1.5; }
.uk-text-muted  { color: var(--color-text-muted); }
.uk-text-italic { font-style: italic; }
.uk-text-left   { text-align: left !important; }
.uk-text-right  { text-align: right !important; }
.uk-text-center { text-align: center !important; }

/* --- Border ---------------------------------------------------------------- */

.uk-border-pill { border-radius: 500px; }
.uk-inline-block { display: inline-block; }

/* --- Accessibility --------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ── Site: Typography & Content ───────────────────────────────────────────── */
/*
   Все кастомные классы сайта. Шрифты, размеры, контентные блоки.
   font-size задан на body через clamp — дочерние элементы наследуют.
   Переопределяем только там где нужно отклонение от базы.
*/

/* Ссылки в контенте */
main a, p a, footer a { color: var(--color-link); text-decoration: underline; }
main a:visited, p a:visited { color: var(--color-link-visited); }

/* Основной текст */
main, main p, main ul, main ol, main li {
    font-family: var(--font-body);
    color: var(--color-text);
}

main li { margin-bottom: 2pt; }   /* pt: типографская единица, ~2.67px */

.references li { margin-bottom: 1em; }

main ol, main ul {
    padding-left: 0;
    margin-left: 1em;
}

/* --- Subtitle -------------------------------------------------------------- */

.subtitle {
    font-size: 0.7em;       /* em: относительно заголовка к которому прикреплён */
    font-weight: normal;
    display: block;
    line-height: 1.4;
    margin-top: var(--space-2);
}

/* --- Intro paragraph ------------------------------------------------------- */

.intro {
    font-style: italic;
    font-size: 1.1em;
    margin-bottom: var(--space-6);
}

/* --- Display text (loud) ───────────────────────────────────────────────────
   Декоративный крупный текст. clamp: от 2rem на мобиле до 4rem на десктопе.
   line-height: 1 — плотный набор для визуального акцента.
   ─────────────────────────────────────────────────────────────────────── */

.loud {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1rem + 5vw, 4rem);
    line-height: 1;
    overflow-wrap: break-word;
    margin: 1em 0;
}

.loud-small {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
    line-height: 1.1;
    margin: 1.4em 0;
}

/* --- Figures --------------------------------------------------------------- */

figure {
    padding: var(--space-6) 0 var(--space-4);
    margin: 0;
}

* + figure { margin-top: var(--space-4); }

figcaption {
    font-family: var(--font-ui);
    font-size: 0.875rem;
    padding-top: var(--space-3);
    font-style: italic;
}

.width-80 { width: 80%; }   /* % от контейнера, не vw */

/* --- Layout helpers -------------------------------------------------------- */

.full-width {
    margin-right: calc(50% - 45vw);
    max-width: 100vw;
    margin-left: -30px;
}

.full-width-margin {
    margin-right: calc(50% - 49vw);
    max-width: 100vw;
}

.full-width-image {
    width: 100vw;
    margin-left: -40px;
}

/* --- Embed responsive container -------------------------------------------- */

.embed-container {
    position: relative;
    padding-bottom: 56.25%;   /* % — соотношение сторон 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* --- Content blocks -------------------------------------------------------- */

.original-link {
    word-break: break-all;
    border: 1px solid blue;
    margin: 1em 0 2em;
    padding: var(--space-4);
}

.original-link,
.original-link p,
.original-link li {
    font-family: var(--font-mono);
    font-size: medium;
}

.original-link p { padding: 0; margin: 0; }

/* Цитата с кавычками */
.direct {
    font-size: 1.2em;
    font-style: italic;
    quotes: "\201C" "\201D" "\2018" "\2019";
    padding: 0.6em var(--space-5);
    line-height: 1.5;
}

.direct p:first-of-type::before {
    content: open-quote;
    display: inline;
    height: 0;
    line-height: 0;
    position: relative;
    left: -10px;
    top: 30px;
    color: lightgray;
    font-size: 3em;
}

.direct p:last-of-type::after {
    content: close-quote;
    display: inline;
    height: 0;
    line-height: 0;
    position: relative;
    left: 0;
    top: 35px;
    color: lightgray;
    font-size: 3em;
}

.direct footer::before { content: "— "; }

.direct footer {
    text-align: right;
    font-style: normal;
    margin-top: 1em;
    font-size: 0.9em;
    line-height: 1.5;
}

/* --- Misc inline ----------------------------------------------------------- */

.error { color: red; }

details.links            { background: lavender; }
details.links li         { font-size: 0.875rem; margin-bottom: 0.8rem; }

.book                    { padding-block: var(--space-6); }
.book h4                 { font-size: 0.9em; line-height: 1.8; }
.book h4 span            { text-transform: uppercase; letter-spacing: 0.02em; }
.book h4 cite            { font-weight: normal; }

.book-card {
    font-family: var(--font-mono);
    font-size: 0.8em;
    font-style: normal;
    padding-left: 1.5em;
    text-indent: -1.5em;
}

/* --- Aside / sidenotes ----------------------------------------------------- */

aside,
aside p,
aside ol li,
aside ul li {
    font-family: var(--font-mono);
    font-size: small;
    line-height: 1.7;
    margin-top: 3pt;
    margin-bottom: 8pt;
}

.sidenote {
    padding: var(--space-4);
    background-color: aliceblue;
}
.sidenote p { font-size: 0.8em; }

.sidenotetest {
    background: aliceblue;
    padding: var(--space-4);
    font-size: 0.8em;
}

.sidenote-therapy {
    padding: var(--space-4);
    font-size: 0.8em;
    border: 1px solid var(--color-text);
    margin: 2rem 0;
}
.sidenote-therapy p { margin-bottom: 4pt; }

.footnotes,
.footnotes p { font-size: 0.9em; }

/* --- Inline elements ------------------------------------------------------- */

sup { margin-left: 0.15em; margin-right: 0.2em; }


/* ── Site: Navigation ─────────────────────────────────────────────────────── */

nav .taxonomy a,
nav .taxonomy a:visited {
    border: 1px solid var(--color-border);
    color: var(--color-text);
    box-shadow: none;
    text-decoration: none;
}

nav .taxonomy a:hover {
    background-color: lightgray;
    color: var(--color-text);
}

nav li            { letter-spacing: 0.03rem; }
nav li .tag-counter { letter-spacing: normal; }
nav #colon        { font-size: 1rem; }

nav .taxonomy     { margin-top: var(--space-4); }

.taxonomy li, .uk-label { margin: 0.3em 0.3em 0.3em 0; }

.subnav-toc {
    font-family: var(--font-ui);
    font-weight: 700;
}

/* UI-шрифт для навигационных элементов */
nav .uk-subnav,
.blog-item-date,
footer li,
.book h4,
.subnav-series li,
.blog-item-title,
#all-posts,
#next-post {
    font-family: var(--font-ui);
}

#all-posts, #next-post { font-weight: bold; font-size: 1.125rem; }

#next-post          { line-height: 1; }
#next-post-label    { text-transform: uppercase; font-size: 0.7em; letter-spacing: 0.02em; }
#next-post-title,
#all-posts-label    { text-decoration: underline; }

/* Логотип */
#logo,
#logo a,
#logo a:hover,
#logo-index,
#logo-index a {
    font-family: var(--font-display);
    color: var(--color-text);
    background-color: transparent;
    font-size: 16pt;           /* pt: оригинальное значение, ~21px */
    border: none;
    text-decoration: none;
    padding: 1px 0 0;
    margin-right: var(--space-5);
    width: 149px;
}

#logo span      { letter-spacing: -3px; margin: 0 1px 0 2px; }
#logo-index a   { box-shadow: 0 -4px 0 var(--color-text); }


/* ── Site: Blog listings ──────────────────────────────────────────────────── */

.blog-item-date {
    color: var(--color-text);
    font-size: 0.875rem;
    margin-right: var(--space-2);
}

.blog-item-description {
    color: var(--color-text);
    font-family: var(--font-body);
}

.blog-item-header h3    { margin-bottom: 5pt; }
.blog-item-small        { margin-bottom: var(--space-5); font-size: 0.9em; }
.blog-item-meta         { margin-top: var(--space-1); }

.blog-item-small h2 {
    font-size: 0.85rem;
    display: inline;
    padding-right: var(--space-1);
}

.blog-item-min .blog-item-title,
.blog-item-small .blog-item-title { margin-right: var(--space-2); }

.blog-item-title { text-decoration: underline; }

.blog-item-icon { display: inline-block; text-decoration: none; }

.blog-item-preview-featured .blog-item-title,
.blog-item-preview-featured .blog-item-description { font-size: 1.3em; }

.featured { font-weight: bold; }

.starred     { padding: var(--space-6); background-color: beige; }
.starred-min { padding: var(--space-2); }

.divider-archive::after { border-top: 6px solid var(--color-text); }

.archive a                  { text-decoration: none; }
.archive .blog-item-title a { text-decoration: underline; }

a:visited .blog-item-title  { color: var(--color-link-visited); }
a:visited#next-post         { color: var(--color-link-visited); }


/* ── Site: Therapy notice ─────────────────────────────────────────────────── */

.therapy-notice {
    background-color: var(--color-bg);
    outline: solid 1px var(--color-text);
    position: relative;
    padding: 0;
}

.therapy-notice p {
    font-family: var(--font-mono);
    padding: 1.5vw 4vw 4.5vw;   /* vw тут намеренно — notice должен заполнять */
    font-size: medium;
    margin-top: 5px;
    line-height: 1.5;
}

.therapy-notice img { padding-top: 1px; }

.therapy-notice #therapy-link {
    background-color: var(--color-text);
    font-style: italic;
    padding: 0.2em 0.3em;
    box-shadow: none;
    color: #dfed6f;
}

.therapy-notice #therapy-link:hover { color: white; }

.arrow               { font-size: 1.5em; }
#therapy-link-text   { text-decoration: underline; }

.therapy-notice-shadow {
    background-image:
        radial-gradient(#000 1px, transparent 1px),
        radial-gradient(#000 1px, transparent 1px);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
    z-index: -1;
    margin: 2% 0 0 2%;
    width: 100%; height: 100%;
    position: absolute;
    inset: 0;
    margin: 2% 0 0 2%;
}


/* ── Site: Therapy page ───────────────────────────────────────────────────── */

.therapy-title {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: calc(100vw - 80px);
}

#existenz, .therapy-title { margin-top: var(--space-4); }


.therapy-timestamp {
    transform: rotate(90deg);
    transform-origin: top left;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    white-space: nowrap;
}


/* ── Site: Footer ─────────────────────────────────────────────────────────── */

.icon {
    display: inline-flex;
    align-self: center;
}

.icon svg, .icon img {
    height: 1em; width: 1em;
    padding-right: 5px;
}

.icon.baseline svg,
.icon.baseline img {
    width: 1.4em;
    top: 0.125em;
    position: relative;
}

.contacts {
    list-style: none;
    padding-left: 0;
    font-size: 0.875rem;
    line-height: 2;
}

.contacts > li { margin-right: var(--space-4); }

@media (min-width: 768px) {
    .contacts { display: flex; }
}


/* ── Site: TNTSearch ──────────────────────────────────────────────────────── */

#tntsearch-wrapper { position: relative; }

.tntsearch-clear {
    border-radius: 100%;
    padding: 0 1rem;
    line-height: 1;
    position: absolute;
    right: 0; top: 0;
    font-size: 2rem;
    cursor: pointer;
}

.tntsearch-field-inpage { width: 100%; }

.tntsearch-dropdown ~ .tntsearch-results {
    position: relative;
    margin-bottom: 0;
}

.tntsearch-dropdown ~ .tntsearch-results .row {
    position: absolute;
    top: 0; right: 0;
    width: 400px;
    background: var(--color-bg);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    padding: var(--space-3);
    z-index: 2;
}

.tntsearch-results .info    { color: var(--color-text-muted); font-size: 0.9em; }
.tntsearch-results .title   { margin-bottom: var(--space-3); }
.tntsearch-results .route   { margin-top: 0; margin-bottom: var(--space-3); }
.tntsearch-results .row > p { margin-top: 0; }
.tntsearch-results em       { font-style: normal; background-color: #ffff33; }
.tntsearch-powered-by       { text-align: center; font-size: 0.875rem; }
.tntsearch-dropdown ~ .tntsearch-powered-by { display: none; }


/* ── Layout breakpoints ───────────────────────────────────────────────────── */
/*
   Типографика больше не нужна в @media — она fluid через clamp().
   Остались только layout-изменения: контейнер, колонки, sidenotes.
*/

@media (min-width: 960px) {
    figure { width: 60vw; }

    .therapy-notice { width: 95%; }   /* вернуть к фиксированной ширине на десктопе */

    .sidenotetest {
        margin-right: -30px;
        background: none;
        border: none;
        padding: 0;
    }
}

@media (min-width: 1200px) {
    blockquote { padding-inline: var(--space-10); }

    .sidenotetest,
    .sidenote-therapy   { margin-right: -360px; }
    .sidenote-therapy   { border: none; padding: 0; margin: 0; }
    .therapy-notice     { padding: 0; }
}