@font-face {
    font-family: "wpfe93053";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/32c9a3/fonts/noto-sans-700.latin.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;
}

@font-face {
    font-family: "wpfe93053";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/32c9a3/fonts/noto-sans-700.latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "wpfe93053";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/32c9a3/fonts/noto-sans-400.latin.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;
}

@font-face {
    font-family: "wpfe93053";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/32c9a3/fonts/noto-sans-400.latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
    --svhf: #29778B;
    --yqtk: #094856;
    --d5kl: #F78166;
    --tj37: #F3F8FA;
    --ujb8: #FFFFFF;
    --ohc8: #1C292D;
    --c1h2: #5B737A;
    --di50: #D9E3E7;
    --lr7k: #FFFFFF;
    --h7qu: #111111;
    --gpu1: #E5EFF1;
    --ry4g: #FEF0ED;
    --b285: "wpfe93053", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --b4jv: "wpfe93053", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --g2az: 700;
    --gnsn: 0;
    --pz2f: 44rem;
    --ww3m: 62rem;
    --kj3q: 1.5rem;
    --ylxs: 1.72;
    --xoag: 3rem;
    --u0js: calc(17px + 1px);
    --jepz: 2.7rem;
    --yzyq: 1.3rem;
    --t255: 3px;
    --aafq: 1.25;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
}

h1, h2, h3 {
    margin: 0;
    font-family: var(--b285);
    font-weight: var(--g2az);
    letter-spacing: var(--gnsn);
    line-height: 1.2;
}

p {
    margin: 0;
}

dl, dt, dd {
    margin: 0;
}

ul, ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

svg {
    flex: none;
    display: block;
}

button {
    color: inherit;
    background: none;
    margin: 0;
    border: 0;
    font: inherit;
}

summary {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

[id] {
    scroll-margin-top: 1.75rem;
}

/* каркас: сторінка це текстова колонка, а не сітка блоків */

.hn-page {
    margin: 0;
    background: var(--ujb8);
    color: var(--ohc8);
    font-family: var(--b4jv);
    font-size: var(--u0js);
    line-height: var(--ylxs);
    -webkit-font-smoothing: antialiased;
}

.hn-main {
    display: block;
}

.hn-ribbon {
    width: 100%;
    max-width: var(--ww3m);
    margin: 0 auto;
    padding: 0 var(--kj3q);
}

.hn-width {
    max-width: var(--pz2f);
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--kj3q);
}

.hn-area {
    padding: var(--xoag) 0;
}

.hn-area-tight {
    padding: 1.5rem 0;
}

.hn-link {
    color: var(--svhf);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.hn-link:hover {
    color: var(--yqtk);
}

.hn-action {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    background: var(--svhf);
    color: var(--lr7k);
    font-family: var(--b285);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.16s ease;
}

.hn-action:hover {
    background: var(--yqtk);
}

/* шапка видання */

.hn-mast {
    border-bottom: 1px solid var(--di50);
}

.hn-mast-core {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}

.hn-mast-brand {
    display: inline-flex;
    gap: 0.7rem;
    align-items: center;
}

.hn-mast-mark {
    display: inline-flex;
    color: var(--svhf);
    align-items: center;
}

.hn-mast-name {
    font-family: var(--b285);
    font-size: 1.2rem;
    font-weight: var(--g2az);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hn-mast-label {
    color: var(--c1h2);
    font-size: 0.85rem;
    font-style: italic;
}

.hn-mast-bar {
    align-items: baseline;
    gap: 1.4rem;
    display: flex;
}

.hn-mast-link {
    font-size: 0.85rem;
    transition: color 0.15s ease, border-color 0.15s ease;
    color: var(--c1h2);
    border-bottom: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hn-mast-link:hover {
    border-bottom-color: var(--svhf);
    color: var(--ohc8);
}

/* шапка, варіант зі стеком */

.hn-mast-stack .hn-mast-core {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding-top: 1.6rem;
    padding-bottom: 0.9rem;
}

.hn-mast-stack .hn-mast-name {
    letter-spacing: 0.06em;
    font-size: 1.55rem;
}

.hn-mast-streak {
    border-top: 1px solid var(--di50);
}

.hn-mast-streak .hn-mast-bar {
    justify-content: center;
    padding: 0.6rem var(--kj3q);
}

/* шапка статті */

.hn-upper {
    padding: 3.2rem 0 2.2rem;
}

.hn-upper-kicker {
    color: var(--svhf);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hn-upper-name {
    margin-top: 0.9rem;
    line-height: 1.12;
    font-size: var(--jepz);
}

.hn-upper-stand {
    margin-top: 1.1rem;
    color: var(--c1h2);
    font-size: 1.22rem;
    line-height: 1.55;
}

.hn-upper-meta {
    margin-top: 1.8rem;
    display: flex;
    border-top: 1px solid var(--di50);
    gap: 0.4rem 1.6rem;
    flex-wrap: wrap;
    padding-top: 0.85rem;
}

.hn-upper-meta-point {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.hn-upper-meta-key {
    text-transform: uppercase;
    color: var(--c1h2);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

.hn-upper-meta-val {
    font-family: var(--b285);
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

/* шапка статті: по центру */

.hn-upper-center {
    text-align: center;
}

.hn-upper-center .hn-upper-meta {
    justify-content: center;
}

.hn-upper-center .hn-upper-stand {
    margin-left: auto;
    margin-right: auto;
    max-width: 34rem;
}

/* шапка статті: влів, із вертикальною лінійкою */

.hn-upper-ruled .hn-upper-rule {
    padding-left: 1.6rem;
    border-left: 3px solid var(--svhf);
}

.hn-upper-ruled .hn-upper-meta {
    column-gap: 1.2rem;
    row-gap: 0.35rem;
    display: grid;
    grid-template-columns: max-content 1fr;
}

.hn-upper-ruled .hn-upper-meta-key {
    padding-top: 0.15rem;
}

/* шапка статті: з буквицею */

.hn-upper-drop .hn-upper-kicker {
    color: var(--c1h2);
    font-weight: 400;
    border-top: 1px solid var(--di50);
    letter-spacing: 0.06em;
    margin-top: 1.6rem;
    padding-top: 0.8rem;
}

.hn-upper-strip {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--di50);
    gap: 0.3rem 1.1rem;
    align-items: baseline;
    flex-wrap: wrap;
    display: flex;
}

.hn-upper-cap {
    font-size: 1.16rem;
    color: var(--ohc8);
}

.hn-upper-cap::first-letter {
    float: left;
    padding: 0.06em 0.09em 0 0;
    color: var(--svhf);
    font-family: var(--b285);
    font-size: 3.4em;
    font-weight: var(--g2az);
    line-height: 0.8;
}

/* зміст */

.hn-index {
    display: block;
    padding: 1.2rem 0 0.4rem;
}

.hn-index-name {
    color: var(--c1h2);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hn-index-point {
    display: block;
}

.hn-index-link {
    color: var(--ohc8);
    transition: color 0.15s ease;
    display: block;
}

.hn-index-link:hover {
    color: var(--svhf);
}

.hn-index-no {
    display: inline-block;
    width: 1.6rem;
    color: var(--c1h2);
    font-family: var(--b285);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.hn-index-on {
    color: var(--svhf);
    font-weight: 600;
}

/* зміст: список збоку */

.hn-index-aside .hn-index-layout {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 0 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.hn-index-aside .hn-index-name {
    align-self: start;
    top: 1.5rem;
    position: sticky;
}

.hn-index-stack {
    max-width: var(--pz2f);
}

.hn-index-stack .hn-index-point {
    border-top: 1px solid var(--di50);
}

.hn-index-stack .hn-index-point:first-child {
    border-top: 0;
}

.hn-index-stack .hn-index-link {
    font-size: 1.02rem;
    padding: 0.55rem 0;
}

/* зміст: смуга-картка */

.hn-index-strip .hn-index-box {
    padding: 1.1rem 1.35rem 1.25rem;
    border-top: 2px solid var(--svhf);
    background: var(--tj37);
}

.hn-index-inline {
    display: flex;
    margin-top: 0.6rem;
    gap: 0.3rem 0.9rem;
    flex-wrap: wrap;
}

.hn-index-inline .hn-index-point {
    display: inline-flex;
    align-items: baseline;
}

/* Маркер у кожного пункта, а не між пунктами: список переноситься, і роздільник
   лише між сусідами лишав перший пункт кожного рядка без маркера. */
.hn-index-inline .hn-index-point::before {
    margin-right: 0.55rem;
    content: "\00b7";
    color: var(--c1h2);
}

.hn-index-inline .hn-index-link {
    font-size: 0.95rem;
    display: inline;
    border-bottom: 1px solid var(--di50);
}

/* тіло статті */

.hn-art {
    display: block;
    padding: 0.6rem 0 0.4rem;
}

.hn-piece {
    display: block;
    padding: 1.6rem 0;
}

.hn-piece-name {
    font-size: var(--yzyq);
}

.hn-piece-prose {
    margin-top: 0.95rem;
}

.hn-art-plain .hn-piece {
    border-top: 1px solid var(--di50);
}

.hn-art-plain .hn-piece:first-child {
    border-top: 0;
}

.hn-art-plain .hn-piece-prose + .hn-piece-prose {
    margin-top: 1.15rem;
}

/* тіло статті: заголовки на полях */

.hn-art-margin .hn-piece-split {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 0 3rem;
    padding: 2.1rem 0;
    border-top: 1px solid var(--di50);
}

.hn-art-margin .hn-piece-side {
    top: 1.5rem;
    align-self: start;
    position: sticky;
}

.hn-art-margin .hn-piece-no {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--svhf);
    font-family: var(--b285);
    font-size: 1.5rem;
    font-weight: var(--g2az);
    opacity: 0.6;
}

.hn-art-margin .hn-piece-name {
    font-size: 1.32rem;
    line-height: 1.28;
}

.hn-art-margin .hn-piece-main {
    max-width: var(--pz2f);
}

.hn-art-margin .hn-piece-prose:first-child {
    margin-top: 0;
}

/* чекліст */

.hn-stack {
    display: block;
}

.hn-stack-upper {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.hn-stack-name {
    font-size: var(--yzyq);
}

.hn-stack-sub {
    margin-top: 0.6rem;
    font-size: 1rem;
    color: var(--c1h2);
}

.hn-stack-count {
    flex: none;
    color: var(--c1h2);
    font-family: var(--b285);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.hn-stack-items {
    margin-top: 1.4rem;
}

.hn-stack-point {
    cursor: pointer;
    padding: 0.95rem 0;
    row-gap: 0.25rem;
    display: grid;
    border-top: 1px solid var(--di50);
    column-gap: 0.9rem;
    grid-template-columns: auto 1fr;
}

.hn-stack-items li:last-child .hn-stack-point {
    border-bottom: 1px solid var(--di50);
}

.hn-stack-box {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.3rem 0 0;
    accent-color: var(--svhf);
    cursor: pointer;
}

.hn-stack-label {
    font-size: 1.06rem;
    display: block;
    line-height: 1.45;
}

.hn-stack-hint {
    display: block;
    grid-column: 2;
    color: var(--c1h2);
    font-size: 0.92rem;
    line-height: 1.55;
}

.hn-stack-point-on .hn-stack-label {
    color: var(--c1h2);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.hn-stack-point-on .hn-stack-hint {
    opacity: 0.65;
}

/* чекліст: картки з номерами */

.hn-stack-boxed .hn-stack-count {
    display: block;
    margin-top: 0.9rem;
}

.hn-stack-cards {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.hn-stack-card {
    display: block;
}

.hn-stack-card-action {
    text-align: left;
    padding: 1rem 1.15rem;
    transition: border-color 0.16s ease, background-color 0.16s ease;
    border-left: 2px solid var(--di50);
    grid-template-columns: auto auto 1fr;
    width: 100%;
    cursor: pointer;
    row-gap: 0.3rem;
    column-gap: 0.9rem;
    display: grid;
    background: var(--tj37);
}

.hn-stack-card-action:hover {
    border-left-color: var(--svhf);
}

.hn-stack-card-no {
    grid-column: 1;
    grid-row: 1 / span 2;
    color: var(--c1h2);
    font-family: var(--b285);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.hn-stack-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.2rem;
    border: 1px solid var(--di50);
    color: transparent;
}

.hn-stack-card-action .hn-stack-label {
    grid-column: 3;
    grid-row: 1;
}

.hn-stack-card-action .hn-stack-hint {
    grid-column: 2 / -1;
    grid-row: 2;
}

.hn-stack-point-on.hn-stack-card-action {
    border-left-color: var(--svhf);
    background: var(--gpu1);
}

.hn-stack-point-on .hn-stack-mark {
    border-color: var(--svhf);
    background: var(--svhf);
    color: var(--lr7k);
}

/* підсумок */

.hn-keys {
    display: block;
}

.hn-keys-stack {
    padding-top: 1.1rem;
    border-top: 2px solid var(--ohc8);
}

.hn-keys-point {
    padding: 0.55rem 0 0.55rem 3.2rem;
    font-size: 1.08rem;
    text-indent: -3.2rem;
    display: block;
}

.hn-keys-no {
    display: inline-block;
    width: 3.2rem;
    color: var(--svhf);
    font-family: var(--b285);
    font-size: 1.5rem;
    font-weight: var(--g2az);
    text-indent: 0;
    vertical-align: baseline;
}

.hn-keys-rows .hn-keys-stack {
    border-top: 0;
    padding-top: 0;
}

.hn-keys-streak {
    display: flex;
    font-size: 1.04rem;
    gap: 0.8rem;
    border-bottom: 1px solid var(--di50);
    align-items: flex-start;
    padding: 0.8rem 0;
}

.hn-keys-streak:first-child {
    border-top: 1px solid var(--di50);
}

.hn-keys-mark {
    color: var(--svhf);
    margin-top: 0.4rem;
    display: inline-flex;
}

/* питання і відповіді */

.hn-qa {
    display: block;
}

.hn-qa-stack {
    display: block;
}

.hn-qa-point {
    border-top: 1px solid var(--di50);
}

.hn-qa-point:last-child {
    border-bottom: 1px solid var(--di50);
}

.hn-qa-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 0;
    font-family: var(--b285);
    font-size: 1.06rem;
    font-weight: 600;
    list-style: none;
}

.hn-qa-q::-webkit-details-marker {
    display: none;
}

.hn-qa-q:hover {
    color: var(--svhf);
}

.hn-qa-sign {
    color: var(--c1h2);
    display: inline-flex;
    transition: transform 0.2s ease;
    flex: none;
}

.hn-qa-point[open] .hn-qa-sign {
    color: var(--svhf);
    transform: rotate(90deg);
}

.hn-qa-a {
    color: var(--c1h2);
    font-size: 1rem;
    padding: 0 0 1.1rem;
}

.hn-qa-flat .hn-qa-flat-q {
    margin-top: 1.5rem;
    font-family: var(--b285);
    font-size: 1.08rem;
    font-weight: 600;
}

.hn-qa-flat .hn-qa-flat-a {
    color: var(--c1h2);
    font-size: 1rem;
    margin-top: 0.4rem;
}

/* джерела */

.hn-ref {
    display: block;
}

.hn-ref-name {
    font-size: 1.25rem;
}

.hn-ref-sub {
    margin-top: 0.5rem;
    color: var(--c1h2);
    font-size: 0.95rem;
}

.hn-ref-stack {
    margin-top: 1rem;
}

.hn-ref-point {
    display: block;
    border-top: 1px solid var(--di50);
    padding: 0.5rem 0;
}

.hn-ref-link {
    color: var(--svhf);
    font-size: 0.98rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.hn-ref-link:hover {
    color: var(--yqtk);
}

.hn-ref-host {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--c1h2);
    display: block;
}

.hn-ref-inline .hn-ref-path {
    margin-top: 0.8rem;
}

.hn-ref-inline .hn-ref-link {
    margin-right: 1.1rem;
}

/* дисклеймер */

.hn-sub {
    display: block;
}

.hn-sub-prose {
    color: var(--c1h2);
    border-top: 1px solid var(--di50);
    padding-top: 0.9rem;
    line-height: 1.6;
    font-size: 0.88rem;
}

.hn-sub-box {
    padding: 1rem 1.15rem;
    display: flex;
    gap: 0.85rem;
    background: var(--tj37);
    align-items: flex-start;
}

.hn-sub-box .hn-sub-prose {
    border-top: 0;
    padding-top: 0;
}

.hn-sub-icon {
    margin-top: 0.25rem;
    display: inline-flex;
    flex: none;
    color: var(--c1h2);
}

/* внутрішні сторінки */

.hn-phead {
    padding: 2.8rem 0 1.6rem;
    border-bottom: 1px solid var(--di50);
}

.hn-phead-core {
    display: block;
}

.hn-phead-back {
    letter-spacing: 0.12em;
    color: var(--svhf);
    font-size: 0.78rem;
    text-transform: uppercase;
    display: inline-block;
}

.hn-phead-back:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hn-phead-name {
    margin-top: 0.7rem;
    font-size: 2.1rem;
}

.hn-phead-sub {
    margin-top: 0.7rem;
    color: var(--c1h2);
    font-size: 1.05rem;
}

.hn-phead-slim {
    padding-top: 2rem;
}

.hn-phead-slim .hn-phead-eyebrow {
    color: var(--c1h2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.hn-phead-slim .hn-phead-name {
    font-size: 1.8rem;
}

.hn-phead-slim .hn-phead-back {
    margin-top: 1rem;
}

.hn-doc {
    display: block;
}

.hn-prose {
    font-size: 1.04rem;
    margin-bottom: 1.1rem;
}

.hn-prose:last-child {
    margin-bottom: 0;
}

.hn-rev {
    border-top: 1px solid var(--di50);
    margin-top: 2rem;
    font-size: 0.82rem;
    color: var(--c1h2);
    padding-top: 0.8rem;
}

.hn-cinfo {
    border-top: 1px solid var(--di50);
    display: block;
}

.hn-cinfo-line {
    grid-template-columns: 14rem 1fr;
    border-bottom: 1px solid var(--di50);
    gap: 0.2rem 1.5rem;
    padding: 0.9rem 0;
    display: grid;
}

.hn-cinfo-key {
    color: var(--c1h2);
    text-transform: uppercase;
    font-size: 0.82rem;
    gap: 0.5rem;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
}

.hn-cinfo-icon {
    display: inline-flex;
    color: var(--svhf);
}

.hn-cinfo-val {
    font-size: 1.02rem;
}

.hn-cinfo-sub {
    font-size: 0.88rem;
    margin-top: 1.6rem;
    color: var(--c1h2);
}

.hn-bottom-reg {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.hn-nf {
    padding: 5rem 0 6rem;
}

.hn-nf-name {
    font-size: 1.9rem;
}

.hn-nf-prose {
    color: var(--c1h2);
    margin: 0.8rem 0 1.6rem;
}

/* підвал */

.hn-bottom {
    margin-top: 2.5rem;
    padding: 2.2rem 0 1.4rem;
    border-top: 1px solid var(--di50);
}

.hn-bottom-core {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}

.hn-bottom-brand {
    max-width: 22rem;
}

.hn-bottom-name {
    display: block;
    font-family: var(--b285);
    font-size: 1.05rem;
    font-weight: var(--g2az);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hn-bottom-sub {
    color: var(--c1h2);
    font-size: 0.88rem;
    margin-top: 0.4rem;
}

.hn-bottom-bar {
    flex-wrap: wrap;
    display: flex;
    gap: 0.3rem 1.3rem;
}

.hn-bottom-link {
    color: var(--c1h2);
    font-size: 0.88rem;
}

.hn-bottom-link:hover {
    color: var(--svhf);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hn-bottom-cols {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.5fr 1fr 1fr;
}

.hn-bottom-width {
    display: block;
}

.hn-bottom-cols .hn-bottom-bar {
    gap: 0.4rem;
    flex-direction: column;
}

.hn-bottom-width-name {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--ohc8);
    font-family: var(--b285);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hn-bottom-bottom {
    margin-top: 2rem;
    gap: 0.5rem 1.4rem;
    display: flex;
    padding-top: 0.9rem;
    justify-content: space-between;
    border-top: 1px solid var(--di50);
    flex-wrap: wrap;
}

.hn-bottom-legal {
    font-size: 0.8rem;
    color: var(--c1h2);
}

/* банер згоди: варіант a - смуга внизу, варіант b - картка в кутку */

.hn-consent {
    background: var(--ujb8);
    border: 1px solid var(--di50);
    z-index: 40;
    position: fixed;
}

.hn-consent-bar {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.9rem 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.hn-consent-core {
    gap: 1.2rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
}

.hn-consent-card {
    right: 1.4rem;
    bottom: 1.4rem;
    width: 21rem;
    max-width: calc(100vw - 2.8rem);
    padding: 1.15rem 1.3rem;
    border-left: 3px solid var(--svhf);
}

.hn-consent-icon {
    color: var(--svhf);
    display: inline-flex;
    margin-bottom: 0.6rem;
}

.hn-consent-prose {
    line-height: 1.55;
    color: var(--c1h2);
    max-width: 60ch;
    font-size: 0.86rem;
}

.hn-consent-actions {
    flex-wrap: wrap;
    gap: 1.2rem;
    align-items: center;
    display: flex;
}

.hn-consent-card .hn-consent-actions {
    margin-top: 0.9rem;
}

.hn-consent-accept {
    padding: 0.5rem 1.1rem;
    font-size: 0.86rem;
}

.hn-consent-more {
    color: var(--svhf);
    font-size: 0.84rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hn-consent-more:hover {
    color: var(--yqtk);
}

/* адаптив */

@media (max-width: 60rem) {
    .hn-index-aside .hn-index-layout {
    grid-template-columns: 1fr;
    gap: 0.8rem;
}
    .hn-index-aside .hn-index-name {
    position: static;
}
    .hn-art-margin .hn-piece-split {
    grid-template-columns: 1fr;
    gap: 0.9rem;
}
    .hn-art-margin .hn-piece-side {
    position: static;
}
    .hn-bottom-cols {
    grid-template-columns: 1fr 1fr;
}
    .hn-cinfo-line {
    grid-template-columns: 1fr;
}
}

@media (max-width: 44rem) {
    .hn-page {
    font-size: 17px;
}
    .hn-upper {
    padding: 2rem 0 1.4rem;
}
    .hn-upper-name {
    font-size: 1.85rem;
}
    .hn-upper-stand {
    font-size: 1.08rem;
}
    .hn-upper-cap::first-letter {
    font-size: 2.8em;
}
    .hn-mast-core {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.7rem;
}
    .hn-mast-bar {
    gap: 1.1rem;
}
    .hn-mast-stack .hn-mast-core {
    align-items: center;
}
    .hn-mast-streak .hn-mast-bar {
    justify-content: center;
    flex-wrap: wrap;
}
    .hn-piece-name {
    font-size: 1.35rem;
}
    .hn-stack-name {
    font-size: 1.3rem;
}
    .hn-stack-upper {
    flex-direction: column;
    gap: 0.3rem;
}
    .hn-keys-point {
    padding-left: 2.4rem;
    text-indent: -2.4rem;
}
    .hn-keys-no {
    font-size: 1.25rem;
    width: 2.4rem;
}
    .hn-phead-name {
    font-size: 1.6rem;
}
    .hn-bottom-cols {
    grid-template-columns: 1fr;
    gap: 1.4rem;
}
    .hn-bottom-core {
    flex-direction: column;
    gap: 1.4rem;
}
    .hn-consent-core {
    gap: 0.8rem;
    align-items: flex-start;
    flex-direction: column;
}
    .hn-consent-card {
    bottom: 0.8rem;
    max-width: none;
    left: 0.8rem;
    right: 0.8rem;
    width: auto;
}
    .hn-nf {
    padding: 3.2rem 0 4rem;
}
}

@media (prefers-reduced-motion: reduce) {
    html {
    scroll-behavior: auto;
}
    .hn-qa-sign {
    transition: none;
}
    .hn-action {
    transition: none;
}
}

/* журнал правок */

.hn-log {
    padding: 2rem 0 2.4rem;
    border-top: 1px solid var(--di50);
}

.hn-log-name {
    font-size: 1.25rem;
    margin-bottom: 1.1rem;
}

.hn-log-stack {
    gap: 0.55rem 1.4rem;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(6.5rem, auto) 1fr;
}

.hn-log-date {
    font-size: 0.86rem;
    color: var(--c1h2);
    letter-spacing: 0.04em;
}

.hn-log-sub {
    font-size: 0.97rem;
    margin: 0;
}

.hn-log-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hn-log-line {
    padding: 0.85rem 0;
    border-top: 1px solid var(--di50);
}

.hn-log-rows .hn-log-line:first-child {
    border-top: 0;
}

.hn-log-stamp {
    display: block;
    font-size: 0.82rem;
    color: var(--c1h2);
}

.hn-log-prose {
    margin: 0.3rem 0 0;
}

@media (max-width: 40rem) {
    .hn-log-stack {
    grid-template-columns: 1fr;
    gap: 0.2rem 0;
}
    .hn-log-sub {
    margin-bottom: 0.8rem;
}
}

/* тло сторінки і блоків

   Знімки тут не тільки картинками в тексті, а й фоном блоків - так роблять живі
   сайти, і це дає сторінці другий-третій запит по зображення. Накладка градієнтом
   обовʼязкова: без неї читабельність тексту залежала б від того, який кадр випав. */

.hn-page {
    background: var(--tj37);
}

.hn-upper {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), var(--ujb8) 88%),
        url(/32c9a3/img/IMG_2032.jpg?v=8e314);
    background-size: cover;
    background-position: center;
}

.hn-stack {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.97)),
        url(/32c9a3/img/top.jpg?v=8e314);
    background-size: cover;
    background-position: center;
}

/* знімок */

.hn-shot {
    margin: 0 0 2rem;
}

/* Пропорція задана атрибутами width і height у розмітці, тому місце під картинку
   тримається до її завантаження і сторінка не стрибає. */
.hn-shot-img {
    display: block;
    height: auto;
    width: 100%;
}

/* Смугою кадр 3:2 займав би півекрана, тому підрізаємо його по висоті. */
.hn-shot-ribbon .hn-shot-img {
    object-fit: cover;
    height: clamp(calc(12rem * var(--aafq)), calc(26vw * var(--aafq)), calc(21rem * var(--aafq)));
}

.hn-shot-pair {
    gap: 0.9rem;
    grid-template-columns: 1fr 1fr;
    display: grid;
    margin-bottom: 2rem;
}

.hn-shot-pair .hn-shot-img {
    object-fit: cover;
    height: clamp(calc(10rem * var(--aafq)), calc(20vw * var(--aafq)), calc(16rem * var(--aafq)));
}

.hn-shot-pair .hn-shot {
    margin: 0;
}

@media (max-width: 34rem) {
    .hn-shot-pair {
    grid-template-columns: 1fr;
}
}

.hn-shot-sub {
    color: var(--c1h2);
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
    font-size: 0.82rem;
}

/* назва бренду поруч зі знаком: коли логотип це знак від моделі, тексту в ньому
   немає принципово, тому назву друкує рендерер */

.logo-name {
    font-family: var(--b285);
    font-size: 1.15rem;
    font-weight: var(--g2az);
    letter-spacing: var(--gnsn);
    white-space: nowrap;
}

/* нові варіанти середини */

/* зміст: плитки з номерами */

.hn-index-cards {
    padding-top: 1.6rem;
}

.hn-index-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 0.75rem;
    margin-top: 0.8rem;
}

.hn-index-tile {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: 100%;
    padding: 0.95rem 1.05rem 1.05rem;
    border: 1px solid var(--di50);
    border-radius: var(--t255);
    background: var(--ujb8);
    line-height: 1.35;
    overflow-wrap: anywhere;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.hn-index-tile:hover,
.hn-index-tile.hn-index-on {
    border-color: var(--svhf);
}

.hn-index-tile-no {
    color: var(--svhf);
    font-family: var(--b285);
    font-size: 1.6rem;
    font-weight: var(--g2az);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.hn-index-tile-prose {
    font-size: 0.98rem;
}

/* тіло статті: смуги з великим номером */

.hn-art-bands {
    padding: 0;
}

.hn-art-bands .hn-piece-ribbon {
    padding: var(--xoag) 0;
}

.hn-art-bands .hn-piece-ribbon:nth-child(even) {
    background: var(--tj37);
}

.hn-piece-big {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--svhf);
    font-family: var(--b285);
    font-size: clamp(2.8rem, 7vw, 4.6rem);
    font-weight: var(--g2az);
    font-variant-numeric: tabular-nums;
    line-height: 0.9;
    opacity: 0.35;
}

.hn-piece-top {
    line-height: 1.6;
    margin-top: 1.1rem;
    font-size: 1.12em;
    border-left: 3px solid var(--svhf);
    padding-left: 1.1rem;
}

.hn-art-bands .hn-piece-prose + .hn-piece-prose {
    margin-top: 1.15rem;
}

/* Номер на полі: колонка тексту зсувається праворуч, а цифра стоїть ліворуч від неї. */
.hn-art-bands-side .hn-piece-shell {
    max-width: calc(var(--pz2f) + 7.6rem);
    grid-template-columns: 6rem minmax(0, 1fr);
    display: grid;
    column-gap: 1.6rem;
}

.hn-art-bands-side .hn-piece-big {
    grid-column: 1;
    grid-row: 1 / span 4;
    align-self: start;
    margin: 0;
    text-align: right;
}

.hn-art-bands-side .hn-piece-name,
.hn-art-bands-side .hn-piece-prose {
    grid-column: 2;
}

/* чекліст: аркуш у пунктирній рамці */

.hn-stack-sheet-box {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 2px dashed var(--c1h2);
    border-radius: var(--t255);
    background: var(--ujb8);
}

.hn-stack-sheet-count {
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--di50);
    border-radius: var(--t255);
}

.hn-stack-ticks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1.3rem;
    gap: 0.7rem;
}

.hn-stack-tick-cell {
    display: block;
}

.hn-stack-tick {
    padding: 0.9rem 1rem;
    overflow-wrap: anywhere;
    display: grid;
    border-radius: var(--t255);
    cursor: pointer;
    background: var(--tj37);
    height: 100%;
    row-gap: 0.25rem;
    grid-template-columns: auto 1fr;
    transition: background-color 0.16s ease;
    align-content: start;
    column-gap: 0.8rem;
}

.hn-stack-tick .hn-stack-box {
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.15rem;
}

.hn-stack-point-on.hn-stack-tick {
    background: var(--gpu1);
}

/* підсумок: тези в ряд під великими цифрами */

.hn-keys-layout {
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    display: grid;
    gap: 1.2rem 1.6rem;
}

.hn-keys-cell {
    border-top: 2px solid var(--ohc8);
    padding-top: 0.8rem;
    display: block;
}

.hn-keys-big {
    display: block;
    color: var(--svhf);
    font-family: var(--b285);
    font-size: 2.8rem;
    font-weight: var(--g2az);
    line-height: 1;
}

.hn-keys-cell-prose {
    margin-top: 0.6rem;
    line-height: 1.55;
    font-size: 1rem;
}

/* про видання */

.hn-outlet {
    display: block;
}

.hn-outlet-box {
    border-radius: var(--t255);
    background: var(--tj37);
    gap: 1rem;
    align-items: flex-start;
    display: flex;
    padding: 1.2rem 1.3rem;
}

.hn-outlet-mark {
    color: var(--svhf);
    margin-top: 0.15rem;
    display: inline-flex;
    flex: none;
}

.hn-outlet-name {
    font-family: var(--b285);
    font-size: 1.02rem;
    font-weight: var(--g2az);
    letter-spacing: 0.04em;
}

.hn-outlet-prose {
    color: var(--c1h2);
    font-size: 0.95rem;
    margin-top: 0.35rem;
    line-height: 1.6;
}

.hn-outlet-more {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.hn-outlet-streak {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.6rem 1.6rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--ohc8);
    border-bottom: 1px solid var(--di50);
}

.hn-outlet-line .hn-outlet-name {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hn-outlet-line .hn-outlet-prose {
    margin-top: 0;
}

@media (max-width: 44rem) {
    .hn-stack-ticks {
    grid-template-columns: 1fr;
}
    .hn-art-bands-side .hn-piece-shell {
    display: block;
}
    .hn-piece-top {
    font-size: 1.04em;
}
    .hn-art-bands-side .hn-piece-big {
    margin-bottom: 0.5rem;
    text-align: left;
}
    .hn-keys-big {
    font-size: 2.2rem;
}
    .hn-outlet-streak {
    grid-template-columns: 1fr;
}
}

@media (prefers-reduced-motion: reduce) {
    .hn-index-tile,
    .hn-stack-tick {
    transition: none;
}
}

/* шапка: знак посередині і шапка ліворуч */

.hn-mast-split .hn-mast-core {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.hn-mast-split .hn-mast-link:last-child {
    justify-self: end;
}

.hn-mast-left .hn-mast-core {
    align-items: center;
    justify-content: flex-start;
}

.hn-mast-left .hn-mast-bar {
    padding-left: 1.5rem;
    border-left: 1px solid var(--di50);
}

/* шапка статті: обкладинка і навпіл */

.hn-upper-cover {
    overflow: hidden;
    position: relative;
    min-height: clamp(26rem, 48vw, 36rem);
    display: grid;
    padding: 0;
}

.hn-cover-shot {
    inset: 0;
    margin: 0;
    position: absolute;
}

.hn-cover-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hn-cover-core {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: var(--xoag);
    padding-bottom: var(--xoag);
}

.hn-cover-panel {
    border-radius: var(--t255);
    max-width: 40rem;
    padding: 1.8rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    background: var(--tj37);
}

.hn-cover-panel .hn-upper-name {
    font-size: min(var(--jepz), 2.4rem);
}

.hn-upper-split {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    display: grid;
    min-height: clamp(26rem, 44vw, 36rem);
}

.hn-split-shot {
    margin: 0;
}

.hn-split-shot img {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
}

.hn-split-prose {
    max-width: 40rem;
    align-self: center;
    padding: var(--xoag) clamp(1.5rem, 5vw, 4rem);
}

.hn-split-prose .hn-upper-name {
    font-size: min(var(--jepz), 2.5rem);
}

.hn-upper-split-flip .hn-split-shot {
    order: 2;
}

.hn-upper-split-flip .hn-split-prose {
    justify-self: end;
}

.hn-upper-meta-layout {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.2rem;
}


.hn-upper.hn-upper-cover,
.hn-upper.hn-upper-split {
    background-image: none;
}

/* напрям оформлення: фони зон, тло, заголовки розділів, кнопки, картки, фото */

.hn-action,
.hn-stack-card-action,
.hn-sub-box,
.hn-index-strip .hn-index-box,
.hn-consent-card {
    border-radius: var(--t255);
}

.hn-mast {
    background: var(--tj37);
}

.hn-upper {
    background-color: var(--tj37);
}


.hn-consent {
    --tj37: #094856;
    --ujb8: #225A67;
    --ohc8: #FFFFFF;
    --c1h2: #B5C8CC;
    --di50: #3F707B;
    --svhf: #FFFFFF;
    --lr7k: #094856;
    --gpu1: #2B626E;
    --d5kl: #FFFFFF;
    --h7qu: #094856;
    --ry4g: #2B626E;
    --yqtk: #B5C8CC;
    border-color: transparent;
    background: var(--tj37);
    color: var(--ohc8);
}

.hn-page {
    background-color: #E5EFF2;
}


.hn-sub-box,
.hn-index-strip .hn-index-box {
    background: transparent;
}




.hn-shot-img {
    border-radius: var(--t255);
}


@media (max-width: 60rem) {
    .hn-upper-split {
    grid-template-columns: 1fr;
}

    .hn-split-shot img {
    height: 15rem;
}

    .hn-upper-split-flip .hn-split-shot {
    order: 0;
}
}

@media (max-width: 44rem) {
    .hn-cover-panel .hn-upper-name,
    .hn-split-prose .hn-upper-name {
    font-size: 1.85rem;
}

    .hn-cover-panel {
    padding: 1.2rem;
}

    
    .hn-mast-split .hn-mast-core {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    row-gap: 0.6rem;
    display: grid;
}

    .hn-mast-split .hn-mast-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    min-width: 0;
}

    .hn-mast-left .hn-mast-bar {
    padding-left: 0;
    border-left: 0;
}

    .hn-mast-brand,
    .hn-mast-mark {
    max-width: 100%;
}

    .hn-mast-mark svg {
    height: auto;
    max-width: 100%;
}

    .hn-piece-name,
    .hn-stack-name {
    font-size: min(var(--yzyq), 1.4rem);
}
}

/* епоха сайту */



.hn-mast-link,
.hn-mast-name,
.hn-upper-kicker,
.hn-upper-drop .hn-upper-kicker,
.hn-upper-meta-key,
.hn-index-name,
.hn-stack-count,
.hn-phead-back,
.hn-cinfo-key,
.hn-ref-host,
.hn-log-date,
.hn-bottom-name,
.hn-bottom-width-name,
.hn-outlet-line .hn-outlet-name {
    text-transform: none;
    letter-spacing: normal;
}

.hn-mast-link {
    font-size: 0.95rem;
}

.hn-upper-meta-key {
    font-size: 0.86rem;
}


.hn-index-name {
    letter-spacing: var(--gnsn);
    font-size: 1.12rem;
    color: var(--ohc8);
}

.hn-phead-back {
    font-size: 0.9rem;
}

.hn-cinfo-key {
    font-size: 0.92rem;
}

.hn-bottom-width-name {
    font-size: 0.95rem;
}

.hn-outlet-line .hn-outlet-name {
    font-size: 1rem;
}

.hn-upper-name:first-child,
.hn-phead-name:first-child {
    margin-top: 0;
}

.hn-upper-read {
    color: var(--c1h2);
    margin-top: 0.7rem;
    font-size: 0.9rem;
}

.hn-cover-panel {
    box-shadow: none;
}


.hn-index-stack .hn-index-link,
.hn-index-inline .hn-index-link,
.hn-phead-back {
    color: var(--svhf);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.hn-index-inline .hn-index-link {
    border-bottom: 0;
}

.hn-index-stack .hn-index-link:hover,
.hn-index-inline .hn-index-link:hover,
.hn-phead-back:hover {
    color: var(--yqtk);
}

.hn-upper-center {
    text-align: left;
}

.hn-upper-center .hn-upper-meta {
    justify-content: flex-start;
}

.hn-upper-center .hn-upper-stand {
    margin-left: 0;
    margin-right: 0;
}


.hn-qa-plus {
    position: relative;
    height: 0.8rem;
    width: 0.8rem;
}

.hn-qa-plus::before,
.hn-qa-plus::after {
    top: 50%;
    margin-top: -1px;
    position: absolute;
    left: 0;
    background: currentColor;
    content: "";
    width: 100%;
    height: 2px;
}

.hn-qa-plus::after {
    transform: rotate(90deg);
}

.hn-qa-point[open] .hn-qa-plus {
    transform: rotate(45deg);
}

.hn-crumbs {
    font-size: 0.86rem;
    margin-bottom: 0.9rem;
    align-items: baseline;
    line-height: 1.4;
    gap: 0.2rem 0.5rem;
    color: var(--c1h2);
    flex-wrap: wrap;
    display: flex;
}

.hn-crumbs-link {
    color: var(--svhf);
}

.hn-crumbs-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


.hn-upper .hn-width {
    max-width: var(--ww3m);
}

.hn-upper-stand {
    max-width: 44rem;
}


.hn-layout {
    display: flex;
    flex-direction: column;
}

.hn-layout-main,
.hn-layout-side {
    display: contents;
}

.hn-layout-main > *,
.hn-layout-side > * {
    order: 2;
}

.hn-layout-main > :first-child,
.hn-layout-side > .hn-index {
    order: 1;
}

@media (min-width: 60rem) {
    .hn-layout {
    grid-template-columns: minmax(0, 1fr) 17rem;
    max-width: var(--ww3m);
    column-gap: 3rem;
    padding: 1.75rem var(--kj3q) 0;
    margin: 0 auto;
    display: grid;
}

    .hn-layout-main,
    .hn-layout-side {
    min-width: 0;
    display: block;
}

    
    .hn-layout-main {
    margin: 0 -1.25rem;
}

    .hn-layout-main .hn-width,
    .hn-layout-main .hn-ribbon {
    max-width: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

    .hn-layout-side .hn-width,
    .hn-layout-side .hn-ribbon {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

    .hn-layout-side {
    padding-bottom: var(--xoag);
}

    .hn-layout-side > * + * {
    margin-top: 2.2rem;
}

    .hn-layout-side .hn-area,
    .hn-layout-side .hn-area-tight,
    .hn-layout-side .hn-index {
    padding-top: 0;
    padding-bottom: 0;
}

    .hn-layout-side > .hn-index {
    max-height: calc(100vh - 2.5rem);
    position: sticky;
    overflow-y: auto;
    top: 1.25rem;
}

    .hn-layout-side .hn-index-layout {
    grid-template-columns: 1fr;
    row-gap: 0.6rem;
    padding-top: 0;
    padding-bottom: 0;
}

    .hn-layout-side .hn-index-name {
    position: static;
}

    .hn-layout-side .hn-index-stack .hn-index-link {
    font-size: 0.95rem;
}

    .hn-layout-side .hn-index-tiles {
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

    .hn-layout-side .hn-index-tile {
    padding: 0.6rem 0.8rem;
    align-items: baseline;
    flex-direction: row;
    gap: 0.7rem;
}

    .hn-layout-side .hn-index-tile-no {
    font-size: 1.05rem;
    overflow-wrap: normal;
    flex: none;
}

    .hn-layout-side .hn-outlet-streak {
    grid-template-columns: 1fr;
}

    
    .hn-layout-main .hn-art-margin .hn-piece-split {
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

    .hn-layout-main .hn-art-margin .hn-piece-side {
    position: static;
}
}

/* темний напрям: уся сторінка на темній версії палітри. Стоїть останнім, щоб :root
   перекрив світлі значення; зони шапки й героя перевизначають змінні в собі самі. */