@font-face {
    font-family: "wpf734468";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/288287/fonts/fraunces-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: "wpf734468";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/288287/fonts/fraunces-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: "wpfb1a1a6";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/288287/fonts/source-serif-4-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: "wpfb1a1a6";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/288287/fonts/source-serif-4-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;
}

@font-face {
    font-family: "wpfb1a1a6";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/288287/fonts/source-serif-4-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: "wpfb1a1a6";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/288287/fonts/source-serif-4-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;
}
:root {
    --qbth: rgb(147,105,16);
    --q0ri: rgb(91,63,4);
    --jv93: rgb(47,190,191);
    --fch7: rgb(244,251,251);
    --yboj: rgb(255,255,255);
    --g9kl: rgb(48,36,18);
    --xb6m: rgb(123,112,94);
    --n3m9: rgb(233,228,220);
    --aqz0: rgb(255,255,255);
    --y08h: rgb(17,17,17);
    --j0nf: rgb(242,237,226);
    --wq1k: rgb(230,247,247);
    --zgn1: "wpf734468", "Times New Roman", Times, serif;
    --tdyw: "wpfb1a1a6", Charter, Georgia, serif;
    --pflm: 600;
    --tngd: -0.02em;
    --ypp8: 50rem;
    --oe7m: 72rem;
    --wmlt: 1.5rem;
    --r2gt: 1.72;
    --ekhd: 2.1rem;
    --yz8g: calc(17px + 1px);
    --hmy9: 2.1rem;
    --g7m7: 1.5rem;
    --tf6j: 6px;
    --b486: 0.8;
}

*, *::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(--zgn1);
    font-weight: var(--pflm);
    letter-spacing: var(--tngd);
    line-height: 1.2;
}

p {
    margin: 0;
}

dl, dt, dd {
    margin: 0;
}

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

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

svg {
    display: block;
    flex: none;
}

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

summary {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

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

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

.se-page {
    margin: 0;
    background: var(--yboj);
    color: var(--g9kl);
    font-family: var(--tdyw);
    font-size: var(--yz8g);
    line-height: var(--r2gt);
    -webkit-font-smoothing: antialiased;
}

.se-main {
    display: block;
}

.se-belt {
    padding: 0 var(--wmlt);
    max-width: var(--oe7m);
    width: 100%;
    margin: 0 auto;
}

.se-width {
    margin: 0 auto;
    padding: 0 var(--wmlt);
    max-width: var(--ypp8);
    width: 100%;
}

.se-block {
    padding: var(--ekhd) 0;
}

.se-block-tight {
    padding: 1.5rem 0;
}

.se-anchor {
    color: var(--qbth);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.se-anchor:hover {
    color: var(--q0ri);
}

.se-btn {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    background: var(--qbth);
    color: var(--aqz0);
    font-family: var(--zgn1);
    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;
}

.se-btn:hover {
    background: var(--q0ri);
}

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

.se-head {
    border-bottom: 1px solid var(--n3m9);
}

.se-head-inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}

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

.se-head-chip {
    display: inline-flex;
    align-items: center;
    color: var(--qbth);
}

.se-head-name {
    font-family: var(--zgn1);
    font-size: 1.2rem;
    font-weight: var(--pflm);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.se-head-label {
    color: var(--xb6m);
    font-size: 0.85rem;
    font-style: italic;
}

.se-head-nav {
    align-items: baseline;
    display: flex;
    gap: 1.4rem;
}

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

.se-head-anchor:hover {
    color: var(--g9kl);
    border-bottom-color: var(--qbth);
}

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

.se-head-stack .se-head-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding-top: 1.6rem;
    padding-bottom: 0.9rem;
}

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

.se-head-streak {
    border-top: 1px solid var(--n3m9);
}

.se-head-streak .se-head-nav {
    padding: 0.6rem var(--wmlt);
    justify-content: center;
}

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

.se-crown {
    padding: 3.2rem 0 2.2rem;
}

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

.se-crown-name {
    margin-top: 0.9rem;
    font-size: var(--hmy9);
    line-height: 1.12;
}

.se-crown-stand {
    margin-top: 1.1rem;
    font-size: 1.22rem;
    line-height: 1.55;
    color: var(--xb6m);
}

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

.se-crown-meta-thing {
    gap: 0.4rem;
    display: inline-flex;
    align-items: baseline;
}

.se-crown-meta-key {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--xb6m);
    font-size: 0.78rem;
}

.se-crown-meta-val {
    font-family: var(--zgn1);
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

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

.se-crown-center {
    text-align: center;
}

.se-crown-center .se-crown-meta {
    justify-content: center;
}

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

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

.se-crown-ruled .se-crown-rule {
    border-left: 3px solid var(--qbth);
    padding-left: 1.6rem;
}

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

.se-crown-ruled .se-crown-meta-key {
    padding-top: 0.15rem;
}

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

.se-crown-drop .se-crown-kicker {
    margin-top: 1.6rem;
    border-top: 1px solid var(--n3m9);
    letter-spacing: 0.06em;
    font-weight: 400;
    padding-top: 0.8rem;
    color: var(--xb6m);
}

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

.se-crown-cap {
    color: var(--g9kl);
    font-size: 1.16rem;
}

.se-crown-cap::first-letter {
    float: left;
    padding: 0.06em 0.09em 0 0;
    color: var(--qbth);
    font-family: var(--zgn1);
    font-size: 3.4em;
    font-weight: var(--pflm);
    line-height: 0.8;
}

/* зміст */

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

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

.se-index-thing {
    display: block;
}

.se-index-anchor {
    display: block;
    color: var(--g9kl);
    transition: color 0.15s ease;
}

.se-index-anchor:hover {
    color: var(--qbth);
}

.se-index-num {
    display: inline-block;
    width: 1.6rem;
    color: var(--xb6m);
    font-family: var(--zgn1);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.se-index-on {
    color: var(--qbth);
    font-weight: 600;
}

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

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

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

.se-index-series {
    max-width: var(--ypp8);
}

.se-index-series .se-index-thing {
    border-top: 1px solid var(--n3m9);
}

.se-index-series .se-index-thing:first-child {
    border-top: 0;
}

.se-index-series .se-index-anchor {
    padding: 0.55rem 0;
    font-size: 1.02rem;
}

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

.se-index-strip .se-index-bin {
    background: var(--fch7);
    border-top: 2px solid var(--qbth);
    padding: 1.1rem 1.35rem 1.25rem;
}

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

.se-index-inline .se-index-thing {
    align-items: baseline;
    display: inline-flex;
}

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

.se-index-inline .se-index-anchor {
    border-bottom: 1px solid var(--n3m9);
    display: inline;
    font-size: 0.95rem;
}

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

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

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

.se-piece-name {
    font-size: var(--g7m7);
}

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

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

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

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

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

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

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

.se-art-margin .se-piece-num {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--qbth);
    font-family: var(--zgn1);
    font-size: 1.5rem;
    font-weight: var(--pflm);
    opacity: 0.6;
}

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

.se-art-margin .se-piece-main {
    max-width: var(--ypp8);
}

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

/* чекліст */

.se-series {
    display: block;
}

.se-series-crown {
    gap: 1rem;
    justify-content: space-between;
    align-items: baseline;
    display: flex;
}

.se-series-name {
    font-size: var(--g7m7);
}

.se-series-hint {
    margin-top: 0.6rem;
    color: var(--xb6m);
    font-size: 1rem;
}

.se-series-count {
    flex: none;
    color: var(--xb6m);
    font-family: var(--zgn1);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.se-series-items {
    margin-top: 1.4rem;
}

.se-series-thing {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 0.25rem;
    cursor: pointer;
    padding: 0.95rem 0;
    border-top: 1px solid var(--n3m9);
    column-gap: 0.9rem;
}

.se-series-items li:last-child .se-series-thing {
    border-bottom: 1px solid var(--n3m9);
}

.se-series-bin {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.3rem 0 0;
    accent-color: var(--qbth);
    cursor: pointer;
}

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

.se-series-hint-2 {
    font-size: 0.92rem;
    grid-column: 2;
    display: block;
    color: var(--xb6m);
    line-height: 1.55;
}

.se-series-thing-on .se-series-label {
    color: var(--xb6m);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.se-series-thing-on .se-series-hint-2 {
    opacity: 0.65;
}

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

.se-series-boxed .se-series-count {
    display: block;
    margin-top: 0.9rem;
}

.se-series-cards {
    margin-top: 1.2rem;
    gap: 0.7rem;
    display: grid;
}

.se-series-tile {
    display: block;
}

.se-series-tile-btn {
    grid-template-columns: auto auto 1fr;
    border-left: 2px solid var(--n3m9);
    text-align: left;
    column-gap: 0.9rem;
    transition: border-color 0.16s ease, background-color 0.16s ease;
    display: grid;
    cursor: pointer;
    padding: 1rem 1.15rem;
    width: 100%;
    row-gap: 0.3rem;
    background: var(--fch7);
}

.se-series-tile-btn:hover {
    border-left-color: var(--qbth);
}

.se-series-tile-num {
    grid-column: 1;
    grid-row: 1 / span 2;
    color: var(--xb6m);
    font-family: var(--zgn1);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.se-series-chip {
    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(--n3m9);
    color: transparent;
}

.se-series-tile-btn .se-series-label {
    grid-column: 3;
    grid-row: 1;
}

.se-series-tile-btn .se-series-hint-2 {
    grid-column: 2 / -1;
    grid-row: 2;
}

.se-series-thing-on.se-series-tile-btn {
    border-left-color: var(--qbth);
    background: var(--j0nf);
}

.se-series-thing-on .se-series-chip {
    color: var(--aqz0);
    background: var(--qbth);
    border-color: var(--qbth);
}

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

.se-keys {
    display: block;
}

.se-keys-series {
    border-top: 2px solid var(--g9kl);
    padding-top: 1.1rem;
}

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

.se-keys-num {
    display: inline-block;
    width: 3.2rem;
    color: var(--qbth);
    font-family: var(--zgn1);
    font-size: 1.5rem;
    font-weight: var(--pflm);
    text-indent: 0;
    vertical-align: baseline;
}

.se-keys-rows .se-keys-series {
    padding-top: 0;
    border-top: 0;
}

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

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

.se-keys-chip {
    display: inline-flex;
    color: var(--qbth);
    margin-top: 0.4rem;
}

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

.se-answers {
    display: block;
}

.se-answers-series {
    display: block;
}

.se-answers-thing {
    border-top: 1px solid var(--n3m9);
}

.se-answers-thing:last-child {
    border-bottom: 1px solid var(--n3m9);
}

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

.se-answers-q::-webkit-details-marker {
    display: none;
}

.se-answers-q:hover {
    color: var(--qbth);
}

.se-answers-sign {
    display: inline-flex;
    color: var(--xb6m);
    flex: none;
    transition: transform 0.2s ease;
}

.se-answers-thing[open] .se-answers-sign {
    color: var(--qbth);
    transform: rotate(90deg);
}

.se-answers-a {
    padding: 0 0 1.1rem;
    color: var(--xb6m);
    font-size: 1rem;
}

.se-answers-flat .se-answers-flat-q {
    margin-top: 1.5rem;
    font-family: var(--zgn1);
    font-size: 1.08rem;
    font-weight: 600;
}

.se-answers-flat .se-answers-flat-a {
    font-size: 1rem;
    margin-top: 0.4rem;
    color: var(--xb6m);
}

/* джерела */

.se-cite {
    display: block;
}

.se-cite-name {
    font-size: 1.25rem;
}

.se-cite-hint {
    color: var(--xb6m);
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

.se-cite-series {
    margin-top: 1rem;
}

.se-cite-thing {
    display: block;
    border-top: 1px solid var(--n3m9);
    padding: 0.5rem 0;
}

.se-cite-anchor {
    color: var(--qbth);
    font-size: 0.98rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.se-cite-anchor:hover {
    color: var(--q0ri);
}

.se-cite-host {
    color: var(--xb6m);
    display: block;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.se-cite-inline .se-cite-flow {
    margin-top: 0.8rem;
}

.se-cite-inline .se-cite-anchor {
    margin-right: 1.1rem;
}

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

.se-hint {
    display: block;
}

.se-hint-prose {
    line-height: 1.6;
    padding-top: 0.9rem;
    color: var(--xb6m);
    font-size: 0.88rem;
    border-top: 1px solid var(--n3m9);
}

.se-hint-bin {
    align-items: flex-start;
    background: var(--fch7);
    padding: 1rem 1.15rem;
    gap: 0.85rem;
    display: flex;
}

.se-hint-bin .se-hint-prose {
    border-top: 0;
    padding-top: 0;
}

.se-hint-glyph {
    display: inline-flex;
    color: var(--xb6m);
    margin-top: 0.25rem;
    flex: none;
}

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

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

.se-phead-inner {
    display: block;
}

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

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

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

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

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

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

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

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

.se-doc {
    display: block;
}

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

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

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

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

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

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

.se-cinfo-glyph {
    color: var(--qbth);
    display: inline-flex;
}

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

.se-cinfo-hint {
    font-size: 0.88rem;
    color: var(--xb6m);
    margin-top: 1.6rem;
}

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

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

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

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

/* підвал */

.se-end {
    padding: 2.2rem 0 1.4rem;
    border-top: 1px solid var(--n3m9);
    margin-top: 2.5rem;
}

.se-end-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.se-end-brand {
    max-width: 22rem;
}

.se-end-name {
    display: block;
    font-family: var(--zgn1);
    font-size: 1.05rem;
    font-weight: var(--pflm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.se-end-hint {
    color: var(--xb6m);
    margin-top: 0.4rem;
    font-size: 0.88rem;
}

.se-end-nav {
    flex-wrap: wrap;
    display: flex;
    gap: 0.3rem 1.3rem;
}

.se-end-anchor {
    color: var(--xb6m);
    font-size: 0.88rem;
}

.se-end-anchor:hover {
    color: var(--qbth);
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

.se-end-width {
    display: block;
}

.se-end-cols .se-end-nav {
    gap: 0.4rem;
    flex-direction: column;
}

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

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

.se-end-legal {
    font-size: 0.8rem;
    color: var(--xb6m);
}

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

.se-cookie {
    border: 1px solid var(--n3m9);
    z-index: 40;
    position: fixed;
    background: var(--yboj);
}

.se-cookie-bar {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.9rem 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.se-cookie-inner {
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    display: flex;
    flex-wrap: wrap;
}

.se-cookie-tile {
    bottom: 1.4rem;
    max-width: calc(100vw - 2.8rem);
    border-left: 3px solid var(--qbth);
    right: 1.4rem;
    width: 21rem;
    padding: 1.15rem 1.3rem;
}

.se-cookie-glyph {
    display: inline-flex;
    margin-bottom: 0.6rem;
    color: var(--qbth);
}

.se-cookie-prose {
    max-width: 60ch;
    font-size: 0.86rem;
    color: var(--xb6m);
    line-height: 1.55;
}

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

.se-cookie-tile .se-cookie-actions {
    margin-top: 0.9rem;
}

.se-cookie-accept {
    padding: 0.5rem 1.1rem;
    font-size: 0.86rem;
}

.se-cookie-more {
    color: var(--qbth);
    font-size: 0.84rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.se-cookie-more:hover {
    color: var(--q0ri);
}

/* адаптив */

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

@media (max-width: 44rem) {
    .se-page {
    font-size: 17px;
}
    .se-crown {
    padding: 2rem 0 1.4rem;
}
    .se-crown-name {
    font-size: 1.85rem;
}
    .se-crown-stand {
    font-size: 1.08rem;
}
    .se-crown-cap::first-letter {
    font-size: 2.8em;
}
    .se-head-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.7rem;
}
    .se-head-nav {
    gap: 1.1rem;
}
    .se-head-stack .se-head-inner {
    align-items: center;
}
    .se-head-streak .se-head-nav {
    flex-wrap: wrap;
    justify-content: center;
}
    .se-piece-name {
    font-size: 1.35rem;
}
    .se-series-name {
    font-size: 1.3rem;
}
    .se-series-crown {
    flex-direction: column;
    gap: 0.3rem;
}
    .se-keys-thing {
    padding-left: 2.4rem;
    text-indent: -2.4rem;
}
    .se-keys-num {
    width: 2.4rem;
    font-size: 1.25rem;
}
    .se-phead-name {
    font-size: 1.6rem;
}
    .se-end-cols {
    grid-template-columns: 1fr;
    gap: 1.4rem;
}
    .se-end-inner {
    gap: 1.4rem;
    flex-direction: column;
}
    .se-cookie-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}
    .se-cookie-tile {
    left: 0.8rem;
    width: auto;
    max-width: none;
    bottom: 0.8rem;
    right: 0.8rem;
}
    .se-nf {
    padding: 3.2rem 0 4rem;
}
}

@media (prefers-reduced-motion: reduce) {
    html {
    scroll-behavior: auto;
}
    .se-answers-sign {
    transition: none;
}
    .se-btn {
    transition: none;
}
}

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

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

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

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

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

.se-log-hint {
    margin: 0;
    font-size: 0.97rem;
}

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

.se-log-row {
    border-top: 1px solid var(--n3m9);
    padding: 0.85rem 0;
}

.se-log-rows .se-log-row:first-child {
    border-top: 0;
}

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

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

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

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

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

.se-page {
    background: var(--fch7);
}

.se-crown {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), var(--yboj) 88%),
        url(/288287/img/shot2.jpg?v=c03bf);
    background-size: cover;
    background-position: center;
}

.se-series {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.97)),
        url(/288287/img/table-7.jpg?v=c03bf);
    background-size: cover;
    background-position: center;
}

/* знімок */

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

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

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

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

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

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

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

.se-shot-hint {
    letter-spacing: 0.02em;
    font-size: 0.82rem;
    margin-top: 0.5rem;
    color: var(--xb6m);
}

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

.logo-name {
    font-family: var(--zgn1);
    font-size: 1.15rem;
    font-weight: var(--pflm);
    letter-spacing: var(--tngd);
    white-space: nowrap;
}

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

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

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

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

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

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

.se-index-tile-num {
    color: var(--qbth);
    font-family: var(--zgn1);
    font-size: 1.6rem;
    font-weight: var(--pflm);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

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

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

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

.se-art-bands .se-piece-belt {
    padding: var(--ekhd) 0;
}

.se-art-bands .se-piece-belt:nth-child(even) {
    background: var(--fch7);
}

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

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

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

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

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

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

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

.se-series-sheet-bin {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 2px dashed var(--xb6m);
    border-radius: var(--tf6j);
    background: var(--yboj);
}

.se-series-sheet-count {
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--n3m9);
    border-radius: var(--tf6j);
}

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

.se-series-tick-cell {
    display: block;
}

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

.se-series-tick .se-series-bin {
    height: 1.3rem;
    margin-top: 0.15rem;
    width: 1.3rem;
}

.se-series-thing-on.se-series-tick {
    background: var(--j0nf);
}

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

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

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

.se-keys-big {
    display: block;
    color: var(--qbth);
    font-family: var(--zgn1);
    font-size: 2.8rem;
    font-weight: var(--pflm);
    line-height: 1;
}

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

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

.se-outlet {
    display: block;
}

.se-outlet-bin {
    align-items: flex-start;
    display: flex;
    border-radius: var(--tf6j);
    padding: 1.2rem 1.3rem;
    background: var(--fch7);
    gap: 1rem;
}

.se-outlet-chip {
    color: var(--qbth);
    flex: none;
    display: inline-flex;
    margin-top: 0.15rem;
}

.se-outlet-name {
    font-family: var(--zgn1);
    font-size: 1.02rem;
    font-weight: var(--pflm);
    letter-spacing: 0.04em;
}

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

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

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

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

.se-outlet-row .se-outlet-prose {
    margin-top: 0;
}

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

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

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

.se-head-split .se-head-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.se-head-split .se-head-anchor:last-child {
    justify-self: end;
}

.se-head-left .se-head-inner {
    align-items: center;
    justify-content: flex-start;
}

.se-head-left .se-head-nav {
    border-left: 1px solid var(--n3m9);
    padding-left: 1.5rem;
}

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

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

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

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

.se-cover-inner {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: var(--ekhd);
    padding-bottom: var(--ekhd);
}

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

.se-cover-panel .se-crown-name {
    font-size: min(var(--hmy9), 2.4rem);
}

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

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

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

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

.se-split-prose .se-crown-name {
    font-size: min(var(--hmy9), 2.5rem);
}

.se-crown-split-flip .se-split-shot {
    order: 2;
}

.se-crown-split-flip .se-split-prose {
    justify-self: end;
}

.se-crown-meta-cols {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.2rem;
}


.se-crown.se-crown-cover,
.se-crown.se-crown-split {
    background-image: none;
}

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

.se-btn,
.se-series-tile-btn,
.se-hint-bin,
.se-index-strip .se-index-bin,
.se-cookie-tile {
    border-radius: var(--tf6j);
}

.se-head {
    --fch7: rgb(91,63,4);
    --yboj: rgb(107,82,29);
    --g9kl: rgb(255,255,255);
    --xb6m: rgb(206,197,180);
    --n3m9: rgb(127,105,59);
    --qbth: rgb(255,255,255);
    --aqz0: rgb(91,63,4);
    --j0nf: rgb(114,90,39);
    --jv93: rgb(255,255,255);
    --y08h: rgb(91,63,4);
    --wq1k: rgb(114,90,39);
    --q0ri: rgb(206,197,180);
    border-bottom-color: transparent;
    background: var(--fch7);
    color: var(--g9kl);
}


.se-head-chip {
    background: rgb(255,255,255);
    padding: 0.35rem 0.7rem;
    color: rgb(48,36,18);
    border-radius: var(--tf6j);
}

.se-crown {
    background-color: var(--j0nf);
}

.se-crown {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.82), var(--j0nf) 88%), url(/288287/img/shot2.jpg?v=c03bf);
}

.se-end {
    --fch7: rgb(91,63,4);
    --yboj: rgb(107,82,29);
    --g9kl: rgb(255,255,255);
    --xb6m: rgb(206,197,180);
    --n3m9: rgb(127,105,59);
    --qbth: rgb(255,255,255);
    --aqz0: rgb(91,63,4);
    --j0nf: rgb(114,90,39);
    --jv93: rgb(255,255,255);
    --y08h: rgb(91,63,4);
    --wq1k: rgb(114,90,39);
    --q0ri: rgb(206,197,180);
    border-top-color: transparent;
    background: var(--fch7);
    color: var(--g9kl);
}

.se-cookie {
    --fch7: rgb(91,63,4);
    --yboj: rgb(107,82,29);
    --g9kl: rgb(255,255,255);
    --xb6m: rgb(206,197,180);
    --n3m9: rgb(127,105,59);
    --qbth: rgb(255,255,255);
    --aqz0: rgb(91,63,4);
    --j0nf: rgb(114,90,39);
    --jv93: rgb(255,255,255);
    --y08h: rgb(91,63,4);
    --wq1k: rgb(114,90,39);
    --q0ri: rgb(206,197,180);
    border-color: transparent;
    background: var(--fch7);
    color: var(--g9kl);
}

.se-page {
    background-color: rgb(237,241,235);
}


.se-head,
.se-main,
.se-end {
    max-width: calc(var(--oe7m) + 3rem);
    margin-left: auto;
    margin-right: auto;
}

.se-main {
    box-shadow: 0 0 0 1px var(--n3m9);
    background: var(--yboj);
}

.se-head {
    background-color: var(--yboj);
    border-radius: var(--tf6j) var(--tf6j) 0 0;
    margin-top: 1.25rem;
}

.se-end {
    margin-top: 0;
    margin-bottom: 1.25rem;
    border-radius: 0 0 var(--tf6j) var(--tf6j);
    background-color: var(--yboj);
}

.se-hint-bin,
.se-index-strip .se-index-bin {
    background: transparent;
}

.se-series-tile-btn,
.se-series-tick,
.se-outlet-bin,
.se-hint-bin,
.se-index-strip .se-index-bin {
    box-shadow: inset 0 0 0 1px var(--n3m9);
}

.se-series-name,
.se-cite-name,
.se-log-name {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.se-series-name::after,
.se-cite-name::after,
.se-log-name::after {
    background: var(--n3m9);
    flex: 1;
    height: 1px;
    content: "";
}


.se-shot-img {
    border-radius: var(--tf6j);
}


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

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

    .se-crown-split-flip .se-split-shot {
    order: 0;
}
}

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

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

    
    .se-head-split .se-head-inner {
    row-gap: 0.6rem;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    display: grid;
}

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

    .se-head-left .se-head-nav {
    border-left: 0;
    padding-left: 0;
}

    .se-head-brand,
    .se-head-chip {
    max-width: 100%;
}

    .se-head-chip svg {
    height: auto;
    max-width: 100%;
}

    .se-piece-name,
    .se-series-name {
    font-size: min(var(--g7m7), 1.4rem);
}

    .se-head,
    .se-end {
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
}
}

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












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

