/* =========================================
   ITAPROFILE PORTAL / CSS
   ========================================= */

@font-face {
    font-family: "Inter";
    src: url("/fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg-main: #f6f3ed;
    --bg-stage: #f6f3ed;

    --bg-card: rgba(255, 255, 255, 0.62);
    --bg-card-strong: rgba(255, 255, 255, 0.82);
    --bg-card-solid: #ffffff;
    --bg-dark: #1c1a14;

    --text-main: #211d16;
    --text-muted: #6b6459;
    --text-soft: rgba(33, 29, 22, 0.56);

    --accent-bg: #ac8548;
    --accent-text: #211d16;

    --sidebar-w: 400px;

    --radius-xl: 24px;
    --radius-lg: 20px;
    --radius-md: 15px;
    --radius-sm: 10px;

    --gap-main: 12px;

    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.06);

    --motion: cubic-bezier(0.22, 1, 0.36, 1);

    --font-main: "Inter", Arial, sans-serif;
}

/* =========================================
   RESET / BASE
   ========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

html,
body {
    min-height: 100%;
    background: var(--bg-main);
    font-family: var(--font-main);
    font-optical-sizing: auto;
    font-synthesis: none;
    color: var(--text-main);
}

body {
    overflow: hidden;
}

button,
a {
    font-family: inherit;
}

button {
    -webkit-tap-highlight-color: transparent;
}

.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.028;
    z-index: 999;
    background-image: url("https://grainy-gradients.vercel.app/noise.svg");
}

/* =========================================
   LAYOUT
   ========================================= */

.portal-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    padding: 8px;
    gap: var(--gap-main);
}

.sidebar {
    width: var(--sidebar-w);
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px;
    border-radius: var(--radius-xl);
}

.stage {
    position: relative;
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: 48px 12px 12px 0;
    border-radius: var(--radius-xl);
    background: var(--bg-stage);
    scroll-behavior: smooth;
}

.stage::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 0;
}

.stage-topline {
    position: fixed;
    top: 18px;
    left: calc(var(--sidebar-w) + 36px);
    right: 26px;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    color: rgba(33, 29, 22, 0.38);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

/* =========================================
   SIDEBAR / BRAND
   ========================================= */

.city-selector {
    background: rgba(255, 255, 255, 0.46);
    padding: 4px;
    border-radius: 999px;
    margin-bottom: 18px;
    backdrop-filter: blur(24px) saturate(1.18);
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
}

.selector-track {
    position: relative;
    display: flex;
}

.selector-thumb {
    position: absolute;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.065);
    transition: transform 0.58s var(--motion);
}

.sel-btn {
    position: relative;
    z-index: 2;
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transition: color 0.28s var(--motion);
}

.sel-btn.active {
    color: var(--text-main);
}

.brand-group {
    padding: 52px 0 44px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 34px;
    align-items: center;
}

.label-mini {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 7px;
}

.clock-display {
    font-size: 30px;
    line-height: 0.95;
    letter-spacing: -0.035em;
    font-weight: 500;
}

.logo-text {
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.2em;
}

.brand-subtitle {
    margin-top: 12px;
    max-width: 260px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.38;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.about-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    color: rgba(33, 29, 22, 0.62);
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(18px) saturate(1.14);
    -webkit-backdrop-filter: blur(18px) saturate(1.14);
    transition:
        background 0.22s var(--motion),
        color 0.22s var(--motion),
        transform 0.22s var(--motion);
}

.about-shortcut:hover {
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-main);
    transform: translateY(-1px);
}

.about-shortcut:active {
    transform: translateY(0);
}

/* =========================================
   NAVIGATION
   ========================================= */

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.nav-pill {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 18px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(22px) saturate(1.14);
    -webkit-backdrop-filter: blur(22px) saturate(1.14);
    transition:
        background 0.22s var(--motion),
        color 0.22s var(--motion),
        box-shadow 0.22s var(--motion);
}

.nav-pill::after {
    display: none;
}

.nav-pill:hover {
    background: rgba(255, 255, 255, 0.64);
    box-shadow: none;
}

.nav-pill.is-active {
    background: rgba(255, 255, 255, 0.88);
}

.nav-pill.is-active .nav-title,
.nav-pill.is-active .nav-subtitle {
    color: var(--text-main);
}

.nav-pill.is-active .nav-subtitle {
    opacity: 0.72;
}

.nav-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    margin-right: 12px;
    border-radius: 13px;
    background-size: cover;
    background-position: center;
    filter: saturate(0.92) contrast(1.03);
}

.nav-text-wrapper {
    position: relative;
    z-index: 2;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.nav-title {
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.28;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.nav-subtitle {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
}

.dashboard-pill {
    position: relative;
    margin-top: auto;
    padding: 22px 24px;
    border-radius: 22px;
    background: var(--bg-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 0.45s var(--motion),
        box-shadow 0.45s var(--motion);
}

.dashboard-pill:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-bg);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(172, 133, 72, 0.14);
}

.pill-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pill-arrow {
    color: var(--accent-bg);
    font-weight: 700;
}

/* =========================================
   MOTION
   ========================================= */

.fade-in {
    animation: fadeIn 0.42s ease forwards;
}

.zoom-in {
    animation: appleZoomIn 0.34s var(--motion) forwards;
}

.zoom-out {
    animation: appleZoomOut 0.26s var(--motion) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes appleZoomIn {
    from {
        opacity: 0;
        transform: scale(0.982);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

@keyframes appleZoomOut {
    from {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: scale(1.01);
        filter: blur(2px);
    }
}

.bento-item,
.event-card,
.about-item,
.onair-card,
.place-card,
.places-cta,
.month-divider,
.year-toggle-wrapper,
.empty-state {
    opacity: 0;
    transform: translateY(14px) scale(0.988);
    transition:
        opacity 0.68s var(--motion),
        transform 0.68s var(--motion),
        box-shadow 0.32s var(--motion),
        background 0.32s var(--motion);
}

.bento-item.is-visible,
.event-card.is-visible,
.about-item.is-visible,
.onair-card.is-visible,
.place-card.is-visible,
.places-cta.is-visible,
.month-divider.is-visible,
.year-toggle-wrapper.is-visible,
.empty-state.is-visible {
    opacity: 1;
    /* transform в покое = none: остаточный scale(1) держал карточку на
       субпиксельном слое и давал мягкий ореол по всему скруглённому контуру.
       Анимация появления плавно доезжает до none и работает как раньше. */
    transform: none;
}

.bento-item:hover,
.about-item:hover,
.onair-card:hover,
.place-card:hover,
.event-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

/* =========================================
   TYPE SYSTEM
   ========================================= */

.item-label {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.82;
}

.bento-item h2,
.onair-card h2,
.place-card h2,
.event-info h3,
.about-item h2,
.about-item h3,
.empty-state h2,
.places-cta h2 {
    text-wrap: balance;
    text-transform: none;
}

/* =========================================
   BENTO / HOME
   ========================================= */

.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-main);
    width: 100%;
}

.bento-item {
    position: relative;
    min-height: 430px;
    padding: 34px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--bg-card);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
}

.bento-hero {
    grid-column: span 2;
    min-height: 590px;
}

.bento-item[style*="background-image"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0.72) 100%
        ),
        radial-gradient(
            circle at 70% 12%,
            rgba(172, 133, 72, 0.14),
            transparent 34%
        );
}

.bento-hero::after {
    content: none;
    position: absolute;
    top: 30px;
    right: 34px;
    z-index: 3;
    max-width: 280px;
    color: rgba(255, 255, 255, 0.58);
    text-align: right;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-transform: none;
}

.bento-content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bento-item[style*="background-image"] .item-label {
    color: rgba(255, 255, 255, 0.58);
}

.bento-item h2 {
    color: var(--text-main);
    font-size: clamp(34px, 3.6vw, 54px);
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.bento-hero h2 {
    max-width: 860px;
    font-size: clamp(54px, 6.2vw, 96px);
    font-weight: 680;
    line-height: 0.94;
    letter-spacing: -0.045em;
}

.hero-cta {
    align-self: flex-start;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f6f3ed;
    color: #101a33;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.01em;
    padding: 13px 22px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s var(--motion), filter 0.2s var(--motion);
}
.hero-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.bento-item[style*="background-image"] h2 {
    color: #fff;
}

.bento-item p {
    max-width: 82%;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.48;
}

.bento-item[style*="background-image"] p {
    color: rgba(255, 255, 255, 0.74);
}

/* =========================================
   EVENTS
   ========================================= */

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-main);
    width: 100%;
}

.event-card {
    min-height: 188px;
    border-radius: var(--radius-xl);
    background: var(--bg-card);
    backdrop-filter: blur(20px) saturate(1.14);
    -webkit-backdrop-filter: blur(20px) saturate(1.14);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border: 0;
}

.event-card-content {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.event-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
}

.event-date {
    color: var(--text-main);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.event-tag {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bg-dark);
    color: var(--accent-bg);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.event-info h3 {
    color: var(--text-main);
    font-size: clamp(19px, 1.35vw, 24px);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.event-info p {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.44;
}

.event-ticket-stub {
    width: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    color: var(--accent-bg);
    text-decoration: none;
    transition:
        background 0.25s var(--motion),
        color 0.25s var(--motion);
}

.event-ticket-stub:hover {
    background: #000;
    color: #fff;
}

.ticket-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.event-card.type-main {
    background: #e7e1d6;
}

.event-card.type-art {
    background: var(--bg-dark);
}

.event-card.type-art .event-date,
.event-card.type-art h3 {
    color: #fff;
}

.event-card.type-art .event-info p {
    color: rgba(255, 255, 255, 0.62);
}

.event-card.type-art .event-ticket-stub {
    background: var(--accent-bg);
    color: var(--bg-dark);
}

.month-divider {
    grid-column: 1 / -1;
    margin-top: 28px;
    margin-bottom: 0;
    padding: 18px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.46);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    color: var(--text-muted);
    font-size: 22px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.025em;
    text-transform: none;
}

.month-divider:first-child {
    margin-top: 0;
}

.month-divider.active {
    background: var(--accent-bg);
    color: var(--accent-text);
}

.year-toggle-wrapper {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.year-segmented-control {
    display: inline-flex;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(22px) saturate(1.16);
    -webkit-backdrop-filter: blur(22px) saturate(1.16);
}

.year-seg-btn {
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 9px 26px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    transition:
        background 0.25s var(--motion),
        color 0.25s var(--motion),
        box-shadow 0.25s var(--motion);
}

.year-seg-btn.active {
    background: #fff;
    color: var(--text-main);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* =========================================
   ABOUT
   ========================================= */

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(220px, auto);
    gap: var(--gap-main);
    width: 100%;
    padding-bottom: 60px;
}

.about-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 36px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-decoration: none;
    color: inherit;
    border: 0;
}

.about-item.has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 16%,
        rgba(0, 0, 0, 0.82) 100%
    );
    z-index: 1;
}

.about-item > * {
    position: relative;
    z-index: 2;
}

.about-item.manifesto {
    grid-column: span 2;
    grid-row: span 2;
    background: var(--bg-dark);
    color: var(--accent-bg);
}

.about-item.manifesto h2 {
    margin-top: auto;
    font-size: clamp(44px, 5.5vw, 76px);
    font-weight: 650;
    line-height: 0.96;
    letter-spacing: -0.035em;
}

.about-item.portrait,
.about-item.tall-photo {
    grid-row: span 2;
    color: #fff;
}

.about-item.portrait h3,
.about-item.tall-photo h3 {
    margin-bottom: 8px;
    font-size: 25px;
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.stat-cluster {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-main);
}

.stat-cluster .about-item.stat-card {
    min-height: 190px;
    aspect-ratio: 1 / 1;
    padding: 24px;
    background: var(--bg-card-strong);
    align-items: flex-start;
    justify-content: space-between;
}

.stat-num {
    color: var(--text-main);
    font-size: 48px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.04em;
}

.stat-desc {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-item.wide-text {
    grid-column: span 2;
    background: #e7e1d6;
    justify-content: space-between;
}

.about-item.wide-text h3 {
    margin-bottom: 12px;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.about-item.wide-text p,
.about-item p {
    color: inherit;
    opacity: 0.72;
    font-size: 14px;
    line-height: 1.48;
    font-weight: 500;
}

.about-item.cta-link {
    grid-column: 1 / -1;
    background: var(--accent-bg);
    color: var(--accent-text);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
}

.about-item.cta-link h3 {
    font-size: clamp(28px, 2.8vw, 44px);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.025em;
}

/* =========================================
   EMPTY STATE
   ========================================= */

.empty-state {
    grid-column: 1 / -1;
    min-height: 320px;
    padding: 44px;
    border-radius: var(--radius-xl);
    background: var(--bg-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.empty-state h2 {
    max-width: 760px;
    font-size: clamp(42px, 5vw, 78px);
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.empty-state p {
    margin-top: 18px;
    max-width: 520px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 1.48;
    font-weight: 500;
}

/* =========================================
   ON AIR / LIVE — APPLE
   ========================================= */

.onair-grid { display: block; width: 100%; padding-bottom: 60px; }

/* section heads + blinking dots */
.onair-head { display: flex; align-items: center; gap: 9px; margin: 30px 2px 14px; }
.onair-head:first-child { margin-top: 4px; }
@keyframes onairDotPulse {
  0% { transform: scale(1); opacity: .55; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.onair-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.onair-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ring); animation: onairDotPulse 1.8s ease-out infinite; }
.onair-dot.lime { background: var(--accent-bg); --ring: rgba(172, 133, 72, 0.55); }
.onair-dot.grey { background: #bbb2a1; --ring: rgba(154, 163, 173, 0.5); }
.onair-dot.cyan { background: #c6a063; --ring: rgba(198, 160, 99, 0.5); }
.onair-htext { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-main); }

/* Важное nav arrows (desktop) */
.onair-nav { margin-left: auto; display: flex; gap: 7px; }
.onair-navbtn { width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0 0 2px; cursor: pointer;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 29, 56, 0.10), 0 2px 10px rgba(29, 42, 76, 0.06);
  color: var(--text-main); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background 0.18s var(--motion), color 0.18s var(--motion); }
.onair-navbtn:hover { background: var(--text-main); color: #fff; }

/* Важное — vertical 3:4 carousel */
.onair-brk-track { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 10px 0 22px; margin-bottom: 0;
  scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.onair-brk-track::-webkit-scrollbar { display: none; }
.onair-card.onair-brk { flex: 0 0 247px; width: 247px; height: 247px; min-height: 0; scroll-snap-align: start;
  border-radius: 18px; overflow: hidden; padding: 16px 17px; display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; text-decoration: none; background-size: cover; background-position: center;
  transition: flex-basis 0.52s cubic-bezier(0.32, 0.72, 0, 1), width 0.52s cubic-bezier(0.32, 0.72, 0, 1); }
.onair-card.onair-brk.is-exp { cursor: pointer; }
.onair-card.onair-brk:hover { box-shadow: 0 7px 16px rgba(16, 26, 51, 0.11); }
.onair-card.onair-brk .item-label { font-size: 10px; margin-bottom: 1px; }
.onair-card.onair-brk h2 { font-size: 22px; line-height: 1.14; font-weight: 600; margin-top: 6px; letter-spacing: -0.018em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.onair-card.onair-brk .onair-date { position: absolute; top: 13px; right: 14px; font-size: 11px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text-muted); }
/* expand: width only (height fixed → no jump); body reveals via animated grid rows */
.onair-card.onair-brk.is-open { flex-basis: min(470px, 84vw); width: min(470px, 84vw); }
.onair-brk-hint { align-self: flex-start; max-height: 60px; margin-top: 12px;
  transition: opacity 0.28s var(--motion), max-height 0.5s cubic-bezier(0.32, 0.72, 0, 1), margin-top 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
.onair-card.onair-brk.is-open .onair-brk-hint { opacity: 0; max-height: 0; margin-top: 0; }
.onair-brk-body { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.52s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s var(--motion); }
.onair-brk-body > div { overflow: hidden; min-height: 0; }
.onair-card.onair-brk.is-open .onair-brk-body { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, 0.12s; }
.onair-brk-body p { margin-top: 7px; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--text-muted); }
.onair-brk-go { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 11px;
  padding: 8px 14px; border-radius: 999px; background: #ac8548; color: #101a33; font-weight: 700; font-size: 12.5px;
  letter-spacing: -0.01em; text-decoration: none; }
.onair-brk-go svg { width: 14px; height: 14px; }
.onair-card.onair-green .onair-brk-go { background: #101a33; color: #ac8548; }
.onair-card.onair-light .onair-brk-go { background: #101a33; color: #fff; }

/* От кураторов — clean tiled grid (honours hero/wide/small widths, no stripes) */
.onair-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; grid-auto-flow: row dense; align-items: stretch; }
.onair-card.onair-fc { margin: 0; border-radius: 20px; overflow: hidden;
  padding: 17px 18px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; text-decoration: none;
  background-size: cover; background-position: center; min-height: 174px; }
.onair-card.onair-fc .item-label { font-size: 10px; }
.onair-card.onair-fc h2 { font-size: 18px; line-height: 1.24; font-weight: 650; margin-top: 8px; letter-spacing: -0.015em; }
.onair-card.onair-fc p { margin-top: 7px; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--text-muted); max-width: 100%; }
.onair-card.onair-fc .onair-date { position: absolute; top: 14px; right: 15px; font-size: 11px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text-muted); }

/* arrow icon (CTA) */
.onair-go { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20, 29, 56, 0.06); margin-top: 13px; transition: transform 0.2s var(--motion); flex: none; }
.onair-go svg { width: 15px; height: 15px; }
.onair-card:hover .onair-go { transform: translateX(3px); }

/* feed sizes = width span + height presence (NOT full-bleed stripes) */
.onair-card.onair-fc.sz-small { grid-column: span 1; }
.onair-card.onair-fc.sz-wide { grid-column: span 2; min-height: 200px; padding: 20px 22px; }
.onair-card.onair-fc.sz-wide h2 { font-size: 21px; }
.onair-card.onair-fc.sz-hero { grid-column: 1 / -1; min-height: 300px; padding: 26px; }
.onair-card.onair-fc.sz-hero h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; margin-top: 10px; }
.onair-card.onair-fc.sz-hero p { font-size: 15px; margin-top: 9px; max-width: 62ch; }
@media (min-width: 1025px) {
  .onair-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .onair-card.onair-fc.sz-wide { grid-column: span 2; }
  .onair-card.onair-fc.sz-hero { grid-column: 1 / -1; }
}

/* «Обновить пульс» — cycles pages of curator cards */
.onair-refresh { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 24px auto 6px;
  padding: 11px 20px; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 700;
  font-size: 13.5px; letter-spacing: -0.01em; background: var(--text-main); color: #f6f3ed;
  box-shadow: 0 6px 18px rgba(16, 26, 51, 0.16); transition: transform 0.18s var(--motion), box-shadow 0.18s var(--motion); }
.onair-refresh svg { width: 16px; height: 16px; }
.onair-refresh:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(16, 26, 51, 0.22); }
.onair-refresh:active { transform: translateY(0) scale(0.98); }

/* 4 styles (shared feed + Важное) */
.onair-card.onair-light { background: #fff; box-shadow: inset 0 0 0 0px rgba(20, 29, 56, 0.10), 0 2px 10px rgba(29, 42, 76, 0.06); color: var(--text-main); }
.onair-card.onair-green { background: var(--accent-bg); color: #1c1a14; }
.onair-card.onair-green .item-label { color: rgba(20, 29, 56, 0.62); }
.onair-card.onair-green p { color: rgba(20, 29, 56, 0.74); }
.onair-card.onair-green .onair-date { color: rgba(20, 29, 56, 0.55); }
.onair-card.onair-green .onair-go { background: rgba(20, 29, 56, 0.12); }
.onair-card.onair-dark { background: linear-gradient(165deg, #141d38 0%, #101a33 100%); color: #f6f3ed; }
.onair-card.onair-dark .item-label { color: rgba(246, 243, 237, 0.55); }
.onair-card.onair-dark p { color: rgba(246, 243, 237, 0.72); }
.onair-card.onair-dark .onair-date { color: rgba(246, 243, 237, 0.5); }
.onair-card.onair-dark .onair-go { background: rgba(255, 255, 255, 0.16); }
.onair-card.onair-photo { color: #fff; justify-content: flex-end; }
.onair-card.onair-fc.onair-photo { min-height: 180px; }
.onair-card.onair-fc.onair-photo.sz-hero { min-height: 280px; }
.onair-card.onair-photo::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(16, 26, 51, 0.04) 20%, rgba(16, 26, 51, 0.80) 100%); }
.onair-card.onair-photo > * { position: relative; z-index: 0; }
.onair-card.onair-photo .item-label { color: rgba(255, 255, 255, 0.82); }
.onair-card.onair-photo p { color: rgba(255, 255, 255, 0.86); }
.onair-card.onair-photo .onair-date { color: rgba(255, 255, 255, 0.8); }
.onair-card.onair-photo .onair-go { background: rgba(255, 255, 255, 0.16); }
/* photo card without an image — readable fallback tint */
.onair-card.onair-photo:not([style*="background-image"]) { background: linear-gradient(135deg, #293b66, #141d38); }

/* ANY card carrying a background image → white text + dark scrim (overrides type colours) */
.onair-card[style*="background-image"] { color: #fff; }
.onair-card[style*="background-image"]::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(16, 26, 51, 0.05) 28%, rgba(16, 26, 51, 0.82) 100%); }
.onair-card[style*="background-image"] > * { position: relative; z-index: 2; }
.onair-card[style*="background-image"] h2 { color: #fff; }
.onair-card[style*="background-image"] p { color: rgba(255, 255, 255, 0.9); }
.onair-card[style*="background-image"] .item-label,
.onair-card[style*="background-image"] .onair-date { color: rgba(255, 255, 255, 0.82); }
.onair-card[style*="background-image"] .onair-go { background: rgba(255, 255, 255, 0.18); }

/* desktop: Важное carousel — real edge blur that appears while moving, then fades out */
.onair-brk-wrap { position: relative; }
.onair-fade { position: absolute; top: 0; bottom: 0; width: 210px; pointer-events: none; z-index: 4;
  opacity: 0; transition: opacity 0.5s var(--motion); }
.onair-fade.left { left: 0;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  background: linear-gradient(to right, var(--bg-stage) 0%, rgba(246, 243, 237, 0) 38%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 10%, transparent 100%);
          mask-image: linear-gradient(to right, #000 0%, #000 10%, transparent 100%); }
.onair-fade.right { right: 0;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  background: linear-gradient(to left, var(--bg-stage) 0%, rgba(246, 243, 237, 0) 38%);
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 10%, transparent 100%);
          mask-image: linear-gradient(to left, #000 0%, #000 10%, transparent 100%); }
.onair-brk-wrap.is-scrolling .onair-fade { opacity: 1; }
@media (max-width: 600px) { .onair-fade { display: none; } }

/* mobile */
@media (max-width: 600px) {
  .onair-feed { grid-template-columns: 1fr; }
  .onair-card.onair-fc.sz-wide, .onair-card.onair-fc.sz-hero { grid-column: 1 / -1; }
  .onair-nav { display: none; }
  .onair-card.onair-fc.sz-hero h2 { font-size: 24px; }
  .onair-brk-track { margin-inline: calc(50% - 50vw); padding-inline: 16px; scroll-padding-inline: 16px; }
  .onair-card.onair-brk { flex-basis: 240px; width: 240px; height: 320px; }
  .onair-card.onair-brk.is-open { flex-basis: min(360px, 86vw); width: min(360px, 86vw); }
  .onair-card.onair-brk h2 { font-size: 21px; }
}


/* =========================================
   PLACES
   ========================================= */

.places-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-main);
    width: 100%;
    padding-bottom: 80px;
}

.place-card {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 280px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
}

.place-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.3) 42%,
        rgba(0, 0, 0, 0.82) 100%
    );
}

.place-content {
    position: relative;
    z-index: 2;
    color: #fff;
}

.place-content .item-label {
    color: rgba(255, 255, 255, 0.62);
}

.place-card h2 {
    margin-top: 10px;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -0.02em;
}

.place-card p {
    margin-top: 12px;
    max-height: 44px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.74);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.48;
    transition: max-height 0.35s var(--motion);
}

.place-card.is-open p {
    max-height: 190px;
}

.place-more {
    margin-top: 16px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
    transition:
        background 0.22s var(--motion),
        transform 0.22s var(--motion);
}

.place-more:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.places-cta {
    grid-column: 1 / -1;
    min-height: 320px;
    border-radius: var(--radius-xl);
    padding: 42px;
    background: var(--accent-bg);
    color: var(--accent-text);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 0;
}

.places-cta h2 {
    margin-top: 12px;
    max-width: 760px;
    font-size: clamp(42px, 5vw, 78px);
    font-weight: 650;
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.places-cta p {
    margin-top: 18px;
    max-width: 540px;
    color: rgba(0, 0, 0, 0.62);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.48;
}

.places-cta a {
    width: fit-content;
    margin-top: 22px;
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--bg-dark);
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:
        background 0.22s var(--motion),
        transform 0.22s var(--motion);
}

.places-cta a:hover {
    transform: translateY(-1px);
}

/* =========================================
   SMALL DESKTOP / MACBOOK AIR
   ========================================= */

@media (max-width: 1280px) and (min-width: 1025px) {
    :root {
        --sidebar-w: 360px;
    }

    .sidebar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .stage-topline {
        left: calc(var(--sidebar-w) + 30px);
    }

    .bento-item {
        padding: 36px;
    }

    .bento-item h2 {
        font-size: clamp(32px, 3.2vw, 46px);
    }

    .bento-hero h2 {
        font-size: clamp(50px, 5.8vw, 84px);
    }

    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .onair-main-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .onair-hero,
    .onair-wide {
        grid-column: span 2;
    }

    .places-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .place-card h2 {
        font-size: 24px;
    }
}

@media (max-height: 820px) and (min-width: 1025px) {
    .sidebar {
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        padding-bottom: 14px;
    }

    .city-selector {
        position: sticky;
        top: 0;
        z-index: 30;
        margin-bottom: 14px;
    }

    .sidebar::before {
        content: "";
        position: sticky;
        top: 50px;
        display: block;
        height: 42px;
        margin-bottom: -42px;
        z-index: 25;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            var(--bg-main) 0%,
            rgba(246, 243, 237, 0.88) 35%,
            rgba(246, 243, 237, 0) 100%
        );
    }

    .brand-group,
    .side-nav {
        position: relative;
        z-index: 1;
    }

    .brand-group {
        padding: 28px 0 26px;
        gap: 22px;
    }

    .clock-display {
        font-size: 26px;
    }

    .brand-subtitle {
        font-size: 9px;
        max-width: 230px;
    }

    .side-nav {
        gap: 6px;
    }

    .nav-pill {
        padding: 8px 10px;
        border-radius: 16px;
    }

    .nav-icon {
        width: 42px;
        height: 42px;
        margin-right: 10px;
    }

    .dashboard-pill {
        padding: 18px 20px;
        border-radius: 18px;
    }

    .stage {
        padding-top: 38px;
    }

    .bento-item {
        min-height: 360px;
        padding: 34px;
    }

    .bento-hero {
        min-height: 480px;
    }

    .bento-item h2 {
        font-size: clamp(30px, 3.1vw, 44px);
        line-height: 1;
    }

    .bento-hero h2 {
        font-size: clamp(48px, 5.6vw, 82px);
    }

    .onair-card {
        min-height: 230px;
        padding: 28px;
    }

    .onair-hero {
        min-height: 460px;
    }

    .onair-card h2 {
        font-size: 22px;
        line-height: 1.04;
    }

    .onair-hero h2 {
        font-size: clamp(34px, 4vw, 52px);
    }

    .event-card {
        min-height: 168px;
    }

    .event-card-content {
        padding: 24px;
    }

    .about-item.manifesto h2 {
        font-size: 54px;
    }
}

/* =========================================
   TABLET / MOBILE
   ========================================= */

@media (max-width: 1024px) {
    body {
        overflow-y: auto;
    }

    .portal-wrapper {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        padding: 6px;
        gap: 12px;
    }

    .sidebar {
        width: 100%;
        height: auto;
        padding: 8px 8px 14px;
        background: rgba(255, 255, 255, 0.42);
        backdrop-filter: blur(18px) saturate(1.12);
        -webkit-backdrop-filter: blur(18px) saturate(1.12);
    }

    .brand-group {
        padding: 34px 0;
        gap: 24px;
    }

    .stage {
        height: auto;
        overflow: visible;
        padding: 38px 0 0;
    }

    .stage-topline {
        position: static;
        padding: 0 8px 14px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .bento-grid,
    .events-grid,
    .about-grid,
    .places-grid,
    .onair-main-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0 0 20px;
    }

    .bento-item {
        min-height: 390px;
        padding: 30px;
    }

    .bento-hero {
        min-height: 600px;
    }

    .bento-hero::after {
        top: 24px;
        left: 30px;
        right: auto;
        text-align: left;
    }

    .stat-cluster {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-item.portrait,
    .about-item.tall-photo {
        min-height: 400px;
    }

    .about-item.cta-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .onair-card,
    .onair-hero,
    .onair-wide,
    .onair-small {
        min-height: 330px;
    }

    .onair-hero {
        min-height: 480px;
    }

    .breaking-card {
        flex-basis: min(440px, 84vw);
        min-height: 380px;
    }

    .place-card {
        aspect-ratio: auto;
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .sel-btn {
        padding: 12px 0;
        font-size: 9px;
        letter-spacing: 0.12em;
    }

    .clock-display {
        font-size: clamp(22px, 7vw, 28px);
    }

    .logo-text {
        letter-spacing: 0.16em;
    }

    .brand-subtitle {
        font-size: 9px;
        letter-spacing: 0.07em;
    }

    .nav-pill {
        padding: 12px;
        border-radius: 16px;
    }

    .bento-item,
    .onair-card,
    .place-card,
    .places-cta,
    .empty-state {
        padding: 28px;
    }

    .bento-item {
        min-height: 330px;
    }

    .bento-hero {
        min-height: 72vh;
    }

    .bento-item h2,
    .bento-hero h2 {
        font-size: clamp(28px, 7.8vw, 38px);
        line-height: 1.06;
        letter-spacing: -0.025em;
    }

    .bento-item p {
        max-width: 100%;
        font-size: 13px;
    }

    .onair-card {
        min-height: 310px;
    }

    .onair-hero {
        min-height: 460px;
    }

    .onair-card h2,
    .onair-hero h2,
    .place-card h2 {
        font-size: clamp(22px, 6.2vw, 30px);
        line-height: 1.08;
        letter-spacing: -0.018em;
    }

    .onair-card p {
        max-width: 100%;
        font-size: 13px;
    }

    .breaking-strip {
        margin-bottom: 12px;
    }

    .breaking-track {
        gap: 12px;
        padding: 0 0 6px;
    }

    .breaking-card {
        flex: 0 0 84%;
        min-height: 420px;
    }

    .event-card {
        min-height: 185px;
    }

    .event-card-content {
        padding: 22px;
    }

    .event-ticket-stub {
        width: 46px;
    }

    .ticket-text {
        font-size: 10px;
        letter-spacing: 0.16em;
    }

    .place-card {
        min-height: 330px;
    }

    .places-cta {
        min-height: 340px;
    }

    .places-cta h2,
    .empty-state h2,
    .about-item.manifesto h2 {
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.04;
        letter-spacing: -0.025em;
    }

    .stat-cluster {
        gap: 8px;
    }

    .stat-cluster .about-item.stat-card {
        min-height: 160px;
        padding: 20px;
    }

    .stat-num {
        font-size: 38px;
    }
}

@media (max-width: 420px) {
    .onair-card h2,
    .onair-hero h2,
    .place-card h2 {
        font-size: clamp(22px, 7vw, 32px);
    }

    .bento-item h2,
    .bento-hero h2,
    .places-cta h2 {
        font-size: clamp(28px, 8.5vw, 38px);
    }
}

/* =========================================
   ACCESSIBILITY
   ========================================= */

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

    .bento-item,
    .event-card,
    .about-item,
    .onair-card,
    .place-card,
    .places-cta,
    .month-divider,
    .year-toggle-wrapper,
    .empty-state {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================
   Venice/Rome + 2026/2027
   ========================================= */

.city-selector,
.year-segmented-control {
    position: relative;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(1.08);
    -webkit-backdrop-filter: blur(24px) saturate(1.08);
    box-shadow: none;
    overflow: hidden;
}

.selector-thumb,
.year-seg-btn.active {
    background: #ac8548;
    border-radius: 999px;
    box-shadow: none;
}

/* Venice / Rome */
.selector-thumb {
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    transition:
        transform 0.58s var(--motion),
        background 0.22s var(--motion);
}

.sel-btn {
    min-height: 38px;
    padding: 0;
    color: rgba(33, 29, 22, 0.46);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.1em;
    transition:
        color 0.22s var(--motion),
        transform 0.18s var(--motion);
}

.sel-btn.active {
    color: rgba(33, 29, 22, 0.92);
}

.sel-btn:hover {
    color: rgba(33, 29, 22, 0.72);
}

.sel-btn:active {
    transform: scale(0.985);
}

/* Years */
.year-segmented-control {
    display: inline-flex;
    gap: 0;
}

.year-seg-btn {
    position: relative;
    min-width: 88px;
    min-height: 38px;
    padding: 0 24px;
    border-radius: 999px;
    background: transparent;
    color: rgba(33, 29, 22, 0.46);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
    box-shadow: none;
    transition:
        background 0.28s var(--motion),
        color 0.22s var(--motion),
        transform 0.18s var(--motion);
}

.year-seg-btn:hover {
    color: rgba(33, 29, 22, 0.72);
}

.year-seg-btn.active {
    color: rgba(33, 29, 22, 0.92);
}

.year-seg-btn:active {
    transform: scale(0.985);
}

/* убираем любые старые декоративные индикаторы */
.sel-btn::after,
.year-seg-btn::after,
.city-selector::before,
.year-segmented-control::before {
    content: none !important;
}

/* =========================================
   EVENTS YEAR SWITCH / CLEAN VERTICAL FLOW
   ========================================= */

.year-toggle-wrapper {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.year-segmented-control {
    position: relative;
    overflow: hidden;
}

.year-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    border-radius: 999px;
    background: #2a251e;
    z-index: 1;
    transition: transform 0.58s var(--motion);
}

.year-thumb.to-2027 {
    transform: translateX(100%);
}

.year-seg-btn {
    position: relative;
    z-index: 2;
    background: transparent !important;
    box-shadow: none !important;
}

.year-seg-btn.active {
    color: rgba(255, 255, 255, 0.96) !important;
}

.events-list {
    display: contents;
}

.events-list.year-next .event-card,
.events-list.year-next .month-divider,
.events-list.year-next .empty-state {
    transform: translateY(22px) scale(0.992);
}

.events-list.year-prev .event-card,
.events-list.year-prev .month-divider,
.events-list.year-prev .empty-state {
    transform: translateY(-22px) scale(0.992);
}

.events-list.year-next .event-card.is-visible,
.events-list.year-next .month-divider.is-visible,
.events-list.year-next .empty-state.is-visible,
.events-list.year-prev .event-card.is-visible,
.events-list.year-prev .month-divider.is-visible,
.events-list.year-prev .empty-state.is-visible {
    transform: translateY(0) scale(1);
}

/* =========================================
   BREAKING / DESKTOP GRID + MOBILE SWIPE
   ========================================= */

/* desktop: не свайп, а аккуратная сетка */
@media (min-width: 1025px) {
    .breaking-track {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gap-main);
        overflow: visible;
        padding-bottom: 0;
    }

    .breaking-card {
        flex: none;
        min-height: 320px;
        scroll-snap-align: unset;
    }

    .breaking-card.onair-hero {
        grid-column: span 2;
        min-height: 480px;
    }

    .breaking-card.onair-wide {
        grid-column: span 2;
    }

    .breaking-card.onair-small {
        grid-column: span 1;
    }
}

/* mobile/tablet: оставляем свайп */
@media (max-width: 1024px) {
    .breaking-track {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
}

/* secondary feed title */

.breaking-head.secondary {
    margin-top: 42px;
    margin-bottom: 18px;
    padding-left: 2px;

    color: rgba(15, 15, 15, 0.42);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.breaking-head.secondary .breaking-dot {
    display: none;
}

/* =========================================
   ON AIR HEADERS / FINAL FIX
   ========================================= */

.breaking-head,
.breaking-head.secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    width: fit-content !important;
    min-height: 38px !important;

    margin: 0 0 12px !important;
    padding: 10px 16px !important;

    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.52) !important;

    color: rgba(33, 29, 22, 0.62) !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

.breaking-head.secondary {
    margin-top: 42px !important;
    margin-bottom: 16px !important;
}

.breaking-dot {
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;

    border-radius: 999px !important;
    background: var(--accent-bg) !important;
    box-shadow: none !important;
}

.breaking-head.secondary .breaking-dot {
    background: rgba(33, 29, 22, 0.22) !important;
}

.breaking-text {
    display: block !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    .breaking-head,
    .breaking-head.secondary {
        display: flex !important;
        width: 100% !important;
        padding: 10px 16px !important;
    }

    .breaking-head.secondary {
        margin-top: 34px !important;
    }
}

/* =========================================
   MOBILE LAYOUT CLEANUP
   меню без отдельного контейнера + единые отступы
   ========================================= */

@media (max-width: 1024px) {
    .portal-wrapper {
        padding: 10px;
        gap: 14px;
        background: var(--bg-main);
    }

    .sidebar {
        padding: 0 16px 18px;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0;
    }

    .stage {
        padding: 38px 16px 0;
        background: transparent;
    }

    .stage-topline {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .portal-wrapper {
        padding: 10px;
    }

    .sidebar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .stage {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================
   MOBILE BREAKING INFINITE CAROUSEL
   ========================================= */

@media (max-width: 1024px) {
    .breaking-strip {
        margin-left: -16px;
        margin-right: -16px;
    }

    .breaking-head {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    .breaking-track {
        padding-left: 16px;
        padding-right: 16px;
        scroll-padding-left: 16px;
        scroll-snap-type: x mandatory;
    }

    .breaking-card {
        flex: 0 0 84%;
        scroll-snap-align: start;
    }
}

/* =========================================
   MOBILE BREAKING EDGE-TO-EDGE SWIPE / CLEAN
   ========================================= */

@media (max-width: 1024px) {
    .breaking-strip {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        overflow: hidden;
    }

    .breaking-head {
        margin-left: 26px !important;
        margin-right: 26px !important;
    }

    .breaking-track {
        display: flex !important;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        padding-left: 26px;
        padding-right: 26px;
        padding-bottom: 6px;

        scroll-padding-left: 26px;
    }

    .breaking-track::-webkit-scrollbar {
        display: none;
    }

    .breaking-card {
        flex: 0 0 84vw !important;
        min-height: 420px;
        scroll-snap-align: start;
    }
}

@media (max-width: 768px) {
    .breaking-head {
        margin-left: 26px !important;
        margin-right: 26px !important;
        width: calc(100vw - 52px) !important;
    }

    .breaking-card {
        flex-basis: 82vw !important;
    }
}

/* =========================================
   MOBILE COMPACT HEADER
   Главная = full welcome
   Внутренние разделы = compact navigation
   ========================================= */

.mobile-section-bar {
    display: none;
}

@media (max-width: 1024px) {
    body.mobile-compact .brand-group {
    display: none;
}

body.mobile-compact.mobile-home .brand-group {
    display: flex;

    flex-direction: column;
    align-items: center;

    gap: 7px;

    width: 100%;

    padding-top: 2px;
}

    body.mobile-compact .mobile-section-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;

        margin: 18px 0 14px;
        padding: 18px 18px;

        border-radius: 22px;
        background: rgba(255, 255, 255, 0.62);

        backdrop-filter: blur(22px) saturate(1.12);
        -webkit-backdrop-filter: blur(22px) saturate(1.12);
    }

    .mobile-section-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .mobile-section-kicker {
        color: rgba(33, 29, 22, 0.36);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .mobile-section-copy strong {
        color: var(--text-main);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.05;
    }

    .mobile-section-copy span:last-child {
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.25;
    }

.mobile-section-bar {
    position: relative;
    cursor: pointer;
}

.mobile-section-copy {
    pointer-events: none;
    padding-right: 78px;
}

.mobile-section-toggle {
    position: absolute;
    inset: 0;
    z-index: 5;

    width: 100%;
    height: 100%;
    padding: 0 18px 0 0;

    border: 0;
    border-radius: 28px;

    background: transparent;
    color: rgba(33, 29, 22, 0.72);

    cursor: pointer;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    transition:
        background 0.22s var(--motion),
        color 0.22s var(--motion),
        transform 0.22s var(--motion);
}

.mobile-section-toggle::before,
.mobile-section-toggle::after {
    content: "";
    position: absolute;
    right: 26px;

    width: 15px;
    height: 1.5px;

    border-radius: 999px;
    background: currentColor;

    opacity: 0;

    transition:
        transform 0.28s var(--motion),
        opacity 0.18s var(--motion);
}

body.mobile-menu-open .mobile-section-toggle {
    padding-right: 0;

    font-size: 0;
    letter-spacing: 0;

    background: rgba(33, 29, 22, 0.035);
    color: rgba(33, 29, 22, 0.88);
}

body.mobile-menu-open .mobile-section-toggle::before,
body.mobile-menu-open .mobile-section-toggle::after {
    opacity: 1;
}

body.mobile-menu-open .mobile-section-toggle::before {
    transform: rotate(45deg);
}

body.mobile-menu-open .mobile-section-toggle::after {
    transform: rotate(-45deg);
}

    body.mobile-compact .side-nav,
    body.mobile-compact .dashboard-pill {
        display: none;
    }

body.mobile-compact.mobile-menu-open .side-nav {
    display: flex;
    margin-top: 8px;
    animation: compactMenuIn 0.36s var(--motion) both;
}

    body.mobile-compact.mobile-menu-open .dashboard-pill {
        display: flex;
        margin-top: 12px;
        animation: compactMenuIn 0.36s var(--motion) both;
    }

    body.mobile-compact .stage {
        padding-top: 16px;
    }

    body.mobile-compact .stage-topline {
        display: none;
    }
}

@keyframes compactMenuIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   MOBILE COMPACT NAV / SOFT TRANSITIONS
   ========================================= */

@media (min-width: 1025px) {
    .nav-pill[data-mobile-only="true"] {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .mobile-section-bar {
        transition:
            opacity 0.34s var(--motion),
            transform 0.34s var(--motion),
            background 0.34s var(--motion);
    }

    body.mobile-shell-changing .mobile-section-bar {
        opacity: 0.72;
        transform: translateY(-4px) scale(0.992);
    }

    body.mobile-compact .side-nav,
    body.mobile-compact .dashboard-pill {
        transform-origin: top center;
    }

    body.mobile-compact.mobile-menu-open .side-nav,
    body.mobile-compact.mobile-menu-open .dashboard-pill {
        animation: compactMenuIn 0.42s var(--motion) both;
    }

    body.mobile-compact:not(.mobile-menu-open) .side-nav,
    body.mobile-compact:not(.mobile-menu-open) .dashboard-pill {
        display: none !important;
    }
}


/* О проекте в меню показываем только во внутреннем compact-режиме */
@media (max-width: 1024px) {
    body:not(.mobile-compact) .nav-pill[data-mobile-only="true"] {
        display: none !important;
    }

    body.mobile-compact .nav-pill[data-mobile-only="true"] {
        display: flex !important;
    }
}

/* =========================================
   PREMIUM IMAGE POLISH / SAFE
   без скрытия картинок
   ========================================= */

.bento-item[style*="background-image"],
.onair-card[style*="background-image"],
.place-card[style*="background-image"],
.about-item[style*="background-image"],
.nav-icon[style*="background-image"] {
    filter: saturate(0.96) contrast(1.02);
    transition:
        filter 0.7s var(--motion),
        transform 0.58s var(--motion),
        box-shadow 0.32s var(--motion);
}

/* =========================================
   TACTILE TOUCH / SAFE
   мягкое физическое нажатие
   ========================================= */

.nav-pill,
.sel-btn,
.year-seg-btn,
.mobile-section-toggle,
.about-shortcut,
.onair-link,
.place-more,
.places-cta a,
.event-ticket-stub,
.dashboard-pill {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.nav-pill:active,
.sel-btn:active,
.year-seg-btn:active,
.mobile-section-toggle:active,
.about-shortcut:active,
.onair-link:active,
.place-more:active,
.places-cta a:active,
.event-ticket-stub:active,
.dashboard-pill:active {
    transform: scale(0.985);
}

/* =========================================
   MOBILE COMPACT BAR / SCROLL STATE
   заметное, но чистое поведение
   ========================================= */

@media (max-width: 1024px) {
    body.mobile-compact .mobile-section-bar {
        transition:
            background 0.35s var(--motion),
            transform 0.35s var(--motion),
            box-shadow 0.35s var(--motion),
            padding 0.35s var(--motion);
    }

    body.mobile-compact .sidebar.is-scrolled .mobile-section-bar {
        background: rgba(255, 255, 255, 0.86) !important;
        transform: scale(0.985);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.055);
    }

    body.mobile-compact .sidebar.is-scrolled .mobile-section-copy strong {
        font-size: 17px;
    }

    body.mobile-compact
        .sidebar.is-scrolled
        .mobile-section-copy
        span:last-child {
        opacity: 0.72;
    }
}

/* =========================================
   SUBTLE HERO DEPTH / SAFE
   ========================================= */

.bento-hero[style*="background-image"],
.onair-hero[style*="background-image"],
.place-card[style*="background-image"] {
    background-position: center var(--parallax-y, 50%);
}

@media (prefers-reduced-motion: reduce) {
    .bento-hero[style*="background-image"],
    .onair-hero[style*="background-image"],
    .place-card[style*="background-image"] {
        background-position: center center !important;
    }
}

/* =========================================
   TOP CONTROLS / CITY + PROFILE FINAL FIX
   ========================================= */

.top-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
    align-items: center;
    width: 100%;
    margin-bottom: 18px;
}

.top-controls .city-selector {
    width: 100%;
    margin-bottom: 0 !important;
}

.top-controls .selector-track {
    height: 100%;
}

.profile-chip {
    position: relative;

    width: 46px;
    height: 46px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.72);
    color: rgba(33, 29, 22, 0.72);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    backdrop-filter: blur(24px) saturate(1.12);
    -webkit-backdrop-filter: blur(24px) saturate(1.12);

    transition:
        transform 0.22s var(--motion),
        background 0.22s var(--motion),
        color 0.22s var(--motion);
}

.profile-chip svg {
    width: 19px;
    height: 19px;
}

.profile-chip:hover {
    background: rgba(255, 255, 255, 0.92);
    color: #211d16;
    transform: translateY(-1px);
}

.profile-chip:active {
    transform: scale(0.965);
}

.profile-dot {
    position: absolute;
    top: 8px;
    right: 8px;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: rgba(33, 29, 22, 0.22);
}

body.is-authenticated .profile-dot {
    background: var(--accent-bg);
    box-shadow: 0 0 0 5px rgba(172, 133, 72, 0.14);
}

.brand-logo {
    display: inline-flex;
    align-items: center;

    width: 148px;
    height: 28px;

    text-decoration: none;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* MAP NAV PILLS / SOFT DARK ACCENT */

.nav-pill.nav-soft-dark {
    background: rgba(33, 29, 22, 0.07);
}

.nav-pill.nav-soft-dark:hover {
    background: rgba(33, 29, 22, 0.1);
}

.nav-pill.nav-soft-dark .nav-title {
    color: rgba(33, 29, 22, 0.86);
}

.nav-pill.nav-soft-dark .nav-subtitle {
    color: rgba(33, 29, 22, 0.56);
}

.city-signal {
    min-height: 34px;
    max-width: 260px;

    transition:
        opacity 0.22s var(--motion),
        transform 0.22s var(--motion),
        filter 0.22s var(--motion);
}

.city-signal.is-changing {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(4px);
}

/* =========================================
   BRAND SIGNAL / LOGO ROW FIX
   ========================================= */

.brand-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    gap: 16px;
}

.city-signal {
    margin-top: 0 !important;
    min-height: 34px;
    max-width: 280px;

    text-align: center;

    transition:
        opacity 0.22s var(--motion),
        transform 0.22s var(--motion),
        filter 0.22s var(--motion);
}

.city-signal.is-changing {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(4px);
}

.brand-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 14px;

    width: 100%;
}

.brand-row .brand-logo {
    flex-shrink: 0;
}

.brand-row .about-shortcut {
    margin-top: 0 !important;
}

/* =========================================
   DUAL ACCESS CARDS / HORIZONTAL PREMIUM
   ========================================= */

.dual-access-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.dual-access-card {
    min-height: 176px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;

    padding: 18px;
    border-radius: 14px;

    text-decoration: none;

    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);

    transition:
        transform 0.28s var(--motion),
        background 0.28s var(--motion),
        border-color 0.28s var(--motion),
        box-shadow 0.28s var(--motion);
}

.dual-access-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.055);
}

.dual-open {
    background: rgba(255, 255, 255, 0.24);
    border: 1px solid rgba(33, 29, 22, 0.16);
}

.dual-open:hover {
    background: rgba(255, 255, 255, 0.44);
    border-color: rgba(33, 29, 22, 0.26);
}

.dual-prime {
    background: var(--prime-bg);
    border: 1px solid rgba(198, 160, 99, 0.55);
}

.dual-prime:hover {
    background:
        radial-gradient(circle at 90% 8%, rgba(198, 160, 99, 0.22), transparent 46%),
        var(--prime-bg);
    border-color: var(--prime-accent);
}

.dual-access-top h4 {
    margin: 0;

    color: #211d16;

    font-size: 15px;
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.dual-access-top p {
    margin: 8px 0 0 !important;
    max-width: 100% !important;

    color: rgba(0, 0, 0, 0.58) !important;

    font-size: 11px !important;
    font-weight: 560 !important;
    line-height: 1.42 !important;
}

.dual-access-card span {
    color: rgba(0, 0, 0, 0.42);

    font-size: 10px;
    font-weight: 560;
    line-height: 1.48;
}

@media (max-width: 768px) {
    .dual-access-grid {
        grid-template-columns: 1fr;
    }

    .dual-access-card {
        min-height: 142px;
    }
}

/* =========================================
   BENTO LIVE CARD / TOP CONTENT + GLASS CTA
   ========================================= */

.bento-item.bento-top {
    justify-content: flex-start;
}

.bento-item.bento-top .bento-content {
    margin-top: 0;
}

.bento-item.bento-top[style*="background-image"]::before {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.28) 42%,
            rgba(0, 0, 0, 0.08) 100%
        ),
        radial-gradient(
            circle at 80% 12%,
            rgba(172, 133, 72, 0.16),
            transparent 34%
        );
}

.bento-glass-action {
    position: absolute;
    right: 26px;
    bottom: 26px;
    z-index: 5;

    width: 58px;
    height: 58px;

    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.18);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 28px;
    font-weight: 500;
    line-height: 1;

    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 16px 34px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.28s var(--motion),
        background 0.28s var(--motion),
        border-color 0.28s var(--motion),
        box-shadow 0.28s var(--motion);
}

.bento-glass-action:hover {
    transform: translateY(-2px) scale(1.02);
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        0 20px 42px rgba(0, 0, 0, 0.22);
}

.bento-glass-action:active {
    transform: scale(0.965);
}

@media (max-width: 768px) {
    .bento-glass-action {
        right: 22px;
        bottom: 22px;
        width: 52px;
        height: 52px;
        font-size: 25px;
    }
}

/* =========================================
   MOBILE COMPACT BRAND
   ========================================= */

@media (max-width: 1024px) {
    body.mobile-compact .brand-mark {
        width: 100%;
        align-items: flex-start;
    }

    body.mobile-compact .brand-row {
        width: 100%;
        align-items: flex-start;
    }

    body.mobile-compact .brand-logo img {
        height: 18px;
    }

    body.mobile-compact .clock-display {
        font-size: 28px;
    }

    body.mobile-compact .city-signal {
        max-width: 92%;
    }
}

/* =========================================
   MOBILE COMPACT BRAND
   ========================================= */

@media (max-width: 1024px) {
    body.mobile-compact.mobile-home .brand-mark {
        width: 100%;
        align-items: center;
    }

    body.mobile-compact.mobile-home .brand-row {
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    body.mobile-compact.mobile-home .brand-logo img {
        height: 18px;
    }

    body.mobile-compact.mobile-home .clock-display {
        font-size: 28px;
    }

    body.mobile-compact.mobile-home .city-signal {
        max-width: 92%;
        text-align: center;
    }

    body.mobile-compact.mobile-home .time-block {
        align-items: center;
    }
}

/* =========================================
   MOBILE HEADER ORDER / FINAL
   ========================================= */

@media (max-width: 1024px) {
    .sb-header {
        display: flex;
        flex-direction: column;
    }

    body.mobile-compact .top-controls {
        order: 1;
    }

    body.mobile-compact .mobile-section-bar {
        order: 2;
    }

    body.mobile-compact.mobile-home .brand-group {
        order: 3;
    }
}

/* =========================================
   MOBILE HOME MENU POSITION FIX
   ========================================= */

@media (max-width: 1024px) {
    body.mobile-compact .top-controls {
        margin-bottom: 0 !important;
    }

    body.mobile-compact .mobile-section-bar {
        margin-top: 14px !important;
        margin-bottom: 18px !important;
    }

    body.mobile-compact.mobile-home .brand-group {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.mobile-compact.mobile-home .side-nav {
        order: 3;
    }

    body.mobile-compact.mobile-home .brand-group {
        order: 4;
    }

    body.mobile-compact.mobile-home.mobile-menu-open .side-nav {
        margin-top: 0 !important;
        margin-bottom: 24px;
    }
}

/* =========================================
   MOBILE HEADER ORDER / TRUE FINAL
   ========================================= */

@media (max-width: 1024px) {
    .sb-header {
        display: flex;
        flex-direction: column;
    }

    body.mobile-compact .top-controls {
        order: 1;
        margin-bottom: 0 !important;
    }

    body.mobile-compact .mobile-section-bar {
        order: 2;
        margin-top: 14px !important;
        margin-bottom: 0 !important;
    }

    body.mobile-compact .side-nav {
        order: 3;
    }

    body.mobile-compact.mobile-home .brand-group {
        order: 4;
        margin-top: 24px !important;
        padding-top: 0 !important;
    }

    body.mobile-compact.mobile-menu-open .side-nav {
        margin-top: 12px !important;
        margin-bottom: 24px !important;
    }
}

/* =========================================
   MOBILE HOME EXPANDED MENU GAP FIX
   ========================================= */

@media (max-width: 1024px) {
    body.mobile-compact.mobile-home.mobile-menu-open .side-nav {
        gap: 12px !important;
        margin-top: 12px !important;
    }

    body.mobile-compact.mobile-home.mobile-menu-open .nav-pill:first-child {
        margin-top: 0 !important;
    }
}

/* =========================================
   FINAL MOBILE SPACING / CONTRAST / WEATHER
   ========================================= */

/* Mobile side spacing: closer to dashboard density */
@media (max-width: 1024px) {
    .portal-wrapper {
        padding: 8px !important;
        gap: 12px !important;
    }

    .sidebar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .stage {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .stage-topline {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 768px) {
    .portal-wrapper {
        padding: 8px !important;
    }

    .sidebar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .stage {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Mobile full-bleed strips keep the same optical edge */
@media (max-width: 1024px) {
    .breaking-strip {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        overflow: hidden !important;
    }

    .breaking-head {
        margin-left: 18px !important;
        margin-right: 18px !important;
    }

    .breaking-track {
        padding-left: 18px !important;
        padding-right: 18px !important;
        scroll-padding-left: 18px !important;
    }
}

@media (max-width: 768px) {
    .breaking-head {
        width: calc(100vw - 36px) !important;
    }
}

/* Photo cards: make subtitles readable over images */
.bento-item[style*="background-image"]::before,
.onair-photo::before,
.place-card::before,
.about-item.has-bg::before {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.34) 42%,
            rgba(0, 0, 0, 0.82) 100%
        ) !important;
}

.bento-item[style*="background-image"] h2,
.onair-photo h2,
.place-card h2,
.about-item.has-bg h2,
.about-item.has-bg h3 {
    color: #ffffff !important;
}

.bento-item[style*="background-image"] p,
.onair-photo p,
.place-card p,
.about-item.has-bg p {
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 1 !important;
}

.bento-item[style*="background-image"] .item-label,
.onair-photo .item-label,
.place-content .item-label,
.about-item.has-bg .item-label,
.onair-photo .onair-date {
    color: rgba(255, 255, 255, 0.74) !important;
    opacity: 1 !important;
}

/* Event year switch: active year must stay dark, not white */
.year-thumb {
    background: #ac8548 !important;
}

.year-seg-btn.active {
    color: #1c1a14 !important;
}

/* =========================================
   WEATHER BLOCK / CITY CONDITIONS / APPLE
   ========================================= */

.weather-card {
  position: relative;
  overflow: hidden;
  max-width: 640px;
  margin: 12px 0;
  border-radius: var(--radius-xl);
  padding: 22px 24px 20px;
  box-shadow: 0 5px 16px rgba(29, 42, 76, 0.07);
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(255,255,255,.85), transparent 60%),
    linear-gradient(170deg, #dce2ef 0%, #dce2ef 52%, #dce2ef 100%);
  --wx-ink: #141d38;
  --wx-muted: #1d2a4c;
  --wx-faint: rgba(29, 42, 76, 0.55);
  --wx-tile: rgba(255, 255, 255, 0.55);
  --wx-track: rgba(20, 29, 56, 0.10);
  --wx-hair: rgba(20, 29, 56, 0.10);
  color: var(--wx-ink);
}
.weather-live-bg { display: none !important; }

.weather-card[data-bg="clear-day"]{background:radial-gradient(120% 80% at 78% -12%,rgba(255,255,255,.9),transparent 60%),linear-gradient(170deg,#dce2ef 0%,#dce2ef 55%,#dce2ef 100%)}
.weather-card[data-bg="cloud-day"]{background:radial-gradient(120% 80% at 80% -10%,rgba(255,255,255,.85),transparent 60%),linear-gradient(170deg,#dce2ef 0%,#dce2ef 52%,#dce2ef 100%)}
.weather-card[data-bg="rain-day"]{background:radial-gradient(120% 80% at 80% -10%,rgba(255,255,255,.7),transparent 60%),linear-gradient(170deg,#dce2ef 0%,#e7e1d6 55%,#e7e1d6 100%)}
.weather-card[data-bg="fog-day"]{background:radial-gradient(120% 80% at 80% -10%,rgba(255,255,255,.75),transparent 60%),linear-gradient(170deg,#e7e1d6 0%,#e7e1d6 55%,#e7e1d6 100%)}
.weather-card[data-bg="snow"]{background:radial-gradient(120% 80% at 80% -10%,rgba(255,255,255,.92),transparent 60%),linear-gradient(170deg,#dce2ef 0%,#dce2ef 55%,#dce2ef 100%)}
.weather-card[data-bg="clear-night"]{background:radial-gradient(120% 80% at 80% -10%,rgba(120,140,180,.4),transparent 60%),linear-gradient(170deg,#1d2a4c 0%,#141d38 60%,#141d38 100%)}
.weather-card[data-bg="cloud-night"]{background:linear-gradient(170deg,#1d2a4c 0%,#141d38 60%,#141d38 100%)}
.weather-card[data-bg="rain-night"]{background:linear-gradient(170deg,#141d38 0%,#141d38 60%,#141d38 100%)}
.weather-card[data-bg="fog-night"]{background:linear-gradient(170deg,#141d38 0%,#141d38 60%,#141d38 100%)}
.weather-card[data-bg="storm"]{background:radial-gradient(120% 80% at 80% -10%,rgba(120,140,180,.3),transparent 60%),linear-gradient(170deg,#1d2a4c 0%,#141d38 60%,#141d38 100%)}

.weather-card[data-bg="clear-night"],
.weather-card[data-bg="cloud-night"],
.weather-card[data-bg="rain-night"],
.weather-card[data-bg="fog-night"],
.weather-card[data-bg="storm"]{
  --wx-ink:#dce2ef; --wx-muted:rgba(255,255,255,.78); --wx-faint:rgba(255,255,255,.55);
  --wx-tile:rgba(255,255,255,.08); --wx-track:rgba(255,255,255,.16); --wx-hair:rgba(255,255,255,.12);
}

.wx-eyebrow{display:block;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--wx-faint)}
.weather-loading{padding:22px 2px;color:var(--wx-muted);font-size:14px}

.weather-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-top:6px}
.weather-city{font-size:16px;font-weight:600;letter-spacing:-0.01em;color:var(--wx-ink)}
.weather-temp{font-size:clamp(58px,14vw,74px);font-weight:250;line-height:.9;letter-spacing:-0.04em;margin:2px 0 0;color:var(--wx-ink)}
.weather-cond{font-size:15px;font-weight:500;margin-top:2px;color:var(--wx-ink)}
.weather-hl{font-size:13.5px;margin-top:5px;color:var(--wx-faint);font-variant-numeric:tabular-nums}
.weather-hero-icon{flex:none;width:78px;height:78px;margin-top:2px}
.weather-hero-icon img{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 14px rgba(41, 59, 102, .16))}
.weather-advice{font-size:14px;line-height:1.5;color:var(--wx-muted);margin:14px 2px 0}

.weather-rule{height:1px;background:var(--wx-hair);margin:18px 0 0}

.weather-hourly{display:flex;gap:4px;overflow-x:auto;padding:16px 2px 4px;margin:0 -2px;scroll-snap-type:x proximity}
.weather-hourly::-webkit-scrollbar{height:0}
.weather-hour{flex:0 0 54px;text-align:center;scroll-snap-align:start}
.weather-hour span{font-size:12px;font-weight:500;color:var(--wx-faint);font-variant-numeric:tabular-nums}
.weather-hour.now span{color:var(--wx-ink);font-weight:700}
.weather-hour img{width:28px;height:28px;margin:8px auto 6px;display:block}
.weather-hour strong{font-size:15.5px;font-weight:600;color:var(--wx-ink);font-variant-numeric:tabular-nums}

.weather-more-btn{display:block;width:100%;margin-top:16px;padding:11px;border:0;border-radius:13px;cursor:pointer;
  background:var(--wx-tile);color:var(--wx-ink);font:inherit;font-size:13px;font-weight:600;letter-spacing:-0.01em;
  transition:background .18s var(--motion)}
.weather-more-btn:hover{background:rgba(255,255,255,.72)}

.weather-extra{display:none}
.weather-card.is-expanded .weather-extra{display:block}

.weather-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.weather-tile{background:var(--wx-tile);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column}
.weather-tile .wt-l{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--wx-faint)}
.weather-tile .wt-v{font-size:22px;font-weight:600;margin-top:5px;color:var(--wx-ink);font-variant-numeric:tabular-nums}
.weather-tile .wt-v small{font-size:13px;font-weight:500}
.weather-tile .wt-s{font-size:12px;color:var(--wx-faint);margin-top:1px}

.weather-days{margin-top:6px}
.weather-day{display:flex;align-items:center;gap:12px;padding:9px 2px}
.weather-day + .weather-day{border-top:1px solid var(--wx-hair)}
.weather-day .wd-name{flex:0 0 48px;font-size:15px;font-weight:600;color:var(--wx-ink)}
.weather-day .wd-ico{flex:0 0 26px;width:26px;height:26px;display:block}
.weather-day .wd-rain{flex:0 0 34px;font-size:11.5px;font-weight:600;color:#3a5083;text-align:left;font-variant-numeric:tabular-nums}
.weather-day .wd-min{flex:0 0 30px;text-align:right;font-size:15px;color:var(--wx-faint);font-variant-numeric:tabular-nums}
.weather-day .wd-max{flex:0 0 30px;text-align:right;font-size:15px;font-weight:600;color:var(--wx-ink);font-variant-numeric:tabular-nums}
.weather-day .wd-track{flex:1;position:relative;height:5px;border-radius:3px;background:var(--wx-track)}
.weather-day .wd-fill{position:absolute;top:0;bottom:0;border-radius:3px}
.weather-day .wd-dot{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(20, 29, 56, .18)}

@media (max-width: 768px){
  .weather-card{padding:18px 16px 16px;border-radius:20px}
  .weather-hero-icon{width:64px;height:64px}
  .weather-temp{font-size:clamp(54px,16vw,64px)}
  .weather-metrics{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion: reduce){
  .weather-card *{transition:none !important;animation:none !important}
}



/* MAP PILLS TWO-IN-ROW / FINAL READABLE */

.side-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
}

.side-nav .nav-pill {
    grid-column: 1 / -1;
}

.side-nav .nav-pill.nav-soft-dark {
    grid-column: auto !important;
    min-height: 76px !important;

    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;

    align-items: center !important;

    padding: 10px !important;
}

.side-nav .nav-pill.nav-soft-dark .nav-icon {
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
}

.side-nav .nav-pill.nav-soft-dark .nav-title {
    font-size: 9px !important;
    line-height: 1.05 !important;
    white-space: nowrap;
}

.side-nav .nav-pill.nav-soft-dark .nav-subtitle {
    display: block !important;
    margin-top: 4px !important;

    font-size: 8px !important;
    line-height: 1.15 !important;

    max-width: 100%;
}

/* MAP PILLS / DESKTOP HEIGHT FIX */

.side-nav {
    flex: unset !important;
    align-content: start !important;
    grid-auto-rows: auto !important;
}

.side-nav .nav-pill {
    min-height: unset !important;
}

.side-nav .nav-pill:not(.nav-soft-dark) {
    min-height: 66px !important;
}

.side-nav .nav-pill.nav-soft-dark {
    min-height: 58px !important;
    height: 58px !important;

    padding: 8px 10px !important;

    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 8px !important;
}

.side-nav .nav-pill.nav-soft-dark .nav-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
}

.side-nav .nav-pill.nav-soft-dark .nav-title {
    font-size: 9px !important;
}

.side-nav .nav-pill.nav-soft-dark .nav-subtitle {
    margin-top: 3px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
}

/* === Rome Prime Notify === */
.dual-prime-soon { cursor: default; position: relative; overflow: hidden; }
.dual-prime-soon::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 0%, rgba(172, 133, 72, 0.08) 0%, transparent 60%); pointer-events: none; }
.dual-prime-soon:hover { transform: none; box-shadow: none; }
.prime-notify-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.prime-notify-input { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(172, 133, 72, 0.4); background: rgba(255,255,255,0.52); font-family: inherit; font-size: 12px; font-weight: 500; color: #211d16; outline: none; transition: border-color 0.22s var(--motion), background 0.22s var(--motion); -webkit-appearance: none; }
.prime-notify-input::placeholder { color: rgba(33, 29, 22, 0.38); }
.prime-notify-input:focus { border-color: rgba(172, 133, 72, 0.82); background: rgba(255,255,255,0.72); }
.prime-notify-btn { width: 100%; padding: 10px 14px; border-radius: 12px; border: 0; background: rgba(172, 133, 72, 0.72); color: #211d16; font-family: inherit; font-size: 11px; font-weight: 720; letter-spacing: 0.02em; cursor: pointer; transition: background 0.22s var(--motion), transform 0.18s var(--motion); }
.prime-notify-btn:hover { background: rgba(172, 133, 72, 0.92); transform: translateY(-1px); }
.prime-notify-btn:active { transform: translateY(0); }
.prime-notify-btn:disabled { cursor: default; transform: none; }
.prime-notify-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(33, 29, 22, 0.42); margin-top: 2px; }
.prime-notify-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgba(172, 133, 72, 0.72); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } }
@media (max-width: 768px) { .prime-notify-input, .prime-notify-btn { font-size: 14px; padding: 12px 16px; } }
/* === Afisha preview block (main page) === */
.bento-afisha {
    grid-row: span 2;
    justify-content: flex-start;
    background: var(--bg-card-solid);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.bento-afisha .bento-content {
    width: 100%;
}
.afisha-sub {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 42ch;
}
.afisha-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 22px 0 4px;
}
.afisha-tab {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s var(--motion);
}
.afisha-tab:hover {
    border-color: rgba(0, 0, 0, 0.22);
    color: var(--text-main);
}
.afisha-tab.active {
    background: var(--bg-dark);
    border-color: var(--bg-dark);
    color: #fff;
}
.afisha-events {
    margin-top: 14px;
}
.afisha-event {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.afisha-event:first-child {
    border-top: 0;
}
.afisha-date {
    flex: 0 0 84px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    padding-top: 2px;
    line-height: 1.35;
    white-space: nowrap;
}
.afisha-ebody {
    flex: 1;
    min-width: 0;
}
.afisha-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.18;
    color: var(--text-main);
}
.afisha-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6e5327;
    background: var(--accent-bg);
    padding: 3px 9px;
    border-radius: 999px;
}
.afisha-empty {
    color: var(--text-soft);
    font-size: 14px;
    padding: 18px 0;
}
.afisha-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.afisha-count {
    font-size: 13px;
    color: var(--text-soft);
}
.afisha-btn {
    appearance: none;
    border: 0;
    background: var(--bg-dark);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 13px 22px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s var(--motion), background 0.2s var(--motion);
}
.afisha-btn:hover {
    background: #000;
    transform: translateX(2px);
}
.afisha-tab:focus-visible,
.afisha-btn:focus-visible {
    outline: 2px solid var(--accent-bg);
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .afisha-date {
        flex-basis: 76px;
        font-size: 10px;
    }
    .afisha-foot {
        flex-direction: column;
        align-items: flex-start;
    }
    .afisha-btn {
        width: 100%;
        justify-content: center;
    }
}

/* === "What is inside the map" preview block (main page) === */
.bento-inside {
    grid-column: 1 / -1;
    background: var(--bg-card-solid);
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.bento-inside .bento-content {
    width: 100%;
}
.inside-sub {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 44ch;
}
.inside-list {
    display: flex;
    flex-direction: row;
    gap: 24px;
    margin-top: 22px;
}
.inside-place {
    flex: 1 1 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 2px 0;
    border-top: 0;
}
.inside-place:first-child {
    border-top: 0;
    padding-top: 4px;
}
.inside-thumb {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    margin-top: 2px;
    background-size: cover;
    background-position: center;
    background-color: #e5e0d6;
    filter: saturate(0.92) contrast(1.03);
}
.inside-body {
    flex: 1;
    min-width: 0;
}
.inside-name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    line-height: 1.18;
    color: var(--text-main);
}
.inside-desc {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-soft);
    margin: 0 0 8px;
}
.inside-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid rgba(0, 0, 0, 0.12);
    padding: 3px 9px;
    border-radius: 999px;
}
.inside-locked {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(172, 133, 72, 0.08);
    border: 1px solid rgba(172, 133, 72, 0.55);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}
.lock-ic {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lock-ic svg {
    width: 18px;
    height: 18px;
}
.locked-body {
    flex: 1;
    min-width: 0;
}
.locked-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
    color: var(--text-main);
}
.locked-desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-soft);
    margin: 0;
}
.inside-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.inside-note {
    font-size: 13px;
    color: var(--text-soft);
    max-width: 24ch;
}
.prime-btn {
    appearance: none;
    border: 0;
    background: var(--accent-bg);
    color: var(--accent-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 13px 22px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: transform 0.2s var(--motion), filter 0.2s var(--motion);
}
.prime-btn:hover {
    filter: brightness(0.96);
    transform: translateX(2px);
}
.prime-btn:focus-visible {
    outline: 2px solid var(--bg-dark);
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .inside-foot {
        flex-direction: column;
        align-items: flex-start;
    }
    .inside-note {
        max-width: none;
    }
    .prime-btn {
        width: 100%;
        justify-content: center;
    }
}

/* === Inside places: stack on phones === */
@media (max-width: 768px) {
    .inside-list {
        flex-direction: column;
        gap: 0;
    }
    .inside-place {
        flex: none;
        padding: 16px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
    }
    .inside-place:first-child {
        border-top: 0;
        padding-top: 4px;
    }
}

/* === Subscribe block (full-width light band, main page) === */
.bento-subscribe {
    grid-column: 1 / -1;
    min-height: auto;
    background: var(--bg-card-solid);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 28px 44px;
    justify-content: center;
}
.subscribe-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    flex-wrap: wrap;
}
.subscribe-copy {
    flex: 1 1 320px;
    min-width: 0;
}
.subscribe-copy h2 {
    margin: 6px 0 0;
}
.subscribe-sub {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
    max-width: 52ch;
}
.subscribe-action {
    flex: 0 1 420px;
    min-width: 260px;
}
.subscribe-form {
    display: flex;
    gap: 10px;
}
.subscribe-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #fff;
    color: var(--text-main);
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.2s var(--motion);
}
.subscribe-input::placeholder {
    color: var(--text-muted);
}
.subscribe-input:focus {
    outline: none;
    border-color: var(--text-main);
}
.subscribe-btn {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    height: 50px;
    padding: 0 26px;
    border-radius: 14px;
    background: var(--accent-bg);
    color: var(--accent-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: filter 0.2s var(--motion), transform 0.2s var(--motion);
}
.subscribe-btn:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}
.subscribe-btn:focus-visible {
    outline: 2px solid var(--bg-dark);
    outline-offset: 2px;
}
.subscribe-status {
    margin: 12px 0 0;
    min-height: 18px;
    font-size: 13px;
    color: var(--text-soft);
}
.subscribe-status.is-ok {
    color: #6e5327;
}
.subscribe-status.is-error {
    color: #9e3a2c;
}
@media (max-width: 768px) {
    .bento-subscribe {
        padding: 30px 26px;
    }
    .subscribe-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }
    .subscribe-action {
        width: 100%;
        flex-basis: auto;
        min-width: 0;
    }
}

/* === Accessibility: focus rings for interactive elements === */
.nav-pill:focus-visible,
.dual-access-card:focus-visible,
.bento-glass-action:focus-visible,
.place-card:focus-visible,
a.bento-item:focus-visible {
    outline: 2px solid var(--accent-bg);
    outline-offset: 3px;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === Public pricing view (no login wall) === */
.pricing-view {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 0 48px;
}
.pricing-head {
    text-align: center;
    margin-bottom: 42px;
}
.pricing-title {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 12px 0 0;
    color: var(--text-main);
}
.pricing-lead {
    max-width: 60ch;
    margin: 16px auto 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-soft);
}
.pricing-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 50px;
}
.compare-col {
    background: var(--bg-card-solid);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.compare-prime {
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}
.compare-tag {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.compare-tag-prime {
    background: var(--accent-bg);
    color: var(--accent-text);
    padding: 4px 12px;
    border-radius: 999px;
}
.compare-price {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin: 14px 0 18px;
}
.compare-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.compare-list li {
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-soft);
    padding-left: 24px;
    position: relative;
}
.compare-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-text);
    font-weight: 700;
}
.compare-open .compare-list li::before {
    color: var(--text-muted);
}
.compare-list b {
    color: var(--text-main);
    font-weight: 600;
}
.compare-cta {
    margin-top: auto;
    display: inline-block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background: var(--accent-bg);
    color: var(--accent-text);
    transition: filter 0.2s var(--motion), transform 0.2s var(--motion);
}
.compare-cta:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}
.compare-cta-ghost {
    background: transparent;
    color: var(--text-main);
    border: 1px solid rgba(0, 0, 0, 0.18);
}
.compare-cta-ghost:hover {
    filter: none;
    background: rgba(0, 0, 0, 0.03);
}
.tiers-title {
    text-align: center;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--text-main);
    margin: 0 0 20px;
}
.tiers-title-sub {
    margin-top: 42px;
}
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.tier-card {
    background: var(--bg-card-solid);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    text-align: center;
    position: relative;
}
.tier-featured {
    border-color: var(--accent-bg);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.07);
}
.tier-flag {
    display: inline-block;
    background: var(--accent-bg);
    color: var(--accent-text);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.tier-sub {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.tier-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 12px;
}
.tier-price {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
    line-height: 1;
}
.tier-cur {
    font-size: 22px;
    vertical-align: super;
    margin-right: 2px;
    color: var(--text-soft);
}
.tier-renew {
    font-size: 13px;
    color: var(--text-muted);
    margin: 10px 0 0;
}
.pricing-foot {
    text-align: center;
    margin-top: 46px;
}
.pricing-buy {
    display: inline-block;
    background: var(--bg-dark);
    color: #fff;
    padding: 16px 34px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s var(--motion), filter 0.2s var(--motion);
}
.pricing-buy:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.pricing-buy:focus-visible,
.compare-cta:focus-visible {
    outline: 2px solid var(--accent-bg);
    outline-offset: 3px;
}
.pricing-note {
    font-size: 14px;
    color: var(--text-soft);
    margin: 16px 0 0;
}
.pricing-trust {
    font-size: 13px;
    color: var(--text-muted);
    margin: 6px 0 0;
}
@media (max-width: 768px) {
    .pricing-compare {
        grid-template-columns: 1fr;
    }
    .tier-grid {
        grid-template-columns: 1fr;
    }
}

/* === Rome Prime "coming soon" view === */
.soon-card {
    max-width: 560px;
    margin: 0 auto;
    background: var(--bg-card-solid);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    padding: 32px;
}
.soon-list {
    margin: 0 0 24px;
}
.soon-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.soon-form .prime-notify-input {
    height: 50px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #fff;
    color: var(--text-main);
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.2s var(--motion);
}
.soon-form .prime-notify-input::placeholder {
    color: var(--text-muted);
}
.soon-form .prime-notify-input:focus {
    outline: none;
    border-color: var(--text-main);
}
.soon-form .prime-notify-btn {
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: var(--accent-bg);
    color: var(--accent-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s var(--motion), transform 0.2s var(--motion);
}
.soon-form .prime-notify-btn:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}
.soon-form .prime-notify-tag {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 2px;
}

/* === Trust / social proof === */
.bento-trust {
    grid-column: span 1;
    min-height: auto;
    background: var(--bg-card-solid);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 30px 34px;
    justify-content: center;
}
.bento-trust .item-label {
    display: block;
    margin-bottom: 18px;
}
.trust-inner {
    width: 100%;
}
.trust-founder {
    display: flex;
    align-items: center;
    gap: 16px;
}
.trust-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e5e0d6;
}
.trust-founder-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.trust-founder-copy strong {
    font-size: 16px;
    color: var(--text-main);
    font-weight: 600;
}
.trust-founder-copy span {
    font-size: 14px;
    color: var(--text-soft);
    line-height: 1.45;
}
.trust-quotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
}
.trust-quote {
    margin: 0;
    background: var(--bg-stage);
    border-radius: var(--radius-md);
    padding: 20px;
}
.trust-quote blockquote {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-main);
}
.trust-quote figcaption {
    font-size: 13px;
    color: var(--text-muted);
}
.pricing-trust-block {
    max-width: 720px;
    margin: 40px auto 0;
    background: var(--bg-card-solid);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    padding: 28px 32px;
}
@media (max-width: 768px) {
    .trust-quotes {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PRIME BRAND PALETTE — cyan world for everything Prime.
   Lime stays the site accent; these overrides re-theme only
   Prime surfaces. Appended last so they win cleanly.
   accent #c6a063 · bg #101a33 · soft #f6f3ed
   ============================================================ */
:root {
    --prime-bg: #101a33;
    --prime-accent: #c6a063;
    --prime-soft: #f6f3ed;
    --prime-accent-text: #101a33;
}

/* Доступ — Prime card */
.dual-prime {
    border-color: rgba(198, 160, 99, 0.72);
}
.dual-prime:hover {
    background:
        radial-gradient(circle at 90% 10%, rgba(198, 160, 99, 0.18), transparent 42%),
        rgba(255, 255, 255, 0.82);
    border-color: rgba(198, 160, 99, 0.96);
}
.dual-prime-soon::before {
    background: radial-gradient(ellipse at 80% 0%, rgba(198, 160, 99, 0.1) 0%, transparent 60%);
}

/* Prime notify forms (Доступ-Рим + экран «скоро») */
.prime-notify-input {
    border-color: rgba(198, 160, 99, 0.4);
}
.prime-notify-input:focus {
    border-color: rgba(198, 160, 99, 0.82);
}
.prime-notify-btn,
.soon-form .prime-notify-btn {
    background: var(--prime-accent);
    color: var(--prime-accent-text);
}
.prime-notify-btn:hover,
.soon-form .prime-notify-btn:hover {
    background: #d9bc8a;
    filter: none;
}
.prime-notify-tag::before {
    background: var(--prime-accent);
}

/* «Открыть Prime» button */
.prime-btn {
    background: var(--prime-accent);
    color: var(--prime-accent-text);
}
.prime-btn:focus-visible {
    outline-color: var(--prime-accent);
}

/* Pricing — Prime column, featured tier, buy */
.compare-prime {
    border-color: rgba(198, 160, 99, 0.45);
    box-shadow: 0 14px 40px rgba(16, 26, 51, 0.08);
}
.compare-prime .compare-list li::before {
    color: var(--prime-accent);
}
.compare-tag-prime {
    background: var(--prime-accent);
    color: var(--prime-accent-text);
}
.compare-cta {
    background: var(--prime-accent);
    color: var(--prime-accent-text);
}
.compare-cta-ghost {
    background: transparent;
    color: var(--text-main);
}
.tier-featured {
    border-color: var(--prime-accent);
}
.tier-flag {
    background: var(--prime-accent);
    color: var(--prime-accent-text);
}
.pricing-buy {
    background: var(--prime-bg);
    color: var(--prime-soft);
}
.pricing-buy:focus-visible,
.compare-cta:focus-visible {
    outline-color: var(--prime-accent);
}

/* Trust block lives on Prime decision surfaces — keep neutral, no change */

/* ============================================================
   PRIME = DARK PREMIUM WORLD (beautiful pass)
   Prime cards/columns go deep #101a33 with cream #f6f3ed text
   and cyan #c6a063 accents — premium contrast vs light Open.
   ============================================================ */

/* Доступ — Prime card (Venice live + Rome soon) goes dark */
.dual-prime {
    background: var(--prime-bg);
    border-color: rgba(198, 160, 99, 0.55);
}
.dual-prime:hover {
    background:
        radial-gradient(circle at 90% 8%, rgba(198, 160, 99, 0.22), transparent 46%),
        var(--prime-bg);
    border-color: var(--prime-accent);
    box-shadow: 0 18px 44px rgba(16, 26, 51, 0.3);
}
.dual-prime .dual-access-top h4 {
    color: var(--prime-soft);
}
.dual-prime .dual-access-top p {
    color: rgba(246, 243, 237, 0.66) !important;
}
.dual-prime span {
    color: var(--prime-accent);
}
.dual-prime .prime-notify-tag,
.soon-form .prime-notify-tag {
    color: rgba(246, 243, 237, 0.5);
}

/* Pricing — Prime column goes dark */
.compare-prime {
    background: var(--prime-bg);
    border-color: rgba(198, 160, 99, 0.5);
    box-shadow: 0 22px 54px rgba(16, 26, 51, 0.28);
}
.compare-prime .compare-price {
    color: var(--prime-soft);
}
.compare-prime .compare-list li {
    color: rgba(246, 243, 237, 0.8);
}
.compare-prime .compare-list li::before {
    color: var(--prime-accent);
}
.compare-prime .compare-list b {
    color: var(--prime-soft);
}
.compare-prime .compare-tag-prime {
    background: var(--prime-accent);
    color: var(--prime-bg);
}
.compare-prime .compare-cta {
    background: var(--prime-accent);
    color: var(--prime-bg);
}

/* Pricing — recommended tier goes dark */
.tier-featured {
    background: var(--prime-bg);
    border-color: var(--prime-accent);
    box-shadow: 0 18px 44px rgba(16, 26, 51, 0.22);
}
.tier-featured .tier-name,
.tier-featured .tier-price {
    color: var(--prime-soft);
}
.tier-featured .tier-cur {
    color: var(--prime-accent);
}
.tier-featured .tier-renew {
    color: rgba(246, 243, 237, 0.58);
}
.tier-featured .tier-flag {
    background: var(--prime-accent);
    color: var(--prime-bg);
}

/* Buy button — the single cyan action */
.pricing-buy {
    background: var(--prime-accent);
    color: var(--prime-bg);
}
.pricing-buy:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

/* Rome "soon" view card goes dark */
.soon-card {
    background: var(--prime-bg);
    border-color: rgba(198, 160, 99, 0.4);
}
.soon-card .compare-list li {
    color: rgba(246, 243, 237, 0.8);
}
.soon-card .compare-list li::before {
    color: var(--prime-accent);
}
.soon-card .compare-list b {
    color: var(--prime-soft);
}

/* ============================================================
   FINAL PRIME CLEANUP — every remaining Prime surface to the
   cyan/dark world. (Site lime stays: Live, events, about,
   afisha, subscribe, breaking, year, profile, focus rings.)
   ============================================================ */

/* Locked Prime band in "Что внутри" */
.inside-locked {
    background: rgba(198, 160, 99, 0.08);
    border-color: rgba(198, 160, 99, 0.5);
}
.lock-ic {
    background: var(--prime-accent);
}

/* Доступ — Prime card: guarantee blue on hover (kill lime) */
.dual-prime:hover {
    background:
        radial-gradient(circle at 90% 8%, rgba(198, 160, 99, 0.22), transparent 46%),
        var(--prime-bg);
    border-color: var(--prime-accent);
}

/* Prime CTA section ("Откройте кураторский слой") — dark Prime world */
.places-cta {
    background: var(--prime-bg);
    color: var(--prime-soft);
}
.places-cta .item-label {
    color: var(--prime-accent);
}
.places-cta h2 {
    color: var(--prime-soft);
}
.places-cta p {
    color: rgba(246, 243, 237, 0.68);
}
.places-cta a {
    background: var(--prime-accent);
    color: var(--prime-bg);
}
.places-cta a:hover {
    background: #d9bc8a;
}

/* Menu "Prime Map" items — blue, distinct from grey Open Map */
.nav-pill[data-view="pricing"],
.nav-pill[data-view="prime-rome-soon"],
.side-nav .nav-pill[data-view="pricing"],
.side-nav .nav-pill[data-view="prime-rome-soon"] {
    background: rgba(198, 160, 99, 0.12);
    box-shadow: inset 0 0 0 1px rgba(198, 160, 99, 0.42);
}
.nav-pill[data-view="pricing"]:hover,
.nav-pill[data-view="prime-rome-soon"]:hover,
.side-nav .nav-pill[data-view="pricing"]:hover,
.side-nav .nav-pill[data-view="prime-rome-soon"]:hover {
    background: rgba(198, 160, 99, 0.2);
}
.nav-pill[data-view="pricing"] .nav-subtitle,
.nav-pill[data-view="prime-rome-soon"] .nav-subtitle,
.side-nav .nav-pill[data-view="pricing"] .nav-subtitle,
.side-nav .nav-pill[data-view="prime-rome-soon"] .nav-subtitle {
    color: #3a5083;
}

/* Profile dot reflects Prime status: grey=guest, lime=member, blue=active Prime */
body.has-prime .profile-dot {
    background: var(--prime-accent);
    box-shadow: 0 0 0 5px rgba(198, 160, 99, 0.16);
}

/* Prime card focus ring is cyan, not lime */
.dual-prime:focus-visible {
    outline-color: var(--prime-accent);
}

/* ============================================================
   HARD LOCK — Prime access cards (Доступ/Маршруты, incl. Rome
   "soon") are navy + cyan in EVERY state. !important so no
   stale/old rule or hover can ever paint them lime again.
   ============================================================ */
.dual-prime,
.dual-prime-soon {
    background: var(--prime-accent) !important;
    border: 1px solid rgba(16, 26, 51, 0.2) !important;
}
.dual-prime:hover,
.dual-prime-soon:hover {
    background:
        radial-gradient(circle at 90% 8%, rgba(16, 26, 51, 0.16), transparent 50%),
        var(--prime-accent) !important;
    border-color: rgba(16, 26, 51, 0.32) !important;
}
.dual-prime-soon::before {
    background: radial-gradient(ellipse at 80% 0%, rgba(16, 26, 51, 0.07) 0%, transparent 60%) !important;
}
/* text on the cyan card = dark navy */
.dual-prime .dual-access-top h4 { color: var(--prime-bg) !important; }
.dual-prime .dual-access-top p { color: rgba(16, 26, 51, 0.74) !important; }
.dual-prime span { color: var(--prime-bg) !important; }
/* Rome "soon" notify form inside the cyan card */
.dual-prime .prime-notify-input {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(16, 26, 51, 0.18) !important;
    color: #211d16 !important;
}
.dual-prime .prime-notify-btn {
    background: var(--prime-bg) !important;
    color: #ffffff !important;
}
.dual-prime .prime-notify-tag { color: rgba(16, 26, 51, 0.6) !important; }
.dual-prime .prime-notify-tag::before { background: var(--prime-bg) !important; }

/* === Owned Prime access card — active-state accent (portal "Доступ" block) === */
.dual-prime-owned {
    border-color: var(--prime-accent) !important;
    box-shadow:
        0 0 0 1px rgba(198, 160, 99, 0.3),
        0 14px 34px -14px rgba(198, 160, 99, 0.5);
}
.dual-prime-owned:hover {
    box-shadow:
        0 0 0 1px var(--prime-accent),
        0 18px 40px -14px rgba(198, 160, 99, 0.6);
}

/* ============================================================
   Prime градиент-боксы на главной — светлая фростед-заливка.
   Заливка из угла -> белый. Тексты/кнопки не меняются, только
   цвет текста под светлый фон. Ховер мягкий, без глубоких теней.
   Карточка "Рим · Скоро" (dual-prime-soon) не трогается.
   ============================================================ */
.dual-prime:not(.dual-prime-soon){
  background:radial-gradient(150% 140% at 24% 86%, #d9bc8a, #dce2ef 38%, #eff2f8 70%, #ffffff 100%) !important;
  border:1px solid rgba(198, 160, 99, 0.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
.dual-prime:not(.dual-prime-soon) .dual-access-top h4{ color:#141d38 !important; }
.dual-prime:not(.dual-prime-soon) .dual-access-top p{ color:rgba(20, 29, 56, 0.62) !important; }
.dual-prime:not(.dual-prime-soon) span{ color:rgba(20, 29, 56, 0.62) !important; }

/* мягкий ховер: чуть ярче, без глубокой тени и без подскока */
.dual-prime:not(.dual-prime-soon):hover{
  background:radial-gradient(150% 140% at 24% 86%, #93a6cc, #dce2ef 38%, #dce2ef 70%, #ffffff 100%) !important;
  border-color:rgba(198, 160, 99, 0.5) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.92) !important;
  transform:none !important;
}

/* активный Prime — тонкое циан-кольцо, тоже без глубокой тени */
.dual-prime-owned{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.85), 0 0 0 1px rgba(198, 160, 99, 0.40) !important; }
.dual-prime-owned:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.92), 0 0 0 1px rgba(198, 160, 99, 0.55) !important; transform:none !important; }

/* ============================================================
   Расширение градиента на Рим (карточка "Скоро" с формой)
   + сезонный бокс "Что смотреть в сезоне" — полный градиент
   с плавной сменой по сезону. Контраст: фон светлый, текст тёмный.
   ============================================================ */
.dual-prime-soon{
  background:radial-gradient(150% 140% at 24% 86%, #d9bc8a, #dce2ef 38%, #eff2f8 70%, #ffffff 100%) !important;
  border:1px solid rgba(198, 160, 99, 0.34) !important;
}
.dual-prime-soon::before{ background:none !important; }
.dual-prime-soon .dual-access-top h4{ color:#141d38 !important; }
.dual-prime-soon .dual-access-top p{ color:rgba(20, 29, 56, 0.62) !important; }
.dual-prime-soon .prime-notify-tag{ color:rgba(20, 29, 56, 0.58) !important; }
.dual-prime-soon .prime-notify-tag::before{ background:#141d38 !important; }

/* seasonal afisha box — full gradient, smooth season change */
.bento-afisha {
    transition:
        opacity 0.68s var(--motion),
        transform 0.68s var(--motion),
        box-shadow 0.32s var(--motion),
        background 0.6s var(--motion) !important;
}
.bento-afisha.afisha-winter{ background:radial-gradient(150% 130% at 80% 12%, #93a6cc, #dce2ef 42%, #dce2ef 72%, #ffffff 100%) !important; }
.bento-afisha.afisha-spring{ background:radial-gradient(150% 130% at 80% 12%, #a7c0a2, #e4ebe1 42%, #e4ebe1 72%, #ffffff 100%) !important; }
.bento-afisha.afisha-summer{ background:radial-gradient(150% 130% at 80% 12%, #e7d2ac, #f8f0e1 42%, #f8f0e1 72%, #ffffff 100%) !important; }
.bento-afisha.afisha-autumn{ background:radial-gradient(150% 130% at 80% 12%, #d9bc8a, #e7d2ac 42%, #f8f0e1 72%, #ffffff 100%) !important; }


/* === Доступ: третья ступень — Гид (тёмная плашка во всю ширину блока) === */
.dual-access-grid--triple .dual-guide { grid-column: 1 / -1; min-height: 0; }
.dual-guide {
    background: rgba(33, 29, 22, 0.07);
    border: 0;
}
.dual-guide:hover { background: rgba(33, 29, 22, 0.1); transform: translateY(-1px); box-shadow: none; }
.dual-guide .dual-access-top h4 { color: #211d16 !important; }
.dual-guide .dual-access-top p { color: rgba(0, 0, 0, 0.58) !important; }
.dual-guide span { color: rgba(0, 0, 0, 0.86) !important; font-weight: 700; }


/* === Маршруты: чипы-примеры + единая кнопка (вместо повторных Open/Prime) === */
.routes-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.route-chip {
    font-size: 12px;
    font-weight: 560;
    color: rgba(0, 0, 0, 0.62);
    background: rgba(33, 29, 22, 0.06);
    border-radius: 8px;
    padding: 7px 12px;
    white-space: nowrap;
}
.block-cta {
    appearance: none;
    border: 0;
    align-self: flex-start;
    margin-top: 20px;
    background: var(--bg-dark);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 13px 22px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s var(--motion), background 0.2s var(--motion);
}
.block-cta:hover { background: #000; transform: translateX(2px); }


/* === 'Сейчас': белая прямоугольная кнопка вместо круглой стрелки === */
.bento-rect-action {
    position: absolute;
    right: 26px;
    bottom: 26px;
    z-index: 5;
    appearance: none;
    border: 0;
    background: #f6f3ed;
    color: #101a33;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -0.01em;
    padding: 11px 18px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    transition: transform 0.22s var(--motion), filter 0.22s var(--motion);
}
.bento-rect-action:hover { transform: translateY(-1px); filter: brightness(1.04); }
@media (max-width: 768px) {
    .bento-rect-action { right: 18px; bottom: 18px; font-size: 12px; padding: 10px 15px; }
}

/* === Bottom masonry: tall Афиша left, Маршруты+Кто за картой right, thin Подписка === */
.bento-item:has(.routes-preview) { justify-content: flex-start; }
.bento-subscribe .subscribe-copy h2 { font-size: clamp(26px, 2.4vw, 34px); }
.bento-subscribe .subscribe-sub { max-width: 60ch; }
@media (max-width: 1024px) {
    /* mobile is flex-column: neutralize desktop-only spans so nothing breaks */
    .bento-afisha { grid-row: auto; }
}

/* === Masonry air fix: no forced min-height; CTA/foot pinned to bottom === */
.bento-afisha,
.bento-item:has(.routes-preview) {
    min-height: auto;
}
.bento-afisha .bento-content,
.bento-item:has(.routes-preview) .bento-content {
    flex: 1 1 auto;
}
.bento-afisha .afisha-foot { margin-top: auto; }
.bento-item:has(.routes-preview) .block-cta { margin-top: auto; }
/* === Мобильный: единый компактный боковой план (телефон) ===
   Внешний гаттер вдвое уже (бока 4px → контент на 8px), верх с воздухом,
   внутренние отступы карточек 16px, сайдбар/меню и карусель «Важное»
   выровнены по тому же плану. */
@media (max-width: 768px) {
  .portal-wrapper { padding: 12px 4px 8px !important; }
  .stage { padding-left: 4px !important; padding-right: 4px !important; }
  .sidebar { padding-left: 4px !important; padding-right: 4px !important; }

  .bento-item,
  .onair-card,
  .place-card,
  .event-card,
  .about-item { padding-left: 16px !important; padding-right: 16px !important; }

  .dual-access-card { padding-left: 14px; padding-right: 14px; }

  /* Карусель «Важное» — выровнять первую карточку по общему гаттеру */
  .onair-brk-track { padding-inline: 8px !important; scroll-padding-inline: 8px !important; }
}
/* === Фото-фон на блоках «Маршруты» и «Что смотреть в сезоне» ===
   Эти блоки получают background-image (как «Пульс»). Контент в них идёт
   сверху донизу, поэтому оверлей плотнее и равномернее, а теги/кнопки/
   список афиши реверсятся под светлый текст. */
.bento-item[style*="background-image"]:has(.routes-preview)::before,
.bento-item.bento-afisha[style*="background-image"]::before {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.58) 0%,
        rgba(0, 0, 0, 0.46) 45%,
        rgba(0, 0, 0, 0.80) 100%
    ) !important;
}

.bento-item[style*="background-image"] .route-chip {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.bento-item[style*="background-image"] .block-cta,
.bento-item[style*="background-image"] .afisha-btn {
    background: #f6f3ed;
    color: #101a33;
}
.bento-item[style*="background-image"] .block-cta:hover,
.bento-item[style*="background-image"] .afisha-btn:hover {
    background: #fff;
}

.bento-item[style*="background-image"] .afisha-sub,
.bento-item[style*="background-image"] .afisha-title { color: rgba(255, 255, 255, 0.95); }
.bento-item[style*="background-image"] .afisha-date,
.bento-item[style*="background-image"] .afisha-count { color: rgba(255, 255, 255, 0.66); }
.bento-item[style*="background-image"] .afisha-event,
.bento-item[style*="background-image"] .afisha-foot { border-color: rgba(255, 255, 255, 0.16); }

/* =========================================
   MOBILE MENU — изящное каскадное открытие
   (панель мягко появляется, пункты — один за другим)
   ========================================= */
@media (max-width: 1024px) {
  @keyframes compactItemIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill {
    animation: compactItemIn 0.52s var(--motion) both;
  }
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill:nth-child(1) { animation-delay: 0.05s; }
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill:nth-child(2) { animation-delay: 0.10s; }
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill:nth-child(3) { animation-delay: 0.15s; }
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill:nth-child(4) { animation-delay: 0.20s; }
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill:nth-child(5) { animation-delay: 0.25s; }
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill:nth-child(6) { animation-delay: 0.30s; }
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill:nth-child(7) { animation-delay: 0.35s; }
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill:nth-child(8) { animation-delay: 0.40s; }
}
@media (prefers-reduced-motion: reduce) {
  body.mobile-compact.mobile-menu-open .side-nav .nav-pill { animation: none !important; }
}

/* =========================================
   ПУЛЬС/ВАЖНОЕ — раскрытие карточки едет плавно
   (фото-фоновое правило выше перебивало transition ширины
    из-за равной специфичности — возвращаем мягкое движение)
   ========================================= */
.onair-card.onair-brk {
  transition: flex-basis 0.52s cubic-bezier(0.32, 0.72, 0, 1),
              width 0.52s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.32s var(--motion);
}

/* =========================================================
   МОБИЛЬНОЕ МЕНЮ — сетка 2-в-ряд + SVG-иконки вместо фото
   (десктоп НЕ затрагивается: там всё как было, фото на месте)
   ========================================================= */

/* SVG-иконка скрыта по умолчанию → на десктопе виден фото-бокс .nav-icon */
.nav-svg { display: none; }

@media (max-width: 768px) {
  /* Все обычные пункты — по одной колонке (2 в ряд), как Open/Prime */
  .side-nav .nav-pill:not(.nav-soft-dark) {
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: center !important;
    min-height: 62px !important;
    padding: 11px 12px !important;
  }

  /* Фото прячем, SVG показываем — для ВСЕХ пунктов меню */
  .side-nav .nav-pill .nav-icon { display: none !important; }
  .side-nav .nav-pill .nav-svg {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    flex-shrink: 0;
  }
  .side-nav .nav-pill .nav-svg svg { width: 23px; height: 23px; }

  /* Цвет иконки под фон пункта (светлые пункты — тёмная, Open/Prime — светлая) */
  .side-nav .nav-pill:not(.nav-soft-dark) .nav-svg { color: #211d16; }
  .side-nav .nav-pill.nav-soft-dark .nav-svg { color: #f6f3ed; }
  .side-nav .nav-pill.nav-soft-dark .nav-svg svg { width: 20px; height: 20px; }

  /* Компактный текст */
  .side-nav .nav-pill:not(.nav-soft-dark) .nav-text-wrapper { padding-top: 0 !important; }
  .side-nav .nav-pill:not(.nav-soft-dark) .nav-title {
    font-size: 12.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .side-nav .nav-pill:not(.nav-soft-dark) .nav-subtitle {
    font-size: 9px !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
    opacity: 0.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  /* Open/Prime — единый размер с остальными пунктами (ровная сетка) */
  .side-nav .nav-pill.nav-soft-dark {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    min-height: 62px !important;
    height: auto !important;
    padding: 11px 12px !important;
    gap: 9px !important;
    align-items: center !important;
  }
  .side-nav .nav-pill.nav-soft-dark .nav-svg svg { width: 23px !important; height: 23px !important; }
  .side-nav .nav-pill.nav-soft-dark .nav-title {
    font-size: 12.5px !important;
    line-height: 1.1 !important;
  }
  .side-nav .nav-pill.nav-soft-dark .nav-subtitle {
    font-size: 9px !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
  }
}

/* =========================================================
   МАРШРУТЫ — Apple-минимализм: мягкий hover, деликатная
   рамка у закрытых карточек, спокойное движение
   ========================================================= */
.route-open-preview,
.route-prime-preview {
  transition: transform 0.3s var(--motion), box-shadow 0.3s var(--motion);
}
@media (hover: hover) {
  .route-open-preview:hover,
  .route-prime-preview:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.18);
  }
}
/* Закрытые маршруты — тонкая световая рамка (премиальный сигнал, без крика) */
.route-locked {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
}
@media (hover: hover) {
  .route-locked:hover {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
      0 20px 48px rgba(0, 0, 0, 0.2);
  }
}

/* =========================================
   ROUTES — scoped polish (does NOT touch global .bento-hero)
   - route-hero-compact: shorter hero band for the routes intro and the
     opened-route cover (cover photo pulls in via inline background-image).
   - route-point-num: numbered pin on each point card, mirrors the map marker.
   ========================================= */

.route-hero-compact {
  grid-column: span 2;
  min-height: 300px;
}

.route-hero-compact h2 {
  max-width: 720px;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 660;
  line-height: 1;
  letter-spacing: -0.035em;
}

.route-hero-compact p {
  max-width: 560px;
}

.route-point-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #211d16;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .route-hero-compact {
    min-height: 240px;
  }
}

/* =========================================
   ROUTES — showcase card (open + prime preview)
   Scoped to .route-card* classes only. Cards keep their responsive bento
   heights; this only enriches content: a "route trail" glyph, a refined meta
   eyebrow, a glass CTA pill, and the Prime badge. No global bento is touched.
   ========================================= */

.route-card-content {
  gap: 14px;
}

/* Eyebrow: trail glyph + meta, sits above the title */
.route-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.route-card-meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}

/* Route trail — brass dots joined by a hairline (echoes map pins + line) */
.route-trail {
  display: inline-flex;
  align-items: center;
}

.route-trail i {
  position: relative;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c6a063;
}

.route-trail i + i {
  margin-left: 15px;
}

.route-trail i + i::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 15px;
  height: 1px;
  background: rgba(198, 160, 99, 0.5);
  transform: translateY(-50%);
}

/* CTA pill — glass by default, fills brass on card hover */
.route-card-cta {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition:
    background 0.35s var(--motion),
    border-color 0.35s var(--motion),
    color 0.35s var(--motion);
}

.route-card-arrow {
  transition: transform 0.35s var(--motion);
}

@media (hover: hover) {
  .route-card:hover .route-card-cta {
    background: rgba(198, 160, 99, 0.92);
    border-color: rgba(198, 160, 99, 0.92);
    color: #1c1a14;
  }
  .route-card:hover .route-card-arrow {
    transform: translateX(3px);
  }
}

/* Prime badge (kept for phase 2; not shown while prime routes are removed) */
.route-card-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.4);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =========================================
   ROUTES — tappable point card
   Вся карточка точки кликабельна (открывает карту на этой точке).
   Вместо кнопки — тонкая подсказка со стрелкой, которая едет на hover.
   ========================================= */
.route-point-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s var(--motion);
}
.route-point-arrow {
  display: inline-block;
  transition: transform 0.3s var(--motion);
}
@media (hover: hover) {
  .route-point-card.is-tappable:hover .route-point-go {
    color: #c6a063;
  }
  .route-point-card.is-tappable:hover .route-point-arrow {
    transform: translateX(3px);
  }
}

/* =========================================
   ROUTES — slim count band (вместо целой латунной плитки)
   Тонкая полоса-разделитель на всю ширину между шапкой маршрута и точками.
   ========================================= */
.route-count-band {
  grid-column: span 2;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 18px 26px;
  border-radius: var(--radius-xl);
  background: #ac8548;
}
.route-count-band-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}
.route-count-band-value {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: #211d16;
}
.route-count-band-hint {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.58);
}

/* ============================================================
   FINAL — единый стиль карточек «Доступ».
   Дописано последним: перекрывает все прежние волны, ничего
   не удаляя. Откат = удалить этот блок. Только .dual-*.
   Prime = тёмно-синий + золото + белый. Open/Гид = светлые.
   Без backdrop-filter.
   ============================================================ */
.dual-access-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 20px !important;
  transition: transform .24s cubic-bezier(.16,1,.3,1), box-shadow .24s, border-color .24s !important;
}
.dual-access-card:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 40px rgba(0,0,0,0.08) !important; }

/* Open — чистая светлая */
.dual-open { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.06) !important; }
.dual-open:hover { background: #ffffff !important; border-color: rgba(0,0,0,0.10) !important; }

/* Гид — светлая */
.dual-guide { background: #faf8f4 !important; border: 1px solid rgba(0,0,0,0.06) !important; }
.dual-guide:hover { background: #f6f3ec !important; }
.dual-guide .dual-access-top h4 { color: #211d16 !important; }
.dual-guide .dual-access-top p { color: rgba(0,0,0,0.58) !important; }
.dual-guide > span { color: rgba(0,0,0,0.72) !important; font-weight: 700 !important; }

/* PRIME (активная + «скоро») — тёмно-синий + золотое свечение + белый текст */
.dual-prime,
.dual-prime-soon,
.dual-prime:not(.dual-prime-soon) {
  background:
    radial-gradient(circle at 92% 8%, rgba(198,160,99,0.20), transparent 46%),
    linear-gradient(165deg, #141d38 0%, #101a33 100%) !important;
  border: 1px solid rgba(198,160,99,0.38) !important;
  box-shadow: none !important;
}
.dual-prime:hover,
.dual-prime-soon:hover,
.dual-prime:not(.dual-prime-soon):hover {
  background:
    radial-gradient(circle at 92% 8%, rgba(198,160,99,0.26), transparent 46%),
    linear-gradient(165deg, #17203f 0%, #121c37 100%) !important;
  border-color: rgba(198,160,99,0.55) !important;
  box-shadow: 0 16px 44px rgba(16,26,51,0.28) !important;
  transform: translateY(-2px) !important;
}
.dual-prime-soon::before { background: none !important; }

/* текст белый — специфичность как у прежних тёмных правил (:not), дописано позже => побеждает */
.dual-prime:not(.dual-prime-soon) .dual-access-top h4,
.dual-prime-soon .dual-access-top h4 { color: #f6f3ed !important; }
.dual-prime:not(.dual-prime-soon) .dual-access-top p,
.dual-prime-soon .dual-access-top p { color: rgba(246,243,237,0.72) !important; }

/* CTA активной карточки («Перейти на карту →») — золотая кнопка */
.dual-prime:not(.dual-prime-soon) > span {
  display: inline-block !important;
  align-self: flex-start !important;
  background: #c6a063 !important;
  color: #101a33 !important;
  font-weight: 700 !important;
  padding: 9px 16px !important;
  border-radius: 12px !important;
}
.dual-prime:not(.dual-prime-soon):hover > span { background: #d4b273 !important; }

/* карточка «Рим · Скоро» — форма на тёмном фоне */
.dual-prime-soon .prime-notify-tag { color: rgba(246,243,237,0.62) !important; }
.dual-prime-soon .prime-notify-tag::before { background: #c6a063 !important; }
.dual-prime-soon .prime-notify-input {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(198,160,99,0.40) !important;
  color: #f6f3ed !important;
}
.dual-prime-soon .prime-notify-input::placeholder { color: rgba(246,243,237,0.5) !important; }
.dual-prime-soon .prime-notify-btn {
  background: #c6a063 !important;
  color: #101a33 !important;
}

/* активный доступ (owned) — золотое кольцо на тёмной */
.dual-prime-owned { box-shadow: 0 0 0 1px rgba(198,160,99,0.45) !important; }
.dual-prime-owned:hover { box-shadow: 0 0 0 1px rgba(198,160,99,0.60), 0 16px 44px rgba(16,26,51,0.28) !important; }

/* ============================================================
   ANIMATION PASS — стандарты Emil Kowalski (append last → wins)
   Только тайминги / GPU / touch-hover. Ничего не удаляет.
   ============================================================ */

/* 1. transition: all → точные свойства */
.afisha-tab {
  transition: border-color .2s var(--motion), color .2s var(--motion) !important;
}

/* 2. Слайд-тумблеры: 580ms → 240ms */
.selector-thumb,
.year-thumb { transition: transform .24s var(--motion) !important; }

/* 3. Появление карточек короче (и hover-lift становится снапким) */
.bento-item, .event-card, .about-item, .onair-card, .place-card,
.places-cta, .month-divider, .year-toggle-wrapper, .empty-state {
  transition:
    opacity .5s var(--motion),
    transform .34s var(--motion),
    box-shadow .22s var(--motion),
    background .32s var(--motion);
}

/* 4. Hover-lift плиток / дашборд-пилла — быстрый отклик */
.dashboard-pill { transition: transform .2s var(--motion), box-shadow .2s var(--motion); }
.bento-item[style*="background-image"] {
  transition: filter .4s var(--motion), transform .22s var(--motion), box-shadow .22s var(--motion);
}

/* 5. Touch/Capacitor: гасим hover-lift, чтобы не залипал после тапа.
   (Правильнее — обернуть каждый :hover в @media (hover:hover); это правка
    по месту. Здесь нейтрализуем разом, append-безопасно.) */
@media (hover: none), (pointer: coarse) {
  .about-shortcut:hover, .nav-pill:hover, .dashboard-pill:hover, .hero-cta:hover,
  .bento-item:hover, .about-item:hover, .onair-card:hover, .place-card:hover,
  .event-card:hover, .onair-navbtn:hover, .onair-refresh:hover, .place-more:hover,
  .places-cta a:hover, .dual-access-card:hover, .bento-glass-action:hover,
  .profile-chip:hover, .afisha-tab:hover, .afisha-btn:hover, .prime-btn:hover,
  .subscribe-btn:hover, .compare-cta:hover, .pricing-buy:hover, .block-cta:hover,
  .bento-rect-action:hover, .prime-notify-btn:hover,
  .dual-prime:hover, .dual-prime-soon:hover {
    transform: none !important;
  }
}

/* NEW — public pricing: radio-выбор тарифа. Кольцо через ::after (opacity/GPU),
   press-feedback через transform; без layout-сдвига (подсветка не прыгает). */
.tier-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s var(--motion);
}
.tier-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--accent-bg);
  opacity: 0;
  transition: opacity 0.18s var(--motion);
  pointer-events: none;
}
.tier-card.is-selected::after { opacity: 1; }
.tier-card:active { transform: scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  .tier-card { transition: none; }
  .tier-card::after { transition: none; }
  .tier-card:active { transform: none; }
}