/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #050608;
    --card-bg: rgba(255, 255, 255, .04);
    --card-bg-hover: rgba(255, 255, 255, .07);
    --border: rgba(255, 255, 255, .08);
    --border-card: rgba(255, 255, 255, .07);
    --border-card-hover: rgba(255, 255, 255, .12);
    --text: #ffffff;
    --text-body: rgba(255, 255, 255, .85);
    --text-secondary: rgba(255, 255, 255, .65);
    --text-tertiary: rgba(255, 255, 255, .45);
    --accent: #e8a34c;
    --font-body: 'Space Grotesk', -apple-system, system-ui, sans-serif;
    --font-display: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --max-width: 1440px;
    --gutter: 48px;
    --article-width: 720px;
    /* One height everywhere so the nav doesn't shift between pages */
    --header-height: 80px;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; transition: color .2s; }
a:hover { color: #f0b96e; }

img { max-width: 100%; height: auto; display: block; }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

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

/* ===== Kickers (mono data labels) ===== */
.kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
}
.kicker-label {
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}
.kicker-date {
    font-weight: 500;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .6);
}
.kicker-divider {
    width: 1px;
    height: 11px;
    background: rgba(255, 255, 255, .3);
}

/* ===== Header ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

/* On the homepage and article pages the header floats over the hero: the photo
   of the day runs to the top of the screen and the logo/burger sit on it */
body.home .header {
    position: absolute;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: none;
}

body.has-hero .header {
    position: absolute;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(5, 6, 8, .75), transparent);
    border-bottom: none;
}
body.has-hero .main { padding-top: 0; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

/* Логотип: назва + дескриптор «КОСМОС» / «SPACE» моноширинним капсом,
   розігнаним трекінгом приблизно під ширину назви. Одне посилання на обидва
   рядки; колір дескриптора — рівно 50% білого, без янтарного (він на сайті
   означає «важливе саме тут»). */
.logo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--text);
    white-space: nowrap;
}
.logo:hover { color: var(--text); }

.logo-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.logo-descriptor {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    /* трекінг лишає порожній відступ після останньої літери — компенсуємо,
       щоб підпис не здавався зсунутим ліворуч відносно назви */
    margin-right: -0.34em;
    /* оптичне вирівнювання лівого краю: у «H» Space Grotesk лівий винос
       гліфа ~1.5px, у «К»/«S» Plex Mono ~0.5px — без цього підпис виступає
       ліворуч від назви (заміряно canvas.measureText, 02.09) */
    padding-left: .1em;
}

.header-right { display: flex; align-items: center; gap: 32px; }

.nav { display: flex; align-items: center; gap: 32px; }
.nav a {
    color: rgba(255, 255, 255, .6);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s;
}
.nav a:hover { color: var(--text); }

/* Kept for the 404/500 "back home" button; the header Telegram CTA is gone */
.nav-cta {
    background: var(--accent);
    color: var(--bg);
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 100px;
    font-weight: 600;
    white-space: nowrap;
    transition: filter .2s;
}
.nav-cta:hover { filter: brightness(1.08); color: var(--bg); }

.nav a.lang-switch { letter-spacing: .05em; }

/* Mobile-menu-only extras (mock 9a); hidden until the dropdown breakpoint */
.lang-hint { display: none; }

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5, 6, 8, .45);
    z-index: 99;
}

/* Burger — two bars (mock 6d) folding into an X */
.burger { display: none; background: none; border: none; cursor: pointer; padding: 10px 6px; }
.burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    transition: .3s;
}
.burger span + span { margin-top: 4px; }
.burger--open span:nth-child(1) { transform: rotate(45deg) translate(2px, 2px); }
.burger--open span:nth-child(2) { transform: rotate(-45deg) translate(2px, -2px); }

/* ===== Main ===== */
.main { flex: 1; padding: 2rem 0; }
body.home .main { padding-top: 0; }

/* ===== Home first screen (mock 16a): lead article is the hero ===============
   Фото дня повнокадрове тільки на телефоні (мок 13a) — ширше воно живе
   карткою в рейці (.home-rail). */
.home-hero {
    display: none;
    position: relative;
    min-height: 460px;
    overflow: hidden;
    background: var(--bg);
}

.home-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease-out;
}
.home-hero:hover .home-hero-img { transform: scale(1.03); }

.home-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #050608 4%, transparent 60%);
    pointer-events: none;
}

.home-hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    padding: 0 var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.home-hero-caption {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Caption is the display line — the photo has no title. Body-sized on purpose:
   in the split the lead article's headline is the anchor of the screen. */
.home-hero-title {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
    text-wrap: pretty;
}
.home-hero-title a { color: rgba(255, 255, 255, .9); }
.home-hero-title a:hover { color: var(--text); }

.ghost-pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, .3);
    padding: 12px 22px;
    border-radius: 100px;
    white-space: nowrap;
    transition: border-color .2s;
}
.ghost-pill:hover { border-color: rgba(255, 255, 255, .6); color: var(--text); }

/* ===== Section head (mock 14a: heading + meta left, search pill right) ===== */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 44px 0 8px;
}

.section-head-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.section-head-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -0.028em;
}

.section-head-meta {
    font-size: 15px;
    color: rgba(255, 255, 255, .55);
}

/* Лід-стаття як гіро: повнокадрова картинка з текстом на ній (мок 16a) */
.lead-hero {
    position: relative;
    height: 520px;
    overflow: hidden;
    background: var(--bg);
}

.lead-hero-link { display: block; height: 100%; color: inherit; }
.lead-hero-link:hover { color: inherit; }

.lead-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease-out;
}
.lead-hero:hover .lead-hero-img { transform: scale(1.03); }

.lead-hero-scrim {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 400px;
    background: linear-gradient(to top, #050608 8%, rgba(5, 6, 8, .55) 45%, transparent);
    pointer-events: none;
}

.lead-hero-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lead-hero-date {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--accent);
}

.lead-hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 52px;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--text);
    max-width: 760px;
    text-wrap: pretty;
}

.lead-hero-dek {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    max-width: 640px;
    text-wrap: pretty;
}

/* ===== Стрічка + рейка з фото дня (мок 16a) ===== */
/* align-items лишається stretch: рейка має тягнутись на всю висоту ряду,
   інакше sticky-картці фото дня немає куди їхати */
.home-body {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 56px;
}
.home-feed { min-width: 0; }
/* Поруч із рейкою стрічці лишається ~650px — у двох колонках заголовок
   стиснувся б до ~226px і ліз на три рядки, тому тут одна колонка */
.home-feed .article-rows { grid-template-columns: 1fr; }

.home-rail { padding-top: 44px; }

.photo-card {
    position: sticky;
    top: 24px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
}

.photo-card-media {
    display: block;
    height: 280px;
    overflow: hidden;
}
.photo-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease-out;
}
.photo-card:hover .photo-card-media img { transform: scale(1.03); }

.photo-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 20px;
}

.photo-card-caption {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    text-wrap: pretty;
}
.photo-card .ghost-pill { font-size: 13px; padding: 10px 18px; }

/* ===== Feed rows — thumb + chip + title, two columns (mock 13a/14a) ===== */
.article-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gutter);
}

.article-row {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.article-row-link {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 13px 0;
    color: inherit;
}
.article-row-link:hover { color: inherit; }

.article-row-thumb {
    flex: none;
    width: 96px;
    height: 66px;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(255, 255, 255, .06);
}

/* Немає картинки — плитка з ініціалом замість порожнього сірого прямокутника */
.article-row-thumb--plate {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #141922, #0a0d12);
    border: 1px solid rgba(255, 255, 255, .07);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -0.03em;
    color: rgba(232, 163, 76, .5);
}

.article-row-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* Рубрика — окремий чип, а не префікс «Календар неба — » у заголовку */
.article-row-chip {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.article-row-date {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.article-row-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16.5px;
    line-height: 1.35;
    color: var(--text);
    transition: color .2s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-row-link:hover .article-row-title { color: var(--accent); }

.compact-card {
    background: var(--card-bg);
    border: 1px solid var(--border-card);
    border-radius: 14px;
    transition: background .2s, border-color .2s;
}
.compact-card:hover {
    background: var(--card-bg-hover);
    border-color: var(--border-card-hover);
}

.compact-card-link {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px;
    color: inherit;
    height: 100%;
}
.compact-card-link:hover { color: inherit; }

.compact-thumb {
    flex: none;
    width: 120px;
    height: 88px;
    border-radius: 10px;
    object-fit: cover;
}

.compact-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.compact-kicker {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.compact-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--text);
}

/* ===== More grid (older articles / inner pages) ===== */
.more-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}
.more-grid:first-child { margin-top: 0; }

/* ===== Articles grid (tag pages) ===== */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.card {
    background: var(--card-bg);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-card);
    transition: background .2s, border-color .2s;
}
.card:hover {
    background: var(--card-bg-hover);
    border-color: var(--border-card-hover);
}

.card-link { display: block; color: inherit; }
.card-link:hover { color: inherit; }

.card-img-wrap { aspect-ratio: 16/9; overflow: hidden; }
.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease-out;
}
.card:hover .card-img { transform: scale(1.03); }

.card-body { padding: 1rem 1.25rem 1.15rem; }

.card-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.35;
    margin-bottom: 0.6rem;
}

.card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.tag-badge {
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
}

/* ===== Pagination (mock 6c: info left, amber pill right) ===== */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-top: 20px;
    padding: 30px 0 44px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-link {
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .2s, filter .2s;
}
.pagination-link--ghost {
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .3);
    color: var(--text);
}
.pagination-link--ghost:hover { border-color: rgba(255, 255, 255, .6); color: var(--text); }
.pagination-link--solid {
    padding: 11px 22px;
    background: var(--accent);
    color: var(--bg);
    font-weight: 600;
}
.pagination-link--solid:hover { filter: brightness(1.08); color: var(--bg); }

.pagination-info {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ===== Feed pages 2+ (mock 7a/7b): compact header, month groups, thumbs ===== */
.feed-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding: 26px 0 16px;
}

.feed-head-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

/* Search pill (mock 7a: «⌕ Пошук за назвою») */
.search-pill {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 100px;
    padding: 11px 18px;
    transition: border-color .2s;
}
.search-pill:focus-within { border-color: rgba(255, 255, 255, .4); }
.search-pill-icon {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1;
    color: rgba(255, 255, 255, .4);
    transition: color .2s;
}
.search-pill-icon:hover { color: var(--text); }
.search-pill-input {
    appearance: none;
    background: none;
    border: 0;
    outline: none;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    width: 150px;
}
.search-pill-input::placeholder { color: rgba(255, 255, 255, .4); }
.search-pill-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-pill--page .search-pill-input { width: 240px; }
.section-head .search-pill { width: 240px; }
.section-head .search-pill-input { width: 100%; flex: 1; min-width: 0; }

/* Search inside the mobile dropdown (mock 13e) — desktop already has the pill
   on the feed header, so it only exists in the menu */
.nav-search { display: none; }

.feed-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.feed-breadcrumb:hover { color: var(--text-secondary); }
.feed-breadcrumb-arrow { color: var(--accent); }

.feed-head .section-head-title { font-size: 40px; letter-spacing: -0.028em; }

.feed-page-meta {
    font-size: 15px;
    color: rgba(255, 255, 255, .55);
}

/* Group rule: month on pages 2+/search, «СЬОГОДНІ / ВЧОРА / ЦЬОГО ТИЖНЯ» on
   the home feed (mock 13a/14a) — spans the full width above a 2-column group */
.feed-month-label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0 6px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}
.feed-month-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(232, 163, 76, .25);
}

/* Numbered pagination (mock 7a): newer | 1 2 3 … 12 | older */
.pagination--numbered .pagination-info { display: none; }

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-page {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
    font-variant-numeric: tabular-nums;
    transition: color .2s, background .2s;
}
a.pagination-page:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.pagination-page--current {
    font-weight: 600;
    color: var(--bg);
    background: var(--accent);
}
.pagination-page--ellipsis { color: rgba(255, 255, 255, .3); }

/* Keeps the numbers centered on the last page, where «older» is absent */
.pagination-link--spacer {
    visibility: hidden;
    padding: 11px 22px;
}

/* ===== Article Detail (mock 6a: full-bleed hero, title overlaid) ===== */
.article-hero {
    position: relative;
    height: min(70vh, 660px);
    overflow: hidden;
    background: #000;
}

.article-hero-zoom {
    position: absolute;
    inset: 0;
    display: block;
    cursor: zoom-in;
}

.article-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-hero-scrim {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 430px;
    background: linear-gradient(to top, #050608 5%, rgba(5, 6, 8, .7) 45%, transparent);
    pointer-events: none;
}

/* Title column overlays the hero; clicks fall through to the zoom link
   except on interactive elements */
.article-hero-content {
    position: absolute;
    left: 0; right: 0; bottom: 40px;
    margin: 0 auto;
    width: 100%;
    max-width: calc(820px + 2 * var(--gutter));
    padding: 0 var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    pointer-events: none;
}
.article-hero-content a { pointer-events: auto; }

.article-hero-date {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--accent);
}
.article-hero-date--plain {
    font-size: 11px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .55);
}

.article-source-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.article-source-label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.source-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    border: 1px solid rgba(232, 163, 76, .4);
    padding: 7px 14px;
    border-radius: 100px;
    transition: border-color .2s;
}
.source-pill:hover { border-color: rgba(232, 163, 76, .8); color: var(--accent); }
.source-pill-arrow { font-size: 11px; }

/* Digest hero (mock 6b): lower, amber badge, smaller title */
.article-hero--digest { height: 360px; }
.article-hero--digest .article-hero-scrim {
    height: 260px;
    background: linear-gradient(to top, #050608 6%, transparent);
}
.article-hero--digest .article-title {
    font-size: 38px;
    line-height: 1.06;
    letter-spacing: -0.028em;
}

.article-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.digest-badge {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    padding: 5px 10px;
    border-radius: 4px;
}

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.93);
    z-index: 1000;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-out;
    align-items: center;
    justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}
.lightbox-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

/* 720px reading measure once the .container gutters are subtracted */
.article-container { max-width: calc(var(--article-width) + 2 * var(--gutter)); padding-top: 52px; }
/* Related + prev/next span wider than the text column (mock 6a: ~1100px canvas) */
.article-footer-container { max-width: 1100px; }

.article-header {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.article-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 54px;
    line-height: 1.03;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--text);
}

/* Photo page keeps a smaller headline (captions are long) + mono meta row */
.photo-page .article-title { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; }

.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    font-size: 12px;
    letter-spacing: .06em;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
}

.tag-link {
    background: rgba(232, 163, 76, .1);
    color: var(--accent);
    padding: 0.2rem 0.7rem;
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .08em;
}
.tag-link:hover { background: rgba(232, 163, 76, .2); }

/* Единый кегль по всему тексту: абзацы и так разделены подзаголовками */
.article-body {
    font-size: 21px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
}
.article-body p { margin-bottom: 20px; text-wrap: pretty; }
.article-body a { text-decoration: underline; }
.article-body b, .article-body strong { font-weight: 600; color: var(--text); }

.article-body h2, .article-body h3 {
    font-family: var(--font-display);
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.022em;
    margin: 46px 0 16px;
}
.article-body h2 { font-size: 30px; }
.article-body h3 { font-size: 24px; }
.article-body h2:first-child, .article-body h3:first-child { margin-top: 0; }

/* Science-notation chips (z=10, β_UV ≈ -2.4) */
.article-body code {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 15.5px;
    color: #f0c078;
    background: rgba(232, 163, 76, .1);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Quote / key-idea callout: amber bar + display type (mock 6a) */
.article-body blockquote {
    margin: 40px 0 34px;
    padding: 2px 0 2px 20px;
    border-left: 2px solid var(--accent);
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 25px;
    line-height: 1.35;
    letter-spacing: -0.015em;
}
.article-body blockquote p { font: inherit; margin: 0; color: inherit; }
.article-body blockquote cite {
    display: block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .5);
}
.article-body blockquote cite::before { content: "— "; }

/* ===== Digest body — numbered ТОП-5 (mock 6b) ===== */
.digest-body { display: block; }

.digest-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.digest-item:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.digest-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(232, 163, 76, .85);
}

.digest-item-body h2 {
    margin: 0 0 10px;
    font-size: 21px;
    line-height: 1.28;
    letter-spacing: -0.015em;
}
/* Digest paragraphs inherit .article-body type (user: match regular articles) */
.digest-body .digest-item-body p { margin-bottom: 12px; }
.digest-body .digest-item-body p:last-child { margin-bottom: 0; }

.digest-body p.digest-more { margin: 2px 0 0; }
.digest-more a {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(232, 163, 76, .35);
    padding-bottom: 2px;
}
.digest-more a:hover { border-bottom-color: var(--accent); }

.explore-try-link {
    margin: 1.5rem 0;
    font-size: 1.1rem;
}
.explore-try-link a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.explore-try-link a:hover { text-decoration: underline; }

/* ===== Photo Detail ===== */
.photo-hero {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #000;
}

.photo-hero-img {
    max-height: 80vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

.photo-credit {
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    font-size: 10px;
    letter-spacing: .06em;
}

/* ===== Related articles ===== */
.related {
    margin-top: 3rem;
}

.related-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
}

.related-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.02em;
}

.related-all {
    flex: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
}
.related-all-arrow { font-size: 12px; }

.related .more-grid { margin-top: 0; gap: 14px; }
.related .compact-card-link { gap: 16px; padding: 13px; }
.related .compact-thumb { width: 118px; height: 84px; }
.related .compact-body { gap: 6px; }
.related .compact-title { font-size: 16.5px; line-height: 1.32; transition: color .2s; }
.related .compact-kicker { font-weight: 500; letter-spacing: .14em; color: var(--accent); }
.related .compact-card-link:hover .compact-title { color: var(--accent); }

/* ===== Article Nav (prev/next) — one split bar ===== */
.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.article-nav-link {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.article-nav-prev {
    padding: 24px 32px 24px 0;
    border-right: 1px solid rgba(255, 255, 255, .1);
}
.article-nav-prev:last-child { border-right: none; }

.article-nav-next {
    grid-column: 2;
    align-items: flex-end;
    text-align: right;
    padding: 24px 0 24px 32px;
}

.article-nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.article-nav-arrow { color: var(--accent); }

.article-nav-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    line-height: 1.28;
    letter-spacing: -0.012em;
    color: var(--text);
    transition: color .2s;
}
.article-nav-link:hover .article-nav-title { color: var(--accent); }

/* ===== Page Header (tags, archive) ===== */
.page-header { margin-bottom: 2rem; padding-top: 1rem; }
.page-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.02em;
}

.section { margin-bottom: 2.5rem; }
.section-title {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

/* ===== Archive (mock 8a/8b/9b) ===== */
.archive-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 18px 40px;
    padding: 16px 0 0;
}

.archive-head-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.archive-head-main .page-title { font-size: 40px; letter-spacing: -0.028em; }

.archive-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, .55);
}

.archive-head-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.archive-years { display: flex; gap: 6px; }

.archive-year-tab {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--text-secondary);
    background: none;
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 8px 16px;
    border-radius: 100px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.archive-year-tab:hover { color: var(--text); border-color: rgba(255, 255, 255, .4); }
.archive-year-tab.active {
    font-weight: 600;
    color: var(--bg);
    background: #fff;
    border-color: #fff;
}

.archive-months {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}
/* With year tabs above (2+ years, mock 9b) the chip row wraps to two lines */
.archive-head-nav:has(.archive-years) .archive-months { max-width: 620px; }
.archive-months--hidden { display: none; }

.archive-year-label {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .1em;
    color: var(--text-tertiary);
    margin-right: 8px;
}

.archive-month-chip {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 7px 11px;
    border-radius: 100px;
    transition: color .2s, border-color .2s;
}
a.archive-month-chip:hover { color: var(--text); border-color: rgba(255, 255, 255, .4); }
.archive-month-chip--off {
    color: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .07);
}

/* Type filters — underline tabs on desktop (mock 8a) */
.archive-filter {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    margin-bottom: 14px;
}

.archive-tab {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .2s;
}
.archive-tab:hover { color: var(--text); }
.archive-tab.active {
    font-weight: 600;
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.archive-year-block--hidden { display: none; }

.archive-show-year {
    display: block;
    margin: 26px auto 30px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 11px 22px;
    border-radius: 100px;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.archive-show-year:hover { color: var(--text); border-color: rgba(255, 255, 255, .4); }
.archive-show-year[hidden] { display: none; }

.archive-month {
    margin-bottom: 28px;
    scroll-margin-top: var(--header-height);
}

.archive-month-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0 6px;
}

.archive-month-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}

.archive-month-rule {
    flex: 1;
    height: 1px;
    background: rgba(232, 163, 76, .25);
}

.archive-month-count {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    font-variant-numeric: tabular-nums;
}

.archive-list {
    list-style: none;
    columns: 2;
    column-gap: var(--gutter);
}

.archive-item {
    break-inside: avoid;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.archive-date {
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    font-size: 11.5px;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
}

.archive-link {
    color: var(--text);
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.35;
}
.archive-link:hover { color: var(--accent); }

.empty-state {
    color: var(--text-secondary);
    text-align: center;
    padding: 3rem 0;
    font-size: 1.1rem;
}

/* ===== Sky Calendar (/sky-calendar/, mock 11a/11b) ===== */
.sky-hero .sky-hero-title { font-size: 44px; }

.sky-hero-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sky-hero-badge {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    padding: 6px 11px;
    border-radius: 4px;
}

.sky-hero-countdown {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    font-variant-numeric: tabular-nums;
}

.sky-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.sky-hero-actions .cta-button {
    display: inline-block;
    background: var(--accent);
    color: var(--bg);
    padding: 13px 24px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    transition: filter .2s;
}
.sky-hero-actions .cta-button:hover { filter: brightness(1.08); color: var(--bg); }

.sky-btn-ghost {
    display: inline-block;
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 13px 24px;
    border-radius: 100px;
    transition: color .2s, border-color .2s;
}
.sky-btn-ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, .45); }

.sky-hero-nearest {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .5);
}

.sky-month-chip { text-transform: uppercase; letter-spacing: .08em; }

/* Стрічка рутинних фаз Місяця — не займають місце повноцінних рядків */
.sky-moon-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.sky-moon-label {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

.sky-moon-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.sky-moon-item {
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
}
.sky-moon-item time {
    font-family: var(--font-mono);
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* Рядок події: дата · зміст · коли/де/оптика (три колонки на десктопі) */
.sky-list { list-style: none; }

.sky-event {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 236px;
    gap: 32px;
    align-items: start;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.sky-event--highlight {
    background: rgba(232, 163, 76, .07);
    border-top: 1px solid rgba(232, 163, 76, .4);
    border-bottom: 1px solid rgba(232, 163, 76, .4);
    padding: 26px 24px;
    margin: 4px 0;
}
.sky-event--highlight + .sky-event { border-top: 0; }

.sky-event-when {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sky-event-day {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.sky-event--highlight .sky-event-day { color: var(--accent); }

.sky-event-date-label {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: .14em;
    line-height: 1.6;
    color: var(--text-tertiary);
    /* без nowrap: довгі місяці («21 листопада») переносяться в колонці 96px,
       а не наїжджають на текст події */
}
.sky-event--highlight .sky-event-date-label { color: rgba(232, 163, 76, .75); }

.sky-event-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.sky-event-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.24;
    letter-spacing: -0.016em;
    color: var(--text);
    text-wrap: pretty;
}

.sky-event-desc {
    color: var(--text-body);
    font-size: 16px;
    line-height: 1.6;
    max-width: 620px;
    text-wrap: pretty;
}

.sky-event-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 2px;
}

.sky-event-link {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .7);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
}
.sky-event-link:hover { color: var(--text); border-color: rgba(255, 255, 255, .5); }

.sky-event-link--accent {
    color: var(--accent);
    border-bottom-color: rgba(232, 163, 76, .4);
}
.sky-event-link--accent:hover { color: var(--accent); border-color: var(--accent); }

/* «Додати в календар»: з JS лишається одна кнопка під платформу (скрипт у
   sky_calendar.html), без JS — обидва варіанти списком. .sky-pick тому
   display:contents — обгортка не має впливати на розкладку кнопок CTA. */
.sky-pick { display: contents; }

.sky-add { position: relative; }

.sky-add > summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
}
.sky-add > summary::-webkit-details-marker { display: none; }
.sky-add > summary::marker { content: ""; }
.sky-add > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sky-add-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 10px);
    left: 0;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: #101216;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .55);
}

.sky-add-menu a {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.sky-add-menu a:hover { background: rgba(255, 255, 255, .07); color: var(--text); }

/* Права колонка: структуроване «коли/де» + чипи типу й оптики */
.sky-event-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 3px;
}

.sky-event-side-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sky-event-side-label {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

.sky-event-side-value {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text);
}

.sky-event-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.sky-chip {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 4px;
    padding: 5px 9px;
    white-space: nowrap;
}

.sky-chip--highlight {
    font-weight: 600;
    color: var(--accent);
    border-color: rgba(232, 163, 76, .5);
}

/* Бейдж «Головна подія» над заголовком тонованого рядка */
.sky-chip--badge {
    color: var(--bg);
    background: var(--accent);
    border: 0;
    letter-spacing: .14em;
}

/* Мобільний варіант «коли/де» всередині тіла — на десктопі його показує права колонка */
.sky-event-ww--inline { display: none; }

.sky-list .sky-event:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sky-list .sky-event--highlight:last-child { border-bottom-color: rgba(232, 163, 76, .4); }

.sky-reviews { margin-top: 40px; }

/* ===== Сторінка події (/sky-calendar/<slug>/) ===== */
.sky-title-link { color: inherit; }
.sky-title-link:hover { color: var(--accent); }
.sky-hero .sky-hero-title a { text-decoration: none; }

.sky-hero-countdown--past {
    color: var(--text-tertiary);
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .04);
}

.sky-hero-credit {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .45);
    text-align: right;
    max-width: 70%;
    /* Кредит лежить на неприкритій частині фото (а на телефоні скрима немає
       зовсім) — читабельність тримає тінь, а не затемнення кадру */
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}

.sky-facts-section { margin-bottom: 36px; }

.sky-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px 32px;
    padding: 18px 0 6px;
}

.sky-facts-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.sky-facts .sky-event-side-value { font-size: 17px; line-height: 1.45; }

.sky-facts-link { color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, .25); }
.sky-facts-link:hover { color: var(--accent); border-color: var(--accent); }

.sky-facts-note {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.sky-others { margin-bottom: 36px; }

.sky-cta { align-items: center; }

.sky-cta-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 23px;
    letter-spacing: -0.025em;
    color: var(--text);
}

.sky-cta-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-top: 6px;
}

.sky-cta-actions {
    flex: none;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.sky-cta-actions .sky-btn-ghost { padding: 12px 22px; font-size: 14px; }

/* ===== CTA Block (mock 6a: amber-tinted row) ===== */
.cta-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 26px;
    margin: 48px 0 0;
    background: linear-gradient(90deg, rgba(232, 163, 76, .08), rgba(232, 163, 76, .02));
    border: 1px solid rgba(232, 163, 76, .28);
    border-radius: 16px;
}

.cta-text {
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}

.cta-block .cta-button {
    flex: none;
    display: inline-block;
    background: var(--accent);
    color: var(--bg);
    padding: 12px 22px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 14px;
    transition: filter .2s;
}
.cta-block .cta-button:hover { filter: brightness(1.08); color: var(--bg); }

/* ===== Footer ===== */
.footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 28px;
    padding-bottom: 28px;
}

.footer-credit {
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
}

.footer-links {
    display: flex;
    gap: 24px;
}
.footer-links a {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    font-weight: 500;
}
.footer-links a:hover { color: var(--text); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}

/* ===== Tablet landscape, 1024 (mock 17a): rail narrows, gutters tighten ===== */
@media (max-width: 1024px) {
    :root { --gutter: 40px; }

    .lead-hero { height: 440px; }
    .lead-hero-scrim { height: 343px; }
    .lead-hero-body { bottom: 36px; gap: 14px; }
    .lead-hero-title { font-size: 40px; line-height: 1.08; letter-spacing: -0.028em; }
    .lead-hero-dek { font-size: 17px; max-width: 560px; }

    .home-body { grid-template-columns: 1fr 320px; gap: 44px; }
    .home-rail { padding-top: 40px; }
    .photo-card-media { height: 240px; }

    .section-head { padding: 40px 0 6px; }
    .section-head-title { font-size: 30px; }
    .section-head-meta { font-size: 14.5px; }
    .section-head .search-pill { width: 220px; }
}

/* ===== Tablet portrait and below (mock 17b): the rail drops — at this width it
   would leave the feed ~360px — and the photo of the day goes full width right
   under the hero, still the first thing after the lead. Feed stays one column
   at every width below 1024 (mock 15a). */
@media (max-width: 1023px) {
    :root { --gutter: 32px; }

    .lead-hero { height: 400px; }
    .lead-hero-scrim { height: 312px; }
    .lead-hero-body { bottom: 29px; }
    .lead-hero-title { font-size: 34px; }

    .home-body { display: flex; flex-direction: column; }
    .home-rail { order: -1; padding-top: 32px; }
    .photo-card { position: static; }
    .photo-card-media { height: 260px; }

    .article-rows { grid-template-columns: 1fr; }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    :root { --gutter: 20px; --header-height: 64px; }

    .header-inner { height: var(--header-height); }

    .logo-name { font-size: 17px; }
    .logo-descriptor { font-size: 8.5px; letter-spacing: 0.3em; margin-right: -0.3em; }

    /* Compact dropdown menu (mock 9a): rows with → arrows, CTA pill, dimmed page below */
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #0a0c10;
        border-bottom: 1px solid rgba(255, 255, 255, .09);
        box-shadow: 0 16px 32px rgba(0, 0, 0, .5);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 6px var(--gutter) 18px;
    }
    .nav--open { display: flex; }
    .burger { display: block; }

    .nav a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 15px 2px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(255, 255, 255, .85);
    }
    .nav a::after {
        content: "→";
        margin-left: auto;
        font-size: 13px;
        font-weight: 400;
        color: rgba(255, 255, 255, .35);
    }
    .nav a + a { border-top: 1px solid rgba(255, 255, 255, .07); }

    .lang-hint {
        display: inline;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
        color: rgba(255, 255, 255, .45);
    }

    .nav-backdrop--show { display: block; }

    .header-right { gap: 14px; }

    /* Телефон (мок 13a): фото дня знову повнокадрове гіро зверху, лід —
       карткою під ним, рейка не потрібна */
    .home-hero { display: block; min-height: 440px; }
    .home-rail { display: none; }
    /* top:auto — без нього height разом з inset:0 перевизначає bottom, і
       затемнення сідає на ВЕРХНІ 260px, лишаючи низ під текстом світлим */
    .home-hero-scrim {
        top: auto;
        height: 260px;
        background: linear-gradient(to top, #050608 8%, transparent);
    }
    .home-hero-bottom { bottom: 20px; gap: 12px; }
    .home-hero-caption { gap: 11px; }
    .home-hero-title { font-size: 17px; }
    .kicker { font-size: 10px; gap: 9px; }
    .ghost-pill { font-size: 13px; padding: 11px 18px; margin-top: 4px; }

    /* Search pill sits under the feed meta — «search the feed», visible before
       the list starts (mock 13a) */
    .section-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 28px 0 8px;
    }
    .section-head-main { gap: 8px; }
    .section-head-title { font-size: 23px; }
    .section-head-meta { font-size: 13.5px; }
    .section-head .search-pill { width: 100%; }

    /* Те саме гіро ліда, але скіном картки: картинка зверху, текст під нею */
    .lead-hero {
        position: static;
        height: auto;
        margin: 20px var(--gutter);
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 14px;
        background: rgba(255, 255, 255, .03);
    }
    .lead-hero-img { position: static; height: 180px; }
    .lead-hero-scrim { display: none; }
    .lead-hero-body {
        position: static;
        padding: 16px 18px 18px;
        gap: 9px;
    }
    .lead-hero-date { font-size: 10px; letter-spacing: .16em; }
    .lead-hero-title { font-size: 21px; line-height: 1.18; letter-spacing: -0.02em; }
    .lead-hero-dek { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .78); }

    .article-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .article-row-link { gap: 13px; padding: 11px 0; }
    .article-row-thumb { width: 76px; height: 54px; border-radius: 7px; }
    .article-row-thumb--plate { font-size: 24px; }
    .article-row-date { font-size: 10.5px; }
    .article-row-title { font-size: 15.5px; }

    .pagination { margin-top: 0; padding: 22px 0 30px; border-top: none; }
    .pagination-info { font-size: 11px; }
    .pagination-link--solid { font-size: 13px; padding: 11px 20px; }
    .pagination-link--ghost { font-size: 13px; padding: 10px 16px; }

    /* Pages 2+ (mock 7b): numbers collapse to «2 / 12» */
    .pagination-pages { display: none; }
    .pagination--numbered .pagination-info { display: block; letter-spacing: .1em; }
    .pagination-link--spacer { display: none; }

    /* Mock 7b has no pill, but search must stay reachable: full-width row below */
    .feed-head { flex-direction: column; align-items: stretch; padding: 10px 0 12px; gap: 14px; }
    .feed-head-main { gap: 8px; }
    .search-pill { padding: 10px 16px; }
    .search-pill-input, .search-pill--page .search-pill-input { width: 100%; flex: 1; font-size: 16px; }
    .feed-head .section-head-title { font-size: 28px; }
    .feed-breadcrumb { font-size: 10px; }
    .feed-page-meta { font-size: 13.5px; }
    .feed-month-label { font-size: 10px; gap: 12px; padding: 14px 0 4px; }

    /* Search is the first item of the dropdown (mock 13e) */
    .nav-search { display: flex; margin: 8px 0 2px; }
    .nav-search + a { border-top: none; }

    /* Archive (mock 8b): stacked header — title, pill filters, then chip grid */
    .archive-head {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 8px 0 0;
    }
    .archive-head-main { order: 0; }
    .archive-filter { order: 1; }
    .archive-head-nav { order: 2; margin-bottom: 4px; }
    .archive-head-main { gap: 8px; }
    .archive-head-main .page-title { font-size: 28px; }
    .archive-subtitle { font-size: 13.5px; }

    .archive-head-nav { align-items: flex-start; width: 100%; }
    .archive-months { justify-content: flex-start; max-width: none; gap: 6px; }
    .archive-month-chip { flex: 1 0 calc(16.666% - 6px); text-align: center; font-size: 10px; padding: 7px 0; }
    .archive-year-label { display: none; }

    .archive-filter {
        flex-wrap: wrap;
        gap: 7px;
        border-bottom: none;
        margin-bottom: 6px;
        padding-top: 6px;
    }
    .archive-tab {
        font-size: 12px;
        padding: 9px 15px;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 100px;
        margin-bottom: 0;
    }
    .archive-tab.active {
        color: var(--bg);
        background: var(--accent);
        border-color: var(--accent);
    }
    .archive-tab.active:hover { color: var(--bg); }

    .archive-list { columns: 1; }
    .archive-item { grid-template-columns: 46px 1fr; gap: 12px; }
    .archive-date { font-size: 11px; }
    .archive-link { font-size: 14.5px; }
    .archive-month { margin-bottom: 20px; }
    .archive-month-count { display: none; }

    /* Мобільний рядок події (mock 11b): дата в рядок, «коли/де» в тілі,
       права колонка лишає тільки чипи */
    .sky-hero .sky-hero-title { font-size: 28px; }
    .sky-event { grid-template-columns: 1fr; gap: 9px; padding: 18px 0; }
    .sky-event--highlight { padding: 20px 16px; margin: 4px -16px; }
    .sky-event-when { flex-direction: row; align-items: baseline; gap: 10px; }
    .sky-event-day { font-size: 21px; }
    .sky-event-title { font-size: 19px; }
    .sky-event-ww--inline {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 5px 12px;
        padding: 2px 0;
    }
    .sky-event-ww--inline dt {
        font-family: var(--font-mono);
        font-weight: 600;
        font-size: 9.5px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .35);
        padding-top: 3px;
    }
    .sky-event-ww--inline dd {
        font-size: 14.5px;
        line-height: 1.4;
        font-weight: 500;
        color: var(--text);
    }
    .sky-event-side { padding-top: 0; }
    .sky-event-side-field { display: none; }
    .sky-event-meta { padding-top: 0; }

    .compact-card { border-radius: 12px; }
    .compact-card-link { gap: 12px; padding: 12px; }
    .compact-thumb { width: 92px; height: 72px; border-radius: 8px; }
    .compact-title { font-size: 14px; }
    .compact-kicker { font-size: 9px; }

    .more-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }

    .articles-grid { grid-template-columns: 1fr; gap: 16px; }


    .article-hero { height: 420px; }
    .article-hero--digest { height: 300px; }
    .article-hero-scrim { height: 300px; }
    .article-hero--digest .article-hero-scrim { height: 220px; }
    .article-hero-content { bottom: 20px; gap: 12px; }

    .article-title { font-size: 28px; line-height: 1.08; letter-spacing: -0.028em; }
    .article-hero--digest .article-title { font-size: 24px; }
    .article-hero-date { font-size: 10px; }
    .source-pill { font-size: 12px; padding: 8px 14px; }

    .article-container { padding-top: 24px; }
    .article-body { font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .94); }
    .article-body p { margin-bottom: 16px; }
    .article-body h2 { font-size: 23px; margin: 30px 0 12px; }
    .article-body h3 { font-size: 19px; }
    .article-body code { font-size: 14px; padding: 1px 5px; }
    .article-body blockquote { font-size: 19px; line-height: 1.32; padding-left: 16px; margin: 28px 0 24px; }

    .article-tags { margin-top: 28px; }

    .cta-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px 20px;
        margin-top: 30px;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(232, 163, 76, .09), rgba(232, 163, 76, .02));
    }
    .cta-text { font-size: 15px; }
    .cta-block .cta-button { font-size: 13px; padding: 11px 20px; }

    .digest-item { grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; }
    .digest-num { font-size: 28px; }
    .digest-item-body h2 { font-size: 18px; margin: 0 0 8px; }

    .related-head { padding-bottom: 18px; }
    .related-title { font-size: 24px; }
    .related .compact-thumb { width: 92px; height: 72px; }
    .related .compact-title { font-size: 14px; }
    .related .compact-body { gap: 5px; }

    .article-nav { grid-template-columns: 1fr; margin-top: 28px; }
    .article-nav-prev {
        padding: 20px 0;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    .article-nav-prev:last-child { border-bottom: none; }
    .article-nav-next { grid-column: 1; padding: 20px 0; }
    .article-nav-link { gap: 8px; }
    .article-nav-label { font-size: 9.5px; }
    .article-nav-title { font-size: 17px; }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding-top: 22px;
        padding-bottom: 28px;
    }
    .footer-links { gap: 18px; }
    .footer-links a { font-size: 12px; }
}

@media (max-width: 480px) {
    html { font-size: 15px; }
}

/* ===== About page (mock 10a/10b) ===== */
body.about .main { padding: 0; }

/* Photo bleeds to the right screen edge; text stays inside the centered
   1440px container: col 1 = the container's left margin, col 2 = the text
   half of the container, col 3 = everything from the center to the edge. */
.about-hero {
    display: grid;
    grid-template-columns:
        minmax(var(--gutter), calc((100% - var(--max-width)) / 2 + var(--gutter)))
        min(calc(var(--max-width) / 2 - var(--gutter)), calc(50% - var(--gutter)))
        1fr;
    align-items: stretch;
}

.about-hero-text {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 66px 56px 66px 0;
}

.about-kicker {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
}

.about-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 52px;
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: pretty;
}

.about-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-body);
    max-width: 460px;
    text-wrap: pretty;
}

.about-hero-media {
    grid-column: 3;
    position: relative;
    min-height: 420px;
    overflow: hidden;
}

.about-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #050608 0%, rgba(5, 6, 8, .35) 45%, transparent 100%);
    pointer-events: none;
}

.about-hero--no-photo {
    grid-template-columns:
        minmax(var(--gutter), 1fr)
        minmax(0, calc(var(--max-width) - 2 * var(--gutter)))
        minmax(var(--gutter), 1fr);
}
.about-hero--no-photo .about-hero-text { padding-right: var(--gutter); }

/* Stats strip: full-bleed borders, cells centered inside the 1440px container */
.about-stats {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        repeat(3, minmax(0, calc(var(--max-width) / 3)))
        minmax(0, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    background: var(--bg);
    padding: 28px var(--gutter);
}

.about-stat:first-child { grid-column: 2; }
.about-stat + .about-stat { border-left: 1px solid var(--border); }

.about-stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -0.03em;
    color: var(--accent);
}

.about-stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Two-column «label / content» rhythm shared with the article pages */
.about-section {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 56px;
    padding: 66px 0 20px;
}

.about-section--method { padding: 56px 0 60px; }

.about-section-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-section-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.about-section-lead {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .7);
}

.about-sources {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 0;
}

.about-source-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
    background: var(--bg);
    padding: 24px 26px;
}

.about-source-card--wide { grid-column: 1 / -1; }

.about-source-label {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}

.about-source-names {
    margin: 0;
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}

.about-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.about-step {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 22px;
    align-items: baseline;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.about-step:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.about-step-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.03em;
    color: rgba(232, 163, 76, .85);
}

.about-step-text {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-body);
}
.about-step-text strong { font-weight: 600; color: var(--text); }

.about-section--author { padding: 0 0 64px; }

.about-author-text {
    margin: 0;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-body);
}
.about-author-text strong { font-weight: 600; color: var(--text); }

.about-cta {
    border-top: 1px solid var(--border);
    background: #0a0c10;
}

.about-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-top: 38px;
    padding-bottom: 38px;
}

.about-cta-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-cta-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.025em;
}

.about-cta-text {
    margin: 0;
    font-size: 15px;
    color: var(--text-secondary);
}

.about-cta-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
}

.about-cta-ghost {
    font-weight: 600;
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 14px 26px;
    border-radius: 100px;
    transition: border-color .2s, color .2s;
}
.about-cta-ghost:hover { border-color: rgba(255, 255, 255, .6); color: var(--text); }

.about-cta-solid {
    font-weight: 600;
    font-size: 15px;
    color: var(--bg);
    background: var(--accent);
    padding: 14px 28px;
    border-radius: 100px;
    transition: filter .2s;
}
.about-cta-solid:hover { filter: brightness(1.08); color: var(--bg); }

@media (max-width: 1024px) {
    .about-title { font-size: 40px; }
    .about-section { grid-template-columns: 240px 1fr; gap: 40px; }
}

/* About — mobile (mock 10b): photo on top, sources as bordered rows */
@media (max-width: 768px) {
    .about-hero { grid-template-columns: 1fr; }

    .about-hero-media {
        grid-column: 1;
        order: -1;
        height: 210px;
        min-height: 0;
    }

    /* На телефоні картинка стоїть окремою смугою — тексту на ній немає, тому
       й затемнювати нема що (на ширших екранах скрим лишається: там він
       розмиває вертикальний стик фото з текстовою колонкою) */
    .about-hero-scrim { display: none; }

    .about-hero-text {
        grid-column: 1;
        gap: 14px;
        padding: 20px var(--gutter) 26px;
    }

    .about-title { font-size: 32px; line-height: 1.08; letter-spacing: -0.028em; }
    .about-kicker { font-size: 10px; }
    .about-lead { font-size: 17px; line-height: 1.65; max-width: none; }

    .about-stat { gap: 5px; padding: 18px 14px; }
    .about-stat-num { font-size: 24px; }
    .about-stat-label { font-size: 12px; line-height: 1.35; }

    .about-section { grid-template-columns: 1fr; gap: 16px; padding: 32px 0 8px; }
    .about-section--method { padding: 36px 0 8px; }
    .about-section--author { padding: 8px 0 40px; }
    .about-author-text { font-size: 17px; }
    .about-section-title { font-size: 26px; line-height: 1.12; }

    .about-sources {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: none;
        border: none;
    }

    .about-source-card {
        gap: 8px;
        padding: 18px 0;
        background: none;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }
    .about-source-card:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .about-source-label { font-size: 10px; }

    .about-step { grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; }
    .about-step-num { font-size: 20px; }
    .about-step-text { font-size: 17px; line-height: 1.65; }

    .about-cta { margin-top: 34px; }

    .about-cta-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .about-cta-title { font-size: 24px; line-height: 1.15; }

    .about-cta-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }

    .about-cta-ghost,
    .about-cta-solid {
        padding: 14px 0;
        text-align: center;
    }
}