@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/typeset/opensans-latin-400.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/typeset/opensans-latin-600.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/typeset/opensans-latin-700.woff2") format("woff2");
}

:root {
    --dsx-pillar: #18192e;
    --dsx-vivid: #5751ca;
    --dsx-accent-pressed: #4235ba;
    --dsx-field: #FFFFFF;
    --dsx-raised: #f3f2fa;
    --dsx-type: #202a39;
    --dsx-faint: #000000;
    --dsx-rule: #dcdae8;
    --dsx-edge-hard: #b3b0cb;
    --dsx-blend-a: #b1abe4;
    --dsx-fade-bottom: #736ed5;
    --dsx-notice: #be123c;

    --dsx-hair: 3px;
    --dsx-tiny: 8px;
    --dsx-snug: 13px;
    --dsx-base: 21px;
    --dsx-wide: 34px;
    --dsx-roomy: 55px;
    --dsx-vast: 89px;
    --dsx-huge: 144px;

    --dsx-pill: 9999px;
    --dsx-circle: 50%;
    --r-hair: 0;
    --r-tiny: 0;
    --r-snug: 4px;
    --r-base: 6px;
    --r-wide: 10px;
    --r-roomy: 14px;
    --r-vast: 18px;
    --r-huge: 24px;

    --dsx-banner: "Open Sans", "Segoe UI", Arial, sans-serif;
    --dsx-reading: "Open Sans", "Segoe UI", Arial, sans-serif;

    --dsx-title: 30px;
    --dsx-h2: 24px;
    --dsx-lg-2: 20px;
    --dsx-sub-2: 18px;
    --dsx-sm-2: 15px;
    --dsx-micro-head: 13px;
    --dsx-normal: 15px;
    --dsx-petite: 13px;
    --dsx-legal: 11px;

    --dsx-dense: 1.2;
    --l-normal: 1.55;
    --dsx-loose: 1.7;

    --w-base: 400;
    --dsx-medium: 500;
    --dsx-black: 700;

    --e-snug: -0.01em;
    --e-normal: 0;
    --e-loose: 0.02em;

    --d-hair: none;
    --d-tiny: none;
    --d-snug: none;
    --d-base: 0 0 0 1px rgba(24, 25, 46, 0.06);
    --d-wide: 0 0 0 2px rgba(24, 25, 46, 0.10), 0 8px 24px rgba(24, 25, 46, 0.10);
    --d-roomy: 0 0 0 2px rgba(24, 25, 46, 0.12), 0 12px 30px rgba(24, 25, 46, 0.12);
    --d-vast: 0 0 0 3px rgba(24, 25, 46, 0.12), 0 18px 40px rgba(24, 25, 46, 0.14);
    --d-huge: 0 0 0 3px rgba(24, 25, 46, 0.14), 0 26px 56px rgba(24, 25, 46, 0.16);

    --dsx-brisk: 128ms;
    --dsx-mid: 270ms;
    --dsx-easy: 505ms;
    --dsx-out: cubic-bezier(0.29, 0.92, 0.29, 0.92);
    --dsx-take-off: cubic-bezier(0.48, 0.01, 0.45, 0.99);
    --dsx-both: cubic-bezier(0.48, 0.01, 0.45, 0.99);
    --dsx-overshoot: cubic-bezier(0.32, 1.55, 0.65, 1.25);

    --dsx-main: 1340px;
    --dsx-narrow: 520px;
    --dsx-edge-wide: 48px;
    --dsx-inset-tablet: 24px;
    --dsx-padding-mobile: 16px;

    --dsx-fine: 1px;
    --b-mid: 4px;
    --b-wide: 6px;

    --dsx-tall: 78px;
    --dsx-size-mobile: 64px;

    --shell: calc(var(--dsx-main) + 2 * var(--dsx-edge-wide));
    --gutter: var(--dsx-padding-mobile);
    --sec-y: 34px;
    --quiet: #4c5668;
    --tone-warm: #92400e;
}

@media (min-width: 720px) {
    :root {
        --dsx-title: 44px;
        --dsx-h2: 34px;
        --dsx-lg-2: 26px;
        --dsx-sub-2: 20px;
        --dsx-sm-2: 16px;
        --dsx-micro-head: 14px;
        --dsx-normal: 16px;
        --dsx-petite: 14px;
        --dsx-legal: 12px;
        --gutter: var(--dsx-inset-tablet);
        --sec-y: 40px;
    }
}

@media (min-width: 1040px) {
    :root {
        --gutter: var(--dsx-edge-wide);
        --sec-y: 44px;
    }
}

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

html,
body {
    overflow-x: clip;
}

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

body {
    margin: 0;
    background: var(--dsx-field);
    color: var(--dsx-type);
    font-family: var(--dsx-reading);
    font-size: var(--dsx-normal);
    font-weight: var(--w-base);
    line-height: var(--l-normal);
    letter-spacing: var(--e-normal);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.shaft {
    display: block;
    flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: anywhere;
    hyphens: none;
    margin: 0;
}

h1,
h2 {
    font-family: var(--dsx-banner);
    font-weight: var(--dsx-black);
    letter-spacing: var(--e-snug);
    line-height: var(--dsx-dense);
}

h1 {
    font-size: var(--dsx-title);
}

h2 {
    font-size: var(--dsx-h2);
}

h3 {
    font-family: var(--dsx-reading);
    font-size: var(--dsx-lg-2);
    font-weight: var(--dsx-black);
    line-height: var(--dsx-dense);
}

h4 {
    font-family: var(--dsx-reading);
    font-size: var(--dsx-sub-2);
    font-weight: var(--dsx-medium);
    line-height: var(--dsx-dense);
}

p {
    margin: 0;
}

img {
    max-width: 100%;
}

a {
    color: var(--dsx-vivid);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: background-color var(--dsx-brisk) var(--dsx-out), color var(--dsx-brisk) var(--dsx-out);
}

a:hover {
    background-color: #eeecfb;
    color: var(--dsx-accent-pressed);
}

:focus-visible {
    outline: 3px solid var(--dsx-accent-pressed);
    outline-offset: 2px;
}

.skip-hop {
    position: absolute;
    left: var(--dsx-snug);
    z-index: 200;
    background: var(--dsx-pillar);
    color: #ffffff;
    padding: var(--dsx-snug) var(--dsx-base);
    border-radius: var(--r-base);
    font-size: var(--dsx-petite);
    font-weight: 600;
    text-decoration: none;
}

.skip-hop:not(:focus) {
    top: -200px !important;
}

.skip-hop:focus {
    top: var(--dsx-snug);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.fanut-rail,
.tagup-frame,
.tynuk-frame,
.dypir-frame,
.gezapa-frame,
.puku-frame,
.xipadu-frame,
.vonyfa-frame,
.nifeta-frame,
.kadefe-frame,
.xenudak-frame,
.lefizo-frame,
.golis-frame,
.rimi-frame,
.xobapa-frame {
    width: 100%;
    max-width: calc(var(--dsx-main) + 2 * var(--dsx-edge-wide));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ── header — HEAD-SUBNAV ───────────────────────────────────────────── */

.fanut {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--dsx-field);
    color: var(--dsx-type);
    border-bottom: var(--dsx-fine) solid var(--dsx-rule);
    transition: box-shadow var(--dsx-mid) var(--dsx-out);
}

.fanut.is-shrunk {
    box-shadow: 0 6px 20px rgba(24, 25, 46, 0.12);
}

.fanut-guard {
    background: var(--dsx-raised);
    color: var(--dsx-type);
    border-bottom: var(--dsx-fine) solid var(--dsx-rule);
    padding-block: 6px;
    font-size: var(--dsx-legal);
    line-height: 1.35;
    transition: padding-block var(--dsx-mid) var(--dsx-out);
}

.fanut-guard .fanut-rail {
    display: block;
    text-align: center;
}

.fanut.is-shrunk .fanut-guard {
    display: none;
}

.fanut-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    min-height: 26px;
    margin-inline-end: var(--dsx-tiny);
    padding-inline: 5px;
    border-radius: var(--dsx-pill);
    background: var(--dsx-notice);
    color: #ffffff;
    font-size: var(--dsx-legal);
    font-weight: var(--dsx-black);
    letter-spacing: var(--e-loose);
    vertical-align: middle;
}

.fanut-note {
    color: var(--dsx-type);
    vertical-align: middle;
}

.fanut-note a {
    color: var(--dsx-accent-pressed);
    display: inline-block;
}

.fanut-crest {
    display: flex;
    align-items: center;
    min-height: var(--dsx-size-mobile);
    position: relative;
    transition: min-height var(--dsx-mid) var(--dsx-out);
}

.fanut-crest .fanut-rail {
    display: flex;
    align-items: center;
    gap: var(--dsx-snug);
}

.fanut-mark {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    background: var(--dsx-pillar);
    color: #ffffff;
    padding: 5px 9px;
    border-radius: var(--r-base);
    text-decoration: none;
}

.fanut-mark:hover {
    background: var(--dsx-pillar);
    color: #ffffff;
}

.fanut-shot {
    display: block;
    height: 42px;
    width: auto;
    flex-shrink: 0;
    transition: height var(--dsx-mid) var(--dsx-out);
}

.fanut-menu-lever {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--dsx-snug);
    border: 0;
    background: var(--dsx-field);
    color: var(--dsx-type);
    font-family: var(--dsx-reading);
    font-size: var(--dsx-petite);
    font-weight: 600;
    letter-spacing: var(--e-loose);
    text-transform: uppercase;
    cursor: pointer;
}

.fanut-menu-lever:hover {
    background: var(--dsx-raised);
    color: var(--dsx-accent-pressed);
}

.fanut-lines {
    display: inline-block;
    width: 18px;
    height: 2px;
    margin-inline-end: var(--dsx-tiny);
    background: currentColor;
    position: relative;
}

.fanut-lines::before,
.fanut-lines::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.fanut-lines::before {
    top: -6px;
}

.fanut-lines::after {
    top: 6px;
}

.fanut-drawer {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 4;
    background: var(--dsx-field);
    color: var(--dsx-type);
    border-block: var(--dsx-fine) solid var(--dsx-rule);
    box-shadow: 0 14px 28px rgba(24, 25, 46, 0.16);
    max-height: 72vh;
    overflow-y: auto;
}

.fanut-drawer.is-open {
    display: block;
}

.fanut-pocket {
    padding-block: var(--dsx-tiny);
}

.fanut-belt {
    display: none;
    height: 56px;
    background: var(--dsx-field);
    color: var(--dsx-type);
    border-top: var(--dsx-fine) solid var(--dsx-rule);
    transition: height var(--dsx-mid) var(--dsx-out);
}

.fanut-bar {
    height: 100%;
}

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

.fanut-belt .fanut-roll {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    height: 100%;
    overflow: hidden;
}

.fanut-node {
    display: block;
}

.fanut-belt .fanut-node {
    flex: 0 0 auto;
}

.fanut-href {
    display: block;
    position: relative;
    padding: 12px var(--dsx-tiny);
    color: var(--dsx-type);
    background: var(--dsx-field);
    font-size: var(--dsx-sm-2);
    font-weight: 600;
    letter-spacing: var(--e-loose);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.fanut-href:hover {
    background: var(--dsx-raised);
    color: var(--dsx-accent-pressed);
}

.fanut-href[aria-current="page"] {
    color: var(--dsx-accent-pressed);
    background: var(--dsx-field);
}

.fanut-href[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: var(--dsx-circle);
    background: var(--dsx-notice);
}

.fanut-drawer .fanut-href {
    padding: 13px var(--gutter);
    font-size: var(--dsx-sm-2);
}

@media (min-width: 1024px) {
    .fanut-crest {
        min-height: var(--dsx-tall);
    }

    .fanut-shot {
        height: 60px;
    }

    .fanut.is-shrunk .fanut-crest {
        min-height: 60px;
    }

    .fanut.is-shrunk .fanut-shot {
        height: 44px;
    }

    .fanut.is-shrunk .fanut-belt {
        height: 46px;
    }

    .fanut-menu-lever,
    .fanut-drawer {
        display: none;
    }

    .fanut-belt {
        display: block;
    }

    .fanut-belt .fanut-href {
        font-size: 13px;
        padding: 10px 6px;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .fanut-belt .fanut-roll {
        gap: 10px;
    }

    .fanut-belt .fanut-href {
        padding-inline: 3px;
        letter-spacing: var(--e-normal);
    }
}

@media (min-width: 1380px) {
    .fanut-belt .fanut-roll {
        gap: var(--dsx-base);
    }

    .fanut-belt .fanut-href {
        padding-inline: var(--dsx-snug);
    }
}

/* ── hero — HERO-08 Magazine Cover ──────────────────────────────────── */

.tagup {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(430px, calc(100vh - 210px), 620px);
    background-color: var(--dsx-pillar);
    background-image: linear-gradient(0deg, rgba(10, 10, 22, 0.88), rgba(10, 10, 22, 0.42)), url("/gallery/vista-alt.webp");
    background-size: cover;
    background-position: center;
    color: #ffffff;
    text-align: center;
}

.tagup-cover {
    padding-block: var(--dsx-roomy);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dsx-snug);
}

.tagup-eyebrow {
    display: inline-block;
    font-size: var(--dsx-legal);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ded9f4;
}

.tagup-cover h1 {
    color: #ffffff;
    max-width: 18ch;
}

.tagup-deck {
    max-width: var(--dsx-narrow);
    color: #ece9f8;
    font-size: var(--dsx-sm-2);
    line-height: var(--l-normal);
}

.tagup-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--dsx-snug);
    margin-top: var(--dsx-tiny);
    font-size: var(--dsx-legal);
    color: #d7d2ee;
    letter-spacing: var(--e-loose);
    text-transform: uppercase;
}

.tagup-info span + span {
    padding-left: 0;
}

@media (min-width: 720px) {
    .tagup-info span + span {
        border-left: var(--dsx-fine) solid rgba(255, 255, 255, 0.45);
        padding-left: var(--dsx-snug);
    }
}

.tagup-hint {
    position: absolute;
    left: 50%;
    bottom: var(--dsx-snug);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: var(--dsx-legal);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #cfc9ea;
    pointer-events: none;
}

.tagup-arrow {
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

@media (min-width: 720px) {
    .tagup {
        min-height: clamp(520px, calc(100vh - 200px), 720px);
    }

    .tagup-cover h1 {
        max-width: 16ch;
    }
}

/* ── page header — PHEAD-04 Two-Column ──────────────────────────────── */

.tynuk {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
    border-bottom: var(--dsx-fine) solid var(--dsx-rule);
}

.tynuk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dsx-base);
}

.tynuk-eyebrow {
    display: block;
    margin-bottom: var(--dsx-tiny);
    font-size: var(--dsx-legal);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dsx-accent-pressed);
}

.tynuk-deck {
    color: var(--quiet);
    font-size: var(--dsx-sm-2);
    line-height: var(--dsx-loose);
}

@media (min-width: 1040px) {
    .tynuk-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--dsx-roomy);
        align-items: end;
    }
}

/* ── breadcrumbs — BREAD-04 Numbered Steps ──────────────────────────── */

.dypir {
    padding-block: var(--dsx-snug);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.dypir-roll {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dypir-node {
    display: inline-flex;
    align-items: baseline;
}

.dypir-node + .dypir-node::before {
    content: "—";
    color: #9aa1af;
    margin-inline: var(--dsx-snug);
}

.dypir-step {
    font-family: var(--dsx-banner);
    font-weight: var(--dsx-black);
    font-size: var(--dsx-micro-head);
    color: var(--dsx-vivid);
    margin-right: var(--dsx-hair);
}

.dypir-href {
    font-size: var(--dsx-petite);
    letter-spacing: var(--e-loose);
    text-transform: uppercase;
    color: var(--quiet);
    background: var(--dsx-field);
    text-decoration: none;
}

.dypir-href:hover {
    color: var(--dsx-accent-pressed);
    background: var(--dsx-raised);
}

.dypir-here {
    font-size: var(--dsx-petite);
    letter-spacing: var(--e-loose);
    text-transform: uppercase;
    color: var(--dsx-type);
}

/* ── prose — PROSE-13 rule above the heading ────────────────────────── */

.gezapa {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.gezapa-part {
    padding-top: var(--dsx-wide);
    border-top: var(--dsx-fine) dotted var(--dsx-edge-hard);
}

.gezapa-part + .gezapa-part {
    margin-top: var(--dsx-wide);
}

.gezapa-part h2 {
    margin-block-start: 0;
    margin-block-end: var(--dsx-base);
    font-weight: 600;
}

.gezapa-words {
    margin-block-end: var(--dsx-base);
    line-height: var(--dsx-loose);
}

.gezapa-words:last-child {
    margin-block-end: 0;
}

.gezapa-words a {
    background: var(--dsx-field);
    color: var(--dsx-accent-pressed);
}

.gezapa-words a:hover {
    background: #eeecfb;
    color: var(--dsx-accent-pressed);
}

.gezapa-roll {
    margin: 0 0 var(--dsx-base);
    padding-left: var(--dsx-base);
    line-height: var(--dsx-loose);
}

.gezapa-roll li {
    margin-bottom: var(--dsx-tiny);
}

.gezapa-roll li::marker {
    color: var(--dsx-vivid);
    font-weight: 600;
}

.gezapa-shot {
    display: block;
    width: 100%;
    height: auto;
    max-height: 56vh;
    margin-block: var(--dsx-base);
    border: var(--dsx-fine) solid var(--dsx-rule);
    border-radius: var(--r-base);
    object-fit: cover;
}

.gezapa-tall {
    max-height: 52vh;
}

.gezapa-figure {
    margin: 0 0 var(--dsx-base);
}

.gezapa-caption {
    display: block;
    margin-top: 6px;
    font-size: var(--dsx-legal);
    color: var(--quiet);
}

@media (min-width: 720px) {
    .gezapa-figure {
        max-width: 520px;
    }

    .gezapa-wide {
        max-width: none;
    }
}

/* ── offer inset ────────────────────────────────────────────────────── */

.lokix {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dsx-snug);
    margin-block: var(--dsx-base);
    padding: var(--dsx-base);
    background: var(--dsx-raised);
    color: var(--dsx-type);
    border: var(--dsx-fine) solid var(--dsx-rule);
    border-left: var(--b-mid) solid var(--dsx-vivid);
    border-radius: var(--r-base);
}

.lokix-words {
    font-size: var(--dsx-petite);
    font-weight: 600;
    color: var(--dsx-type);
    line-height: var(--l-normal);
}

.lokix-fine {
    display: block;
    font-size: var(--dsx-legal);
    color: var(--quiet);
}

.lokix-cell {
    margin-block: 0;
    height: 100%;
    justify-content: center;
}

@media (min-width: 720px) {
    .lokix {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--dsx-base);
    }

    .lokix-words {
        flex: 1 1 340px;
    }

    .lokix-cell {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── items grid — GRID-01 Three-Column Bordered Cards ───────────────── */

.puku {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.puku-caption-lead {
    margin-block-start: 0;
    margin-block-end: var(--dsx-base);
}

.puku-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dsx-wide);
}

.puku-node {
    display: flex;
    flex-direction: column;
    gap: var(--dsx-snug);
    padding: var(--dsx-wide);
    background: var(--dsx-raised);
    color: var(--dsx-type);
    border: var(--dsx-fine) solid var(--dsx-rule);
    border-radius: var(--r-base);
    transition: border-color var(--dsx-mid) var(--dsx-out);
}

.puku-node:hover {
    border-color: var(--dsx-vivid);
}

.puku-sign {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--r-base);
    background: var(--dsx-pillar);
    color: #ffffff;
}

.puku-sign svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.puku-caption {
    font-family: var(--dsx-reading);
    font-size: var(--dsx-sub-2);
    font-weight: var(--dsx-black);
    line-height: var(--dsx-dense);
    color: var(--dsx-type);
}

.puku-words {
    color: var(--quiet);
    background: var(--dsx-raised);
    font-size: var(--dsx-normal);
    line-height: var(--l-normal);
}

@media (min-width: 720px) {
    .puku-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .puku-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── faq — FAQ-05 Detail-Tag Native ─────────────────────────────────── */

.xipadu {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.xipadu-caption {
    margin-block-start: 0;
    margin-block-end: var(--dsx-base);
}

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

.xipadu-node {
    border-bottom: var(--dsx-fine) solid var(--dsx-rule);
}

.xipadu-fold {
    padding-block: var(--dsx-base);
}

.xipadu-ask {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: var(--dsx-snug);
    cursor: pointer;
    list-style: none;
}

.xipadu-ask::-webkit-details-marker {
    display: none;
}

.xipadu-ask h3 {
    font-size: var(--dsx-sm-2);
    font-weight: var(--dsx-black);
    color: var(--dsx-type);
}

.xipadu-ask:hover h3 {
    color: var(--dsx-accent-pressed);
}

.xipadu-ask::after {
    content: "";
    justify-self: end;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--dsx-vivid);
    border-bottom: 2px solid var(--dsx-vivid);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dsx-mid) var(--dsx-out);
}

.xipadu-fold[open] .xipadu-ask::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.xipadu-part {
    padding-top: var(--dsx-snug);
    animation: xipadu-unfold var(--dsx-mid) var(--dsx-out);
}

.xipadu-part p {
    color: var(--quiet);
    line-height: var(--dsx-loose);
}

@keyframes xipadu-unfold {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── reviews — REV-08 Avatar-Initials Cards ─────────────────────────── */

.vonyfa {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.vonyfa-caption {
    margin-block-start: 0;
    margin-block-end: var(--dsx-base);
}

.vonyfa-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dsx-wide);
}

.vonyfa-plate {
    display: flex;
    flex-direction: column;
    gap: var(--dsx-snug);
    padding: var(--dsx-wide);
    background: var(--dsx-raised);
    color: var(--dsx-type);
    border: var(--dsx-fine) solid var(--dsx-rule);
    border-radius: var(--r-base);
}

.vonyfa-rank {
    display: flex;
    align-items: center;
    gap: var(--dsx-snug);
}

.vonyfa-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--dsx-circle);
    background: var(--dsx-vivid);
    color: #ffffff;
    font-family: var(--dsx-banner);
    font-size: var(--dsx-sm-2);
    font-weight: var(--dsx-black);
}

.vonyfa-info {
    display: flex;
    flex-direction: column;
}

.vonyfa-person {
    font-weight: 600;
    color: var(--dsx-type);
}

.vonyfa-stars {
    font-size: var(--dsx-petite);
    color: var(--tone-warm);
    background: var(--dsx-raised);
    letter-spacing: 0.08em;
}

.vonyfa-say {
    margin: 0;
    color: var(--quiet);
    background: var(--dsx-raised);
    line-height: var(--l-normal);
}

@media (min-width: 720px) {
    .vonyfa-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .vonyfa-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── cta block — CTA-03 Split Visual + Text ─────────────────────────── */

.nifeta {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
    scroll-margin-top: 180px;
}

.nifeta-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: var(--dsx-fine) solid var(--dsx-rule);
    border-radius: var(--r-base);
    overflow: hidden;
}

.nifeta-part {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dsx-snug);
    padding: var(--dsx-wide);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.nifeta-eyebrow {
    font-size: var(--dsx-legal);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dsx-accent-pressed);
}

.nifeta-top {
    margin: 0;
}

.nifeta-words {
    max-width: var(--dsx-narrow);
    color: var(--quiet);
    line-height: var(--dsx-loose);
}

.nifeta-fine {
    display: block;
    font-size: var(--dsx-legal);
    color: var(--quiet);
}

.nifeta-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: var(--dsx-base);
    background-color: var(--dsx-accent-pressed);
    background-image: linear-gradient(135deg, var(--dsx-vivid), var(--dsx-pillar));
    color: #ffffff;
}

.nifeta-panel-glyph {
    font-family: var(--dsx-banner);
    font-size: 64px;
    font-weight: var(--dsx-black);
    line-height: 1;
    letter-spacing: var(--e-snug);
    color: #ffffff;
    text-align: center;
}

@media (min-width: 1040px) {
    .nifeta-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .nifeta-part {
        padding: var(--dsx-roomy);
    }

    .nifeta-panel {
        min-height: 400px;
    }

    .nifeta-panel-glyph {
        font-size: 96px;
    }
}

/* ── data table — TABLE-05 Compact Dense ────────────────────────────── */

.kadefe {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.kadefe-caption {
    margin-block-start: 0;
    margin-block-end: var(--dsx-snug);
}

.kadefe-note {
    margin-block-end: var(--dsx-base);
    font-size: var(--dsx-petite);
    color: var(--quiet);
}

.kadefe-scroll {
    overflow-x: auto;
    border: var(--dsx-fine) solid var(--dsx-rule);
    border-radius: var(--r-base);
}

.kadefe-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dsx-petite);
}

.kadefe-grid th,
.kadefe-grid td {
    padding: var(--dsx-tiny) var(--dsx-snug);
    text-align: left;
    border-bottom: var(--dsx-fine) solid var(--dsx-rule);
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

.kadefe-grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--dsx-raised);
    color: var(--dsx-type);
    font-size: var(--dsx-legal);
    font-weight: var(--dsx-black);
    letter-spacing: var(--e-loose);
    text-transform: uppercase;
}

.kadefe-grid tbody th {
    font-weight: 600;
    color: var(--dsx-type);
    background: var(--dsx-field);
    width: 42%;
}

.kadefe-grid tbody td {
    color: var(--quiet);
    background: var(--dsx-field);
}

.kadefe-grid tbody tr:last-child th,
.kadefe-grid tbody tr:last-child td {
    border-bottom: 0;
}

/* ── legal — LEGAL-07 Magazine Editorial ────────────────────────────── */

.xenudak {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.xenudak-lead {
    margin-block-end: var(--dsx-wide);
    font-family: var(--dsx-banner);
    font-style: italic;
    font-size: var(--dsx-sub-2);
    line-height: var(--l-normal);
    color: var(--dsx-type);
}

.xenudak-part + .xenudak-part {
    margin-top: var(--dsx-wide);
}

.xenudak-part h2 {
    margin-block-start: 0;
    margin-block-end: var(--dsx-snug);
    font-family: var(--dsx-banner);
    font-style: italic;
    font-size: var(--dsx-lg-2);
}

.xenudak-rule {
    width: 80px;
    height: 0;
    margin: 0 0 var(--dsx-base);
    border: 0;
    border-top: var(--b-mid) solid var(--dsx-vivid);
}

.xenudak-words {
    margin-block-end: var(--dsx-base);
    line-height: var(--dsx-loose);
}

.xenudak-part .xenudak-words:first-of-type::first-letter {
    float: left;
    margin-right: var(--dsx-tiny);
    font-family: var(--dsx-banner);
    font-size: 3em;
    line-height: 0.86;
    font-weight: var(--dsx-black);
    color: var(--dsx-vivid);
}

.xenudak-roll {
    margin: 0 0 var(--dsx-base);
    padding-left: var(--dsx-base);
    line-height: var(--dsx-loose);
}

.xenudak-roll li {
    margin-bottom: var(--dsx-tiny);
}

.xenudak-fine {
    display: block;
    margin-top: var(--dsx-wide);
    padding-top: var(--dsx-snug);
    border-top: var(--dsx-fine) solid var(--dsx-rule);
    font-size: var(--dsx-petite);
    color: var(--quiet);
}

/* ── contact form — FORM-01 Stacked Standard ────────────────────────── */

.lefizo {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.lefizo-caption {
    margin-block-start: 0;
    margin-block-end: var(--dsx-snug);
}

.lefizo-done {
    display: none;
    margin-block-end: var(--dsx-base);
    padding: var(--dsx-base);
    background: #e8f6ed;
    color: #14532d;
    border: var(--dsx-fine) solid #9ed3b3;
    border-radius: var(--r-base);
}

.lefizo-done.is-visible {
    display: block;
}

.lefizo-form {
    display: flex;
    flex-direction: column;
    gap: var(--dsx-base);
    padding: var(--dsx-wide);
    background: var(--dsx-raised);
    color: var(--dsx-type);
    border: var(--dsx-fine) solid var(--dsx-rule);
    border-radius: var(--r-base);
}

.lefizo-slot {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: var(--dsx-tiny);
}

.lefizo-cue {
    font-family: var(--dsx-reading);
    font-size: var(--dsx-petite);
    font-weight: var(--dsx-medium);
    letter-spacing: var(--e-loose);
    text-transform: uppercase;
    color: var(--dsx-type);
}

.lefizo-input,
.lefizo-area {
    font-family: var(--dsx-reading);
    font-size: var(--dsx-normal);
    color: var(--dsx-type);
    background: var(--dsx-field);
    border: var(--dsx-fine) solid var(--dsx-edge-hard);
    border-radius: var(--r-base);
    padding: var(--dsx-snug);
    width: 100%;
}

.lefizo-input {
    height: 48px;
}

.lefizo-area {
    min-height: 140px;
    resize: vertical;
}

.lefizo-input:focus,
.lefizo-area:focus {
    border-color: var(--dsx-vivid);
}

.lefizo-send {
    align-self: flex-start;
    min-height: 48px;
    padding-inline: var(--dsx-roomy);
    background: var(--dsx-vivid);
    color: #ffffff;
    border: 0;
    border-radius: var(--r-base);
    font-family: var(--dsx-banner);
    font-size: var(--dsx-petite);
    font-weight: var(--dsx-black);
    letter-spacing: var(--e-loose);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--dsx-brisk) var(--dsx-out);
}

.lefizo-send:hover {
    background: var(--dsx-accent-pressed);
    color: #ffffff;
}

/* ── author card — AUTH-02 Vertical Centered Editorial ──────────────── */

.golis {
    padding-block: var(--sec-y);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.golis-part {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
}

.golis-photo {
    display: block;
    width: 140px;
    height: 140px;
    margin: 0 auto var(--dsx-wide);
    border-radius: var(--dsx-circle);
    object-fit: cover;
}

.golis-role {
    display: block;
    font-size: var(--dsx-petite);
    font-weight: 600;
    letter-spacing: var(--e-loose);
    text-transform: uppercase;
    color: var(--dsx-accent-pressed);
}

.golis-person {
    margin-block: var(--dsx-tiny);
    font-family: var(--dsx-banner);
    font-size: var(--dsx-h2);
    font-weight: var(--dsx-black);
    line-height: var(--dsx-dense);
    color: var(--dsx-type);
}

.golis-words {
    margin-block-end: var(--dsx-base);
    line-height: var(--dsx-loose);
    color: var(--quiet);
}

.golis-roll {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--dsx-tiny);
    list-style: none;
    margin: 0;
    padding: 0;
}

.golis-node {
    padding: 6px var(--dsx-snug);
    background: var(--dsx-raised);
    color: var(--dsx-type);
    border: var(--dsx-fine) solid var(--dsx-rule);
    border-radius: var(--dsx-pill);
    font-size: var(--dsx-legal);
}

/* ── byline — BYLINE-04 Quote-Style Attribution ─────────────────────── */

.syxa {
    display: block;
    padding-block: var(--dsx-roomy);
    background: var(--dsx-field);
    color: var(--dsx-type);
}

.syxa-quote {
    position: relative;
    max-width: 600px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    text-align: center;
}

.syxa-quote::before {
    content: "\201C";
    display: block;
    font-family: var(--dsx-banner);
    font-size: var(--dsx-title);
    font-weight: var(--dsx-black);
    line-height: 0.8;
    color: var(--dsx-vivid);
}

.syxa-words {
    margin-block: var(--dsx-snug);
    font-family: var(--dsx-banner);
    font-style: italic;
    font-size: var(--dsx-sub-2);
    line-height: var(--l-normal);
    color: var(--dsx-type);
}

.syxa-info {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--dsx-tiny);
}

.syxa-photo {
    display: block;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--dsx-circle);
    object-fit: cover;
}

.syxa-person {
    font-style: normal;
    font-weight: var(--dsx-black);
}

.syxa-href {
    color: var(--dsx-accent-pressed);
    background: var(--dsx-field);
}

.syxa-role {
    font-size: var(--dsx-petite);
    font-style: italic;
    color: var(--quiet);
}

/* ── cookie banner — COOK-13 Compact Icon Toast ─────────────────────── */

.kuludef {
    display: none;
    position: fixed;
    inset-block-end: var(--dsx-wide);
    inset-inline-end: var(--dsx-wide);
    z-index: 90;
    max-width: 320px;
    background: var(--dsx-field);
    color: var(--dsx-type);
    border: var(--dsx-fine) solid var(--dsx-edge-hard);
    border-radius: var(--r-wide);
    box-shadow: var(--d-wide);
    padding: var(--dsx-base);
}

.kuludef.is-open {
    display: block;
}

.kuludef-frame {
    display: flex;
    align-items: flex-start;
    gap: var(--dsx-snug);
    width: auto;
    max-width: none;
    padding-inline: 0;
}

.kuludef-sign {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: var(--dsx-vivid);
}

.kuludef-body {
    display: flex;
    flex-direction: column;
    gap: var(--dsx-snug);
}

.kuludef-say {
    font-size: var(--dsx-legal);
    line-height: var(--l-normal);
    color: var(--dsx-type);
}

.kuludef-actions {
    display: flex;
    align-items: center;
    gap: var(--dsx-snug);
}

.kuludef-agree {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding-inline: var(--dsx-snug);
    background: var(--dsx-vivid);
    color: #ffffff;
    border: 0;
    border-radius: var(--r-base);
    font-family: var(--dsx-reading);
    font-size: var(--dsx-legal);
    font-weight: 600;
    cursor: pointer;
}

.kuludef-agree:hover {
    background: var(--dsx-accent-pressed);
    color: #ffffff;
}

.kuludef-later {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding-inline: var(--dsx-tiny);
    background: var(--dsx-field);
    color: var(--quiet);
    border: 0;
    font-family: var(--dsx-reading);
    font-size: var(--dsx-legal);
    text-decoration: underline;
    cursor: pointer;
}

.kuludef-later:hover {
    background: var(--dsx-field);
    color: var(--dsx-type);
}

@media (max-width: 719px) {
    .kuludef {
        inset-inline: var(--dsx-snug);
        inset-block-end: var(--dsx-snug);
        max-width: none;
        padding: 12px 14px;
    }

    .kuludef-say {
        font-size: var(--dsx-legal);
        line-height: 1.35;
    }

    .kuludef-agree,
    .kuludef-later {
        flex: 1 1 auto;
        min-width: 44px;
        min-height: 40px;
    }
}

/* ── error block — ERR-04 Full-Bleed Atmospheric ────────────────────── */

.rimi {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    min-height: clamp(460px, calc(100vh - 210px), 720px);
    background-color: var(--dsx-pillar);
    background-image: linear-gradient(180deg, rgba(10, 10, 22, 0.35), rgba(10, 10, 22, 0.86)), url("/gallery/vista-alt.webp");
    background-size: cover;
    background-position: center;
    color: #ffffff;
    text-align: center;
}

.rimi-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dsx-base);
    padding-block: var(--dsx-roomy);
}

.rimi-top {
    max-width: var(--dsx-narrow);
    color: #ffffff;
}

.rimi-words {
    max-width: var(--dsx-narrow);
    color: #ece9f8;
    line-height: var(--l-normal);
}

.rimi-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding-inline: var(--dsx-wide);
    background: var(--dsx-vivid);
    color: #ffffff;
    border-radius: var(--r-base);
    font-weight: 600;
    text-decoration: none;
}

.rimi-action:hover {
    background: #ffffff;
    color: var(--dsx-pillar);
}

/* ── footer — FOOT-02 Two-Row Brand + Nav ───────────────────────────── */

.xobapa {
    background: var(--dsx-field);
    color: var(--dsx-type);
    border-top: var(--dsx-fine) solid var(--dsx-rule);
    padding-block: var(--dsx-roomy);
}

.xobapa-crown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dsx-base);
    text-align: center;
}

.xobapa-mark {
    display: inline-flex;
    align-items: center;
    background: var(--dsx-pillar);
    color: #ffffff;
    padding: 6px 10px;
    border-radius: var(--r-base);
    text-decoration: none;
}

.xobapa-mark:hover {
    background: var(--dsx-pillar);
    color: #ffffff;
}

.xobapa-shot {
    display: block;
    height: 56px;
    width: auto;
}

.xobapa-bar {
    display: block;
}

.xobapa-roll {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--dsx-snug) var(--dsx-base);
    list-style: none;
    margin: 0;
    padding: 0;
}

.xobapa-node {
    display: block;
}

.xobapa-href {
    color: var(--quiet);
    background: var(--dsx-field);
    font-size: var(--dsx-petite);
    text-decoration: none;
}

.xobapa-href:hover {
    color: var(--dsx-type);
    background: var(--dsx-field);
    text-decoration: underline;
}

.xobapa-hem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dsx-snug);
    margin-top: var(--dsx-wide);
    padding-top: var(--dsx-base);
    border-top: var(--dsx-fine) solid var(--dsx-rule);
    text-align: center;
}

.xobapa-fine {
    font-size: var(--dsx-legal);
    color: var(--quiet);
}

.xobapa-legal .xobapa-href {
    font-size: var(--dsx-legal);
}

@media (min-width: 1040px) {
    .xobapa-crown {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .xobapa-hem {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .xobapa-roll {
        justify-content: flex-end;
    }

    .xobapa-shot {
        height: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── offer button — scripts/cta-style-noneless.mjs ──────────────────── */

.lokix-invite,
.nifeta-invite {
    align-self: flex-start;
    max-width: 100%;
}

.natoti-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--dsx-wide);
    min-height: 48px;
    border-radius: var(--r-base);
    font-weight: 600;
}

.natoti-hit {
    position: relative;
    background: #059669;
    color: #000000;
    text-decoration: none;
    transition: background var(--dsx-brisk) var(--dsx-out), color var(--dsx-brisk) var(--dsx-out), transform var(--dsx-brisk) var(--dsx-out);
}

.natoti-hit.natoti-hit {
    color: #000000;
    text-decoration: none;
}

.natoti-hit:hover {
    background: #047857;
    color: #FFFFFF;
    animation: none;
}

.natoti-hit.natoti-hit:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.natoti-hit:hover::after {
    animation: none;
}

.natoti-hit:active {
    background: #065F46;
    color: #FFFFFF;
}

.natoti-hit:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
}

@keyframes natoti-tide {
    0%,
    100% {
        transform: scaleX(0);
    }

    40%,
    60% {
        transform: scaleX(1);
    }
}

.natoti-hit::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 6px;
    height: 3px;
    background: currentColor;
    opacity: 0.5;
    transform-origin: left;
    animation: natoti-tide 2s var(--dsx-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .natoti-hit,
    .natoti-hit::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 1033px) {
  .fanut-belt,
  .fanut-bar { display: none !important; }
  .fanut-menu-lever { display: flex !important; }
}

/* nojs guard 28.09.2026: без JS контент виден */
html.no-js .xipadu-part{opacity:1!important;transform:none!important;visibility:visible!important;clip-path:none!important}