:root {
    color-scheme: light;
    --ink: #272d35;
    --muted: #56616e;
    --line: #d5dce1;
    --surface: #fff;
    --canvas: #f1f3f4;
    --graphite: #434a55;
    --deep: #343b45;
    --ice: #badce8;
    --focus: #31647a;
    --radius: .625rem;
    --gutter: clamp(.75rem, 3vw, 2.5rem);
    --gap: clamp(.625rem, 1.6vw, 1.5rem);
    --measure: 76ch;
    --ui-transition: 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    :root { --ui-transition: 0s; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
    margin: 0;
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    color: var(--ink);
    font: 1rem/1.55 Arial, Helvetica, sans-serif;
}
h1, h2, h3, p, ul { margin: 0; }
img, video { max-inline-size: 100%; }
.site-icon { display: block; flex: none; inline-size: 1em; block-size: 1em; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
:is(.site-header, .site-main, .site-partners, .site-footer, .flp-dialog) :is(a, button, summary),
.header-search, .getup-top, .article-like {
    transition: color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition);
}
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.shell { inline-size: min(100% - 2 * var(--gutter), 81rem); margin-inline: auto; }
.site-header {
    --control-surface: var(--deep);
    --control-outline: rgb(255 255 255 / .15);
    --control-hover: #4e5b68;
    container-type: inline-size;
    position: relative;
    z-index: 2;
    border-block-end: 1px solid #57616e;
    background: var(--graphite);
    color: #fff;
}
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--ice); }
.header-inner {
    display: grid;
    grid-template-columns: auto 1fr minmax(12rem, 19rem);
    align-items: center;
    gap: .75rem clamp(1rem, 3vw, 2.75rem);
    min-block-size: 5rem;
    padding-block: .75rem;
}
.brand { display: flex; align-items: center; min-block-size: 2.75rem; }
.brand img { display: block; inline-size: clamp(9rem, 16vw, 13.5rem); block-size: auto; }
.header-nav { display: flex; align-items: center; gap: .375rem; min-inline-size: 0; }
.category-menu summary, .header-video {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-block-size: 2.75rem;
    padding: .5rem .8rem;
    border: 1px solid var(--control-outline);
    border-radius: var(--radius);
    background: var(--control-surface);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}
.category-menu { position: relative; }
.category-menu summary { list-style: none; }
.category-menu summary::-webkit-details-marker { display: none; }
.category-menu summary svg { inline-size: 1.125rem; block-size: 1.125rem; flex: none; }
.category-menu summary .category-chevron { inline-size: .875rem; transition: rotate var(--ui-transition); }
.category-menu[open] .category-chevron { rotate: 180deg; }
.category-menu summary:hover, .category-menu[open] summary, .header-video:hover { background: var(--control-hover); }
.header-video { white-space: nowrap; }
.category-menu summary svg, .header-video .site-icon { color: var(--ice); }
.category-panel {
    position: absolute;
    inset: calc(100% + .75rem) auto auto 0;
    inline-size: min(29rem, calc(100vw - 2 * var(--gutter)));
    max-block-size: min(28rem, 65vh);
    overflow: auto;
    padding: .5rem;
    border-radius: var(--radius);
    background: var(--control-surface);
    box-shadow: 0 .5rem 1.75rem #272d3526;
}
.category-panel ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .125rem; }
.category-panel a { display: flex; align-items: center; min-block-size: 2.75rem; padding: .375rem .65rem; border-radius: .375rem; text-decoration: none; overflow-wrap: anywhere; }
.category-panel a:hover, .category-panel a[aria-current="page"] { background: var(--control-hover); }
.category-panel a[aria-current="page"] { color: var(--ice); font-weight: 700; }
.category-panel a:focus-visible { outline-offset: -3px; }

.header-search {
    display: flex;
    align-items: stretch;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    padding: .125rem;
    border: 1px solid var(--control-outline);
    border-radius: var(--radius);
    background: var(--control-surface);
}
.header-search input {
    flex: 1 1 0;
    inline-size: 0;
    min-inline-size: 0;
    padding: .5rem .75rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: inherit;
    transition: background-color var(--ui-transition);
}
.header-search input:focus { outline: none; background: var(--control-hover); }
.header-search input::placeholder { color: #c7d0d8; opacity: 1; }
.header-search button {
    display: grid;
    place-items: center;
    flex: 0 0 2.375rem;
    min-block-size: 2.375rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: var(--ice);
}
.header-search button:hover { background: var(--control-hover); }
.header-search button:focus-visible { outline-offset: -3px; }

.site-main { flex: 1 0 auto; padding-block: clamp(1.25rem, 3.5vw, 3rem) clamp(2rem, 5vw, 4rem); }
.breadcrumbs {
    margin-block-end: 1.1rem;
    color: var(--muted);
    font-size: .875rem;
    overflow-wrap: anywhere;
}
.breadcrumbs a { display: inline-block; min-block-size: 1.5rem; }
.breadcrumbs a:hover { color: var(--focus); }
.page-heading {
    padding-block-end: clamp(.875rem, 2.3vw, 1.5rem);
    margin-block-end: var(--gap);
    border-block-end: 1px solid var(--line);
}
.page-heading h1, .article-heading h1, .site-main > .content-grid > .story h1 {
    font-size: clamp(1.375rem, 1.15rem + .95vw, 2rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.content-grid, .related-posts > ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
}
.content-grid > * { min-inline-size: 0; grid-column: 1 / -1; }
.content-grid > .post-card { grid-column: auto; }
.post-card, .related-card {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    overflow-wrap: anywhere;
    border-radius: var(--radius);
    background: var(--surface);
}
.related-card { border: 1px solid var(--line); }
.post-card > a, .related-card > a {
    display: block;
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--ink);
    text-decoration: none;
}
.post-card > a:hover, .related-card > a:hover { color: var(--focus); }
.post-card > a:focus-visible, .related-card > a:focus-visible { position: relative; z-index: 1; }
.post-cover {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    background: #dee5e9;
}
.post-cover img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
}
.post-card .post-cover { border-radius: var(--radius) var(--radius) 0 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .post-cover img { transition: transform .35s ease; }
    .post-card:hover .post-cover img { transform: scale(1.035); }
    .related-card > a:hover img { transform: scale(1.025); }
    .article-body a > img { transition: filter var(--ui-transition); }
    .article-body a:hover > img { filter: brightness(.94); }
}
.post-title { padding: .8rem .875rem .65rem; font-size: clamp(.875rem, .78rem + .35vw, 1.0625rem); line-height: 1.3; }
.post-summary { padding: 0 .875rem .625rem; }
.post-meta, .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .7rem;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: .8125rem;
}
.post-meta { margin: auto .875rem 0; padding-block: .55rem .65rem; border-block-start: 1px solid var(--line); }
.post-meta li, .article-meta li { display: inline-flex; align-items: center; gap: .3rem; }
.post-meta-stats { margin-inline-start: auto; }
.post-meta-stats ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem .7rem; padding: 0; }
.post-meta time { overflow-wrap: anywhere; }

.pagination, .splitnewsnavigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    margin-block-start: .75rem;
}
.pagination > :is(a, span), .splitnewsnavigation > :is(a, span) {
    display: inline-flex;
    min-inline-size: 2.5rem;
    min-block-size: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: .25rem .5rem;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: var(--surface);
    text-decoration: none;
}
.pagination > a:hover, .splitnewsnavigation > a:hover { border-color: var(--focus); color: var(--focus); }
.pagination > span:not(.nav_ext) { background: var(--graphite); border-color: var(--graphite); color: #fff; font-weight: 700; }
.pagination > .nav_ext { background: transparent; border-color: transparent; }

.site-intro, .site-partners { max-inline-size: var(--measure); }
.site-intro {
    margin: clamp(2rem, 5vw, 4rem) auto 0;
    padding-block-start: 1.4rem;
    border-block-start: 1px solid var(--line);
}
.site-intro h2, .related-posts h2 { margin-block-end: .8rem; font-size: clamp(1.2rem, 1rem + .7vw, 1.65rem); line-height: 1.25; }
.site-intro p { margin-block-start: .75rem; color: var(--muted); }

.article-page { min-inline-size: 0; }
.site-main:has(> .content-grid > .article-page) > .breadcrumbs,
.article-heading, .article-body, .article-actions, .related-posts, .content-grid > .story {
    max-inline-size: min(100%, 60rem);
    margin-inline: auto;
    overflow-wrap: anywhere;
}
.article-heading { margin-block-end: clamp(1rem, 3vw, 1.8rem); }
.article-meta { margin-block-end: .85rem; font-size: .875rem; }
.article-body, .article-actions, .content-grid > .story, .search-panel, .berrors {
    padding: clamp(.875rem, 3vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.article-body { line-height: 1.65; }
:where(.article-body, .site-intro, .content-grid > .story) a:hover { color: var(--focus); }
.article-body > :is(p, ul, ol, blockquote) + :is(p, ul, ol, blockquote) { margin-block-start: 1rem; }
.article-body img { block-size: auto; max-block-size: 82vh; object-fit: contain; border-radius: .375rem; vertical-align: middle; }
.article-body a:has(> img) { display: inline-block; max-inline-size: 100%; margin-block: .25rem; }
.article-body p > a.highslide:only-child:has(> img) { display: block; inline-size: fit-content; margin-inline: auto; }
.article-body iframe { max-inline-size: 100%; }
.article-body :is(pre, table), .content-grid > .story :is(pre, table) { display: block; max-inline-size: 100%; overflow: auto; }
.article-actions { margin-block-start: .875rem; }
.article-categories, .article-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.article-categories { margin-block-end: 1rem; }
.article-categories:empty { display: none; }
.article-categories a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
    padding: .25rem .7rem;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: var(--canvas);
    text-decoration: none;
    font-size: .875rem;
}
.article-categories a:hover { border-color: var(--focus); background: #e8f0f4; }
.article-tools { justify-content: space-between; gap: .75rem; }
.article-like > a, .telegram-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding-inline: .7rem;
    border: 1px solid var(--line);
    border-radius: .45rem;
    text-decoration: none;
}
.article-like {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    border: 1px solid #c2d5df;
    border-radius: .45rem;
    background: #e8f0f4;
    color: var(--ink);
    font-weight: 700;
}
.article-like > a { margin: -1px; padding-inline: .85rem; border-color: transparent; }
.article-like > a .site-icon { color: var(--focus); }
.article-like:has(> a:hover) { border-color: var(--focus); background: #dbeaf0; }
.like-count { padding-inline: .75rem; font-variant-numeric: tabular-nums; }
.article-like > a + .like-count { border-inline-start: 1px solid #c2d5df; }
.telegram-link { padding-inline: .9rem; background: var(--graphite); border-color: var(--graphite); color: #fff; font-weight: 700; }
.telegram-link:hover { background: var(--deep); }
.telegram-link .site-icon { color: var(--ice); }

.related-posts { margin-block-start: clamp(1.75rem, 4vw, 3rem); }
.related-posts > ul { list-style: none; padding: 0; }
.related-card .post-cover { aspect-ratio: 4 / 3; }
.related-card > a > span { display: block; padding: .65rem .8rem; font-size: .9rem; line-height: 1.35; font-weight: 700; }

#fullsearch { min-inline-size: 0; }
.search-panel { max-inline-size: 54rem; margin-inline: auto; }
.search-field { display: grid; gap: .375rem; }
.search-field + .search-field { margin-block-start: .65rem; }
.search-field > label { font-weight: 700; font-size: .875rem; }
.search-panel .search-field :is(input, select) {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: 2.75rem;
    padding: .35rem .55rem;
    border: 1px solid #87939f;
    border-radius: .375rem;
    color: var(--ink);
}
.search-panel .search-field input#searchuser { margin: 0; }
.search-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: .75rem;
    margin-block-start: 1.25rem;
}
.search-filters fieldset { min-inline-size: 0; margin: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .4rem; }
.search-filters legend { padding-inline: .35rem; color: var(--muted); font-weight: 700; }
.search-filters .form-check-label { display: flex; align-items: center; min-block-size: 1.5rem; margin-block-start: .5rem; }
.search-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1rem; }
.search-actions button {
    min-block-size: 2.75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--graphite);
    border-radius: .4rem;
    background: var(--surface);
    color: var(--ink);
    font-weight: 700;
}
.search-actions button[type="submit"] { background: var(--graphite); color: #fff; }
.search-actions button:hover { border-color: var(--focus); background: #e8f0f4; }
.search-actions button[type="submit"]:hover { border-color: var(--deep); background: var(--deep); }
.search-result { max-inline-size: 54rem; margin: .75rem auto 0; }
.search-result, .berrors { color: var(--ink); }

.site-partners {
    margin-block-end: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(.875rem, 2.6vw, 1.75rem);
    border-radius: var(--radius);
    background: #e8f0f4;
}
.site-partners h2 { margin-block-end: .75rem; font-size: 1.125rem; line-height: 1.25; }
.partner-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: .625rem;
    list-style: none;
    padding: 0;
}
.partner-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    block-size: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--surface);
    text-decoration: none;
}
.partner-links a:hover { border-color: var(--focus); color: var(--focus); }
.partner-copy { display: grid; gap: .1rem; min-inline-size: 0; overflow-wrap: anywhere; }
.partner-copy > span { color: var(--muted); font-size: .875rem; }
.partner-arrow { flex: none; inline-size: 1.125rem; block-size: 1.125rem; color: var(--focus); }

.site-footer { background: var(--deep); color: #ecf0f2; }
.footer-inner {
    padding-block: clamp(1.2rem, 4vw, 2.5rem);
    font-size: .875rem;
    text-align: center;
}
.footer-brand { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.footer-brand p + p { margin-block-start: .3rem; color: #c7d0d8; }
.age-label { display: inline-flex; align-items: center; min-block-size: 1.75rem; padding-inline: .375rem; border: 1px solid #87939f; border-radius: .3rem; color: var(--ice); font-weight: 700; }
.footer-inner a { display: inline-block; min-block-size: 1.5rem; color: #fff; }
.footer-inner a:hover { color: var(--ice); }
.getup-top {
    position: fixed;
    z-index: 1;
    inset: auto max(var(--gutter), env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) auto;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    visibility: hidden;
    border: 1px solid #87939f;
    border-radius: var(--radius);
    background: var(--graphite);
    color: #fff;
    text-decoration: none;
}
.getup-top.getup-is-visible { visibility: visible; }
.getup-top:hover { background: var(--deep); }

@media (max-width: 64rem) {
    .content-grid, .related-posts > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 47rem) {
    .header-inner { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
    .brand { justify-self: start; min-inline-size: 0; max-inline-size: 100%; }
    .brand img { inline-size: 13.5rem; }
    .header-nav { position: relative; flex-wrap: wrap; }
    .category-menu { position: static; }
    .category-panel { inset: calc(100% + .375rem) auto auto 0; inline-size: min(29rem, 100%); }
}
@container (max-width: 18.5rem) {
    .category-menu summary > svg:first-child { display: none; }
}
@media (max-width: 47rem) {
    .content-grid, .related-posts > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post-title, .related-card > a > span { padding-inline: .6rem; }
    .post-meta { margin-inline: .6rem; font-size: .75rem; }
}