/* Shared navigation rail for the live storytelling homepage. */
.story-home-page .site-header-shell {
    width: 100%;
    max-width: 72rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    position: relative;
    z-index: 20;
    margin-bottom: 3rem;
}

.story-home-page .brand-link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.story-home-page .site-kicker {
    margin-bottom: 5px;
    color: #747873;
    font: 400 10px/1 "Courier Prime", "Anonymous Pro", monospace;
    letter-spacing: .16em;
}

.story-home-page .brand-wordmark {
    color: #1a1a1a;
    font: 400 clamp(42px, 5vw, 64px)/.9 "DM Serif Display", "Playfair Display", Georgia, serif;
    letter-spacing: -.04em;
}

.story-home-page .brand-wordmark span { color: #f25c05; }
.story-home-page .header-navigation { min-width: min(100%, 440px); }
.story-home-page .header-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 2.3vw, 30px);
    color: #6d736f;
    font: 700 10px/1 "Courier Prime", "Anonymous Pro", monospace;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.story-home-page .site-nav-link {
    position: relative;
    padding: 8px 0;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.story-home-page .site-nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    height: 2px;
    background: #f25c05;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .2s ease;
}

.story-home-page .site-nav-link:hover,
.story-home-page .site-nav-link:focus-visible,
.story-home-page .site-nav-link[aria-current="page"] { color: #1a1a1a; }
.story-home-page .site-nav-link:hover::after,
.story-home-page .site-nav-link:focus-visible::after,
.story-home-page .site-nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.story-home-page .header-auth { min-width: max-content; }
.story-home-page .header-route-rule { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-top: 8px; }
.story-home-page .header-route-rule i, .story-home-page .header-route-rule b { display: block; height: 3px; }
.story-home-page .header-route-rule i { width: 100%; background: #1a1a1a; }
.story-home-page .header-route-rule b { width: 67%; background: #f25c05; }

@media (max-width: 820px) {
    .story-home-page .site-header-shell { align-items: flex-start; }
    .story-home-page .header-links { gap: 15px; font-size: 9px; }
    .story-home-page .header-navigation { min-width: 0; }
}

/* The English headline is not bold and has not been since the faked 700 came
 * off it. What makes it read as heavy is DM Serif Display itself: its regular is
 * a very dark drawing, 11.7% ink coverage across the line. Playfair Display —
 * the Cyrillic partner, and the only one of the two that ever renders a Russian
 * headline — draws its regular much lighter, at 9.6%. Same weight, 18% less ink,
 * which is why the Russian headline reads thin beside the English one.
 *
 * 600 lands at 12.7%, the closest of Playfair's weights to the English colour;
 * 700 overshoots to 13.4%. So this is not a bold, it is the weight at which the
 * two faces put the same amount of ink on the page.
 *
 * Deliberately scoped to this one heading rather than every display heading on a
 * Russian page. font-weight applies to the whole element, and a heading that
 * mixes scripts would send its Latin — "Apricot" — to DM Serif Display at 600,
 * which it does not have, reintroducing exactly the smeared fake bold we removed.
 * This headline is pure Cyrillic; anything that is not needs checking first. */
html[lang="ru"] .home-headline { font-weight: 600; }

/* The footer legal row is the one place on the page where Latin and Cyrillic
 * sit side by side in the same line: the contact address and the word "cookie"
 * stay English on purpose, the labels around them are Russian. The stack is
 * Courier Prime with Anonymous Pro behind it for Cyrillic, and a font stack is
 * resolved per glyph — so that line was setting the Latin in one typewriter and
 * the Cyrillic in another, at visibly different widths and cap heights. Give
 * the whole row to Anonymous Pro on Russian pages: these are addresses and
 * labels, not brand Latin, and one font reading evenly beats the brand face
 * winning half a line. */
html[lang="ru"] .story-home-page .site-legal-links {
    font-family: "Anonymous Pro", monospace;
}

/* Russian does not carry the tagline (removed by decision — the claim is not
 * one we make in this language), which leaves the footer's space-between pair
 * with a single child that would slump to the left edge. Pin the links right so
 * the footer keeps the shape it has in English. */
html[lang="ru"] .story-home-page .site-footer-tagline { display: none; }

@media (min-width: 768px) {
    html[lang="ru"] .story-home-page .site-home-footer { justify-content: flex-end; }
}

@media (max-width: 640px) {
    .story-home-page .site-header-shell { display: block; margin-bottom: 2.5rem; }
    .story-home-page .brand-link { width: max-content; }
    .story-home-page .header-navigation { width: min(100%, 330px); margin-top: 22px; margin-left: auto; }
    .story-home-page .header-links { justify-content: flex-end; gap: 16px; overflow-x: auto; padding-bottom: 2px; }
    .story-home-page .header-route-rule { align-items: flex-end; margin-top: 7px; }
    .story-home-page .header-route-rule i { width: min(100%, 330px); }
    .story-home-page .header-route-rule b { width: 43%; }

    /* Keep the ticket utility line useful on narrow screens: the decorative
       code and its divider add width but no interaction. */
    .story-home-page .ticket-code-mark,
    .story-home-page .ticket-utility-divider,
    #homepageStory .final-ticket .ticket-code {
        display: none;
    }

    .story-home-page .site-home-footer {
        align-items: center;
        gap: 0;
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }

    .story-home-page .site-footer-tagline,
    .story-home-page .site-footer-email {
        display: none;
    }

    .story-home-page .site-legal-links {
        width: 100%;
        /* English fits on one line at 320px and still does, so nothing moves
         * there. Russian labels are half again as long — "Политика
         * конфиденциальности" alone is 154px — and nowrap pushed the row off
         * the left edge of the screen. Wrapping is the honest answer; the
         * labels themselves still never break mid-word. */
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
        gap: clamp(5px, 2.4vw, 10px);
        color: #6b7280;
        font-size: clamp(9px, 2.4vw, 10px);
        letter-spacing: .035em;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-home-page .site-nav-link::after { transition-duration: .01ms; }
}