/* ============================================================
   МЕТОД МАРИИ МОНТЕССОРИ — строгий академический стиль
   Нейтральная бумага + чернила, один акцент (брендовый navy).
   Серив для чтения, гротеск — только для меток и подписей.
   ============================================================ */

.mm-page {
    --mm-paper:    #FBFAF7;
    --mm-paper-2:  #F2F0EA;
    --mm-ink:      #1A1A18;
    --mm-ink-soft: #4F4E49;
    --mm-accent:   #194586;   /* брендовый navy */
    --mm-accent-2: #3C65AE;
    --mm-line:     rgba(26, 26, 24, 0.16);
    --mm-line-soft:rgba(26, 26, 24, 0.09);

    --mm-serif: 'Spectral', Georgia, 'Times New Roman', serif;
    --mm-sans:  'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;

    background: var(--mm-paper);
    color: var(--mm-ink);
    font-family: var(--mm-serif);
    font-size: 18px;
    line-height: 1.72;
    overflow-x: clip;
}

/* контент-контейнер без своего паддинга — управляем отступами сами */
.content-container:has(.mm-page) { padding: 0; }

.mm-wrap {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 6vw;
}
.mm-wrap--wide { max-width: 1060px; }

.mm-section { padding: clamp(40px, 6vw, 64px) 0; }
.mm-section--alt { background: var(--mm-paper-2); }

.mm-subhead {
    font-family: var(--mm-serif);
    font-weight: 500;
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: var(--mm-ink);
    margin: clamp(28px, 4vw, 40px) 0 1.1rem;
}

/* ---------- Базовая типографика ---------- */
.mm-overline {
    font-family: var(--mm-sans);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--mm-accent);
    margin: 0 0 clamp(28px, 4vw, 44px);
}

.mm-text {
    font-size: 1.06rem;
    color: var(--mm-ink-soft);
    margin: 0 0 1.3rem;
    text-wrap: pretty;
}
.mm-text:last-child { margin-bottom: 0; }

.mm-lead {
    font-size: clamp(1.2rem, 2vw, 1.42rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--mm-ink);
    margin: 0 0 1.6rem;
}
.mm-dropcap::first-letter {
    font-family: var(--mm-serif);
    font-weight: 500;
    float: left;
    font-size: 3.6em;
    line-height: 0.78;
    padding: 0.04em 0.1em 0 0;
    color: var(--mm-accent);
}
.mm-aside { color: var(--mm-ink-soft); font-style: italic; font-size: 0.82em; }
.mm-aside--lg { font-size: 1.06rem; }

.mm-link {
    color: var(--mm-accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(25, 69, 134, 0.4);
    transition: border-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
    font-style: normal;
}
.mm-link:hover { color: var(--mm-accent-2); border-bottom-color: var(--mm-accent-2); }

/* ---------- Заголовок раздела (римский номер + hairline) ---------- */
.mm-secthead {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin: 0 0 clamp(20px, 3vw, 32px);
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--mm-line);
}
.mm-secthead__num {
    font-family: var(--mm-serif);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--mm-accent);
    flex: none;
    min-width: 1.6em;
}
.mm-secthead__label {
    font-family: var(--mm-sans);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mm-ink);
    margin: 0;
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.mm-masthead {
    padding: clamp(40px, 7vw, 84px) 0 clamp(36px, 5vw, 60px);
    border-bottom: 2px solid var(--mm-ink);
}
.mm-masthead__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: end;
}
.mm-title {
    font-family: var(--mm-serif);
    font-weight: 500;
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--mm-ink);
    margin: 0 0 1.6rem;
}
.mm-epigraph {
    margin: 0;
    padding-left: 1.3rem;
    border-left: 2px solid var(--mm-accent);
    max-width: 34em;
}
.mm-epigraph p {
    font-family: var(--mm-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    line-height: 1.56;
    color: var(--mm-ink-soft);
    margin: 0 0 0.6rem;
}
.mm-epigraph cite {
    font-family: var(--mm-sans);
    font-style: normal;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--mm-ink);
}

.mm-portrait { position: relative; margin: 0; }
.mm-portrait__shape {
    position: absolute;
    inset: -26% -7% 26% 19%;
    z-index: 0;
    background: linear-gradient(150deg, #F4C430 0%, #F4960F 55%, #D9762A 100%);
    border-radius: 46% 54% 56% 44% / 54% 46% 54% 46%;
    transform: rotate(-3deg);
    opacity: 0.9;
}
.mm-portrait__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--mm-line);
    filter: grayscale(1) contrast(1.02);
}
.mm-portrait__cap {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0.5rem;
    white-space: nowrap;
    margin-top: 0.7rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--mm-line);
    font-family: var(--mm-sans);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--mm-ink);
}
.mm-portrait__cap span {
    font-weight: 500;
    color: var(--mm-ink-soft);
    font-variant-numeric: tabular-nums;
}
.mm-portrait__cap span::before {
    content: "·";
    margin-right: 0.5rem;
    color: var(--mm-accent);
}

/* ============================================================
   ПРИНЦИП — сдержанная врезка-цитата
   ============================================================ */
.mm-pullquote {
    margin: 0 0 1.8rem;
    padding: clamp(20px, 4vw, 36px) 0;
    border-top: 1px solid var(--mm-line);
    border-bottom: 1px solid var(--mm-line);
    text-align: center;
}
.mm-pullquote p {
    font-family: var(--mm-serif);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.7rem, 4.2vw, 2.7rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--mm-ink);
    margin: 0;
}

/* ============================================================
   ФУНДАМЕНТАЛЬНЫЕ ПОНЯТИЯ — нумерованный список
   ============================================================ */
.mm-concepts {
    margin: 1.8rem 0 0;
    border-top: 1px solid var(--mm-line);
}
.mm-concept {
    display: block;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--mm-line-soft);
    text-decoration: none;
    color: inherit;
}
.mm-concept__term {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-family: var(--mm-serif);
    font-weight: 500;
    font-size: clamp(1.22rem, 2.4vw, 1.55rem);
    line-height: 1.2;
    color: var(--mm-ink);
    margin: 0 0 0.5rem;
}
.mm-concept__num {
    font-family: var(--mm-sans);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--mm-accent);
    flex: none;
    transform: translateY(-0.15em);
    font-variant-numeric: tabular-nums;
}
.mm-concept__desc {
    margin: 0;
    color: var(--mm-ink-soft);
    font-size: 1.04rem;
    padding-left: calc(0.8rem + 0.7rem);
}
.mm-concept__arrow {
    font-size: 0.62em;
    color: var(--mm-accent);
    transition: transform 0.25s ease;
    align-self: center;
    transform: translateY(-0.05em);
}
.mm-concept--link { cursor: pointer; transition: background 0.2s ease; }
.mm-concept--link:hover { background: rgba(25, 69, 134, 0.04); }
.mm-concept--link:hover .mm-concept__arrow { transform: translate(3px, -0.05em); }

/* ============================================================
   РАСПРОСТРАНЕНИЕ — числовая врезка
   ============================================================ */
.mm-figure-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 4vw, 44px);
    align-items: center;
    padding: clamp(20px, 3vw, 30px) 0 clamp(28px, 4vw, 40px);
}
.mm-figure-stat__num {
    font-family: var(--mm-serif);
    font-weight: 500;
    font-size: clamp(2.8rem, 7vw, 4.6rem);
    line-height: 0.92;
    color: var(--mm-ink);
    letter-spacing: -0.02em;
    margin: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.mm-figure-stat__num span { color: var(--mm-accent); font-weight: 400; }
.mm-figure-stat__text { margin: 0; font-size: 1.04rem; color: var(--mm-ink-soft); }

/* ============================================================
   НАГРАДЫ — таблица с годами
   ============================================================ */
.mm-awards {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    border-top: 1px solid var(--mm-line);
}
.mm-awards li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--mm-line-soft);
}
.mm-awards__name {
    font-family: var(--mm-serif);
    font-weight: 500;
    font-size: 1.04rem;
    color: var(--mm-ink);
}
.mm-awards__year {
    font-family: var(--mm-sans);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.06em;
    color: var(--mm-accent);
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* ============================================================
   ФИГУРЫ С ПОДПИСЯМИ
   ============================================================ */
.mm-figure { margin: clamp(24px, 4vw, 40px) 0 0; }
.mm-figure--wide {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1360px, 94vw);
    max-width: none;
}
.mm-figure__img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--mm-line);
}
.mm-figure__cap {
    margin-top: 0.7rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--mm-line-soft);
    font-family: var(--mm-sans);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--mm-ink-soft);
}
.mm-figure__no { font-weight: 700; color: var(--mm-ink); margin-right: 0.3em; }
.mm-figure__credit { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--mm-ink-soft); opacity: 0.8; }

/* ============================================================
   СПИСОК С ДЕФИСАМИ (как в исходном тексте)
   ============================================================ */
.mm-dashlist {
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}
.mm-dashlist li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1.3rem;
    font-size: 1.06rem;
    color: var(--mm-ink-soft);
}
.mm-dashlist li:last-child { margin-bottom: 0; }
.mm-dashlist li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--mm-accent);
}

/* ============================================================
   АВТОРСТВО СТАТЬИ
   ============================================================ */
.mm-byline {
    margin: clamp(28px, 4vw, 40px) 0 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--mm-line);
    font-family: var(--mm-sans);
    font-size: 0.92rem;
    color: var(--mm-ink);
}
.mm-byline strong { font-weight: 700; color: var(--mm-accent); }

/* ============================================================
   ХЛЕБНАЯ КРОШКА-ВОЗВРАТ
   ============================================================ */
.mm-backlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mm-sans);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mm-accent);
    text-decoration: none;
    margin: 0 0 clamp(20px, 3vw, 28px);
}
.mm-backlink:hover { color: var(--mm-accent-2); }

/* ============================================================
   REVEAL ПРИ СКРОЛЛЕ — сдержанный, только прозрачность
   ============================================================ */
.mm-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.mm-reveal.mm-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .mm-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 820px) {
    .mm-masthead__grid { grid-template-columns: 1fr; gap: 32px; }
    .mm-portrait { max-width: 360px; }

    /* На узкой колонке пятно занимает бОльшую долю экрана и забивает портрет —
       гасим его до лёгкой подложки (0.9 → 0.22).

       В одноколоночной раскладке ширина .mm-portrait равна ширине текстовой
       колонки, поэтому проценты тут считаются от неё. Десктопный `top: -26%`
       (~105px) наезжал бы на эпиграф — сверху берём −8% ≈ gap сетки.
       По горизонтали пятно уводим к самому краю экрана: справа −6%
       (~21px на 390px) — это ровно паддинг .mm-wrap (5–6vw), пятно
       выходит под обрез `overflow-x: clip` и читается как заливка
       навылет. Слева 46% — вся фигура в правой части фотографии. */
    .mm-portrait__shape {
        opacity: 0.22;
        inset: -8% -6% 12% 46%;
    }
    .mm-figure-stat { grid-template-columns: 1fr; gap: 14px; }
    .mm-figure-stat__num { white-space: normal; }

    /* Широкая фигура тянется на 94vw и центрируется по контентной колонке.
       Из-за рельсы сайдбара центр колонки смещён вправо от центра вьюпорта,
       поэтому картинка съезжает и обрезается `overflow-x: clip` у .mm-page.
       На узких экранах выносить её из колонки незачем — оставляем по ширине текста. */
    .mm-figure--wide {
        left: auto;
        transform: none;
        width: 100%;
    }
}
@media (max-width: 560px) {
    .mm-page { font-size: 17px; }
    .mm-concept__desc { padding-left: 0; }

    /* Заголовок «Метод Марии Монтессори»: неразрывный пробел склеивает
       «Марии Монтессори» в одно слово шириной ~376px при 2.4rem, а колонка
       на телефоне — 263–352px. Нижняя граница clamp (2.4rem) на вьюпорт
       не реагировала, и строка уезжала под обрез `overflow-x: clip`.

       Привязываем кегль к вьюпорту: 7vw держит слово внутри колонки на всём
       диапазоне 360–560px, верхний кап 2.4rem сохраняет прежний размер там,
       где он и так помещался. */
    .mm-title { font-size: clamp(1.5rem, 7vw, 2.4rem); }

    .mm-masthead { padding-top: 32px; }

    /* nowrap распирает подпись на узкой колонке */
    .mm-portrait__cap {
        flex-wrap: wrap;
        white-space: normal;
        row-gap: 0.2rem;
    }

    .mm-dropcap::first-letter { font-size: 3em; }

    .mm-epigraph { padding-left: 1rem; }

    .mm-secthead { gap: 0.6rem; }

    .mm-awards li { gap: 0.6rem; }

    .mm-figure__cap { font-size: 0.84rem; }
}

/* ---- Небольшие телефоны (≤400px) ---- */
@media (max-width: 400px) {
    /* 6vw считаются от вьюпорта (390px), а колонка контента — 320px:
       46px паддингов от 320 это 14%. Сужаем до 5vw. */
    .mm-wrap { padding: 0 5vw; }

    .mm-masthead { padding-top: 26px; }

    .mm-epigraph { padding-left: 0.85rem; }

    .mm-dropcap::first-letter { font-size: 2.9em; }

    /* clamp снизу упирается в 1.7rem (27px) — на 288px строка цитаты
       разваливается на переносы по одному слову */
    .mm-pullquote p { font-size: 1.45rem; line-height: 1.18; }
    .mm-pullquote  { padding: 18px 0; }

    /* Название награды + год в одну строку через space-between: год
       отжимается вправо и остаётся висеть один на строке */
    .mm-awards li {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 0.7rem 0;
    }

    .mm-concept { padding: 1.2rem 0; }
    .mm-concept__term { gap: 0.55rem; }

    .mm-figure-stat { padding: 16px 0 22px; }

    .mm-backlink { font-size: 0.7rem; letter-spacing: 0.08em; }
}

@media (hover: none) {
    .mm-concept--link:hover { background: transparent; }
    .mm-concept--link:hover .mm-concept__arrow { transform: translateY(-0.05em); }
}