/* ============================================================
   HCG — weight loss, diets & metabolic health
   Каркас издания. Прогон hcg, 09.09.2026. Ноль JS.
   Секции: [палитра] [сброс] [шапка] [подвал] [главная]
           [рубрика] [статья] [гейминг] [старые блоки] [адаптив]
   ============================================================ */

/* --- [палитра] ------------------------------------------- */
:root {
    /* освежённая палитра прежнего сайта: синь ушла в чернильную,
       оранжевый — в кирпичный, добавлен зелёный «здоровья» */
    /* переменные прежнего сайта: они жили в инлайновом <style> каждой страницы,
       который снят на сборке. Не объявить их = карточки операторов теряют цвета. */
    --color-primary: #E7A81C;
    --color-secondary: #C24A16;   /* кнопки донора: белым по нему 4,9:1 */
    --color-tertiary: #123C6E;
    --color-gray: #E3E8EF;
    --color-text-main: #16202B;
    --color-text-head: #10243B;
    --color-text-dark: #0C2949;
    --color-text-add: #5A6675;

    --hcg-ink: #123C6E;
    --hcg-ink-deep: #0C2949;
    --hcg-flame: #C24A16;
    --hcg-flame-ink: #B0430F;   /* тот же кирпич, но 4.9:1 на бумаге — для мелкого текста */
    --hcg-flame-dark: #B44315;
    --hcg-leaf: #157F5F;
    --hcg-amber: #E7A81C;
    --hcg-paper: #F4F6F9;
    --hcg-sheet: #FFFFFF;
    --hcg-line: #DEE4EC;
    --hcg-text: #16202B;
    --hcg-mute: #5A6675;
    --hcg-shadow: 0 1px 2px rgba(18, 60, 110, .06), 0 8px 24px rgba(18, 60, 110, .07);

    --hcg-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --hcg-sans: "Archivo", "Segoe UI", Helvetica, Arial, sans-serif;
    --hcg-wide: 1320px;
    --hcg-read: 45rem;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url(/media/hcg/newsreader.woff2) format("woff2");
}

/* --- [сброс] --------------------------------------------- */
body {
    margin: 0;
    background: var(--hcg-paper);
    color: var(--hcg-text);
    font-family: var(--hcg-sans);
    font-size: 17px;
    line-height: 1.62;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

.hcg-shell {
    max-width: var(--hcg-wide);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.hcg-skip {
    position: absolute;
    left: -9999px;
}

/* --- [шапка] --------------------------------------------- */
.hcg-mast {
    background: var(--hcg-ink);
    border-bottom: 3px solid var(--hcg-amber);
}

.hcg-mast__strip {
    background: var(--hcg-ink-deep);
    color: #C9D3E1;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hcg-mast__strip .hcg-shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 34px;
}

.hcg-mast__strip a { color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 600; }
.hcg-mast__strip a:hover { color: var(--hcg-amber); }

.hcg-mast__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    min-height: 76px;
}

.hcg-mark { display: flex; align-items: center; gap: 12px; text-decoration: none;
            flex: 0 0 auto; color: #fff; }
.hcg-mark img { height: 46px; width: auto; display: block; }

.hcg-mark__say {
    color: #C6D1E1;
    font-size: 12px;
    line-height: 1.25;
    max-width: 150px;
    border-left: 1px solid rgba(255, 255, 255, .28);
    padding-left: 12px;
}

.hcg-rail { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }

.hcg-rail a {
    display: block;
    padding: 9px 13px;
    border-radius: 7px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.hcg-rail a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hcg-rail a.is-here { background: var(--hcg-amber); color: var(--hcg-ink-deep); }
.hcg-rail a.hcg-rail__play { color: var(--hcg-amber); }
.hcg-rail a.hcg-rail__play:hover { background: rgba(231, 168, 28, .16); }

/* бургер: чекбокс + label, ноль JS */
.hcg-burger__box { position: absolute; opacity: 0; pointer-events: none; }

.hcg-burger,
.hcg-panel__close { display: none; color: #fff; }

/* --- [подвал] -------------------------------------------- */
.hcg-foot {
    background: var(--hcg-ink-deep);
    color: rgba(255, 255, 255, .78);
    margin-top: 56px;
    padding: 44px 0 28px;
    font-size: 15px;
}

.hcg-foot__cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.hcg-foot h3 {
    margin: 0 0 12px;
    color: #fff;
    font-family: var(--hcg-sans);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hcg-foot ul { margin: 0; padding: 0; list-style: none; }
.hcg-foot li { margin-bottom: 8px; }
.hcg-foot a { color: #D3DBE6; font-size: 15px; font-weight: 400; text-decoration: none; }
.hcg-foot a:hover { color: var(--hcg-amber); text-decoration: underline; }
.hcg-foot__mark img { height: 42px; margin-bottom: 14px; }
.hcg-foot__about { max-width: 34ch; line-height: 1.6; color: #B9C3D2; }

.hcg-foot__legal {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    color: #A9B4C4;
    font-size: 13.5px;
    line-height: 1.65;
}

.hcg-foot__legal p { margin: 0 0 8px; }
.hcg-foot__legal strong { color: rgba(255, 255, 255, .8); }

/* --- [главная] ------------------------------------------- */
.hcg-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--hcg-flame-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
}

.hcg-kicker--leaf { color: var(--hcg-leaf); }
.hcg-kicker--ink { color: var(--hcg-ink); }

.hcg-meta {
    color: var(--hcg-mute);
    font-size: 13.5px;
    letter-spacing: .01em;
}

.hcg-meta time { white-space: nowrap; }

.hcg-lede {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 34px;
    align-items: center;
    margin: 34px 0 40px;
    padding-bottom: 38px;
    border-bottom: 1px solid var(--hcg-line);
}

.hcg-lede__fig { margin: 0; }

.hcg-lede__fig img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.hcg-lede h1,
.hcg-lede h2 {
    margin: 0 0 14px;
    font-family: var(--hcg-serif);
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.015em;
}

.hcg-lede a.hcg-title { color: var(--hcg-text); text-decoration: none; font-weight: 600; }
.hcg-lede a.hcg-title:hover { color: var(--hcg-ink); }

.hcg-stand {
    margin: 0 0 16px;
    color: var(--hcg-mute);
    font-size: 18px;
    line-height: 1.55;
}

.hcg-credit {
    margin-top: 8px;
    color: var(--hcg-mute);
    font-size: 12.5px;
    line-height: 1.45;
}

.hcg-credit a { color: var(--hcg-mute); font-size: 12.5px; font-weight: 400; }

/* сетка карточек */
.hcg-deck {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.hcg-deck--3 { grid-template-columns: repeat(3, 1fr); }
.hcg-deck--2 { grid-template-columns: repeat(2, 1fr); }

.hcg-brief {
    display: flex;
    flex-direction: column;
    background: var(--hcg-sheet);
    border: 1px solid var(--hcg-line);
    border-radius: 12px;
    box-shadow: var(--hcg-shadow);
    overflow: hidden;
}

.hcg-brief__fig { margin: 0; display: block; }

.hcg-brief__fig img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.hcg-brief__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }

.hcg-brief__h {
    margin: 0 0 8px;
    font-family: var(--hcg-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.24;
}

.hcg-brief__h a { color: var(--hcg-text); font-size: inherit; font-weight: inherit; text-decoration: none; }
.hcg-brief__h a:hover { color: var(--hcg-ink); text-decoration: underline; text-underline-offset: 3px; }

.hcg-brief__sum {
    margin: 0 0 12px;
    color: var(--hcg-mute);
    font-size: 15px;
    line-height: 1.5;
}

.hcg-brief__body .hcg-meta { margin-top: auto; }

/* полоса раздела */
.hcg-slab { margin: 44px 0; }

.hcg-slab__head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--hcg-ink);
}

.hcg-slab__head h2 {
    margin: 0;
    font-family: var(--hcg-serif);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
}

.hcg-slab__note { color: var(--hcg-mute); font-size: 14.5px; }

.hcg-slab__more {
    margin-left: auto;
    color: var(--hcg-flame-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.hcg-slab__more:hover { text-decoration: underline; }

/* полоса «сплит»: крупный материал + список */
.hcg-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; }

.hcg-list { margin: 0; padding: 0; list-style: none; }

.hcg-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--hcg-line);
}

.hcg-list li:first-child { padding-top: 0; }
.hcg-list li:last-child { border-bottom: 0; }

.hcg-list h3 {
    margin: 4px 0 6px;
    font-family: var(--hcg-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.28;
}

.hcg-list h3 a { color: var(--hcg-text); font-size: inherit; font-weight: inherit; text-decoration: none; }
.hcg-list h3 a:hover { color: var(--hcg-ink); }

/* врезка «из архива» */
.hcg-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 40px 0;
    padding: 16px 22px;
    background: #fff;
    border: 1px solid var(--hcg-line);
    border-left: 4px solid var(--hcg-amber);
    border-radius: 10px;
    color: var(--hcg-mute);
    font-size: 15px;
}

.hcg-strip b { color: var(--hcg-text); }
.hcg-strip a { color: var(--hcg-ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.hcg-strip a:hover { text-decoration: underline; }

/* --- [рубрика] ------------------------------------------- */
.hcg-hub { margin: 34px 0 8px; }

.hcg-hub h1 {
    margin: 0 0 12px;
    font-family: var(--hcg-serif);
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.1;
}

.hcg-hub__intro {
    max-width: 62ch;
    margin: 0 0 30px;
    color: var(--hcg-mute);
    font-size: 18px;
    line-height: 1.6;
}

.hcg-crumbs { margin: 20px 0 14px; color: var(--hcg-mute); font-size: 13.5px; }
.hcg-crumbs a { color: var(--hcg-mute); font-size: 13.5px; font-weight: 400; text-decoration: none; }
.hcg-crumbs a:hover { color: var(--hcg-ink); text-decoration: underline; }

/* --- [статья] -------------------------------------------- */
.hcg-art { background: var(--hcg-sheet); }

.hcg-art__wrap {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 0 20px;
}

.hcg-art h1 {
    margin: 6px 0 16px;
    font-family: var(--hcg-serif);
    font-size: clamp(31px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.015em;
}

.hcg-art__stand {
    margin: 0 0 18px;
    color: var(--hcg-mute);
    font-size: 19px;
    line-height: 1.55;
}

.hcg-art__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--hcg-line);
    border-bottom: 1px solid var(--hcg-line);
    color: var(--hcg-mute);
    font-size: 14px;
}

.hcg-figure { margin: 24px 0; }

.hcg-figure img {
    width: 100%;
    border-radius: 12px;
    display: block;
}

.hcg-figure figcaption {
    margin-top: 8px;
    color: var(--hcg-mute);
    font-size: 13px;
    line-height: 1.5;
}

.hcg-figure figcaption a { color: var(--hcg-mute); font-size: 13px; font-weight: 400; }

.hcg-body { font-size: 18px; line-height: 1.72; }

/* у прежнего сайта свои размеры для голых p/li — внутри нашего текста не мешать */
.hcg-body p,
.hcg-body li,
.hcg-body td,
.hcg-body th { font-size: inherit; font-weight: inherit; }

.hcg-body p { margin: 0 0 20px; }

.hcg-body h2 {
    margin: 36px 0 14px;
    font-family: var(--hcg-serif);
    font-size: 27px;
    font-weight: 600;
    line-height: 1.22;
}

.hcg-body h3 {
    margin: 28px 0 12px;
    font-family: var(--hcg-sans);
    font-size: 19px;
    font-weight: 700;
}

.hcg-body ul, .hcg-body ol { margin: 0 0 20px; padding-left: 22px; }
.hcg-body li { margin-bottom: 9px; }
.hcg-body a { color: var(--hcg-ink); font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hcg-body a:hover { color: var(--hcg-flame); }

.hcg-body blockquote {
    margin: 26px 0;
    padding: 4px 0 4px 20px;
    border-left: 4px solid var(--hcg-amber);
    color: var(--hcg-text);
    font-family: var(--hcg-serif);
    font-size: 21px;
    line-height: 1.45;
}

.hcg-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    font-size: 15.5px;
}

.hcg-body th, .hcg-body td {
    padding: 10px 12px;
    border: 1px solid var(--hcg-line);
    text-align: left;
    vertical-align: top;
}

.hcg-body th { background: var(--hcg-paper); font-weight: 700; }

.hcg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.hcg-legacy .hcg-scroll table { min-width: 480px; }

/* своё свёрнутое оглавление */
.hcg-toc {
    margin: 24px 0 28px;
    background: var(--hcg-paper);
    border: 1px solid var(--hcg-line);
    border-radius: 10px;
    padding: 4px 18px;
}

.hcg-toc > summary {
    cursor: pointer;
    padding: 12px 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hcg-ink);
    list-style: none;
}

.hcg-toc > summary::-webkit-details-marker { display: none; }
.hcg-toc > summary::after { content: " ▾"; color: var(--hcg-flame); }
.hcg-toc[open] > summary::after { content: " ▴"; }
.hcg-toc ol { margin: 0 0 14px; padding-left: 20px; }
.hcg-toc li { margin-bottom: 7px; }
.hcg-toc a { color: var(--hcg-text); font-size: 15.5px; font-weight: 400; text-decoration: none; }
.hcg-toc a:hover { color: var(--hcg-ink); text-decoration: underline; }

.hcg-callout {
    margin: 28px 0;
    padding: 18px 20px;
    background: #F1F7F4;
    border: 1px solid #CFE3DA;
    border-left: 4px solid var(--hcg-leaf);
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.6;
}

.hcg-callout strong { color: #0E5F46; }

.hcg-author {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 36px 0 0;
    padding: 20px;
    background: var(--hcg-paper);
    border: 1px solid var(--hcg-line);
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.6;
}

.hcg-author__badge {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--hcg-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hcg-serif);
    font-size: 19px;
    font-weight: 700;
}

.hcg-author b { display: block; margin-bottom: 3px; color: var(--hcg-text); }
.hcg-author p { margin: 0; color: var(--hcg-mute); }

/* --- [гейминг] ------------------------------------------- */
.hcg-play {
    margin: 46px 0 0;
    padding: 30px 0 34px;
    background: var(--hcg-ink);
    border-radius: 14px;
    color: #fff;
}

.hcg-play .hcg-slab__head { border-bottom-color: rgba(255, 255, 255, .28); }
.hcg-play .hcg-slab__head h2 { color: #fff; }
.hcg-play .hcg-slab__note { color: #B6C1D1; }
.hcg-play .hcg-slab__more { color: #F2BE45; }

.hcg-play .hcg-brief {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}

.hcg-play .hcg-brief__h a { color: #fff; }
.hcg-play .hcg-brief__h a:hover { color: var(--hcg-amber); }
.hcg-play .hcg-brief__sum,
.hcg-play .hcg-meta { color: #B6C1D1; }
.hcg-play .hcg-kicker { color: #F2BE45; }

.hcg-play__note {
    margin: 18px 0 0;
    color: #AEBACB;
    font-size: 13px;
    line-height: 1.55;
}

.hcg-play__note a { color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; }

.hcg-agegate {
    display: inline-block;
    margin-right: 10px;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* --- [старые блоки: страницы прежнего сайта] -------------- */
.hcg-legacy { background: var(--hcg-sheet); }

.hcg-legacy__note {
    margin: 0 0 24px;
    padding: 12px 16px;
    background: #FFF7E8;
    border: 1px solid #F0DCB0;
    border-left: 4px solid var(--hcg-amber);
    border-radius: 8px;
    color: #6B4E12;
    font-size: 14px;
    line-height: 1.55;
}

.hcg-legacy__note a { color: #6B4E12; font-size: 14px; font-weight: 700; }

/* контейнеры прежнего сайта: свои поля, чтобы текст не липнул к краю */
.hcg-legacy .f801ccae,
.hcg-legacy .ed33be69,
.hcg-legacy .h6c775d3f {
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

.hcg-legacy .h6c775d3f { padding-top: 26px; padding-bottom: 10px; }

/* оценка в карточке: у донора оливковый #5b8f35 на белом — 3,4:1, читается плохо */
.g422c135f,
.c4d9ae972 span.g422c135f { color: #3D6B22; }

/* плашка «Accept players from …» у донора: текст стоял в 12 px от края (норма 16) */
.hcg-legacy .c4fa1866 {
    height: auto;
    min-height: 85px;
    padding: 12px 16px;
    box-sizing: border-box;
}
.hcg-legacy .h6c775d3f h1 { text-align: left; font-family: var(--hcg-serif); font-weight: 600; letter-spacing: -.015em; }

/* --- [адаптив] ------------------------------------------- */
@media (max-width: 1080px) {
    .hcg-deck { grid-template-columns: repeat(2, 1fr); }
    .hcg-split { grid-template-columns: 1fr; }
    .hcg-foot__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .hcg-shell { padding: 0 18px; }

    .hcg-mast__row { min-height: 64px; gap: 12px; }
    .hcg-mark img { height: 38px; }
    .hcg-mark__say { display: none; }

    /* ряд рубрик сворачивается в бургер */
    .hcg-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-left: auto;
        min-width: 46px;
        min-height: 46px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 8px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }

    .hcg-burger span {
        display: block;
        width: 18px;
        height: 2px;
        background: #fff;
        box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff;
    }

    .hcg-rail {
        display: none;
        width: 100%;
        margin: 0;
        padding: 8px 0 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }

    .hcg-rail a {
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 0 6px;
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        font-size: 16px;
    }

    .hcg-burger__box:checked ~ .hcg-rail { display: flex; }

    .hcg-panel__close {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        margin-top: 10px;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 8px;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    .hcg-lede { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
    .hcg-lede__fig { order: -1; }
    .hcg-art__wrap { max-width: none; }
    .hcg-body { font-size: 17px; }
}

@media (max-width: 620px) {
    .hcg-deck { grid-template-columns: 1fr; gap: 20px; }
    .hcg-foot__cols { grid-template-columns: 1fr; gap: 24px; }
    .hcg-slab__head { flex-wrap: wrap; gap: 6px 14px; }
    .hcg-slab__more { margin-left: 0; }
    .hcg-play { border-radius: 0; }
    .hcg-body table { font-size: 14px; }
}