/*
 * demo37 "Connect · Cover Wall" — the Connect page as a wall of every partner issue in drifting
 * columns, a quiet free mosaic and a staggered portrait grid. On the site chrome (site.css):
 * #18171a, Lato for text, Cormorant Garamond for display; one warm accent (DEPO yellow).
 */
/* Display: Cormorant Garamond (Google Fonts, linked in index.html). Not Lazurski: the site's Lazurski
 * files are cp1251-mapped, so Latin-1 letters such as Ï and Í come out as Cyrillic П and Н. */

.cw {
    --cream: #f3eee4;
    --soft: rgb(243 238 228 / 0.66);
    --faint: rgb(243 238 228 / 0.14);
    --gold: #ffb500;
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --gut: clamp(16px, 3.2vw, 48px);
    padding: 0 0 clamp(32px, 4vw, 64px);
    color: var(--cream);
}
.cw a { color: inherit; text-decoration: none; }
.cw { font-variant-numeric: lining-nums; }
.cw a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
.cw img { display: block; width: 100%; height: auto; }

.cw-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font: 700 12px/1 "Lato", sans-serif; letter-spacing: 0.24em; text-transform: uppercase; color: var(--soft); }
.cw-kicker span { color: var(--gold); letter-spacing: 0.1em; }
.cw-kicker span::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px; vertical-align: middle; background: currentColor; opacity: 0.6; }
.cw-h2 { margin: 0; font: 600 clamp(56px, 7.4vw, 120px)/0.88 var(--serif); letter-spacing: -0.02em; color: var(--cream); }
.cw-all { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 "Lato", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); }
.cw-all::after { content: ""; width: 34px; height: 1px; background: var(--gold); transition: width 0.4s ease; }
.cw-all:hover::after { width: 56px; }

.cw-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 8px 3px; border-radius: 3px; background: rgb(24 23 26 / 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--gold); font: 700 10px/1.2 "Lato", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.cw-badge--free { color: var(--cream); }
.cw-badge--creator { color: #8ee09f; }

/* ── banner ─────────────────────────────────────────────────────────────────────────────── */
.cw-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(24px, 4vw, 72px);
    min-height: min(860px, calc(100svh - 70px));
    padding: clamp(32px, 5vw, 64px) var(--gut) clamp(40px, 6vw, 80px);
    overflow: hidden;
}
.cw-banner__title { margin: 0 0 28px; font: 600 clamp(52px, 7vw, 120px)/0.9 var(--serif); letter-spacing: -0.025em; }
.cw-banner__title em { font-weight: 500; font-style: italic; color: var(--gold); }
.cw-banner__lede { max-width: 44ch; margin: 0 0 36px; font: 300 clamp(17px, 1.3vw, 20px)/1.6 "Lato", sans-serif; color: var(--soft); }
.cw-banner__stats { display: flex; flex-wrap: wrap; gap: 14px clamp(20px, 3vw, 44px); margin: 0 0 40px; padding: 22px 0 0; border-top: 1px solid var(--faint); }
.cw-banner__stats div { display: flex; flex-direction: column-reverse; gap: 6px; }
.cw-banner__stats dt { font: 700 11px/1 "Lato", sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); }
.cw-banner__stats dd { margin: 0; font: 500 clamp(34px, 3.4vw, 50px)/1 var(--serif); color: var(--cream); }
.cw-banner__go { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px; border: 1px solid rgb(255 181 0 / 0.6); border-radius: 999px; font: 700 13px/1 "Lato", sans-serif; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.3s ease, color 0.3s ease; }
.cw-banner__go::after { content: "↓"; font-size: 15px; letter-spacing: 0; }
.cw-banner__go:hover { background: var(--gold); color: #18171a; }

.cw-banner__art {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.18fr 1fr;
    gap: 14px;
    height: min(760px, calc(100svh - 150px));
    min-height: 460px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.cw-banner__col { display: flex; flex-direction: column; gap: 14px; margin-top: 14%; will-change: transform; }
.cw-banner__col--tall { margin-top: -6%; }
.cw-banner__col img { border-radius: 2px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.8); }
.cw-banner__col--tall img:first-child { aspect-ratio: 2 / 3; object-fit: cover; }

/* ── PARTNERS: the wall ─────────────────────────────────────────────────────────────────── */
.cw-partners {
    display: grid;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 72px);
    padding: clamp(72px, 9vw, 140px) var(--gut) clamp(120px, 14vw, 220px);
}
.cw-side__inner { position: sticky; top: calc(var(--hdr-h, 70px) + 32px); }
.cw-side .cw-h2 { font-size: clamp(56px, 5.4vw, 92px); }
.cw-side__lede { margin: 22px 0 28px; color: var(--soft); font-size: 16px; line-height: 1.55; }
.cw-index { margin: 0 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--faint); }
.cw-index__link {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: baseline;
    gap: 8px;
    padding: 11px 0;
    border-bottom: 1px solid var(--faint);
    transition: color 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}
.cw-index__no { font: 700 11px/1 "Lato", sans-serif; letter-spacing: 0.1em; color: var(--soft); }
.cw-index__name { font: 500 25px/1.05 var(--serif); }
.cw-index__meta { font-size: 12px; letter-spacing: 0.08em; color: var(--soft); white-space: nowrap; }
.cw-side.is-focus .cw-index__link { opacity: 0.42; }
.cw-index__link.is-on, .cw-side.is-focus .cw-index__link.is-on { opacity: 1; color: var(--gold); padding-left: 8px; }
.cw-index__link.is-named { color: var(--gold); }
.cw-index__link.is-named .cw-index__no { color: var(--gold); }

.cw-wall { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); align-items: start; }
.cw-wall__col { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); will-change: transform; }
.cw-wall__col:nth-child(2) { margin-top: clamp(40px, 7vw, 120px); }
.cw-wall__col:nth-child(4) { margin-top: clamp(30px, 4vw, 70px); }
.cw-cover {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 2px;
    background: #222126;
    box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.9);
    transition: opacity 0.45s ease, filter 0.45s ease;
}
.cw-cover img { height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cw-cover:hover img, .cw-cover:focus-visible img { transform: scale(1.045); }
.cw-cover__cap {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 46px 14px 14px;
    background: linear-gradient(180deg, transparent, rgb(12 11 14 / 0.86));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.cw-cover__cap b { font: 600 clamp(21px, 1.8vw, 28px)/1 var(--serif); color: var(--cream); }
.cw-cover__cap i { font: 400 11px/1.2 "Lato", sans-serif; font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.cw-cover:hover .cw-cover__cap, .cw-cover:focus-visible .cw-cover__cap { opacity: 1; transform: none; }
.cw-cover .cw-badge { opacity: 0; transition: opacity 0.3s ease; }
.cw-cover:hover .cw-badge, .cw-cover:focus-visible .cw-badge { opacity: 1; }
.cw-wall.is-focus .cw-cover { opacity: 0.16; filter: grayscale(1); }
.cw-wall.is-focus .cw-cover.is-on { opacity: 1; filter: none; }
.cw-wall.is-focus .cw-cover.is-on .cw-cover__cap { opacity: 1; transform: none; }

/* ── section heads (FREE, People) ───────────────────────────────────────────────────────── */
.cw-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: end; column-gap: clamp(20px, 4vw, 64px); margin: 0 0 clamp(28px, 3.5vw, 48px); }
.cw-head .cw-kicker { grid-column: 1 / -1; }
.cw-head__lede { max-width: 46ch; margin: 0 0 10px; color: var(--soft); line-height: 1.55; }
.cw-head .cw-all { margin-bottom: 14px; white-space: nowrap; }

/* ── FREE: a tight, quieter mosaic ──────────────────────────────────────────────────────── */
.cw-free { padding: clamp(40px, 6vw, 80px) var(--gut) clamp(80px, 10vw, 150px); }
.cw-mosaic {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 15vw, 250px);
    gap: 6px;
}
.cw-tile { position: relative; display: block; overflow: hidden; background: #222126; }
.cw-tile img { height: 100%; object-fit: cover; object-position: center 28%; filter: saturate(0.55) brightness(0.8); transition: filter 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cw-tile:hover img, .cw-tile:focus-visible img { filter: none; transform: scale(1.03); }
.cw-tile__cap { position: absolute; left: 12px; bottom: 10px; right: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-shadow: 0 1px 12px rgb(0 0 0 / 0.7); }
.cw-tile__cap b { font: 500 clamp(18px, 1.5vw, 23px)/1.05 var(--serif); }
.cw-tile__cap i { font: 400 10px/1 "Lato", sans-serif; font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); }
.cw-tile .cw-badge { top: 8px; left: 8px; opacity: 0.85; }
.cw-tile--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.cw-tile--1 .cw-tile__cap b { font-size: clamp(26px, 2.8vw, 40px); }
.cw-tile--2 { grid-column: 3; grid-row: 1 / 3; }
.cw-tile--3 { grid-column: 4; grid-row: 1; }
.cw-tile--4 { grid-column: 4; grid-row: 2; }
.cw-tile--5 { grid-column: 5; grid-row: 1 / 3; }
.cw-tile--6 { grid-column: 6; grid-row: 1; }
.cw-tile--7 { grid-column: 6; grid-row: 2; }
.cw-tile--8 { grid-column: 1 / 3; grid-row: 3; }
.cw-tile--9 { grid-column: 3; grid-row: 3; }
.cw-tile--10 { grid-column: 4 / 6; grid-row: 3; }
.cw-tile--11 { grid-column: 6; grid-row: 3; }

/* ── People: a staggered portrait grid ──────────────────────────────────────────────────── */
.cw-people { padding: clamp(40px, 6vw, 80px) var(--gut) 0; }
.cw-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(14px, 2vw, 32px); padding-bottom: clamp(40px, 6vw, 110px); }
.cw-face { display: block; }
.cw-face:nth-child(4n+2), .cw-face:nth-child(4n+4) { transform: translateY(clamp(40px, 6vw, 110px)); }
.cw-face__photo { position: relative; display: block; overflow: hidden; aspect-ratio: 2 / 3; margin-bottom: 16px; border-radius: 2px; background: #222126; }
.cw-face__photo img { height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cw-face:hover .cw-face__photo img, .cw-face:focus-visible .cw-face__photo img { transform: scale(1.04); }
.cw-face__name { display: block; font: 600 clamp(23px, 2vw, 31px)/1.05 var(--serif); }
.cw-face__role { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); }
.cw-face:hover .cw-face__name { color: var(--gold); }

/* ── responsive ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1179px) {
    .cw-wall__col:nth-child(4) { margin-top: 0; }
}
@media (max-width: 980px) {
    .cw-banner { grid-template-columns: 1fr; min-height: 0; }
    .cw-banner__art { height: 520px; min-height: 0; }
    .cw-partners { grid-template-columns: 1fr; }
    .cw-side__inner { position: static; }
    .cw-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
    .cw-head { grid-template-columns: 1fr; }
    .cw-head .cw-all { margin: 10px 0 0; }
    .cw-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cw-face:nth-child(n) { transform: none; }
    .cw-face:nth-child(3n+2) { transform: translateY(56px); }
}
@media (max-width: 760px) {
    .cw-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
    .cw-mosaic .cw-tile { grid-column: auto; grid-row: auto; }
    .cw-mosaic .cw-tile--1 { grid-column: 1 / -1; grid-row: span 2; }
    .cw-mosaic .cw-tile--4, .cw-mosaic .cw-tile--7 { grid-row: span 2; }
}
@media (max-width: 699px) {
    .cw-wall__col:nth-child(2) { margin-top: 48px; }
    .cw-index { grid-template-columns: 1fr; }
    .cw-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cw-face:nth-child(n) { transform: none; }
    .cw-face:nth-child(even) { transform: translateY(44px); }
    .cw-banner__art { height: 420px; gap: 8px; }
    .cw-banner__col { gap: 8px; }
}
@media (hover: none) {
    .cw-cover__cap { opacity: 1; transform: none; padding: 30px 10px 10px; }
    .cw-cover__cap i { display: none; }
    .cw-cover .cw-badge { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cw *, .cw *::before, .cw *::after { transition: none !important; }
    .cw-wall__col, .cw-banner__col { transform: none !important; }
}