/* ──────────────────────────────────────────────────────────────────────────
   KADR · МОСТ В БУДУЩЕЕ — editorial brutalist fashion catalog
   Стиль: Stone Island / COS / MM6 / Vogue Italia online
   ──────────────────────────────────────────────────────────────────────────*/

:root {
    --bg:        #F5F0E8;          /* тёплый молочный */
    --bg-card:   #FBF7EF;          /* чуть светлее для карточек */
    --ink:       #1A1614;          /* глубокий чёрный с warm undertone */
    --ink-dim:   #6B5F55;          /* тёплый серый для мета */
    --accent:    #9E6438;          /* охра / глина */
    --accent-dim:#C99A6B;          /* приглушённая охра */
    --hairline:  #C4B9AA;          /* тонкая линия */

    /* iOS-style радиусы — мягко, но не игрушечно */
    --r-sm:      10px;             /* мелочи: чипы, кнопки */
    --r-md:      18px;             /* карточки, обложки коллекций */
    --r-lg:      24px;             /* большие блоки, hero-внутренности */
    --r-pill:    999px;            /* пилюли: теги, фильтры */

    /* Soft shadows (iOS Vision Pro feel) */
    --shadow-sm: 0 1px 2px rgba(26,22,20,0.04), 0 1px 1px rgba(26,22,20,0.03);
    --shadow-md: 0 6px 20px rgba(26,22,20,0.06), 0 2px 6px rgba(26,22,20,0.04);
    --shadow-lg: 0 14px 40px rgba(26,22,20,0.10), 0 4px 12px rgba(26,22,20,0.06);
    --shadow:    var(--shadow-sm);

    --f-serif:   'Cormorant Garamond', 'Times New Roman', serif;
    --f-display: 'Cormorant Garamond', serif;
    --f-sans:    'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

    --measure:   1280px;
    --grid-gap:  clamp(16px, 2vw, 32px);

    --ease:      cubic-bezier(0.4, 0, 0.2, 1);
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

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

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

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

::selection {
    background: var(--accent);
    color: #fff;
}

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

/* ─── REVEAL-ON-SCROLL (применяется JS через IntersectionObserver) ──────── */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms var(--ease), transform 800ms var(--ease);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ─── MARQUEE-ТИКЕР (как у COS, Issey Miyake, Loewe) ────────────────────── */

.ticker {
    background: var(--ink);
    color: var(--bg);
    overflow: hidden;
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    padding: 10px 0;
}
.ticker__track {
    display: inline-flex;
    gap: 48px;
    white-space: nowrap;
    animation: ticker-scroll 38s linear infinite;
    will-change: transform;
}
.ticker__item {
    font-family: var(--f-sans);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--bg);
    flex-shrink: 0;
}
.ticker__item::after {
    content: '◆';
    margin-left: 48px;
    color: var(--accent);
    font-size: 8px;
    vertical-align: middle;
}
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ─── РИМСКИЕ НОМЕРА ГЛАВ (I / II / III) ────────────────────────────────── */

.section__chapter {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 24px;
}
.section__chapter-num {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(48px, 6vw, 96px);
    line-height: 0.9;
    color: var(--accent);
    flex-shrink: 0;
}
.section__chapter-label {
    flex: 1;
    border-top: 1px solid var(--hairline);
    padding-top: 14px;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── ХЕДЕР ─────────────────────────────────────────────────────────────── */

.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
}

.masthead__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 18px clamp(16px, 4vw, 48px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.masthead__date {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.masthead__brand {
    text-align: center;
}
.masthead__brand-name {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
}
.masthead__brand-sub {
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}

.masthead__issue {
    justify-self: end;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

/* ─── СЕКЦИИ ────────────────────────────────────────────────────────────── */

.section {
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 48px);
}

.section__eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.section__title {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ink);
    max-width: 14ch;
    margin-bottom: 16px;
}
.section__lead {
    font-family: var(--f-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(17px, 1.6vw, 22px);
    color: var(--ink-dim);
    max-width: 50ch;
    line-height: 1.5;
}

.divider {
    height: 1px;
    background: var(--hairline);
    margin: clamp(32px, 4vw, 64px) 0;
}

.divider--ornament {
    position: relative;
    text-align: center;
    margin: clamp(40px, 5vw, 72px) 0;
}
.divider--ornament::before,
.divider--ornament::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 24px);
    height: 1px;
    background: var(--hairline);
}
.divider--ornament::before { left: 0; }
.divider--ornament::after  { right: 0; }
.divider--ornament span {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--accent);
    transform: rotate(45deg);
    vertical-align: middle;
}

/* ─── КАТАЛОГ КАРТОЧЕК ──────────────────────────────────────────────────── */

.catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--grid-gap);
    margin-top: clamp(32px, 4vw, 56px);
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--r-md);
    padding: 14px 14px 18px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 500ms var(--ease), box-shadow 500ms var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Асимметрия каталога — каждая 3-я ниже на 24px, как awwwards-fashion */
.card--offset { margin-top: clamp(0px, 4vw, 56px); }
@media (max-width: 540px) {
    .card--offset { margin-top: 0; }
}

.card__media {
    aspect-ratio: 3 / 4;
    background: var(--ink) url('') center/cover no-repeat;
    overflow: hidden;
    position: relative;
    border-radius: var(--r-sm);
}
.card__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 900ms var(--ease), filter 500ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__number {
    position: absolute;
    top: 14px; left: 14px;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 12px;
    letter-spacing: 0.08em;
    border-radius: var(--r-pill);
}

.card__body {
    padding: 16px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card__city {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}
.card__name {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.1;
    color: var(--ink);
}
.card__sig {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-dim);
    margin-top: 4px;
}

.card__tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tag {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    padding: 5px 12px;
    border: 1px solid var(--hairline);
    background: var(--bg);
    border-radius: var(--r-pill);
    transition: all 300ms var(--ease);
}
.tag:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.tag--accent {
    border-color: var(--accent);
    color: var(--accent);
}

/* ─── СТРАНИЦА ДИЗАЙНЕРА ────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 78vh;
    background: var(--ink);
    color: #fff;
    overflow: hidden;
}
.hero__media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.78) saturate(0.9);
}
.hero__inner {
    position: relative;
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(40px, 8vw, 120px) clamp(16px, 4vw, 48px);
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.hero__city {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-dim);
    margin-bottom: 16px;
}
.hero__name {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(48px, 9vw, 128px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    max-width: 14ch;
    color: #fff;
}
.hero__sig {
    margin-top: 24px;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: clamp(18px, 2vw, 26px);
    color: rgba(255,255,255,0.85);
    max-width: 36ch;
}

/* ─── DNA БЛОК ──────────────────────────────────────────────────────────── */

.dna {
    background: var(--bg-card);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}
.dna__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 48px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(16px, 2vw, 24px);
    text-align: center;
}
.dna__inner > div {
    background: var(--bg);
    border-radius: var(--r-md);
    padding: clamp(24px, 3vw, 32px) clamp(16px, 2vw, 24px);
    box-shadow: var(--shadow-sm);
}
.dna__col-label {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 12px;
}
.dna__col-value {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--ink);
}

/* ─── КОЛЛЕКЦИИ ─────────────────────────────────────────────────────────── */

.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--grid-gap);
    margin-top: clamp(32px, 4vw, 48px);
}
.collection-card {
    cursor: pointer;
    transition: transform 500ms var(--ease);
}
.collection-card:hover { transform: translateY(-3px); }
.collection-card__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--ink);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}
.collection-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 800ms var(--ease);
}
.collection-card:hover .collection-card__media img { transform: scale(1.05); }
.collection-card__title {
    margin-top: 14px;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 22px;
}
.collection-card__meta {
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

/* ─── SMART MATCH ───────────────────────────────────────────────────────── */

.match {
    background: var(--ink);
    color: #fff;
}
.match .section__eyebrow { color: var(--accent-dim); }
.match .section__title   { color: #fff; }
.match .section__lead    { color: rgba(255,255,255,0.7); }

.match__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--grid-gap);
    margin-top: clamp(32px, 4vw, 56px);
}
.match__item {
    cursor: pointer;
    transition: transform 500ms var(--ease);
}
.match__item:hover { transform: translateY(-4px); }
.match__media {
    aspect-ratio: 1 / 1;
    background: var(--ink-dim);
    overflow: hidden;
    margin-bottom: 16px;
    border-radius: var(--r-md);
}
.match__media img { width: 100%; height: 100%; object-fit: cover; }
.match__name {
    font-family: var(--f-display);
    font-size: 26px;
    color: #fff;
}
.match__city {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-dim);
    margin-top: 4px;
}
.match__score {
    margin-top: 12px;
    height: 2px;
    background: rgba(255,255,255,0.15);
    position: relative;
    overflow: hidden;
}
.match__score-bar {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: left;
}
.match__score-label {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}

/* ─── ФУТЕР ─────────────────────────────────────────────────────────────── */

.footer {
    border-top: 1px solid var(--hairline);
    padding: clamp(32px, 4vw, 48px) clamp(16px, 4vw, 48px);
    text-align: center;
}
.footer__brand {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--accent);
}
.footer__meta {
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

/* ─── НАВ-ССЫЛКА НАЗАД ──────────────────────────────────────────────────── */

.back {
    position: fixed;
    top: 18px; left: 18px;
    z-index: 100;
    background: rgba(245,240,232,0.78);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    padding: 10px 18px;
    border: 1px solid rgba(196,185,170,0.6);
    border-radius: var(--r-pill);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 300ms var(--ease);
}
.back:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ─── MOBILE TWEAKS ─────────────────────────────────────────────────────── */

@media (max-width: 540px) {
    .masthead__date  { display: none; }
    .masthead__issue { display: none; }
    .masthead__inner { grid-template-columns: 1fr; text-align: center; }
}

/* ─── LIGHTBOX ──────────────────────────────────────────────────────────── */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(26, 22, 20, 0.96);
    display: none;
    opacity: 0;
    transition: opacity 400ms var(--ease);
}
.lightbox.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.lightbox__stage {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 48px 96px;
}
.lightbox__img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    transition: opacity 400ms var(--ease);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox__close {
    position: absolute;
    top: 24px; right: 24px;
    width: 44px; height: 44px;
    background: transparent;
    color: var(--bg);
    border: 1px solid rgba(245,240,232,0.4);
    cursor: pointer;
    font-size: 16px;
    transition: all 300ms var(--ease);
}
.lightbox__close:hover {
    background: var(--bg);
    color: var(--ink);
}
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    background: transparent;
    color: var(--bg);
    border: 1px solid rgba(245,240,232,0.3);
    cursor: pointer;
    font-size: 18px;
    transition: all 300ms var(--ease);
}
.lightbox__nav:hover { background: rgba(245,240,232,0.1); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__meta {
    position: absolute;
    bottom: 32px; left: 0; right: 0;
    text-align: center;
}
.lightbox__counter {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 18px;
    color: var(--bg);
    letter-spacing: 0.08em;
}
@media (max-width: 640px) {
    .lightbox__nav { display: none; }
    .lightbox__stage { padding: 48px 16px 80px; }
}

/* ─── FILTERS / CHIPS ───────────────────────────────────────────────────── */

.filters {
    margin: clamp(24px, 3vw, 40px) 0 clamp(16px, 2vw, 24px);
    padding-bottom: clamp(16px, 2vw, 24px);
    border-bottom: 1px solid var(--hairline);
}
.filters__count {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}
.filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.filters__row-label {
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-right: 8px;
    min-width: 110px;
}
.filter-chip {
    font-family: var(--f-sans);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid var(--hairline);
    background: var(--bg-card);
    color: var(--ink-dim);
    cursor: pointer;
    border-radius: var(--r-pill);
    transition: all 300ms var(--ease);
}
.filter-chip:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.filter-chip.is-active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.filter-chip--reset {
    border-style: dashed;
    color: var(--accent);
    border-color: var(--accent);
}
.filter-chip--reset:hover {
    background: var(--accent);
    color: var(--bg);
    border-style: solid;
}

@media (max-width: 540px) {
    .filters__row-label { min-width: auto; width: 100%; margin-bottom: 4px; }
}

/* ─── SKELETON LOADER ───────────────────────────────────────────────────── */

.skeleton {
    background: linear-gradient(90deg,
        var(--bg-card) 0%,
        var(--hairline) 50%,
        var(--bg-card) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--r-sm);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}