@charset "UTF-8";

/* === Cumhuriyet Sergisi — Design System (cs-*) === */
:root {
    --cs-bg-base:      #1a1a2e;
    --cs-bg-surface:   #252545;
    --cs-bg-card:      rgba(26, 26, 46, 0.85);
    --cs-border:       rgba(201, 168, 76, 0.15);
    --cs-accent:       #c9a84c;
    --cs-accent-hover: #e0c068;
    --cs-text-muted:   #8094ae;
    --cs-text-soft:    #c0cadd;
    --cs-radius-card:  1rem;
    --cs-radius-hero:  1.5rem;
    --cs-transition:   0.2s ease;
    /* Extended tokens */
    --cs-shadow-card:   0 0.25rem 1rem rgba(0, 0, 0, 0.35);
    --cs-shadow-hover:  0 0.5rem 2rem rgba(0, 0, 0, 0.5);
    --cs-z-header:      1030;
    --cs-z-hero:        10;
    --cs-ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
    --cs-max-prose:     72ch;
}

/* === DashLite overrides (preserve icon font + mobile nav JS) === */
.nk-menu-main > li > .nk-menu-link {
    text-transform: none !important;
    color: var(--cs-text-soft) !important;
}

.nk-menu-main > li > .nk-menu-link:hover,
.nk-menu-main > li > .nk-menu-link:focus {
    color: var(--cs-accent) !important;
}

.card-aside {
    min-height: auto !important;
}

.alert {
    margin-bottom: 1rem !important;
}

/* DashLite sets .nk-block { display: flex } which collapses Bootstrap .row
   children (percentage-width cols have no definite parent width to resolve
   against). Override to block in the CS public context so grids fill the
   available width correctly. */
.cs-public-wrap .nk-block {
    display: block;
}

/* === Page shell === */
body.cs-body {
    background: var(--cs-bg-base);
    color: var(--cs-text-soft);
}

/* Sticky footer via flex-grow — content fills remaining viewport */
.nk-app-root .nk-wrap.cs-public-wrap > .nk-content {
    flex-grow: 1;
    padding-bottom: 3rem;
}

.nk-app-root .nk-wrap.cs-public-wrap > .nk-footer {
    overflow: auto;
}

/* === Sticky header with blur on scroll === */
#cs-site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--cs-bg-base);
    border-bottom: 1px solid var(--cs-border);
    transition: background 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}

#cs-site-header.scrolled {
    background: rgba(26, 26, 46, 0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--cs-border), 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* === Language switcher in header === */
.cs-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.75rem;
}

.cs-lang-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cs-text-soft);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: color var(--cs-transition), border-color var(--cs-transition), background var(--cs-transition);
    line-height: 1;
}

.cs-lang-btn:hover {
    color: #fff;
    border-color: var(--cs-border);
    background: rgba(201, 168, 76, 0.06);
}

.cs-lang-btn.active {
    color: #fff;
    border-color: rgba(201, 168, 76, 0.25);
    background: rgba(201, 168, 76, 0.08);
}

/* === Global focus-visible — gold ring on all interactive elements === */
.cs-lang-btn:focus-visible,
.cs-tab-nav a:focus-visible,
.cs-home-hero:focus-visible,
.cs-home-card:focus-visible,
.cs-work-card:focus-visible,
.cs-footer-lang a:focus-visible,
.cs-member-exhibition-pill:focus-visible,
.cs-member-profile-btn:focus-visible,
.cs-social-links .btn:focus-visible,
.cs-empty-cta:focus-visible,
.cs-profile-back:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 3px;
}

/* Member card is now <article> — cursor shows it's interactive via the stretched-link button */
.cs-member-card {
    cursor: pointer;
}

/* =========================================================
   HOMEPAGE — Hero + Grid
   ========================================================= */

/* === Full-width hero: latest exhibition === */
.cs-home-hero {
    position: relative;
    border-radius: var(--cs-radius-hero);
    overflow: hidden;
    margin-bottom: 2.5rem;
    display: block;
    text-decoration: none;
}

.cs-home-hero__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cs-home-hero:hover .cs-home-hero__img,
.cs-home-hero:focus-visible .cs-home-hero__img {
    transform: scale(1.03);
}

.cs-home-hero--no-img {
    min-height: 200px;
    background: linear-gradient(135deg, #1a1a2e 0%, #252545 100%);
}

.cs-home-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.12) 30%,
        rgba(0, 0, 0, 0.62) 60%,
        rgba(0, 0, 0, 0.96) 100%
    );
}

.cs-home-hero__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.45) 0%,
        transparent 55%
    );
}

.cs-home-hero__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 2rem;
    z-index: 1;
}

@media (min-width: 768px) {
    .cs-home-hero__content {
        padding: 3.5rem;
        max-width: 75%;
    }
}

@media (min-width: 1200px) {
    .cs-home-hero__content {
        padding: 4rem;
        max-width: 62%;
    }
}

.cs-home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cs-accent);
    margin-bottom: 1rem;
}

.cs-home-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 1.75rem;
    height: 2px;
    background: var(--cs-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.cs-home-hero__title {
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 4px 20px rgba(0, 0, 0, 0.7);
}

.cs-home-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: var(--cs-accent);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background var(--cs-transition), transform var(--cs-transition), box-shadow var(--cs-transition);
    box-shadow: 0 4px 24px rgba(201, 168, 76, 0.4);
}

.cs-home-hero:hover .cs-home-hero__cta,
.cs-home-hero:focus-visible .cs-home-hero__cta {
    background: var(--cs-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 32px rgba(201, 168, 76, 0.5);
}

/* Scroll indicator — bottom-right */
.cs-home-hero__scroll {
    position: absolute;
    bottom: 1.75rem;
    right: 2rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.cs-home-hero__scroll-dot {
    width: 1px;
    height: 2rem;
    background: rgba(201, 168, 76, 0.2);
    border-radius: 1px;
    position: relative;
    overflow: hidden;
}

.cs-home-hero__scroll-dot::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 40%;
    background: rgba(201, 168, 76, 0.6);
    border-radius: 1px;
    animation: cs-scroll-dot 2s ease-in-out infinite;
}

@keyframes cs-scroll-dot {
    0%   { top: -40%; }
    100% { top: 100%; }
}

/* === Gallery grid: remaining exhibitions === */
.cs-home-gallery {
    margin-bottom: 3rem;
}

.cs-home-gallery__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cs-home-gallery__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cs-text-muted);
    margin: 0;
}

.cs-home-gallery__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cs-text-muted);
    background: rgba(201, 168, 76, 0.06);
    border: 1px solid var(--cs-border);
    border-radius: 99px;
    padding: 0.15rem 0.65rem;
    white-space: nowrap;
}

/* CSS Grid layout — 1 col → 2 col → 3 col */
.cs-home-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .cs-home-grid {
        gap: 1rem;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 640px) {
    .cs-home-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .cs-home-grid {
        gap: 1.125rem;
    }
}

/* Each card — banner image at top, info bar below */
.cs-home-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: var(--cs-radius-card);
    overflow: hidden;
    background: var(--cs-bg-card);
    border: 1px solid var(--cs-border);
    outline: none;
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition), transform var(--cs-transition);
}

.cs-home-card:hover,
.cs-home-card:focus-visible {
    border-color: rgba(201, 168, 76, 0.35);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.45);
    transform: translateY(-3px);
}

.cs-home-card:focus-visible {
    outline: 2px solid var(--cs-accent);
    outline-offset: 2px;
}

/* Thumb — height driven by the actual image, zero crop guaranteed */
.cs-home-card__thumb {
    position: relative;
    overflow: hidden;
    background: var(--cs-bg-surface);
}

.cs-home-card__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cs-home-card:hover .cs-home-card__img,
.cs-home-card:focus-visible .cs-home-card__img {
    transform: scale(1.03);
}

/* Info bar below the banner image */
.cs-home-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--cs-border);
    background: var(--cs-bg-card);
    flex-shrink: 0;
}

.cs-home-card__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--cs-transition);
}

.cs-home-card:hover .cs-home-card__title {
    color: var(--cs-accent);
}

/* Meta row — year + photo count */
.cs-home-card__meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.cs-home-card__year {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cs-text-muted);
    letter-spacing: 0.04em;
}

/* Photo count badge — stays on the image (top-right corner) */
.cs-home-card__badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 99px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cs-accent);
    z-index: 2;
    pointer-events: none;
}

.cs-home-card__badge .icon {
    font-size: 0.7rem;
}

/* No image fallback */
.cs-home-card--no-img .cs-home-card__thumb {
    background: linear-gradient(135deg, #1a1a2e 0%, #252545 100%);
    min-height: 120px;
}

.cs-home-card__no-img-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: rgba(201, 168, 76, 0.1);
    pointer-events: none;
}

/* =========================================================
   EXHIBITION DETAIL PAGES
   ========================================================= */

/* === Detail hero — height driven by actual image, zero crop === */
.cs-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--cs-radius-hero);
    background: var(--cs-bg-surface);
    margin-bottom: 0;
}

.cs-hero__img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    /* Compact detail hero content for the shorter mobile height */
    .cs-hero__content {
        padding: 0.75rem 1rem 1rem;
    }
    .cs-hero__title {
        font-size: 1rem;
    }
}

.cs-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(26, 26, 10, 0.55) 50%,
        rgba(26, 26, 10, 0.9) 100%
    );
}

.cs-hero__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.75rem 1.75rem;
}

@media (min-width: 768px) {
    .cs-hero__content {
        padding: 2rem 2.25rem 2rem;
    }
}

.cs-hero__breadcrumb {
    --bs-breadcrumb-divider: '/';
    margin-bottom: 0.625rem;
}

.cs-hero__breadcrumb .breadcrumb-item,
.cs-hero__breadcrumb .breadcrumb-item a,
.cs-hero__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
}

.cs-hero__breadcrumb .breadcrumb-item a:hover {
    color: rgba(255, 255, 255, 0.85);
}

.cs-hero__breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.75);
}

.cs-hero__title {
    font-size: clamp(1.375rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
}

/* Back button — top-right corner */
.cs-hero__back {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 1rem;
    z-index: 2;
    transition: background var(--cs-transition), border-color var(--cs-transition), color var(--cs-transition);
}

.cs-hero__back:hover,
.cs-hero__back:focus-visible {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(201, 168, 76, 0.4);
    color: #fff;
    outline: none;
}

/* No cover fallback */
.cs-hero--no-cover {
    background: linear-gradient(135deg, #1a1a2e 0%, #252545 100%) !important;
    min-height: 180px !important;
}

/* === Horizontal tab navigation wrapper (provides right-edge scroll hint) === */
.cs-tab-nav-wrap {
    position: relative;
    margin-bottom: 1.5rem;
}

/* Fade hint at the right edge when tabs overflow */
.cs-tab-nav-wrap::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 2px; /* sit above the bottom border */
    width: 3rem;
    background: linear-gradient(to right, transparent, var(--cs-bg-base));
    pointer-events: none;
    z-index: 1;
}

/* === Horizontal tab navigation === */
.cs-tab-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--cs-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}

.cs-tab-nav::-webkit-scrollbar {
    display: none;
}

.cs-tab-nav li {
    flex-shrink: 0;
}

.cs-tab-nav a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.875rem 1.125rem;
    color: var(--cs-text-soft);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color var(--cs-transition), border-color var(--cs-transition);
}

.cs-tab-nav a:hover {
    color: #fff;
}

.cs-tab-nav li.active a {
    color: #fff;
    border-bottom-color: var(--cs-accent);
}

.cs-tab-nav .tab-count {
    font-size: 0.7rem;
    color: var(--cs-text-muted);
    background: rgba(201, 168, 76, 0.07);
    padding: 0.1em 0.45em;
    border-radius: 99px;
    font-weight: 600;
}

.cs-tab-nav li.active .tab-count {
    background: rgba(201, 168, 76, 0.18);
    color: var(--cs-accent-hover);
}

/* =========================================================
   CONTENT COMPONENTS
   ========================================================= */

/* === Info / rules prose card === */
.cs-info-card {
    background: var(--cs-bg-card);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-card);
    padding: 2rem;
}

@media (min-width: 768px) {
    .cs-info-card {
        padding: 2.5rem 3rem;
    }
}

/* Full-width prose inside info/rules cards — no 72ch cap */
.cs-info-card .cs-info-prose {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.cs-info-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 1.5rem;
}

.cs-info-prose {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--cs-text-soft);
    max-width: var(--cs-max-prose);
    margin-left: auto;
    margin-right: auto;
}

.cs-info-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* TinyMCE rich-text dark theme resets */
.cs-info-prose h1,
.cs-info-prose h2,
.cs-info-prose h3,
.cs-info-prose h4,
.cs-info-prose h5,
.cs-info-prose h6 {
    color: #fff;
    font-weight: 700;
    margin: 1.5em 0 0.5em;
    line-height: 1.25;
}

.cs-info-prose h1 { font-size: 1.5rem; }
.cs-info-prose h2 { font-size: 1.25rem; }
.cs-info-prose h3 { font-size: 1.125rem; }
.cs-info-prose h4,
.cs-info-prose h5,
.cs-info-prose h6 { font-size: 1rem; }

.cs-info-prose p { margin-bottom: 1em; }

.cs-info-prose a {
    color: var(--cs-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--cs-transition);
}

.cs-info-prose a:hover { color: var(--cs-accent-hover); }

.cs-info-prose ul,
.cs-info-prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1em;
}

.cs-info-prose li { margin-bottom: 0.35em; }

.cs-info-prose blockquote {
    border-left: 3px solid var(--cs-accent);
    margin: 1.5em 0;
    padding: 0.75rem 1.25rem;
    background: rgba(201, 168, 76, 0.04);
    color: var(--cs-text-soft);
    font-style: italic;
    border-radius: 0 0.5rem 0.5rem 0;
}

.cs-info-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin-bottom: 1em;
    font-size: 0.9375rem;
}

.cs-info-prose th {
    background: rgba(201, 168, 76, 0.06);
    color: #fff;
    font-weight: 600;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--cs-border);
    text-align: left;
}

.cs-info-prose td {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--cs-border);
    color: var(--cs-text-soft);
}

.cs-info-prose tr:nth-child(even) td {
    background: rgba(201, 168, 76, 0.025);
}

.cs-info-prose strong { color: #fff; font-weight: 700; }
.cs-info-prose em { color: var(--cs-text-soft); font-style: italic; }

/* Explicit list markers — overrides any DashLite/Bootstrap list-style:none reset */
.cs-info-prose ul { list-style: disc; }
.cs-info-prose ol { list-style: decimal; }
.cs-info-prose ul ul,
.cs-info-prose ol ul { list-style: circle; }

/* figure / figcaption — TinyMCE wraps images in <figure class="image"> */
.cs-info-prose figure {
    margin: 1.5em 0;
    max-width: 100%;
}
.cs-info-prose figure img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.cs-info-prose figcaption {
    font-size: 0.8125rem;
    color: var(--cs-text-muted);
    text-align: center;
    margin-top: 0.4rem;
    font-style: italic;
}
.cs-info-prose figure.align-left  { float: left;  margin-right: 1.5em; }
.cs-info-prose figure.align-right { float: right; margin-left:  1.5em; }
.cs-info-prose figure.align-center { text-align: center; }

/* pre / code — dark theme */
.cs-info-prose pre {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--cs-text-soft);
    margin-bottom: 1em;
}
.cs-info-prose code {
    font-size: 0.875em;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0.25rem;
    padding: 0.125em 0.35em;
    color: var(--cs-accent);
}
.cs-info-prose pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* Neutralise TinyMCE inline colour/background-colour styles on dark theme.
   Any element whose style attr contains "color:" is forced to inherit so
   black text (colour-picker default) does not vanish on the dark background. */
.cs-info-prose [style*="color:"] {
    color: inherit !important;
}
.cs-info-prose [style*="background-color:"] {
    background-color: transparent !important;
}

/* === Person cards (curators / jury) === */
.cs-person-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--cs-bg-card);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-card);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition);
}

/* When the card is an <a> element — link to person detail page */
a.cs-person-card {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a.cs-person-card:hover {
    border-color: rgba(201, 168, 76, 0.4);
    box-shadow: var(--cs-shadow-hover);
    color: inherit;
}

/* "Full Profile →" cue inside clickable cards */
.cs-person-profile-cue {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.875rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cs-accent);
    opacity: 0.65;
    transition: opacity var(--cs-transition), gap var(--cs-transition);
}

a.cs-person-card:hover .cs-person-profile-cue {
    opacity: 1;
    gap: 0.6rem;
}

@media (min-width: 768px) {
    .cs-person-card {
        flex-direction: row;
        align-items: flex-start;
    }
}

.cs-person-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--cs-border);
    align-self: center;
}

@media (min-width: 768px) {
    .cs-person-avatar {
        align-self: flex-start;
    }
}

.cs-person-body {
    flex: 1;
}

.cs-person-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}

.cs-person-title-label {
    font-size: 0.8125rem;
    color: var(--cs-accent);
    margin-bottom: 0.875rem;
}

.cs-person-bio {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--cs-text-soft);
}

.cs-person-bio img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* Person card — no-avatar placeholder */
.cs-person-avatar-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid var(--cs-border);
    background: var(--cs-bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(201, 168, 76, 0.2);
    font-size: 2rem;
    align-self: center;
}

@media (min-width: 768px) {
    .cs-person-avatar-placeholder {
        align-self: flex-start;
    }
}

/* === Photo gallery grid === */
.cs-works-grid {
    width: 100%;         /* guarantee full-width even if parent is flex */
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}

.cs-work-card {
    display: block;
    text-decoration: none;
    border-radius: var(--cs-radius-card);
    overflow: hidden;
    background: var(--cs-bg-card);
    border: 1px solid var(--cs-border);
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition), transform var(--cs-transition);
}

.cs-work-card:hover,
.cs-work-card:focus-within {
    border-color: rgba(201, 168, 76, 0.4);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

.cs-work-thumb {
    aspect-ratio: 4 / 3;
    background: var(--cs-bg-surface) var(--thumb) center / cover no-repeat;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.cs-work-card:hover .cs-work-thumb,
.cs-work-card:focus-within .cs-work-thumb {
    transform: scale(1.04);
}

.cs-work-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0.875rem;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.cs-work-card:hover .cs-work-overlay,
.cs-work-card:focus-within .cs-work-overlay {
    opacity: 1;
}

.cs-work-zoom-icon {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    color: var(--cs-accent);
    font-size: 1.125rem;
}

.cs-work-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cs-work-name {
    display: block;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.cs-work-city {
    display: block;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
}

/* =========================================================
   STANDALONE PEOPLE PAGES — Küratörler / Seçici Kurullar
   ========================================================= */

/* Page banner — full-container-width header section */
.cs-page-banner {
    position: relative;
    background: linear-gradient(135deg, var(--cs-bg-surface) 0%, var(--cs-bg-base) 100%);
    border-radius: var(--cs-radius-card);
    border: 1px solid var(--cs-border);
    padding: 3rem 2rem 2.5rem;
    margin-bottom: 2rem;
    text-align: center;
    overflow: hidden;
}

/* Gold radial glow at top */
.cs-page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -10%, rgba(201, 168, 76, 0.1) 0%, transparent 65%);
    pointer-events: none;
}

/* Subtle diagonal grid lines as background texture */
.cs-page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(201, 168, 76, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 168, 76, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.cs-page-banner__inner {
    position: relative;
    z-index: 1;
}

.cs-page-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.25);
    color: var(--cs-accent);
    font-size: 1.625rem;
    margin-bottom: 1.25rem;
}

.cs-page-banner__title {
    font-size: clamp(1.625rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.cs-page-banner__subtitle {
    font-size: 0.9375rem;
    color: var(--cs-text-muted);
    margin-bottom: 1.25rem;
}

.cs-page-banner__count {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.875rem;
    background: rgba(201, 168, 76, 0.08);
    border: 1px solid rgba(201, 168, 76, 0.2);
    border-radius: 2rem;
    color: var(--cs-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Member card grid */
.cs-member-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .cs-member-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .cs-member-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cs-member-card {
    position: relative;
    background: var(--cs-bg-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-card);
    padding: 1.75rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition), transform var(--cs-transition);
}

.cs-member-card:hover {
    border-color: rgba(201, 168, 76, 0.4);
    box-shadow: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.45);
    transform: translateY(-3px);
}

/* Circular avatar — large variant for people pages */
.cs-member-avatar--lg {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(201, 168, 76, 0.2);
    margin-bottom: 1.125rem;
    flex-shrink: 0;
    transition: border-color var(--cs-transition);
}

.cs-member-card:hover .cs-member-avatar--lg {
    border-color: rgba(201, 168, 76, 0.5);
}

.cs-member-avatar-placeholder--lg {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.05);
    border: 2px dashed rgba(201, 168, 76, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(201, 168, 76, 0.35);
    font-size: 2.25rem;
    margin-bottom: 1.125rem;
    flex-shrink: 0;
}

.cs-member-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.cs-member-role {
    font-size: 0.8rem;
    color: var(--cs-accent);
    font-weight: 500;
    margin-bottom: 0.875rem;
    min-height: 1.2em;
}

/* Exhibition association pills */
.cs-member-exhibitions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.cs-member-exhibition-pill {
    position: relative;
    z-index: 2; /* sit above the stretched-link ::after overlay */
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: rgba(201, 168, 76, 0.07);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 2rem;
    font-size: 0.6875rem;
    color: var(--cs-text-soft);
    line-height: 1.45;
    text-decoration: none;
    transition: background var(--cs-transition), border-color var(--cs-transition), color var(--cs-transition);
}

a.cs-member-exhibition-pill:hover {
    background: rgba(201, 168, 76, 0.15);
    border-color: rgba(201, 168, 76, 0.35);
    color: var(--cs-accent);
}

/* Biography excerpt — 3-line clamp, pushed to bottom of card */
.cs-member-bio {
    font-size: 0.8125rem;
    color: var(--cs-text-muted);
    line-height: 1.65;
    text-align: left;
    width: 100%;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cs-border);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === Empty state === */
.cs-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--cs-text-muted);
}

.cs-empty-state .icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    color: rgba(201, 168, 76, 0.1);
}

.cs-empty-state p {
    font-size: 0.9375rem;
    margin-bottom: 0.875rem;
}

.cs-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cs-accent);
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background var(--cs-transition), border-color var(--cs-transition), color var(--cs-transition);
}

.cs-empty-cta:hover {
    background: rgba(201, 168, 76, 0.08);
    border-color: rgba(201, 168, 76, 0.6);
    color: var(--cs-accent-hover);
}

/* =========================================================
   FOOTER
   ========================================================= */

.cs-footer {
    background: rgba(26, 26, 46, 0.98);
    border-top: 1px solid var(--cs-border);
    padding: 2.5rem 0 1.5rem;
}

.cs-footer__title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
}

.cs-footer__text {
    font-size: 0.8125rem;
    color: var(--cs-text-muted);
    line-height: 1.6;
}

.cs-social-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.cs-social-links .btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.875rem;
    color: var(--cs-text-muted);
    border-color: var(--cs-border);
    transition: color var(--cs-transition), border-color var(--cs-transition), background var(--cs-transition);
}

.cs-social-links .btn:hover {
    color: var(--cs-accent);
    border-color: rgba(201, 168, 76, 0.4);
    background: rgba(201, 168, 76, 0.06);
}

.cs-footer-lang {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.cs-footer-lang a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    color: var(--cs-text-muted);
    border: 1px solid var(--cs-border);
    border-radius: 0.375rem;
    text-decoration: none;
    transition: color var(--cs-transition), border-color var(--cs-transition);
}

.cs-footer-lang a:hover {
    color: var(--cs-accent);
    border-color: rgba(201, 168, 76, 0.4);
}

.cs-footer-links li {
    padding: 0.1rem 0;
}

.cs-footer-links a {
    font-size: 0.8125rem;
    color: var(--cs-text-muted);
    text-decoration: none;
    transition: color var(--cs-transition);
}

.cs-footer-links a:hover {
    color: var(--cs-accent);
}

.cs-footer-divider {
    border: none;
    border-top: 1px solid var(--cs-border);
    margin: 0.5rem 0;
    opacity: 1;
}

.cs-footer__copyright {
    font-size: 0.75rem;
    color: var(--cs-text-muted);
    text-align: center;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--cs-border);
}

/* =========================================================
   FLAG SPRITES
   ========================================================= */
/* @formatter:off */
.flag{width:16px;height:11px;background:url(../images/flags.png) no-repeat;}
.flag.flag-ad{background-position:-16px 0;}
.flag.flag-ae{background-position:-32px 0;}
.flag.flag-af{background-position:-48px 0;}
.flag.flag-ag{background-position:-64px 0;}
.flag.flag-ai{background-position:-80px 0;}
.flag.flag-al{background-position:-96px 0;}
.flag.flag-am{background-position:-112px 0;}
.flag.flag-an{background-position:-128px 0;}
.flag.flag-ao{background-position:-144px 0;}
.flag.flag-ar{background-position:-160px 0;}
.flag.flag-as{background-position:-176px 0;}
.flag.flag-at{background-position:-192px 0;}
.flag.flag-au{background-position:-208px 0;}
.flag.flag-aw{background-position:-224px 0;}
.flag.flag-az{background-position:-240px 0;}
.flag.flag-ba{background-position:0 -11px;}
.flag.flag-bb{background-position:-16px -11px;}
.flag.flag-bd{background-position:-32px -11px;}
.flag.flag-be{background-position:-48px -11px;}
.flag.flag-bf{background-position:-64px -11px;}
.flag.flag-bg{background-position:-80px -11px;}
.flag.flag-bh{background-position:-96px -11px;}
.flag.flag-bi{background-position:-112px -11px;}
.flag.flag-bj{background-position:-128px -11px;}
.flag.flag-bm{background-position:-144px -11px;}
.flag.flag-bn{background-position:-160px -11px;}
.flag.flag-bo{background-position:-176px -11px;}
.flag.flag-br{background-position:-192px -11px;}
.flag.flag-bs{background-position:-208px -11px;}
.flag.flag-bt{background-position:-224px -11px;}
.flag.flag-bv{background-position:-240px -11px;}
.flag.flag-bw{background-position:0 -22px;}
.flag.flag-by{background-position:-16px -22px;}
.flag.flag-bz{background-position:-32px -22px;}
.flag.flag-ca{background-position:-48px -22px;}
.flag.flag-catalonia{background-position:-64px -22px;}
.flag.flag-cd{background-position:-80px -22px;}
.flag.flag-cf{background-position:-96px -22px;}
.flag.flag-cg{background-position:-112px -22px;}
.flag.flag-ch{background-position:-128px -22px;}
.flag.flag-ci{background-position:-144px -22px;}
.flag.flag-ck{background-position:-160px -22px;}
.flag.flag-cl{background-position:-176px -22px;}
.flag.flag-cm{background-position:-192px -22px;}
.flag.flag-cn{background-position:-208px -22px;}
.flag.flag-co{background-position:-224px -22px;}
.flag.flag-cr{background-position:-240px -22px;}
.flag.flag-cu{background-position:0 -33px;}
.flag.flag-cv{background-position:-16px -33px;}
.flag.flag-cw{background-position:-32px -33px;}
.flag.flag-cy{background-position:-48px -33px;}
.flag.flag-cz{background-position:-64px -33px;}
.flag.flag-de{background-position:-80px -33px;}
.flag.flag-dj{background-position:-96px -33px;}
.flag.flag-dk{background-position:-112px -33px;}
.flag.flag-dm{background-position:-128px -33px;}
.flag.flag-do{background-position:-144px -33px;}
.flag.flag-dz{background-position:-160px -33px;}
.flag.flag-ec{background-position:-176px -33px;}
.flag.flag-ee{background-position:-192px -33px;}
.flag.flag-eg{background-position:-208px -33px;}
.flag.flag-eh{background-position:-224px -33px;}
.flag.flag-england{background-position:-240px -33px;}
.flag.flag-er{background-position:0 -44px;}
.flag.flag-es{background-position:-16px -44px;}
.flag.flag-et{background-position:-32px -44px;}
.flag.flag-eu{background-position:-48px -44px;}
.flag.flag-fi{background-position:-64px -44px;}
.flag.flag-fj{background-position:-80px -44px;}
.flag.flag-fk{background-position:-96px -44px;}
.flag.flag-fm{background-position:-112px -44px;}
.flag.flag-fo{background-position:-128px -44px;}
.flag.flag-fr{background-position:-144px -44px;}
.flag.flag-ga{background-position:-160px -44px;}
.flag.flag-gb{background-position:-176px -44px;}
.flag.flag-gd{background-position:-192px -44px;}
.flag.flag-ge{background-position:-208px -44px;}
.flag.flag-gf{background-position:-224px -44px;}
.flag.flag-gg{background-position:-240px -44px;}
.flag.flag-gh{background-position:0 -55px;}
.flag.flag-gi{background-position:-16px -55px;}
.flag.flag-gl{background-position:-32px -55px;}
.flag.flag-gm{background-position:-48px -55px;}
.flag.flag-gn{background-position:-64px -55px;}
.flag.flag-gp{background-position:-80px -55px;}
.flag.flag-gq{background-position:-96px -55px;}
.flag.flag-gr{background-position:-112px -55px;}
.flag.flag-gs{background-position:-128px -55px;}
.flag.flag-gt{background-position:-144px -55px;}
.flag.flag-gu{background-position:-160px -55px;}
.flag.flag-gw{background-position:-176px -55px;}
.flag.flag-gy{background-position:-192px -55px;}
.flag.flag-hk{background-position:-208px -55px;}
.flag.flag-hm{background-position:-224px -55px;}
.flag.flag-hn{background-position:-240px -55px;}
.flag.flag-hr{background-position:0 -66px;}
.flag.flag-ht{background-position:-16px -66px;}
.flag.flag-hu{background-position:-32px -66px;}
.flag.flag-ic{background-position:-48px -66px;}
.flag.flag-id{background-position:-64px -66px;}
.flag.flag-ie{background-position:-80px -66px;}
.flag.flag-il{background-position:-96px -66px;}
.flag.flag-im{background-position:-112px -66px;}
.flag.flag-in{background-position:-128px -66px;}
.flag.flag-io{background-position:-144px -66px;}
.flag.flag-iq{background-position:-160px -66px;}
.flag.flag-ir{background-position:-176px -66px;}
.flag.flag-is{background-position:-192px -66px;}
.flag.flag-it{background-position:-208px -66px;}
.flag.flag-je{background-position:-224px -66px;}
.flag.flag-jm{background-position:-240px -66px;}
.flag.flag-jo{background-position:0 -77px;}
.flag.flag-jp{background-position:-16px -77px;}
.flag.flag-ke{background-position:-32px -77px;}
.flag.flag-kg{background-position:-48px -77px;}
.flag.flag-kh{background-position:-64px -77px;}
.flag.flag-ki{background-position:-80px -77px;}
.flag.flag-km{background-position:-96px -77px;}
.flag.flag-kn{background-position:-112px -77px;}
.flag.flag-kp{background-position:-128px -77px;}
.flag.flag-kr{background-position:-144px -77px;}
.flag.flag-kurdistan{background-position:-160px -77px;}
.flag.flag-kw{background-position:-176px -77px;}
.flag.flag-ky{background-position:-192px -77px;}
.flag.flag-kz{background-position:-208px -77px;}
.flag.flag-la{background-position:-224px -77px;}
.flag.flag-lb{background-position:-240px -77px;}
.flag.flag-lc{background-position:0 -88px;}
.flag.flag-li{background-position:-16px -88px;}
.flag.flag-lk{background-position:-32px -88px;}
.flag.flag-lr{background-position:-48px -88px;}
.flag.flag-ls{background-position:-64px -88px;}
.flag.flag-lt{background-position:-80px -88px;}
.flag.flag-lu{background-position:-96px -88px;}
.flag.flag-lv{background-position:-112px -88px;}
.flag.flag-ly{background-position:-128px -88px;}
.flag.flag-ma{background-position:-144px -88px;}
.flag.flag-mc{background-position:-160px -88px;}
.flag.flag-md{background-position:-176px -88px;}
.flag.flag-me{background-position:-192px -88px;}
.flag.flag-mg{background-position:-208px -88px;}
.flag.flag-mh{background-position:-224px -88px;}
.flag.flag-mk{background-position:-240px -88px;}
.flag.flag-ml{background-position:0 -99px;}
.flag.flag-mm{background-position:-16px -99px;}
.flag.flag-mn{background-position:-32px -99px;}
.flag.flag-mo{background-position:-48px -99px;}
.flag.flag-mp{background-position:-64px -99px;}
.flag.flag-mq{background-position:-80px -99px;}
.flag.flag-mr{background-position:-96px -99px;}
.flag.flag-ms{background-position:-112px -99px;}
.flag.flag-mt{background-position:-128px -99px;}
.flag.flag-mu{background-position:-144px -99px;}
.flag.flag-mv{background-position:-160px -99px;}
.flag.flag-mw{background-position:-176px -99px;}
.flag.flag-mx{background-position:-192px -99px;}
.flag.flag-my{background-position:-208px -99px;}
.flag.flag-mz{background-position:-224px -99px;}
.flag.flag-na{background-position:-240px -99px;}
.flag.flag-nc{background-position:0 -110px;}
.flag.flag-ne{background-position:-16px -110px;}
.flag.flag-nf{background-position:-32px -110px;}
.flag.flag-ng{background-position:-48px -110px;}
.flag.flag-ni{background-position:-64px -110px;}
.flag.flag-nl{background-position:-80px -110px;}
.flag.flag-no{background-position:-96px -110px;}
.flag.flag-np{background-position:-112px -110px;}
.flag.flag-nr{background-position:-128px -110px;}
.flag.flag-nu{background-position:-144px -110px;}
.flag.flag-nz{background-position:-160px -110px;}
.flag.flag-om{background-position:-176px -110px;}
.flag.flag-pa{background-position:-192px -110px;}
.flag.flag-pe{background-position:-208px -110px;}
.flag.flag-pf{background-position:-224px -110px;}
.flag.flag-pg{background-position:-240px -110px;}
.flag.flag-ph{background-position:0 -121px;}
.flag.flag-pk{background-position:-16px -121px;}
.flag.flag-pl{background-position:-32px -121px;}
.flag.flag-pm{background-position:-48px -121px;}
.flag.flag-pn{background-position:-64px -121px;}
.flag.flag-pr{background-position:-80px -121px;}
.flag.flag-ps{background-position:-96px -121px;}
.flag.flag-pt{background-position:-112px -121px;}
.flag.flag-pw{background-position:-128px -121px;}
.flag.flag-py{background-position:-144px -121px;}
.flag.flag-qa{background-position:-160px -121px;}
.flag.flag-re{background-position:-176px -121px;}
.flag.flag-ro{background-position:-192px -121px;}
.flag.flag-rs{background-position:-208px -121px;}
.flag.flag-ru{background-position:-224px -121px;}
.flag.flag-rw{background-position:-240px -121px;}
.flag.flag-sa{background-position:0 -132px;}
.flag.flag-sb{background-position:-16px -132px;}
.flag.flag-sc{background-position:-32px -132px;}
.flag.flag-scotland{background-position:-48px -132px;}
.flag.flag-sd{background-position:-64px -132px;}
.flag.flag-se{background-position:-80px -132px;}
.flag.flag-sg{background-position:-96px -132px;}
.flag.flag-sh{background-position:-112px -132px;}
.flag.flag-si{background-position:-128px -132px;}
.flag.flag-sk{background-position:-144px -132px;}
.flag.flag-sl{background-position:-160px -132px;}
.flag.flag-sm{background-position:-176px -132px;}
.flag.flag-sn{background-position:-192px -132px;}
.flag.flag-so{background-position:-208px -132px;}
.flag.flag-somaliland{background-position:-224px -132px;}
.flag.flag-sr{background-position:-240px -132px;}
.flag.flag-ss{background-position:0 -143px;}
.flag.flag-st{background-position:-16px -143px;}
.flag.flag-sv{background-position:-32px -143px;}
.flag.flag-sx{background-position:-48px -143px;}
.flag.flag-sy{background-position:-64px -143px;}
.flag.flag-sz{background-position:-80px -143px;}
.flag.flag-tc{background-position:-96px -143px;}
.flag.flag-td{background-position:-112px -143px;}
.flag.flag-tf{background-position:-128px -143px;}
.flag.flag-tg{background-position:-144px -143px;}
.flag.flag-th{background-position:-160px -143px;}
.flag.flag-tibet{background-position:-176px -143px;}
.flag.flag-tj{background-position:-192px -143px;}
.flag.flag-tk{background-position:-208px -143px;}
.flag.flag-tl{background-position:-224px -143px;}
.flag.flag-tm{background-position:-240px -143px;}
.flag.flag-tn{background-position:0 -154px;}
.flag.flag-to{background-position:-16px -154px;}
.flag.flag-tr{background-position:-32px -154px;}
.flag.flag-tt{background-position:-48px -154px;}
.flag.flag-tv{background-position:-64px -154px;}
.flag.flag-tw{background-position:-80px -154px;}
.flag.flag-tz{background-position:-96px -154px;}
.flag.flag-ua{background-position:-112px -154px;}
.flag.flag-ug{background-position:-128px -154px;}
.flag.flag-um{background-position:-144px -154px;}
.flag.flag-en{background-position:-160px -154px;}
.flag.flag-uy{background-position:-176px -154px;}
.flag.flag-uz{background-position:-192px -154px;}
.flag.flag-va{background-position:-208px -154px;}
.flag.flag-vc{background-position:-224px -154px;}
.flag.flag-ve{background-position:-240px -154px;}
.flag.flag-vg{background-position:0 -165px;}
.flag.flag-vi{background-position:-16px -165px;}
.flag.flag-vn{background-position:-32px -165px;}
.flag.flag-vu{background-position:-48px -165px;}
.flag.flag-wales{background-position:-64px -165px;}
.flag.flag-wf{background-position:-80px -165px;}
.flag.flag-ws{background-position:-96px -165px;}
.flag.flag-xk{background-position:-112px -165px;}
.flag.flag-ye{background-position:-128px -165px;}
.flag.flag-yt{background-position:-144px -165px;}
.flag.flag-za{background-position:-160px -165px;}
.flag.flag-zanzibar{background-position:-176px -165px;}
.flag.flag-zm{background-position:-192px -165px;}
.flag.flag-zw{background-position:-208px -165px;}
/* @formatter:on */

/* =========================================================
   MOBILE NAV — Dark-theme drawer + modern hamburger
   ========================================================= */

/* Frosted-glass backdrop */
.nk-header-overlay {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Drawer panel + nav link overrides — mobile only (< 992px = drawer mode) */
@media (max-width: 991px) {
    .nk-header-menu {
        background: var(--cs-bg-base) !important;
        border-right: 1px solid var(--cs-border);
        box-shadow: 6px 0 40px rgba(0, 0, 0, 0.55);
    }

    /* Top strip inside drawer (logo + close btn) */
    .nk-header-mobile {
        background: var(--cs-bg-surface) !important;
        border-bottom: 1px solid var(--cs-border);
    }

    /* Nav links inside drawer */
    .nk-header-menu .nk-menu-link {
        color: var(--cs-text-soft) !important;
        font-size: 0.9375rem;
        border-radius: 0.5rem;
    }
    .nk-header-menu .nk-menu-link:hover,
    .nk-header-menu .nk-menu-item.active > .nk-menu-link {
        color: var(--cs-accent) !important;
        background: rgba(201, 168, 76, 0.08) !important;
    }

    /* Submenu items */
    .nk-header-menu .nk-menu-sub .nk-menu-link {
        color: var(--cs-text-muted) !important;
        font-size: 0.875rem;
    }
    .nk-header-menu .nk-menu-sub .nk-menu-link:hover {
        color: var(--cs-accent) !important;
        background: rgba(201, 168, 76, 0.05) !important;
    }

    /* Submenu toggle chevron */
    .nk-header-menu .nk-menu-toggle::after {
        border-color: var(--cs-text-muted) !important;
    }
}

/* Close button inside drawer — circular gold-on-hover */
.nk-header-mobile .nk-nav-toggle {
    color: var(--cs-text-soft) !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    border: 1px solid var(--cs-border) !important;
    background: transparent;
    transition: background var(--cs-transition), color var(--cs-transition), border-color var(--cs-transition);
}
.nk-header-mobile .nk-nav-toggle:hover {
    background: rgba(201, 168, 76, 0.1) !important;
    border-color: rgba(201, 168, 76, 0.35) !important;
    color: var(--cs-accent) !important;
}

/* Hamburger trigger button — modern bordered style */
.nk-menu-trigger .nk-nav-toggle {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid var(--cs-border);
    color: var(--cs-text-soft) !important;
    background: rgba(201, 168, 76, 0.03);
    font-size: 1.25rem;
    transition: background var(--cs-transition), border-color var(--cs-transition), color var(--cs-transition);
}
.nk-menu-trigger .nk-nav-toggle:hover,
.nk-menu-trigger .nk-nav-toggle.active {
    background: rgba(201, 168, 76, 0.1);
    border-color: rgba(201, 168, 76, 0.4);
    color: var(--cs-accent) !important;
}

/* Language switcher inside mobile drawer */
.cs-mobile-lang {
    display: flex;
    gap: 0.625rem;
    padding: 1.125rem 1.25rem;
    margin: 0.5rem 0.75rem;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-card);
    background: rgba(201, 168, 76, 0.03);
}
.cs-mobile-lang .cs-lang-btn {
    flex: 1;
    justify-content: center;
    padding: 0.55rem 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--cs-border);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
}
.cs-mobile-lang .cs-lang-btn.active {
    background: rgba(201, 168, 76, 0.12);
    border-color: rgba(201, 168, 76, 0.45);
    color: var(--cs-accent);
}

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

/* Mobile: prevent exhibition hero title overlapping back button.
   Home hero has no back button — only exhibition detail heroes need this. */
@media (max-width: 480px) {
    .cs-hero__content { padding-right: 3.5rem; }
}

/* Touch devices: always show work overlay with meta; hide the desktop zoom icon */
@media (hover: none) {
    .cs-work-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, transparent 55%);
    }
    .cs-work-zoom-icon {
        display: none;
    }
}

/* Ultra-wide (1600px+): cap content width */
@media (min-width: 1600px) {
    .cs-home-hero__content { max-width: 50%; }
    .cs-hero__content      { max-width: 900px; }
}

/* =========================================================
   MOBILE — Home page & general layout (< 576px)
   ========================================================= */

@media (max-width: 575px) {

    .cs-home-hero {
        border-radius: 0.875rem;
    }

    /* Compact overlay content to fit within the naturally short mobile hero */
    .cs-home-hero__eyebrow { display: none; }
    .cs-home-hero__scroll  { display: none; }
    .cs-home-hero__content {
        padding: 0.75rem 1rem 1rem;
    }
    .cs-home-hero__title {
        font-size: 0.9375rem;
        letter-spacing: -0.01em;
        margin-bottom: 0.5rem;
    }
    .cs-home-hero__cta {
        font-size: 0.75rem;
        padding: 0.375rem 0.875rem;
    }

    /* Stats bar — horizontal compact (3 stats fit with reduced padding) */
    .cs-stats-bar {
        border-radius: 0.75rem;
        margin-bottom: 1.75rem;
    }
    .cs-stat-item {
        padding: 1rem 0.5rem;
    }
    .cs-stat-number {
        font-size: 1.375rem;
        margin-bottom: 0.15rem;
    }
    .cs-stat-label {
        font-size: 0.625rem;
        letter-spacing: 0.04em;
    }

    /* Gallery header */
    .cs-home-gallery__header {
        margin-bottom: 0.875rem;
    }
    .cs-home-gallery__title {
        font-size: 0.875rem;
    }

    /* Page banner — tighter vertical padding */
    .cs-page-banner {
        padding: 1.75rem 1.25rem 1.5rem;
        border-radius: 0.875rem;
    }
    .cs-page-banner__icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
        margin-bottom: 0.875rem;
    }
    .cs-page-banner__title {
        font-size: 1.5rem;
    }
    .cs-page-banner__subtitle {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    /* Member grid — single column on very small screens */
    .cs-member-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    /* Exhibition tab menu — tighter font */
    .cs-tab-nav a {
        font-size: 0.8rem;
        padding: 0.75rem 0.75rem;
    }

    /* Profile hero */
    .cs-profile-name { font-size: 1.375rem; }

    /* Info / rules card */
    .cs-info-card {
        padding: 1.25rem;
        border-radius: 0.875rem;
    }

    /* Pagination */
    .cs-pagination-wrap .page-link {
        padding: 0.35rem 0.65rem;
        font-size: 0.8125rem;
    }
}

/* =========================================================
   BIO DETAILS / READ-MORE EXPANSION (2-C)
   ========================================================= */

.cs-member-bio-details {
    width: 100%;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--cs-border);
}

.cs-member-bio-summary {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cs-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    user-select: none;
}

.cs-member-bio-summary::-webkit-details-marker { display: none; }

.cs-member-bio-summary::after {
    content: '▸';
    font-size: 0.65rem;
    transition: transform var(--cs-transition);
    display: inline-block;
}

.cs-member-bio-details[open] .cs-member-bio-summary::after {
    transform: rotate(90deg);
}

.cs-member-bio-details .cs-member-bio {
    /* Override the clamp when expanded via <details> */
    -webkit-line-clamp: unset;
    overflow: visible;
    padding-top: 0.625rem;
    border-top: none;
    margin-top: 0;
}

/* =========================================================
   PEOPLE SEARCH — Curators / Jury pages (3-B)
   ========================================================= */

/* Hidden card during people search */
.cs-hidden {
    display: none !important;
}

.cs-people-search-wrap {
    position: relative;
    margin-bottom: 2rem;
}

.cs-people-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cs-text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.cs-people-search {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: var(--cs-bg-surface);
    border: 1px solid var(--cs-border);
    border-radius: 0.625rem;
    color: var(--cs-text-soft);
    font-size: 0.9375rem;
    outline: none;
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition);
    -webkit-appearance: none;
}

.cs-people-search::placeholder {
    color: var(--cs-text-muted);
}

.cs-people-search:focus {
    border-color: rgba(201, 168, 76, 0.4);
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.1);
}

/* No-results state for people search */
.cs-search-no-results {
    display: none;
    text-align: center;
    padding: 2rem;
    color: var(--cs-text-muted);
    font-size: 0.9375rem;
    grid-column: 1 / -1;
}

/* =========================================================
   HOMEPAGE STATISTICS BAR (3-C)
   ========================================================= */

.cs-stats-bar {
    display: flex;
    gap: 0;
    justify-content: center;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-card);
    background: var(--cs-bg-surface);
    margin-bottom: 2.5rem;
    overflow: hidden;
}

.cs-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    border-right: 1px solid var(--cs-border);
    text-align: center;
}

.cs-stat-item:last-child {
    border-right: none;
}

.cs-stat-number {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    color: var(--cs-accent);
    line-height: 1;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}

.cs-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--cs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* =========================================================
   SAFE-AREA (notched phones) (2-E)
   ========================================================= */

@supports (padding: max(0px)) {
    /* Detail-page hero needs 4rem right padding to clear the back button */
    .cs-hero__content {
        padding-left:  max(1.5rem, env(safe-area-inset-left));
        padding-right: max(3.5rem, env(safe-area-inset-right));
    }
    /* Home hero has no back button — normal safe-area only */
    .cs-home-hero__content {
        padding-left:  max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
    }
    .cs-footer {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
}

/* =========================================================
   REDUCED-MOTION (1-C)
   ========================================================= */

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

/* =========================================================
   SECTION HEADING — Related exhibitions (C-1)
   ========================================================= */

.cs-section-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cs-text-soft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--cs-border);
}

/* =========================================================
   PAGINATION — Photos tab (B)
   ========================================================= */

.cs-pagination-wrap {
    display: flex;
    justify-content: center;
    padding: 2rem 0 0.5rem;
}

/* Override Bootstrap pagination with cs-* dark theme */
.cs-pagination-wrap .pagination {
    gap: 0.25rem;
}

.cs-pagination-wrap .page-item .page-link {
    background: var(--cs-bg-surface);
    border-color: var(--cs-border);
    color: var(--cs-text-soft);
    border-radius: var(--cs-radius-pill) !important;
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background var(--cs-transition), color var(--cs-transition), border-color var(--cs-transition);
    min-width: 2.25rem;
    text-align: center;
}

.cs-pagination-wrap .page-item .page-link:hover {
    background: rgba(201, 168, 76, 0.1);
    border-color: rgba(201, 168, 76, 0.3);
    color: #fff;
}

.cs-pagination-wrap .page-item.active .page-link,
.cs-pagination-wrap .page-item.active span.page-link {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: #1a1a2e;
    font-weight: 700;
}

.cs-pagination-wrap .page-item.disabled .page-link {
    opacity: 0.35;
    pointer-events: none;
}

/* =========================================================
   PRINT STYLES — Participation rules (C-3)
   ========================================================= */

@media print {
    .cs-site-header,
    #cs-site-header,
    .cs-footer,
    .cs-tab-nav-wrap,
    .nk-header {
        display: none !important;
    }

    body,
    .nk-body,
    .nk-app-root,
    .nk-main,
    .nk-wrap {
        background: #fff !important;
        color: #000 !important;
    }

    .cs-info-prose {
        max-width: 100%;
        color: #000;
    }

    .cs-info-card {
        box-shadow: none;
        border: none;
        padding: 0;
        background: transparent;
    }
}

/* =========================================================
   PERSON DETAIL PAGE — .cs-profile-*
   ========================================================= */

/* Hero card — centred avatar + name + exhibition pills */
.cs-profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem 2.25rem;
    background: var(--cs-bg-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-hero);
    box-shadow: var(--cs-shadow-card);
}

/* Large circular avatar */
.cs-profile-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(201, 168, 76, 0.45);
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.08);
}

.cs-profile-avatar-placeholder {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(201, 168, 76, 0.06);
    border: 2px dashed rgba(201, 168, 76, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(201, 168, 76, 0.4);
    font-size: 4rem;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.cs-profile-name {
    font-size: clamp(1.375rem, 4vw, 2rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 0.375rem;
}

.cs-profile-role {
    font-size: 0.9375rem;
    color: var(--cs-accent);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

/* Exhibition pills row — reuses .cs-member-exhibition-pill, centred */
.cs-profile-exhibitions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.25rem;
}

/* Biography section card */
.cs-profile-bio-section {
    background: var(--cs-bg-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-card);
    padding: 2rem 2rem 1.75rem;
    box-shadow: var(--cs-shadow-card);
}

.cs-profile-bio-section .cs-info-prose {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.cs-profile-bio-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cs-accent);
    margin-bottom: 1.25rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--cs-border);
}

/* Back navigation link */
.cs-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cs-text-muted);
    text-decoration: none;
    transition: color var(--cs-transition), gap var(--cs-transition);
}

.cs-profile-back:hover {
    color: var(--cs-accent);
    gap: 0.7rem;
}

/* "View Profile" button — stretched-link pattern.
   position must NOT be relative so that ::after anchors to .cs-member-card
   (the nearest position:relative ancestor). */
.cs-member-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0.45rem 1.1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cs-accent);
    background: rgba(201, 168, 76, 0.06);
    border: 1px solid rgba(201, 168, 76, 0.3);
    border-radius: 2rem;
    text-decoration: none;
    transition: background var(--cs-transition), border-color var(--cs-transition),
                color var(--cs-transition), gap var(--cs-transition);
}

/* The ::after covers the whole card — clicking anywhere on the card navigates to profile.
   Exhibition pills have z-index:2 so they remain independently clickable above this layer. */
.cs-member-profile-btn::after {
    content: '';
    position: absolute; /* anchors to .cs-member-card (position:relative) */
    inset: 0;
    z-index: 1;
}

.cs-member-card:hover .cs-member-profile-btn {
    background: rgba(201, 168, 76, 0.14);
    border-color: rgba(201, 168, 76, 0.55);
    gap: 0.6rem;
}