/* ============================================================
   ATINATI Landing Page — Figma "Final Design" implementation
   Design tokens & section styles (node 13:4823)
   ============================================================ */

:root {
    /* Color/Background */
    --at-bg-primary: #edebea;
    --at-bg-tertiary: #d5cfcd;
    /* Color/Text */
    --at-text-primary: #141414;
    --at-text-secondary: #5d5d5d;
    --at-text-tertiary: #888888;
    /* Color/Border */
    --at-border-primary: #141414;
    --at-border-tertiary: #b0b0b0;
    /* Typography */
    /* 'Roboto' maps to FiraGO in fonts-ka.css — Georgian glyph fallback */
    /* One typeface across the whole site: headings and body alike. Roboto also
       carries the Georgian glyphs, so both language versions match. */
    --at-font-display: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --at-font-text: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    /* Exception: the header navigation keeps its original Ranade. Ranade has no
       Georgian glyphs, so the Georgian menu falls through to Roboto per
       character — the same behaviour the header had before. */
    --at-font-nav: 'Ranade', 'Roboto', sans-serif;
}

body {
    background-color: var(--at-bg-primary);
}

/* ------------------------------------------------------------
   Global max-width — cap the layout to a laptop width and centre
   it so the design does not fluid-stretch on large monitors.
   The body background still fills the full viewport.
   ------------------------------------------------------------ */
:root { --at-max: 1440px; }

.content-wrapper,
header.container,
.site-footer .new-footer-container {
    max-width: var(--at-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* ------------------------------------------------------------
   style_v3.css forces `New Transport 16px/1.7 #4e4e4e !important`
   on every p/span/div/label inside .content-wrapper. The landing
   sections must win back their Figma typography with equal force.
   ------------------------------------------------------------ */

.content-wrapper .landing-hero-card p {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-secondary) !important;
}

.content-wrapper .landing-gallery-author,
.content-wrapper .landing-gallery-meta,
.content-wrapper .landing-gallery-excerpt {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-secondary) !important;
}

.content-wrapper .exhibition-text p,
.content-wrapper #landing-overlay-description,
.content-wrapper #landing-overlay-region {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-secondary) !important;
}

.content-wrapper .date-label {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--at-text-secondary) !important;
}

.content-wrapper .date-value {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    color: var(--at-text-primary) !important;
}

.content-wrapper .map-sidebar .filter-btn-label {
    font-family: var(--at-font-text) !important;
    font-size: 13px !important;
    line-height: 20px !important;
    color: #333 !important;
}

.content-wrapper .map-sidebar input[type="checkbox"]:checked + .filter-btn-label {
    color: #fff !important;
}

/* ============================================================
   0. Header overrides (Header navigation — node 563:19835)
   ============================================================ */

/* Header spans full width with 16px gutters (Figma p-16) */
header.container {
    max-width: none;
    width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
    background: var(--at-bg-primary) !important;
}

.header-container {
    padding-top: 16px;
    padding-bottom: 20px;
    align-items: end;
}

/* Logo (Figma node 563:19841): mark ~90x89 + gap + wordmark ~173 (10% smaller).
   The mark is a mask — slider photos/colors show through the SVG shape. */
.h-slider {
    width: 90px;
    height: 89px;
    margin: 0 auto 24px;
    overflow: visible;
}

.header-slider {
    width: 90px;
    height: 89px;
    -webkit-mask-image: url(/web/img/atinati-mark-mask.svg);
    mask-image: url(/web/img/atinati-mark-mask.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.header-slider .slick-list,
.header-slider .slick-track,
.header-slider a,
.header-slider img {
    height: 89px !important;
}

.logo2 {
    width: 173px;
}

/* Search + language actions (right group) */
.header-container--right {
    gap: 16px;
}

/* Figma search-md icon: 24px */
.inline-search-icon {
    width: 24px;
    height: 24px;
}

#inlineSearchInput {
    font-family: var(--at-font-text);
    padding-right: 32px;
}

.menu-lang-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--at-border-primary);
    border-radius: 24px;
    padding: 4px 8px;
    gap: 8px;
    background: transparent;
}
.menu-lang-pill .lang-form { margin: 0; display: inline-flex; }
.menu-lang-pill button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.menu-lang-pill button {
    font-family: var(--at-font-text);
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: var(--at-text-primary);
}

/* Figma shows both languages at once: inactive gray, active dark */
.menu-lang-pill button:not(.active) {
    display: inline-block;
    color: var(--at-text-tertiary);
}

.menu-lang-pill .slash {
    display: none !important;
}

/* Navigation bar: centered pill items (node 951:12640).
   More gap above (logo↔menu), less below (menu↔slider). */
#menu {
    margin-top: 6px;
    margin-bottom: 0;
}

#menu .menu {
    justify-content: center !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 52px;
    margin: 0;
    padding: 0;
}

.menu .menu-item {
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--at-bg-primary);
    transition: background 0.2s ease;
}

/* Below the 1440 cap the nav has less real room than at laptop resolution
   (11 items incl. VIDEOS). Tighten spacing so it still holds one row down
   to ~1180px; the desktop nav is hidden below 1024px in favour of the
   mobile menu, so this range is the only one that needs the safety margin. */
@media (max-width: 1439px) and (min-width: 1025px) {
    #menu .menu {
        gap: 2px;
    }
    .menu .menu-item {
        padding: 4px 6px;
    }
    .menu .menu-item > a {
        font-size: 15px;
    }
}

.menu .menu-item:hover {
    background: #e2dfde;
}

.menu .menu-item > a {
    font-family: var(--at-font-nav);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--at-text-primary);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* "About Atinati" dropdown (Figma node 954:14646) */
.menu .menu-item--about {
    position: relative;
}
/* Invisible hover bridge to the dropdown — a ::after strip instead of
   padding-bottom, so the "ABOUT" text stays vertically aligned with the
   other menu items (padding-bottom nudged it ~2px off). */
.menu .menu-item--about::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.about-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 336px;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 4px;
    background: var(--at-bg-primary);
    border: 1px solid var(--at-border-primary);
    border-radius: 8px;
    box-shadow: 0px 12px 16px -4px rgba(20, 20, 20, 0.08);
    z-index: 9999999;
    list-style: none;
    margin: 0;
}

.menu .menu-item--about:hover .about-dropdown {
    display: flex;
}

.about-dropdown-item {
    padding: 0;
    margin: 0;
    list-style: none;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.about-dropdown-item:hover {
    background: #e2dfde;
}

.menu .about-dropdown-item > a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    text-decoration: none;
    text-transform: none;
}

.about-dropdown-title {
    font-family: var(--at-font-nav);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-transform: uppercase;
    color: var(--at-text-primary);
}

.about-dropdown-desc {
    font-family: var(--at-font-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: var(--at-text-tertiary);
    text-transform: none;
}

/* ------------------------------------------------------------
   Tablet / mobile header logo (≤1024px)
   landing.css loads after style_v3.css, so the desktop 100px
   .h-slider/.header-slider rules above leak into the mobile
   header and clip the logo. Re-assert compact sizes here so the
   mark + wordmark fit inside the mobile header bar.
   ------------------------------------------------------------ */
@media only screen and (max-width: 1024px) {
    /* Figma mobile header (node 114:223): menu | 72px logo | lang + search.
       3-column grid (1fr auto 1fr) keeps the logo dead-centre even though the
       right side (lang switch + search) is wider than the left (menu). */
    /* The wrapping <header class="container"> adds its own 16px gutter; drop it
       on mobile so the burger and the lang/search icons sit close to the edges. */
    header.container,
    header.container.pl-0.pr-0 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #mobileMenu {
        height: auto;
        min-height: 96px;
        /* Side spacing now comes from the header gutter above, so the icons end
           up ~10px from each screen edge instead of 26px. */
        padding: 16px 0;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    /* Slightly larger burger (style_v3.css sets 22px) */
    #mobileMenu .mobile-icon#menuToggle {
        width: 28px;
    }
    #mobileMenu > div:first-child { justify-self: start; }
    #mobileMenu > .text-center { justify-self: center; }
    .mobile-header-right {
        justify-self: end;
    }

    #mobileMenu .h-slider {
        width: 37px;
        height: 37px;
        margin: 0 auto 9px;
        overflow: visible;
    }

    #mobileMenu .header-slider {
        width: 37px;
        height: 37px;
    }

    #mobileMenu .header-slider .slick-list,
    #mobileMenu .header-slider .slick-track,
    #mobileMenu .header-slider a,
    #mobileMenu .header-slider img {
        height: 37px !important;
    }

    #mobileMenu .logo2 {
        width: 71px;
        margin: 0 auto;
    }

    /* Menu icon flush to the left padding edge (was boxed + centred, which made
       its gap to the edge look bigger than the right side's). */
    #mobileMenu > div:first-child {
        width: auto !important;
        height: auto !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .mobile-header-right {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        /* Vertical rhythm between the lang pill and the search icon ≈ logo mark. */
        gap: 14px;
    }

    .mobile-header-right .mobile-menu-img {
        margin: 0;
    }

    /* Language switch: same bordered pill as desktop, BELOW the search icon */
    .mobile-header-lang.menu-lang-pill {
        order: 2;
        padding: 5px 12px;
        gap: 6px;
    }
    .mobile-header-search { order: 1; display: flex; }
    .mobile-header-lang.menu-lang-pill button {
        font-family: var(--at-font-text);
        font-size: 13px;
        line-height: 1;
        letter-spacing: 0.02em;
        color: var(--at-text-primary, #141414);
        text-transform: uppercase;
    }
    .mobile-header-lang.menu-lang-pill button:not(.active) {
        color: var(--at-text-tertiary, #888);
    }
    .mobile-header-lang.menu-lang-pill .slash { display: none !important; }

    /* Language pill inside the mobile menu overlay */
    .mobile-menu-icons {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-menu-lang {
        border: 1px solid var(--at-border-primary);
        border-radius: 24px;
        padding: 4px 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-menu-lang button {
        background: transparent;
        border: none;
        font-family: var(--at-font-text);
        font-size: 12px;
        line-height: 18px;
        color: var(--at-text-tertiary);
        padding: 0;
        cursor: pointer;
    }

    .mobile-menu-lang button.active {
        color: var(--at-text-primary);
    }

    .mobile-menu-lang .slash {
        display: none;
    }
}



/* ============================================================
   1. Hero Section (Slider — node 13:4814)
   1440x608, image full-bleed, card bottom-left 16px inset
   ============================================================ */

/* Slider image breaks out of the 1440px content cap and runs full-bleed
   edge-to-edge on wide screens. The card inside stays pinned to the same
   1440px column as the rest of the page (via .landing-hero-content) so it
   never grows past its laptop-resolution size. */
.landing-hero-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
}

.landing-hero-slider {
    width: 100%;
    height: 608px;
    position: relative;
}

.landing-hero-slide {
    width: 100%;
    height: 608px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: block;
    /* Click the photo to advance to the next slide */
    cursor: pointer;
}

/* Re-establishes the 1440px column inside the full-bleed slide so the
   card aligns with the header/gallery/footer above and below it. */
.landing-hero-content {
    max-width: var(--at-max, 1440px);
    height: 100%;
    margin: 0 auto;
    position: relative;
}

/* Paragraph+Background (node 13:4816): bg primary, p-16, gap-32 */
.landing-hero-card {
    /* No white box — text sits straight on the photo (white, with a soft
       shadow for legibility on light images). */
    background-color: transparent;
    padding: 16px;
    width: 712px;
    max-width: calc(100% - 32px);
    position: absolute;
    left: 16px;
    bottom: 16px;
    top: auto;
    transform: none;
    margin: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Display lg/Regular: Ranade 48/60, -2% */
.landing-hero-card h1 {
    font-family: var(--at-font-display);
    font-size: 45px;
    font-weight: 400;
    line-height: 57px;
    letter-spacing: -0.96px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    margin: 0 0 16px;
}

/* Text md/Regular: Lora 16/24 */
.landing-hero-card p {
    font-family: var(--at-font-text);
    font-size: 16px;
    line-height: 24px;
    color: var(--at-text-secondary);
    margin: 0 0 32px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Text md/Medium underline (node 13:4820) */
.landing-hero-link {
    font-family: var(--at-font-text);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    font-style: italic;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    text-decoration: none;
    border-bottom: none;
    padding-bottom: 0;
    transition: font-style 0.2s ease, opacity 0.2s ease;
}

/* Hover: italic straightens to regular */
.landing-hero-link:hover {
    font-style: normal;
    color: #ffffff;
}

/* ============================================================
   2. Gallery Container (node 13:5221)
   4 columns x 343px, column-gap 12, side padding 16, py 64
   ============================================================ */

.landing-gallery-container {
    max-width: none;
    width: 100%;
    padding: 64px 16px;
}

.landing-gallery-grid {
    column-count: 4;
    column-gap: 12px;
    display: block;
}

/* Vertical rhythm between cards: 40px (Gallery Column gap) */
.landing-gallery-card-link {
    display: block;
    margin-bottom: 40px;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* The grid feed is built server-side (9 articles + 3 videos, hero excluded),
   so no cards are hidden on desktop. */

.landing-gallery-card {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* Hover: zoom the image inside a clipped frame (replaces the old white overlay) */
.gallery-card-media {
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}

/* Play badge on mixed-in video cards */
.gallery-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.landing-gallery-card:hover .gallery-card-play {
    background: rgba(255, 255, 255, 0.65);
    transform: translate(-50%, -50%) scale(1.08);
}
/* Higher specificity than the generic `.landing-gallery-card img` rule below
   (which pins width:100% + a hover scale) so the play triangle stays a small
   22px icon inside the circle instead of filling/overflowing it. */
.landing-gallery-card .gallery-card-play img {
    display: block;
    width: 22px;
    height: auto;
    object-fit: contain;
    /* slight optical nudge right so the triangle reads centred */
    margin-left: 2px;
    transition: none;
}
.landing-gallery-card:hover .gallery-card-play img {
    transform: none;
}

/* Image → content gap now lives on .gallery-card-media */
.landing-gallery-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.landing-gallery-card:hover img {
    transform: scale(1.06);
}

/* Author: Text s/Regular Lora 14/20, secondary */
.landing-gallery-author,
.landing-gallery-meta {
    font-family: var(--at-font-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--at-text-secondary);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

/* Title: Display xs/Medium Ranade 24/32 */
.landing-gallery-card h3 {
    font-family: var(--at-font-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 8px;
}

/* Excerpt: Text s/Regular Lora 14/20, secondary */
.landing-gallery-excerpt {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--at-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* The excerpt is plain text (stripped server-side), so the clamp is
       reliable — nested block tags used to let it run past four lines. */
    word-break: break-word;
}

/* ============================================================
   Search results page (Figma "Search" 680:16954) — reuses the
   gallery-card grid so results match the redesigned site.
   ============================================================ */

.search-results-page {
    padding-top: 88px;
    padding-bottom: 64px;
}

.search-results-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.search-results-title {
    margin: 0;
}

/* Underlined search field, Figma header-search style */
.search-results-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 360px;
    max-width: 360px;
    border-bottom: 1px solid var(--at-border-primary);
    padding: 8px 0;
}

.search-results-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--at-font-text);
    font-size: 18px;
    line-height: 28px;
    color: var(--at-text-primary);
}

.content-wrapper .search-results-input::placeholder {
    color: var(--at-text-tertiary);
}

.search-results-submit {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.search-results-submit img {
    width: 24px;
    height: 24px;
}

.content-wrapper .search-results-count {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-secondary) !important;
    margin: 0 0 24px !important;
}

.search-results-divider {
    margin-bottom: 48px;
}

/* Same masonry layout as the home gallery, but without the
   :nth-child(-n+3) hide (search shows every result). */
.search-results-grid {
    column-count: 4;
    column-gap: 12px;
    display: block;
}

.search-result-card-link {
    display: block;
    margin-bottom: 40px;
    break-inside: avoid;
    page-break-inside: avoid;
    text-decoration: none;
    color: inherit;
}

.search-results-empty {
    padding: 24px 0 64px;
}

/* ============================================================
   3. Map Section (Collection Container — node 892:5872)
   py 64, title 60/72 Light, map 765px full width
   ============================================================ */

.landing-map-section {
    width: 100%;
    padding: 64px 0;
    margin-bottom: 0;
}

.landing-map-section .container {
    max-width: none;
    width: 100%;
    padding: 0 16px;
    margin: 0;
}

/* Display xl/Light: Ranade 60/72, -2% */
.landing-section-title {
    font-family: var(--at-font-display);
    font-size: 60px;
    font-weight: 300;
    line-height: 72px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 48px;
}

.landing-map-wrapper {
    width: 100vw;
    height: 560px;
    position: relative;
    background: #e9e9e9;
    display: flex;
    overflow: hidden;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.map-sidebar {
    width: 380px;
    max-width: 90vw;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    padding: 0;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0,0,0,0.08);
}
.map-sidebar.open {
    transform: translateX(0);
}

/* Sidebar header */
.map-sidebar .sidebar-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
}
.map-sidebar .sidebar-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    padding: 6px 0;
    font-family: var(--at-font-text);
}
.map-sidebar .sidebar-close-btn:hover {
    color: #000;
}

/* /map page reuses #sidebar-close, which style_v3 renders as a dark
   circle on mobile (id beats class). Re-assert the clean X + label. */
.map-sidebar #sidebar-close {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--at-text-primary);
    font-family: var(--at-font-text);
    font-size: 14px;
}

.map-sidebar #sidebar-close svg {
    width: 14px;
    height: 14px;
}

/* Filter sections */
.map-sidebar .filter-section {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
}
.map-sidebar .filter-section-title {
    font-family: var(--at-font-display) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--at-text-primary) !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.3 !important;
}
.map-sidebar .filter-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.map-sidebar .filter-btn-label {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--at-border-primary);
    border-radius: 24px;
    font-size: 13px;
    font-family: var(--at-font-text);
    font-weight: 400;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: transparent;
}
.map-sidebar .filter-btn-label:hover {
    background: #f5f5f5;
    border-color: #000;
}
.map-sidebar input[type="checkbox"]:checked + .filter-btn-label {
    background: var(--at-text-primary) !important;
    color: #fff !important;
    border-color: var(--at-text-primary) !important;
}

/* Explore Button (node "Explore" + filter-lines icon) */
/* ============================================================
   Map smart search (top-right of the map) + category filter icons
   ============================================================ */
/* Explore + search sit on one row across the top of the map. It's a flex row
   rather than two absolutely-positioned boxes so the search always lands to
   the right of the button whatever width its label takes ("Explore" vs the
   much longer "დათვალიერება"). */
.map-topbar {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 55;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* The row spans the map, so let clicks through to the map underneath. */
    pointer-events: none;
}

.map-topbar > * {
    pointer-events: auto;
}

.map-search {
    position: static;
    z-index: 55;
    /* Collapsed it is just the magnifier, so it must not stretch. */
    flex: 0 0 auto;
    min-width: 0;
    /* pushed to the right edge; Explore keeps the left */
    margin-left: auto;
}

.map-search.is-open {
    flex: 0 1 320px;
}

/* Closed state: a round magnifier button, the same interaction as the header
   search — click to reveal the field, Escape or the × to put it away. */
.map-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--at-border-tertiary);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: background 0.2s ease;
}

.map-search-toggle:hover {
    background: #fff;
}

.map-search-toggle img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: 0.6;
}

.map-search.is-open .map-search-toggle {
    display: none;
}

.map-search-box {
    display: none;
}

.map-search.is-open .map-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border: 1px solid var(--at-border-tertiary);
    border-radius: 999px;
    padding: 9px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.map-search-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 auto;
    opacity: 0.6;
}

#mapSearchInput {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--at-font-text);
    font-size: 14px;
    line-height: 20px;
    color: var(--at-text-primary);
}

#mapSearchClear {
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--at-text-tertiary);
    cursor: pointer;
    padding: 0 2px;
}

#mapSearchClear:hover { color: var(--at-text-primary); }

.map-search-results {
    list-style: none;
    margin: 8px 0 0;
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--at-border-tertiary);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.map-search-item {
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.map-search-item:hover { background: var(--at-bg-primary); }

.map-search-title {
    display: block;
    font-family: var(--at-font-text);
    font-size: 14px;
    line-height: 19px;
    color: var(--at-text-primary);
}

.map-search-meta {
    display: block;
    font-family: var(--at-font-text);
    font-size: 12px;
    line-height: 16px;
    color: var(--at-text-tertiary);
    margin-top: 2px;
}

.map-search-empty {
    padding: 10px;
    font-family: var(--at-font-text);
    font-size: 13px;
    color: var(--at-text-tertiary);
}

/* Category chips wrap their text in a <span>, and `.content-wrapper span` in
   style_v3.css forces that to 16px !important. Region chips have no span, so
   they kept the label's 13px and the two lists looked mismatched. Pull the
   span back to the label's size. */
.content-wrapper .map-sidebar .filter-btn-label span {
    font-size: 13px !important;
    line-height: inherit !important;
}

/* Category icon inside a filter button */
.filter-btn-label .filter-btn-icon {
    width: 16px;
    height: 20px;
    object-fit: contain;
    margin-right: 6px;
    vertical-align: middle;
}

.filter-btn-label {
    display: inline-flex;
    align-items: center;
}

/* Phone: tighter gutters, and the search takes whatever width is left over
   next to the Explore button instead of dropping onto its own row. */
@media (max-width: 991px) {
    .map-topbar {
        top: 12px;
        left: 8px;
        right: 8px;
        gap: 8px;
    }

    .map-topbar .map-search {
        flex: 0 0 auto;
    }

    /* Once open it takes whatever width is left beside the Explore button. */
    .map-topbar .map-search.is-open {
        flex: 1 1 auto;
    }

    .map-topbar .map-explore-btn {
        flex: 0 0 auto;
        padding: 9px 14px;
        gap: 6px;
    }

    .map-topbar .map-search-box {
        padding: 8px 12px;
    }

    /* The field itself is narrow next to the button, so let the results panel
       span the whole row instead — place titles get room to be read. */
    .map-topbar .map-search-results {
        position: absolute;
        left: 0;
        right: 0;
        margin-top: 8px;
        max-height: 260px;
    }
}

/* ------------------------------------------------------------
   Small screens: the Explore sheet and the marker card both hug
   the left edge instead of drifting toward the middle.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
    /* style_v3.css styles #mapSidebar by id (padding: 32px 48px / 24px), which
       stacked on top of each section's own 24px and pushed Close, "Select
       Region" and the chips ~48px in from the panel edge. Zero the panel's own
       padding — !important beats the id selector — and let the sections set it. */
    .map-sidebar {
        padding: 0 !important;
    }

    .map-sidebar .sidebar-header,
    .map-sidebar .filter-section {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.map-explore-btn {
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--at-font-text);
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}
.map-explore-btn:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    color: #000;
}

.region-checkbox, .my-custom-checkbox {
    display: none;
}

.map-container {
    flex-grow: 1;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 560px;
}

#map {
    width: 100%;
    height: 100%;
    min-height: 560px;
}

/* Protect map tiles from the site's generic img rules — but NEVER touch
   width/height: Google sets inline width:256px on 512px hi-DPI tiles, and
   `width:auto !important` overrode it, rendering every tile double-size
   (overlapping neighbors = seams + shifted map on phones). */
#map img {
    max-width: none !important;
    border-radius: 0 !important;
}

/* Zoom controls (Plus/Minus — bottom-left) */
.map-zoom-controls {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-zoom-controls button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    border: none;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s;
}

.map-zoom-controls button:hover {
    background-color: #f0f0f0;
}

/* Map marker overlay card */
.landing-overlay-card {
    position: absolute;
    right: 24px;
    /* Anchored below the Explore/search row rather than vertically centred:
       centring put a tall card's top edge behind the search box. */
    top: 76px;
    background: var(--at-bg-primary);
    width: 320px;
    max-height: calc(100% - 100px);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    /* Smooth "pop" open: scale + fade with an ease-out-back-ish curve */
    transform: scale(0.9);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.45s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 20;
}

.landing-overlay-card.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}


#landing-overlay-image {
    transition: opacity 0.35s ease;
}

.landing-overlay-content {
    display: flex;
    flex-direction: column;
    /* Not height:100%. The card's own height is auto, capped by max-height, and
       a percentage height against an auto-height parent resolves to auto — so
       this box grew to its full content height (513px inside a 460px card) and
       the card simply clipped READ MORE off the bottom. As a flex item of the
       card it is bounded by the cap, so the description can give way instead. */
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

#landing-overlay-close {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 30;
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

#landing-overlay-close img {
    width: 14px;
    height: 14px;
}

.landing-overlay-image-wrapper {
    width: 100%;
    /* 220px left the tallest cards ~50px over the height cap; 190 buys that
       back so nothing has to be trimmed to fit. */
    height: 190px;
    padding: 12px 12px 0 12px;
    flex-shrink: 0;
}

#landing-overlay-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.landing-overlay-text-wrapper {
    padding: 16px 24px 20px 24px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* No scrolling here: when space runs short only the description gives way
       (see below), so READ MORE and the bottom padding are always on screen
       instead of being pushed below the card's clipped edge. */
    overflow: hidden;
}

#landing-overlay-title {
    font-family: var(--at-font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: var(--at-text-primary);
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.landing-overlay-region-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.landing-overlay-region-wrapper img {
    width: 16px;
    margin-right: 8px;
}

#landing-overlay-region {
    font-family: var(--at-font-text);
    font-size: 14px;
    line-height: 20px;
    color: var(--at-text-secondary);
    margin: 0;
}

/* The only part allowed to shrink, so the title, region and READ MORE keep
   their space no matter how short the card gets. */
.landing-overlay-description-wrapper {
    margin-bottom: 14px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#landing-overlay-description {
    font-family: var(--at-font-text);
    font-size: 14px;
    line-height: 20px;
    color: var(--at-text-secondary);
    margin: 0;
    display: -webkit-box;
    /* 3 lines, not 4: at 4 the longest cards still overflowed the height cap by
       one line, so the text was cut mid-line. Three full lines plus the ellipsis
       reads cleanly and leaves every card inside the box. */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#landing-overlay-link {
    /* Never squeezed out — this is the card's only call to action. */
    flex: 0 0 auto;
    display: inline-block;
    font-family: var(--at-font-text);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--at-text-primary);
    text-decoration: underline;
    text-underline-position: from-font;
    border-bottom: none;
    padding-bottom: 0;
    transition: opacity 0.3s;
    align-self: flex-start;
}

#landing-overlay-link:hover {
    opacity: 0.7;
}

/* ============================================================
   4. Exhibition Container (node 25:461)
   py 64, pr 16, left image 712 wide, gap 48, right details
   ============================================================ */

.landing-exhibition-section {
    max-width: none;
    width: 100%;
    padding: 64px 16px;
    margin-bottom: 0;
}

.landing-exhibition-grid {
    display: flex;
    align-items: stretch;
    gap: 48px;
    background-color: #cbb5b1;
    padding: 40px;
    animation: exhibitionSlideIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Current-exhibition box slides in from the side on load */
@keyframes exhibitionSlideIn {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Three columns inside the mauve box: heading (left) · poster (centre) ·
   title + description (right). */
.exhibition-heading-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-top: 24px;
}

/* Display xl/Light: Ranade 50/62 (was 60/72), tracked out per the design */
.exhibition-box-title {
    font-family: var(--at-font-display);
    font-size: 50px;
    font-weight: 300;
    line-height: 62px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0;
    width: min-content;
}

/* Poster (414x645) sits in the middle column, its real aspect ratio preserved. */
.landing-exhibition-promo {
    flex: 0 0 34%;
    max-width: 340px;
    align-self: flex-start;
    aspect-ratio: 414 / 645;
}

.promo-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.promo-card {
    background-color: #333;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 0;
    transition: opacity 0.3s ease;
}

.promo-card-link:hover .promo-card {
    opacity: 0.9;
}

.vector-promo-logo {
    width: 120px;
    mix-blend-mode: multiply;
}

.promo-title h2 {
    font-family: var(--at-font-display);
    font-size: 56px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -1.12px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 8px;
}

.promo-title h3 {
    font-family: var(--at-font-display);
    font-size: 44px;
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.88px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.promo-title h3 strong {
    font-weight: 500;
}

/* Exhibition Details Container (node 25:466) */
.landing-current-exhibition {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Exhibition Title Container (node 25:468): gap 16, raised to the top */
.exhibition-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
}

/* Heading row ABOVE the mauve box (full section width): CURRENT EXHIBITION on
   the left, PAST EXHIBITIONS on the right — sits on the page bg, not the box. */
.exhibition-header--top {
    align-items: baseline;
    margin-bottom: 32px;
}

/* "CURRENT EXHIBITION" on two lines (min-content = wraps at the space,
   each word on its own line). Higher specificity than `.exhibition-header h2`. */
.landing-exhibition-section .exhibition-header--top h2,
.exhibitions-page .landing-current-exhibition .exhibition-header h2 {
    flex: 0 1 auto;
    width: min-content;
}

/* Display xl/Light: Ranade 60/72, -2% */
.exhibition-header h2 {
    font-family: var(--at-font-display);
    font-size: 60px;
    font-weight: 300;
    line-height: 72px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0;
    width: auto;
    flex: 1;
}

/* Mobile-only "CURRENT EXHIBITION" heading (shown above the promo cover ≤991px) */
.exhibition-header-mobile {
    display: none;
    margin-bottom: 32px;
}
.exhibition-header-mobile h2 {
    font-family: var(--at-font-display);
    font-size: 44px;
    font-weight: 300;
    line-height: 52px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0;
}

/* Text md/Medium underline (node 669:4123) */
.view-all-link {
    font-family: var(--at-font-text);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    font-style: italic;
    text-transform: uppercase;
    color: #4e4e4e;
    text-decoration: none;
    padding-bottom: 0;
    white-space: nowrap;
    transition: font-style 0.2s ease, color 0.2s ease;
}

.view-all-link:hover {
    font-style: normal;
    color: #4e4e4e;
}

.exhibition-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Description sits near the bottom edge of the box (aligned low, not centered) */
    justify-content: flex-end;
}

/* Current-exhibition feature (horizontal) photo removed by design — only the
   vertical poster + text remain in the box. */
.exhibition-image-wrapper {
    display: none;
}

.exhibition-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Exhibition Description Container (node 25:473): gap 32 */
.exhibition-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
}

/* Exhibition Description: narrower column so the text doesn't run to the box's
   right edge. */
.exhibition-text {
    flex: 1 1 auto;
    max-width: 520px;
}

/* Exhibition title: Ranade (display face) 20/30 — extra gap before the description */
.exhibition-text h3 {
    font-family: var(--at-font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: var(--at-text-primary);
    margin: 0 0 18px;
}

/* Description in Lora — narrower so it wraps to ~3 lines and fills the vertical
   space instead of stretching to the box's right edge. The `*` rule keeps Lora
   on pasted content that carries its own inline font-family. */
.exhibition-text p,
.exhibition-text p * {
    font-family: var(--at-font-text) !important;
}

.exhibition-text p {
    font-size: 16px;
    line-height: 26px;
    color: var(--at-text-secondary);
    margin: 0;
    max-width: 380px;
}

/* List Wrapper (node 25:477): flex-1, pt 24, gap 8 */
.exhibition-date {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Summary / Item: py 8, border-b primary */
.date-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--at-border-primary);
}

/* Text s/Medium: Lora 14/20, secondary */
.date-label {
    font-family: var(--at-font-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--at-text-secondary);
}

/* Text md/Bold: Lora 16/24, primary */
.date-value {
    font-family: var(--at-font-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-transform: none;
    color: var(--at-text-primary);
}

/* ============================================================
   5. Footer (Footer Container — node 947:4020)
   bg tertiary #d5cfcd, content + 50px bottom bar
   ============================================================ */

.site-footer {
    /* style_v3.css sets `background: transparent !important` — must out-prioritize it */
    background: var(--at-bg-tertiary) !important;
}

/* style_v3.css legacy `.new-footer-wrapper` adds padding-top:60px + a distinct
   #dedcd9 bg → a different-colored band above the footer. Kill both so the
   page transitions straight into the footer's tan. */
.new-footer-wrapper {
    padding-top: 0;
    background-color: var(--at-bg-tertiary);
}

.new-footer-container {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Footer Content Container (node 947:4021): gap 88, pt 24 pb 64 px 16 */
.footer-main {
    display: flex;
    align-items: flex-start;
    gap: 88px;
    padding: 24px 16px 64px;
}

/* Subscription (node 947:4022): flex-1, p 24, gap 48 */
.footer-subscribe {
    flex: 1 1 0;
    min-width: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Display md/Regular: Ranade 36/44, -2% */
.footer-subscribe h2 {
    font-family: var(--at-font-display);
    font-size: 36px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: -0.72px;
    color: var(--at-text-primary);
    margin: 0;
}

.subscribe-form-wrapper {
    width: 100%;
}

.subscribe-text {
    font-family: var(--at-font-text);
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 8px;
}
.subscribe-text.error { color: #fc6c49; }
.subscribe-text.success { color: #1cc584; }

/* Form (node 947:4024): border-b primary, pb 8 */
.footer-subscribe .input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--at-border-primary);
    padding-bottom: 8px;
    flex-wrap: nowrap;
}

.footer-subscribe input[type="email"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--at-font-text);
    font-size: 14px;
    line-height: 20px;
    color: var(--at-text-primary);
    padding: 0;
}

/* style_v3.css `#subscribe-form input{text-align:center}` (ID) beats the class
   rule above — override with matching ID specificity so text/placeholder is left */
#subscribe-form input[type="email"] {
    text-align: left;
    padding-right: 0;
}

.footer-subscribe input[type="email"]::placeholder {
    color: var(--at-text-tertiary);
}

.footer-subscribe .input-group button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--at-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.footer-subscribe .input-group button svg {
    width: 24px;
    height: 24px;
}

.footer-subscribe .input-group button:hover {
    opacity: 0.7;
}

/* Footer Links Container (node 947:4028): 936px, pt 24, gap 136 */
.footer-links-grid {
    flex: 0 0 65%;
    max-width: 936px;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 136px;
}

.footer-links-top {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Header labels: Text xs/Medium Lora 12/18, secondary */
.links-header {
    display: flex;
    align-items: center;
    /* match the items row (.top-row) exactly so each label sits directly
       above its own column — "Follow us" aligns with Instagram */
    gap: 16px;
    margin-bottom: 16px;
}

.links-header .footer-col:first-child {
    flex: 1 1 0;
}

.links-header .footer-col:last-child {
    flex: 1 1 0;
}

.col-label {
    font-family: var(--at-font-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: var(--at-text-secondary);
}

.links-line {
    width: 100%;
    height: 1px;
    background: var(--at-border-primary);
    border-top: none;
    margin-bottom: 28px;
}

/* Neutralize style_v3.css leftovers */
.footer-links-row.top-row {
    margin-bottom: 0;
}

.address-col .col-items p {
    max-width: none;
}

/* Links list: Text xl/Regular Lora 20/30, primary; two cols gap 16 */
.footer-links-row.top-row {
    display: flex;
    gap: 16px;
}

.footer-links-row.top-row .footer-col {
    flex: 1 1 0;
    min-width: 0;
}

.footer-links-row .col-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links-row.top-row .col-items a {
    font-family: var(--at-font-text);
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: var(--at-text-primary);
    text-decoration: none;
}

.footer-links-row.top-row .col-items a:hover {
    text-decoration: underline;
}

/* Footer Address Container (node 947:4044): bottom row */
.footer-links-row.bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
}

.footer-address-list {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.footer-links-row.bottom-row .footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-links-row.bottom-row .col-items p,
.footer-links-row.bottom-row .col-items a {
    font-family: var(--at-font-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--at-text-primary);
    text-decoration: none;
    margin: 0;
    white-space: nowrap;
}

/* Scroll-up (node 947:4052): 88px circle, border primary */
.scroll-to-top {
    position: static;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    border: 1px solid var(--at-border-primary);
    border-radius: 50%;
    background: transparent;
    color: var(--at-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease;
}

.scroll-to-top svg {
    width: 32px;
    height: 32px;
}

.scroll-to-top:hover {
    background: rgba(20, 20, 20, 0.06);
}

/* Bottom bar (node 947:4054): 50px, border-t, right aligned */
.footer-bottom {
    height: 50px;
    border-top: 1px solid var(--at-border-primary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px;
}

.footer-bottom .copyright {
    font-family: var(--at-font-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: var(--at-text-secondary);
    margin: 0;
    text-transform: uppercase;
}

/* ============================================================
   Cookie consent banner (Figma "Cookies Message" node 907:7345)
   Dark box bottom-left, heading Ranade 32/40, text Lora 16/24,
   two equal light buttons
   ============================================================ */

.cookie-banner {
    position: fixed;
    left: 16px;
    bottom: 16px;
    /* Clear the iOS home indicator / Safari bottom bar so it isn't covered. */
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 100000;
    width: 440px;
    max-width: calc(100vw - 32px);
    background: var(--at-text-primary);
    padding: 24px;
    box-shadow: 0 12px 32px rgba(20, 20, 20, 0.28);
    /* Promote to its own compositing layer — stops iOS Safari from flickering /
       dropping fixed elements during momentum scroll (the "flashes then
       disappears" symptom). */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

.cookie-banner-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cookie-banner-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Display s/Medium: Ranade 32/40, inverse text #f6f6f6 */
.cookie-banner-title {
    font-family: var(--at-font-display);
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    color: #f6f6f6;
    margin: 0;
}

/* Text md/Medium: Lora 16/24, placeholder #b0b0b0 */
.cookie-banner-desc {
    font-family: var(--at-font-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--at-border-tertiary);
    margin: 0;
}

.cookie-banner-desc a {
    color: #f6f6f6;
    text-decoration: underline;
    text-underline-position: from-font;
}

.cookie-banner-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.cookie-banner-form {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

/* Buttons: bg primary #edebea, border #141414, Lora Medium 16/24 */
.cookie-btn {
    width: 100%;
    background: var(--at-bg-primary);
    border: 1px solid var(--at-border-primary);
    border-radius: 0;
    padding: 12px 16px;
    font-family: var(--at-font-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--at-text-primary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.cookie-btn:hover {
    background: var(--at-text-primary);
    color: #f6f6f6;
}

@media (max-width: 576px) {
    .cookie-banner {
        left: 8px;
        right: 8px;
        bottom: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        padding: 16px;
    }
    .cookie-banner-title {
        font-size: 24px;
        line-height: 32px;
    }
}

/* ============================================================
   6. Category pages (Art / Architecture / History...)
   Figma node 224:467: title pt-88, Ranade Medium 72/90,
   2px divider, 3-col grid (461px, gap 12/40), Load more
   ============================================================ */

.category-page-wrapper {
    max-width: none;
    width: 100%;
    padding: 88px 16px 64px;
    margin-top: 0 !important;
}

/* Display 2xl/Medium: Ranade 72/90, -2% */
.category-main-title {
    font-family: var(--at-font-display);
    font-size: 60px;
    font-weight: 500;
    line-height: 75px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 40px;
}

.category-divider {
    border: none;
    border-bottom: 2px solid var(--at-border-primary);
    margin: 0 0 64px;
}

/* Grid: 12px column gap, 40px row gap (Figma Gallery Column) */
.category-grid {
    gap: 40px 12px;
}

/* Image → content gap: 12px */
.category-img-wrapper {
    margin-bottom: 12px;
    overflow: hidden;
}

/* Article-card hover zoom, matching the home gallery cards — applied to every
   category inner page (news, sub-category, blog, video, interview lists…). */
.category-card .category-img {
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.category-card:hover .category-img {
    transform: scale(1.06);
}

.category-content {
    gap: 0;
}

/* Meta: author (secondary) · date (tertiary), Lora 14/20 */
.content-wrapper .category-meta,
.content-wrapper .category-meta span {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-secondary) !important;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

.content-wrapper .category-meta .category-meta-date,
.content-wrapper .article-card-meta .category-meta-date {
    color: var(--at-text-tertiary) !important;
}

/* Title: Display xs/Medium Ranade 24/32 */
.category-title,
.category-card-wrapper:nth-child(4) .category-title,
.category-card-wrapper:nth-child(5) .category-title {
    font-family: var(--at-font-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0;
}

/* Excerpt: Text s/Regular Lora 14/20 */
.content-wrapper .category-excerpt {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-secondary) !important;
    margin: 8px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Load more (node 224:794): Text lg/Medium Lora 18/28 underline */
.blog_item-btn.load-more,
.blog_item-btn.js-load-more {
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    font-family: var(--at-font-text) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    color: var(--at-text-primary) !important;
    text-decoration: underline;
    text-underline-position: from-font;
    text-transform: none;
    letter-spacing: 0;
    padding: 16px 0;
    cursor: pointer;
}

.blog_item-btn.load-more:hover,
.blog_item-btn.js-load-more:hover {
    background: none !important;
    color: var(--at-text-secondary) !important;
}

/* Subcategory sections (sub-list page) */
.subcategory-section {
    margin-bottom: 88px;
}

.subcategory-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--at-border-primary);
    padding-bottom: 12px;
    margin-bottom: 40px;
}

.subcategory-title {
    font-family: var(--at-font-display);
    font-size: 36px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: -0.72px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0;
}

.see-all-link {
    font-family: var(--at-font-text);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--at-text-primary);
    text-decoration: underline;
    text-underline-position: from-font;
    white-space: nowrap;
}

.see-all-link:hover {
    color: var(--at-text-secondary);
}

/* Subcategory grids are always uniform 3-up */
.subcategory-grid .category-card-wrapper {
    grid-column: span 2;
}

@media (max-width: 991px) {
    .category-main-title {
        font-size: 48px;
        line-height: 58px;
        letter-spacing: -0.96px;
    }
    .subcategory-grid .category-card-wrapper {
        grid-column: span 1;
    }
}

/* ============================================================
   7. Authors page (Figma node 669:4559)
   4 cols x 316px, gap 48; circular photo 296px, gap 32, name
   ============================================================ */

.authors-page-wrapper .authors-list {
    display: grid;
    /* minmax(0,1fr) so long uppercase names / images can't blow the track
       past its share and overflow the row (mobile cards were being clipped). */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 0;
}

.authors-list_item {
    text-decoration: none;
    color: inherit;
    display: block;
}

.authors-list_item:hover {
    text-decoration: none;
}

.authors_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
}

.authors_item-img {
    width: 100%;
    max-width: 296px;
    /* Square photo (perfect square even when the column is narrower than 296px). */
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0 auto;
    border-radius: 0;
    object-fit: cover;
    background: var(--at-bg-tertiary);
    transition: opacity 0.3s ease;
}

.authors_item:hover .authors_item-img {
    opacity: 0.85;
}

/* Display xs/Medium — span needs !important vs style_v3 global */
.content-wrapper .authors_item-title {
    font-family: var(--at-font-display) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    color: var(--at-text-primary) !important;
    text-align: center;
    display: block;
    margin: 0;
    padding-bottom: 10px;
}

/* Authors list: names in all-caps */
.authors-page-wrapper .authors_item-title {
    text-transform: uppercase !important;
}

/* List-page cards: 1px #4e4e4e box, square photo filling the card,
   name, then a short 32px divider under the name (like the desktop mock). */
.authors-page-wrapper .authors_item {
    border: 1px solid #4e4e4e;
    padding: 20px 20px 24px;
    gap: 20px;
    height: 100%;
    justify-content: flex-start;
}
.authors-page-wrapper .authors_item-img {
    max-width: none;
}
.authors-page-wrapper .authors_item-title {
    padding-bottom: 0 !important;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.authors-page-wrapper .authors_item::after {
    content: '';
    width: 32px;
    height: 1px;
    background: #4e4e4e;
}

@media (max-width: 991px) {
    .authors-page-wrapper .authors-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
    .authors-page-wrapper .authors_item-img {
        max-width: none;
    }
}

@media (max-width: 576px) {
    .authors-page-wrapper .authors-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .authors-page-wrapper .authors_item {
        padding: 12px 12px 16px;
        gap: 14px;
    }
    /* Artist/author name 18px on phones (was 24px) */
    .content-wrapper .authors-page-wrapper .authors_item-title {
        font-size: 18px !important;
        line-height: 24px !important;
    }
}

/* ============================================================
   8. Author inner page (Figma node 669:5361)
   photo 296 circle + name Ranade Medium 36/44, bio Lora 16/24,
   divider, "…'s articles" Ranade Light 60/72, 3-col cards
   ============================================================ */

.author-details-page {
    max-width: none;
    width: 100%;
    padding: 64px 16px;
    margin: 0;
}

.author-details-page .author-details-header {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 64px;
    padding-top: 12px;
}

.author-details-page .author-details-avatar-box {
    width: 296px;
    height: 296px;
    flex: 0 0 296px;
}

.author-details-page .author-details-avatar {
    width: 296px;
    height: 296px;
    border-radius: 0;
    object-fit: cover;
    border: none;
    box-shadow: none;
}

.author-details-page .author-details-avatar:hover {
    transform: none;
}

/* Display md/Medium: Ranade 36/44, -2% */
.author-details-page .author-details-name {
    font-family: var(--at-font-display) !important;
    font-size: 36px;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.72px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0;
}

.content-wrapper .author-details-page .author-details-speciality {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-secondary) !important;
}

.content-wrapper .author-details-page .speciality-value {
    color: #4e4e4e !important;
}

.content-wrapper .author-details-page .author-details-bio,
.content-wrapper .author-details-page .author-details-bio p,
.content-wrapper .author-details-page .author-details-bio span,
.content-wrapper .author-details-page .author-details-bio div {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-primary) !important;
}

.author-details-page .author-details-bio {
    max-width: 1046px;
    margin-bottom: 0;
}

.author-details-page .category-divider.author-divider {
    margin: 64px 0;
}

/* Display xl/Light: Ranade 60/72, -2% */
.author-details-page .author-articles-heading {
    font-family: var(--at-font-display) !important;
    font-size: 60px;
    font-weight: 300;
    line-height: 72px;
    letter-spacing: -1.2px;
    color: var(--at-text-primary);
    margin: 0 0 48px;
}

.author-details-page .author-articles-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 12px;
}

.author-details-page .article-card-image-box {
    margin-bottom: 12px;
}

.author-details-page .article-card-image {
    height: 344px;
    object-fit: cover;
}

.content-wrapper .article-card-meta,
.content-wrapper .article-card-meta span {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-secondary) !important;
    text-transform: none;
    margin: 0;
}

.author-details-page .article-card-title {
    font-family: var(--at-font-display) !important;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 8px;
}

.content-wrapper .article-card-description {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-secondary) !important;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991px) {
    .author-details-page .author-details-header {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
    .author-details-page .author-details-avatar-box,
    .author-details-page .author-details-avatar {
        width: 220px;
        height: 220px;
        flex: 0 0 auto;
    }
    .author-details-page .author-articles-heading {
        font-size: 38px;
        line-height: 46px;
        letter-spacing: -0.76px;
    }
    .author-details-page .author-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 12px;
    }
    .author-details-page .article-card-image {
        height: 260px;
    }
}

@media (max-width: 576px) {
    .author-details-page .author-articles-grid {
        grid-template-columns: 1fr;
    }
}

/* Artist detail page (/artists/:id) — works masonry + related grid */
.artist-details-page .artist-works-grid {
    /* neutralize style_v3 grid override so .collection-grid masonry wins */
    grid-template-columns: none !important;
    display: block;
}

.artist-details-page .authors-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    flex-wrap: nowrap;
    justify-content: initial;
}

.artist-details-page .authors-list_item {
    flex: none;
    text-align: center;
}

.artist-details-page .authors_item {
    gap: 32px;
}

.artist-details-page .authors_item-img {
    width: 100%;
    max-width: 296px;
    aspect-ratio: 1 / 1;
    height: auto;
    border: none;
    box-shadow: none;
    filter: none;
}

.artist-details-page .authors_item:hover .authors_item-img {
    transform: none;
    border: none;
    box-shadow: none;
}

.content-wrapper .artist-details-page .authors_item-title {
    font-family: var(--at-font-display) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    color: var(--at-text-primary) !important;
    margin-top: 0;
}

@media (max-width: 991px) {
    .artist-details-page .authors-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }
    .artist-details-page .authors_item-img {
        max-width: 220px;
        height: auto;
    }
}

@media (max-width: 576px) {
    .artist-details-page .authors-list {
        grid-template-columns: 1fr;
    }
    .artist-details-page .authors_item-img {
        max-width: 240px;
        height: auto;
    }
}

/* ============================================================
   9. Contact page (Figma node 669:6231)
   Title 72/90, intro Lora 20/30, address list, 2px divider,
   form: underline fields #b0b0b0, Submit Ranade Bold 48/60
   ============================================================ */

.contact-page-wrapper {
    max-width: none;
    width: 100%;
    padding: 88px 16px 64px;
    margin-top: 0 !important;
    margin-bottom: 0;
}

.contact-main-title {
    font-family: var(--at-font-display);
    font-size: 72px;
    font-weight: 500;
    line-height: 90px;
    letter-spacing: -1.44px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 40px;
}

/* Text xl/Regular: Lora 20/30 */
.content-wrapper .contact-main-subtitle {
    font-family: var(--at-font-text) !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: var(--at-text-primary) !important;
    max-width: 500px;
    margin: 0 0 72px;
}

.contact-details-grid {
    display: flex;
    gap: 48px;
    margin-bottom: 40px;
}

.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content-wrapper .contact-info-label {
    font-family: var(--at-font-text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    color: var(--at-text-secondary) !important;
    margin: 0;
}

.content-wrapper .contact-info-value,
.content-wrapper .contact-info-value a {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-primary) !important;
    text-decoration: none;
    margin: 0;
    white-space: nowrap;
}

.contact-divider {
    border: none;
    border-bottom: 2px solid var(--at-border-primary);
    margin: 0 0 128px;
}

.contact-form-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.contact-form-text {
    flex: 0 0 376px;
    max-width: 376px;
}

.content-wrapper .contact-form-text p {
    font-family: var(--at-font-text) !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: var(--at-text-primary) !important;
    margin: 0;
    max-width: none;
}

.contact-form-wrapper {
    flex: 1 1 0;
    min-width: 0;
    max-width: 858px;
}

/* Fields: gap 48 rows / 32 cols, underline #b0b0b0, pb 8 */
.contact-inputs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--at-border-tertiary);
    border-radius: 0;
    padding: 0 0 8px;
    font-family: var(--at-font-text);
    font-size: 14px;
    line-height: 20px;
    color: var(--at-text-primary);
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--at-text-primary);
    opacity: 1;
}

.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: var(--at-border-primary);
}

/* Comment field: tall underline area (Figma pb-80) */
.form-group textarea {
    min-height: 100px;
    resize: none;
}

/* Submit (node 669:6336): Display lg/Bold Ranade 48/60, underline */
.form-submit-container {
    margin-top: 64px;
}

.submit-btn {
    background: transparent;
    border: none;
    padding: 0;
    font-family: var(--at-font-display);
    font-size: 48px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -0.96px;
    color: var(--at-text-primary);
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer;
}

.submit-btn:hover {
    opacity: 0.7;
}

@media (max-width: 991px) {
    .contact-main-title {
        font-size: 48px;
        line-height: 58px;
        letter-spacing: -0.96px;
    }
    .contact-divider {
        margin-bottom: 64px;
    }
    .contact-form-grid {
        flex-direction: column;
        gap: 40px;
    }
    .contact-form-text {
        flex: none;
        max-width: none;
    }
    .contact-form-wrapper {
        width: 100%;
        max-width: none;
    }
    .submit-btn {
        font-size: 36px;
        line-height: 44px;
    }
}

@media (max-width: 576px) {
    .contact-inputs-grid {
        grid-template-columns: 1fr;
    }
    .form-group.full-width {
        grid-column: span 1;
    }
    .contact-details-grid {
        flex-direction: column;
        gap: 24px;
    }
}

/* ============================================================
   13. Exhibitions page (Figma node 674:3794)
   Past title Ranade Light 60/72, year tabs #e7e3e2/#141414,
   3-col masonry cards: date #888 + Ranade Medium 24/32 title
   ============================================================ */

/* PAST EXHIBITIONS heading (node 715:1568) */
.past-exhibitions-title {
    font-family: var(--at-font-display);
    font-size: 60px;
    font-weight: 300;
    line-height: 72px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 88px 0 40px;
}

.past-exhibitions-divider {
    margin-bottom: 40px;
}

/* Year tabs (node 715:1573): Lora 18/28, px-20 py-12, gap 8 */
.year-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 64px;
}

.year-filter-btn {
    background: #e7e3e2;
    border: none;
    border-radius: 0;
    padding: 12px 20px;
    font-family: var(--at-font-text);
    font-size: 18px;
    line-height: 28px;
    color: var(--at-text-primary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.year-filter-btn:hover {
    background: #dcd7d5;
}

.year-filter-btn.active {
    background: var(--at-text-primary);
    color: #f6f6f6;
}

/* 3-col masonry (node 674:4189): 461px cols, gap 12 */
.exhibitions-grid {
    column-count: 3;
    column-gap: 12px;
}

.exhibition-item {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 40px;
}

.exhibition-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
    /* Thin #4e4e4e frame, matching the artists/authors cards */
    border: 1px solid #4e4e4e;
    padding: 16px;
    transition: opacity 0.3s;
}

.exhibition-card-link:hover {
    opacity: 0.85;
}

.exhibitions-page .exhibition-img-wrapper {
    margin-bottom: 16px;
}

.exhibitions-page .exhibition-info {
    padding-bottom: 4px;
}

.exhibitions-page .exhibition-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.content-wrapper .exhibition-card-date {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-tertiary) !important;
    margin: 0;
}

.exhibition-card-title {
    font-family: var(--at-font-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: var(--at-text-primary);
    margin: 0;
    text-transform: none;
}

/* Exhibition detail modal — circular X close, top-right */
.exhibition-modal-header {
    border-bottom: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
    padding: 16px;
}

.exhibition-modal-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Blend with the modal background instead of a white blob that sticks out. */
    background: var(--at-bg-primary, #eceae9);
    border: 1px solid var(--at-border-tertiary, #b0b0b0);
    color: var(--at-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease;
}

.exhibition-modal-close:hover {
    /* Slightly enlarge the X on hover. */
    transform: scale(1.12);
}

/* Exhibition popup: site background colour instead of white */
#exhibitionModal .modal-content,
#exhibitionModal .modal-body {
    background-color: var(--at-bg-primary, #eceae9) !important;
}

/* ============================================================
   Lightbox (collection artwork popup) → baiagallery style:
   light bg (#eceae9), arrows pinned to the screen edges,
   caption on one line. Overrides lightbox.css (loads before).
   ============================================================ */
.lightboxOverlay {
    background-color: #eceae9 !important;
    opacity: 1 !important;
}

/* Center the opened artwork in the viewport (lightbox2 pins it near the top
   by default, which left it sitting a bit high). */
#lightbox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

.lb-outerContainer,
.lb-dataContainer {
    background-color: transparent !important;
}

.lb-dataContainer {
    height: auto;
    padding-top: 16px;
}

.lb-data .lb-details {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
    text-align: center;
    width: 100%;
}

.lb-data .lb-caption {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--at-text-primary) !important;
    white-space: nowrap;
    text-align: center;
}

/* Show the "x of y" counter (was hidden) next to the caption */
.lb-data .lb-number {
    display: inline-block !important;
    clear: none;
    padding-bottom: 0;
    font-family: var(--at-font-text);
    font-size: 14px;
    line-height: 20px;
    color: var(--at-text-tertiary);
}

/* Arrows pinned to the viewport left/right edges, drawn as thin baia-style
   chevrons (replacing lightbox2's chunky PNG glyphs). */
.lb-nav a.lb-prev,
.lb-nav a.lb-next {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-image: none !important;
    filter: none !important;
    opacity: 1 !important;
    z-index: 10001;
}

.lb-nav a.lb-prev::before,
.lb-nav a.lb-next::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    border-top: 3px solid #141414;
    border-right: 3px solid #141414;
    border-radius: 3px;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lb-nav a.lb-prev::before { transform: rotate(-135deg); margin-left: 7px; }
.lb-nav a.lb-next::before { transform: rotate(45deg); margin-right: 7px; }

.lb-nav a.lb-prev:hover::before {
    opacity: 1;
    transform: rotate(-135deg) scale(1.15);
}
.lb-nav a.lb-next:hover::before {
    opacity: 1;
    transform: rotate(45deg) scale(1.15);
}

.lb-nav a.lb-prev { left: 24px !important; }
.lb-nav a.lb-next { right: 24px !important; }

@media (max-width: 576px) {
    /* let long captions wrap on small screens instead of overflowing */
    .lb-data .lb-caption {
        white-space: normal;
    }
    .lb-nav a.lb-prev { left: 8px !important; }
    .lb-nav a.lb-next { right: 8px !important; }
    /* Bigger, clearly visible arrows on phones */
    .lb-nav a.lb-prev,
    .lb-nav a.lb-next {
        width: 52px !important;
        height: 52px !important;
    }
    .lb-nav a.lb-prev::before,
    .lb-nav a.lb-next::before {
        width: 24px;
        height: 24px;
        border-top-width: 3.5px;
        border-right-width: 3.5px;
        opacity: 0.9;
    }
}

@media (max-width: 991px) {
    .past-exhibitions-title {
        font-size: 44px;
        line-height: 52px;
        margin-top: 64px;
    }
    .exhibitions-grid {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .exhibitions-grid {
        column-count: 1;
    }
}

/* ============================================================
   17. Map page (/map — Figma "Map" node 801:13501)
   Full-width map, ATINATI MAP title Ranade Light 60/72
   ============================================================ */

.atinati-map-page {
    padding: 64px 0;
    margin-top: 0 !important;
}

.atinati-map-page .container {
    max-width: none;
    width: 100%;
    padding: 0 16px;
    margin: 0;
}

.map-page-title {
    width: auto;
}

.atinati-map-page .landing-map-wrapper {
    height: 560px;
}

/* Map detail page (/map/:id) — reuse article typography */
.map-detail-page {
    max-width: none;
    width: 100%;
    padding: 64px 16px;
    margin: 0;
}

.map-detail-page .blog_name {
    font-family: var(--at-font-display) !important;
    font-size: 60px;
    font-weight: 400;
    line-height: 72px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 24px;
    text-align: center;
}

.content-wrapper .map-detail-page .author-small-text {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-secondary) !important;
}

.map-detail-page .icon_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
}

.map-detail-page + .blog_cover,
.map-detail-page ~ .blog_cover {
    width: 100%;
    height: auto;
    display: block;
}

/* Keep mobile/desktop cover mutually exclusive (news.css toggles at 750px,
   but the rule above has higher specificity and was forcing both to show) */
.map-detail-page ~ .blog_cover.news-cover--mobile {
    display: none;
}

.map-detail-page ~ .blog_cover.news-cover--desktop {
    display: block;
}

@media (max-width: 750px) {
    .map-detail-page ~ .blog_cover.news-cover--mobile {
        display: block;
    }

    .map-detail-page ~ .blog_cover.news-cover--desktop {
        display: none;
    }
}

/* ============================================================
   16. Catalogue page (Figma node 674:10015)
   Title 72/90, intro Lora 20/30 max 780, 2px divider,
   3-col grid image 448px + Ranade Medium 24/32 title
   ============================================================ */

.catalogue-page {
    max-width: none;
    width: 100%;
    padding: 88px 16px 64px;
    margin: 0;
}

.catalogue-page .category-main-title {
    margin-bottom: 40px;
}

.content-wrapper .catalogue-description {
    font-family: var(--at-font-text) !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: var(--at-text-primary) !important;
    max-width: 780px;
    margin: 0 0 40px;
}

.catalogue-divider {
    margin: 0 0 64px;
}

.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 12px;
}

.catalogue-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
    transition: opacity 0.3s;
}

.catalogue-link:hover {
    opacity: 0.85;
}

.catalogue-img-wrapper {
    margin-bottom: 12px;
}

.catalogue-img {
    width: 100%;
    height: 448px;
    object-fit: cover;
    display: block;
}

.catalogue-item-title {
    font-family: var(--at-font-display) !important;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: var(--at-text-primary);
    margin: 0;
    text-transform: none;
}

.content-wrapper .catalogue-item-desc {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-secondary) !important;
    margin: 8px 0 0;
}

@media (max-width: 991px) {
    .catalogue-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .catalogue-img {
        height: 320px;
    }
}

@media (max-width: 576px) {
    .catalogue-grid {
        grid-template-columns: 1fr;
    }
    .catalogue-img {
        height: 366px;
    }
}

/* ============================================================
   15. Videos page (Figma node 674:9323)
   Title 72/90, category tabs like year tabs, 3-col cards:
   image 448px + date #888 + Ranade Medium 24/32 title
   ============================================================ */

.videos-page {
    max-width: none;
    width: 100%;
    padding: 88px 16px 64px;
    margin: 0;
}

.videos-divider {
    margin: 0 0 40px;
}

.videos-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 64px;
}

.video-category-link {
    display: inline-block;
    background: #e7e3e2;
    border: none;
    padding: 12px 20px;
    font-family: var(--at-font-text) !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: var(--at-text-primary);
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
}

.video-category-link:hover {
    background: #dcd7d5;
    color: var(--at-text-primary);
}

.video-category-link.active {
    background: var(--at-text-primary);
    color: #f6f6f6;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 12px;
}

.video-card-link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

/* Standard YouTube 16:9 frame; clipped so the image can zoom on hover */
.video-card-image-box {
    position: relative;
    margin-bottom: 12px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Hover video preview (YouTube iframe injected by main.js). pointer-events off
   so a click still follows the card link to the video page. */
.video-hover-frame,
.gallery-card-media .video-hover-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 3;
    pointer-events: none;
    object-fit: cover;
    background: #000;
}

.video-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.video-card-link:hover .video-card-image {
    transform: scale(1.06);
}

/* Centered play button. Overriding style_v3.css (which pins .play-btn-overlay
   as a 64px dark circle at top:50%/left:50% + a ::after triangle) — reset it
   to a full-box flex-centered container, then draw a frosted circle (::before)
   with a white play triangle (::after) so it works on server- AND AJAX-
   rendered cards (the AJAX ones have no <img> inside). */
.video-card-image-box .play-btn-overlay {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: 0;
    transform: none;
    pointer-events: none;
    transition: none;
}

/* Play button = the desktop asset (play-button.svg) inside a translucent white
   circle, matching the video-gallery player button. */
.video-card-image-box .play-btn-overlay img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    /* slight optical nudge right so the triangle reads centred */
    transform: translate(-42%, -50%);
    width: 22px;
    height: auto;
    z-index: 1;
}

/* translucent circle behind the play triangle */
.video-card-image-box .play-btn-overlay::before {
    content: '';
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.25s ease, transform 0.25s ease;
}

.video-card-link:hover .play-btn-overlay::before {
    background: rgba(255, 255, 255, 0.65);
    transform: scale(1.08);
}

/* Hide the old style_v3.css CSS-drawn triangle — the play-button.svg image
   is the play icon now. */
.video-card-image-box .play-btn-overlay::after {
    display: none !important;
}

.content-wrapper .video-card-meta {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-tertiary) !important;
    text-transform: none;
    margin: 0;
}

/* Category label in caps. Done in CSS so it also covers the cards appended by
   Load More, and so the stored category names stay untouched. */
.content-wrapper .video-card-meta .video-category-name {
    text-transform: uppercase;
}

.video-card-title {
    font-family: var(--at-font-display) !important;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: var(--at-text-primary);
    margin: 0;
    text-transform: none;
}

@media (max-width: 991px) {
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .videos-grid {
        grid-template-columns: 1fr;
    }
}

/* Video detail page: video.css hard-codes a black background + white text;
   switch it to the site's light bg (#eceae9) with dark, readable text. */
.content-wrapper .details-video {
    background-color: var(--at-bg-primary) !important;
}

.content-wrapper .details-video .details_title,
.content-wrapper .details-video .details_paragraph,
.content-wrapper .details-video .details_watch-paragraph {
    color: var(--at-text-primary) !important;
}

.content-wrapper .details-video .details_watch-paragraph:hover {
    color: var(--at-text-secondary) !important;
}

/* Share button sits on its own line, spaced from the video */
.content-wrapper .details-video .details_share {
    display: inline-flex;
    margin-top: 24px;
}

/* Title → article-title style (Ranade, uppercase) */
.content-wrapper .details-video .details_title {
    font-family: var(--at-font-display) !important;
    font-size: 48px !important;
    font-weight: 400 !important;
    line-height: 58px !important;
    letter-spacing: -0.96px !important;
    text-transform: uppercase !important;
    color: var(--at-text-primary) !important;
    margin: 24px 0 16px !important;
}

/* Description → identical to the article body (see .new-article-content):
   Roboto 20px, weight 300, line-height 1.5, #141414. */
.content-wrapper .details-video .details_paragraph {
    font-family: 'Roboto', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #141414 !important;
    letter-spacing: 0 !important;
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

@media (max-width: 768px) {
    .content-wrapper .details-video .details_title {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    /* No mobile size override — the article body stays 20px/1.5 on phones too,
       and this has to read the same. */
}

/* ============================================================
   14. Exhibition inner page (Figma node 674:4514)
   Title Ranade Medium 72/90, Date/Venue meta, full image,
   body Lora Medium 24/32 in 816px column
   ============================================================ */

.exhibition-single-page {
    max-width: none;
    width: 100%;
    padding: 88px 16px 64px;
    margin: 0;
}

.exhibition-single-title {
    font-family: var(--at-font-display) !important;
    font-size: 72px;
    font-weight: 500;
    line-height: 90px;
    letter-spacing: -1.44px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 40px;
}

.exhibition-single-meta {
    display: flex;
    gap: 72px;
    margin-bottom: 40px;
}

.exhibition-meta-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content-wrapper .exhibition-meta-label {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-secondary) !important;
}

.content-wrapper .exhibition-meta-value {
    font-family: var(--at-font-text) !important;
    font-size: 18px !important;
    line-height: 28px !important;
    color: var(--at-text-primary) !important;
}

.exhibition-single-divider {
    margin: 0 0 64px;
}

.exhibition-cover {
    margin-bottom: 88px;
}

.exhibition-cover img {
    width: 100%;
    height: auto;
    max-height: 704px;
    object-fit: cover;
    display: block;
}

.exhibition-body {
    max-width: 816px;
    margin: 0 auto;
}

/* Identical to the article body (see .new-article-content):
   Roboto 20px, weight 300, line-height 1.5, #141414. */
.content-wrapper .exhibition-body,
.content-wrapper .exhibition-body p,
.content-wrapper .exhibition-body span,
.content-wrapper .exhibition-body div,
.content-wrapper .exhibition-body li,
.content-wrapper .exhibition-body b,
.content-wrapper .exhibition-body strong,
.content-wrapper .exhibition-body i,
.content-wrapper .exhibition-body em {
    font-family: 'Roboto', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #141414 !important;
    letter-spacing: 0 !important;
}

/* This body is pasted from Facebook/Word and carries inline font-family on
   tags the list above misses — force the face on everything, same as the
   article body does. Font-family only, so sizes/weights stay as set. */
.content-wrapper .exhibition-body * {
    font-family: 'Roboto', sans-serif !important;
}

/* ATINATI Team (About Us) reuses the artists/authors card styling — the section
   is wrapped in .authors-page-wrapper so those box rules apply. */
.content-wrapper .about-team-wrapper .team-member-position {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-secondary) !important;
    text-align: center;
    display: block;
    margin-top: -8px;
}

/* Bold typed in the admin editor must survive on the artist, author and
   exhibition pages too — style_v3.css forces `font-weight: 400 !important` on
   every p/span inside .content-wrapper, which flattened <b> and inline bold
   (the news body already has the same guard). */
.content-wrapper .author-details-bio b,
.content-wrapper .author-details-bio strong,
.content-wrapper .author-details-bio b *,
.content-wrapper .author-details-bio strong *,
.content-wrapper .author-details-bio [style*="font-weight: bold"],
.content-wrapper .author-details-bio [style*="font-weight:bold"],
.content-wrapper .author-details-bio [style*="font-weight: 600"],
.content-wrapper .author-details-bio [style*="font-weight:600"],
.content-wrapper .author-details-bio [style*="font-weight: 700"],
.content-wrapper .author-details-bio [style*="font-weight:700"],
.content-wrapper .exhibition-body b,
.content-wrapper .exhibition-body strong,
.content-wrapper .exhibition-body b *,
.content-wrapper .exhibition-body strong *,
.content-wrapper .exhibition-body [style*="font-weight: bold"],
.content-wrapper .exhibition-body [style*="font-weight:bold"],
.content-wrapper .exhibition-body [style*="font-weight: 600"],
.content-wrapper .exhibition-body [style*="font-weight:600"],
.content-wrapper .exhibition-body [style*="font-weight: 700"],
.content-wrapper .exhibition-body [style*="font-weight:700"] {
    font-weight: 700 !important;
}

/* Italics likewise */
.content-wrapper .author-details-bio i,
.content-wrapper .author-details-bio em,
.content-wrapper .exhibition-body i,
.content-wrapper .exhibition-body em {
    font-style: italic !important;
}

.exhibition-body img {
    width: 100%;
    height: auto;
    margin: 32px 0;
}

/* Exhibition image gallery (bottom of the single page / popup) */
.exhibition-gallery {
    max-width: 816px;
    margin: 64px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.exhibition-gallery-item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.exhibition-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.exhibition-gallery-item:hover img {
    transform: scale(1.06);
}

@media (max-width: 768px) {
    .exhibition-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-top: 40px;
    }
}

/* Inside the exhibitions-list modal the page keeps its own padding */
.modal-body .exhibition-single-page {
    padding: 40px 24px;
}

.modal-body .exhibition-single-title {
    font-size: 36px;
    line-height: 46px;
    letter-spacing: -0.72px;
}

@media (max-width: 991px) {
    .exhibition-single-title {
        font-size: 40px;
        line-height: 50px;
        letter-spacing: -0.8px;
    }
    .exhibition-single-meta {
        gap: 32px;
    }
    /* No mobile size override — the article body stays 20px/1.5 on phones
       too, and this has to read the same. */
}

/* ============================================================
   12. Article inner page (Figma node 133:217)
   Title Ranade 60/72 centered, meta Lora 16/24, share pill,
   body Lora Medium 24/32 in 792px column, Up next cards
   ============================================================ */

.new-article-layout > .container {
    max-width: none;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

/* Article headline: 42/51, -2%, centered */
.new-article-title {
    font-family: var(--at-font-display) !important;
    font-size: 42px;
    font-weight: 400;
    line-height: 51px;
    letter-spacing: -0.84px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    max-width: 1304px;
    margin: 0 auto;
}

/* Meta: by Author (underlined) / role / date — centered, gap 2 */
.content-wrapper .new-article-meta .meta-author-line {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: #4e4e4e !important;
    margin-bottom: 2px;
}

.content-wrapper .new-article-meta .meta-author-link {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #4e4e4e !important;
    text-decoration: underline;
    text-underline-position: from-font;
}

.content-wrapper .new-article-meta .meta-status-line,
.content-wrapper .new-article-meta .meta-category-line {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-secondary) !important;
    margin-bottom: 2px;
}

.content-wrapper .new-article-meta .meta-date-line {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-tertiary) !important;
    text-transform: none;
}

/* Share pill (node 998:3284): border #4f4f4f, rounded full */
.share-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #4f4f4f;
    border-radius: 999px;
    padding: 8px;
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--at-text-tertiary) !important;
    text-decoration: none !important;
    background: transparent;
}

.share-post-btn:hover {
    color: var(--at-text-primary) !important;
}

.share-post-btn img {
    width: 20px;
    height: 20px;
}

/* Main image: full width */
.new-article-layout .blog_cover {
    width: 100%;
    height: auto;
    display: block;
}

/* Keep mobile/desktop cover mutually exclusive (news.css toggles at 750px,
   but the rule above has higher specificity and was forcing both to show) */
.new-article-layout .blog_cover.news-cover--mobile {
    display: none;
}

.new-article-layout .blog_cover.news-cover--desktop {
    display: block;
}

@media (max-width: 750px) {
    .new-article-layout .blog_cover.news-cover--mobile {
        display: block;
    }

    .new-article-layout .blog_cover.news-cover--desktop {
        display: none;
    }
}

/* Body: Lora Medium 24/32 in 792px centered column */
.new-article-content {
    max-width: 824px;
    margin-left: auto;
    margin-right: auto;
}

/* Article body inset 145px from the left and right (overrides the
   .new-article-layout > .container width:100%/padding:16px, which has higher
   specificity than plain .new-article-content). */
.new-article-layout > .container.new-article-content {
    max-width: none;
    width: auto;
    /* A bit more breathing room from the page edges on desktop */
    margin-left: 200px;
    margin-right: 200px;
    padding-left: 0;
    padding-right: 0;
}

.content-wrapper .new-article-content,
.content-wrapper .new-article-content p,
.content-wrapper .new-article-content span,
.content-wrapper .new-article-content div,
.content-wrapper .new-article-content li,
.content-wrapper .new-article-content b,
.content-wrapper .new-article-content strong,
.content-wrapper .new-article-content i,
.content-wrapper .new-article-content em {
    font-family: 'Roboto', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #141414 !important;
    letter-spacing: 0 !important;
}

/* Bold from the admin editor must stay bold on the site — the 400 reset above
   otherwise flattens <strong>/<b> and inline-styled bold to normal weight. */
.content-wrapper .new-article-content b,
.content-wrapper .new-article-content strong,
.content-wrapper .new-article-content b *,
.content-wrapper .new-article-content strong *,
.content-wrapper .new-article-content [style*="font-weight: bold"],
.content-wrapper .new-article-content [style*="font-weight:bold"],
.content-wrapper .new-article-content [style*="font-weight: 600"],
.content-wrapper .new-article-content [style*="font-weight:600"],
.content-wrapper .new-article-content [style*="font-weight: 700"],
.content-wrapper .new-article-content [style*="font-weight:700"] {
    font-weight: 700 !important;
}

/* Force Lora on EVERY element in the article body — pasted content carries
   inline font-family (Calibri, Arial, Merriweather, system-ui…) on tags the
   list above misses (headings, <a>, <font>, table cells…). Font-family only,
   so sizes/weights of headings etc. are untouched. (Inline `!important` fonts
   are additionally stripped in JS on the news detail page.) */
.content-wrapper .new-article-content * {
    font-family: 'Roboto', sans-serif !important;
}

/* Keep italics actually italic (same Lora font+size, just slanted) —
   something was resetting <em>/<i> to normal. */
.content-wrapper .new-article-content i,
.content-wrapper .new-article-content em {
    font-style: italic !important;
}

.new-article-content img {
    width: 100%;
    /* Pasted markup sometimes carries an inline pixel width; cap it so an image
       can never spill past the article's side margins. */
    max-width: 100% !important;
    height: auto !important;
    margin: 32px 0;
}

/* Image caption (tagged in JS on the news page): smaller and tighter than body
   copy, which it used to match exactly at 20px/30px. */
/* The editor wraps caption text in its own tags — <i><span style="font-size:
   14px">…</span></i> — and `.content-wrapper span` in style_v3 forces those to
   20px !important, so captions rendered a third bigger on the site than in the
   editor. Size every descendant, not just the caption element. */
.content-wrapper .new-article-content p.article-caption,
.content-wrapper .new-article-content p.article-caption *,
.content-wrapper .new-article-content figcaption,
.content-wrapper .new-article-content figcaption * {
    font-size: 15px !important;
    line-height: 21px !important;
    color: var(--at-text-secondary) !important;
}

.content-wrapper .new-article-content p.article-caption,
.content-wrapper .new-article-content figcaption {
    margin-top: 8px !important;
    margin-bottom: 32px !important;
}

/* A caption should sit right under its photo. The image paragraph carries an
   inline margin-bottom from the editor (which beats a plain rule) and the
   <img> renders inline, so it also picks up the line's baseline gap — the two
   together left ~32px of air. Both are tagged in JS on the news page. */
.content-wrapper .new-article-content p.article-caption-image {
    margin-bottom: 0 !important;
}

.content-wrapper .new-article-content p.article-caption-image img {
    display: block;
    margin-bottom: 0 !important;
}

/* Photo-only paragraph: kill the empty text lines that still reserve a full
   line-height under the image. The leftovers are usually empty <span>s and
   <br>s from Word, each carrying its own inline line-height, so the rule has
   to reach the descendants too — not the <img>, which is a block. */
.content-wrapper .new-article-content p.article-caption-image--bare,
.content-wrapper .new-article-content p.article-caption-image--bare *:not(img) {
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Photo + caption written by the admin editor's caption button. The figure
   keeps the pair together so the caption can never drift onto another photo
   the way the "short paragraph after an image" guess can. */
.new-article-content figure.article-figure {
    margin: 0 0 32px;
}

.new-article-content figure.article-figure img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.content-wrapper .new-article-content figure.article-figure figcaption {
    margin: 8px 0 0 !important;
}

.content-wrapper .new-article-content figure.article-figure figcaption,
.content-wrapper .new-article-content figure.article-figure figcaption * {
    font-family: 'Roboto', sans-serif !important;
    font-style: italic !important;
    font-weight: 300 !important;
}

/* Keep an image caption (the short <p> right after an image) close to its
   image instead of the full 32px+ paragraph gap. Body HTML wraps images as
   <p><img></p> followed by <p>caption</p>. */
.new-article-content p:has(img) {
    margin-bottom: 0;
}

.new-article-content p:has(img) img {
    margin-bottom: 8px;
}

/* Two photos side by side (admin "two images" button) + per-photo captions */
.new-article-content .two-images {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    table-layout: fixed;
}

.new-article-content .two-images td {
    width: 50%;
    vertical-align: top;
    padding: 0 6px;
}

.new-article-content .two-images img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}

.content-wrapper .new-article-content .two-images-caption,
.content-wrapper .new-article-content .two-images-caption p,
.content-wrapper .new-article-content .two-images-caption span {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: #4e4e4e !important;
    padding-top: 8px;
}

/* On mobile, ignore admin-set image widths (25%/50%) — always full width. */
@media (max-width: 768px) {
    .new-article-content img {
        width: 100% !important;
    }
}

/* Embedded videos (YouTube iframes) in the body: standard 16:9, contained to
   the text column — never a stretched/oversized box from inline width/height.
   Applies to article bodies AND the artist/author bio (their videos live in
   the admin-authored HTML too). */
.new-article-content iframe,
.author-details-bio iframe {
    display: block;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 32px auto;
    border: none;
}

.new-article-content .author-block a {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-secondary) !important;
    text-decoration: underline;
    text-underline-position: from-font;
}

/* Up next (node 133:1461) */
.new-article-recommended {
    padding-top: 64px;
}

.recommended-heading {
    font-family: var(--at-font-display) !important;
    font-size: 60px;
    font-weight: 300;
    line-height: 72px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 48px;
    border: none;
    padding-bottom: 0;
}

.like_content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.like_content a {
    text-decoration: none !important;
    color: inherit;
    display: block;
    transition: opacity 0.3s;
}

.like_content-item {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    margin: 0;
    overflow: visible;
}

.like_content a:hover {
    opacity: 0.85;
}

.like_content-item img {
    width: 100%;
    height: 458px;
    object-fit: cover;
    display: block;
    margin-bottom: 12px;
}

.content-wrapper .up-next-meta {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-tertiary) !important;
    margin: 0 0 8px;
}

/* Category leads the line, in caps and a shade darker than the date — the
   same treatment the video cards use. */
.content-wrapper .up-next-meta .up-next-category {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-transform: uppercase;
    color: var(--at-text-secondary) !important;
}

.like_content-heading {
    font-family: var(--at-font-display) !important;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0;
    width: 100%;
    max-width: none;
    padding: 0;
}

@media (max-width: 991px) {
    .new-article-title {
        font-size: 36px;
        line-height: 46px;
        letter-spacing: -0.72px;
    }
    /* Body text needs no mobile override — the base rule is already 20px/1.5. */

    /* No side margins on tablet/phone — fall back to the page gutter. */
    .new-article-layout > .container.new-article-content {
        margin-left: 0;
        margin-right: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    .recommended-heading {
        font-size: 38px;
        line-height: 46px;
        letter-spacing: -0.76px;
    }
    .like_content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .like_content-item img {
        height: 280px;
    }
    .like_content-heading {
        font-size: 24px;
        line-height: 32px;
    }
}

/* ============================================================
   11. Atinati Collection page (Figma node 324:1601)
   4-col masonry 343px/12px gap, caption Lora Medium 14/20
   ============================================================ */

.collection-grid {
    column-count: 4;
    column-gap: 12px;
}

.collection-item {
    display: block;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 40px;
    text-decoration: none !important;
    color: inherit;
    transition: opacity 0.3s;
}

.collection-item:hover {
    opacity: 0.85;
}

/* Image → caption gap: 8px */
.collection-img-wrapper {
    margin-bottom: 8px;
}

.collection-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.content-wrapper .collection-info,
.content-wrapper .collection-info span {
    font-family: var(--at-font-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: var(--at-text-primary) !important;
}

@media (max-width: 991px) {
    .collection-grid {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .collection-grid {
        column-count: 1;
    }
}

/* ============================================================
   10. About page (Figma node 669:6448)
   ============================================================ */

.about-hero {
    max-width: none;
    width: 100%;
    padding: 88px 16px 0;
    margin: 0 !important;
}

.about-hero h1 {
    font-family: var(--at-font-display);
    font-size: 72px;
    font-weight: 500;
    line-height: 90px;
    letter-spacing: -1.44px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 40px;
}

/* Subtitle: Lora 20/30, "ATINATI" tertiary */
.content-wrapper .about-hero .subtitle {
    font-family: var(--at-font-text) !important;
    font-size: 24px !important;
    line-height: 34px !important;
    color: var(--at-text-primary) !important;
    /* full width so the line sits on one row where the divider used to be */
    max-width: none;
    margin: 0 0 72px;
}

.content-wrapper .about-hero .subtitle .light-text,
.content-wrapper .about-text-large .light-text {
    color: var(--at-text-tertiary) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.about-hero-divider {
    margin: 0;
}

/* Video block: full width, 590px (node 669:6519) */
.about-video-section {
    padding: 64px 16px;
}

.about-video-wrapper {
    width: 100%;
    height: 590px;
    background: #e7e3e2;
    position: relative;
}

.about-video-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.about-content-section {
    max-width: none;
    width: 100%;
    padding: 0 16px;
    margin: 0;
}

/* Big statements: Display lg/Regular Ranade 48/60, ATINATI in #888 */
.content-wrapper .about-text-large {
    font-family: var(--at-font-display) !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 46px !important;
    letter-spacing: -0.72px !important;
    color: var(--at-text-primary) !important;
    margin: 64px 0;
    padding: 0;
    max-width: none;
}

/* First statement sits in a white bordered box (node 669:6525) */
/* No frame — the paragraph sits on the page background like the rest. */
.content-wrapper .about-text-large.boxed {
    background: none;
    border: none;
    padding: 64px 0;
    margin: 0;
}

.about-mid-divider {
    margin: 64px 0 0;
}

/* Centered paragraphs: Lora Medium 20/30, max 848px (nodes 669:6532/6540) */
.content-wrapper .about-text-small-wrapper {
    max-width: 848px;
    margin: 0 auto;
    padding: 64px 0;
    border: none !important;
}

.content-wrapper .about-text-small,
.content-wrapper .about-text-small a {
    font-family: var(--at-font-text) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
    color: var(--at-text-primary) !important;
    text-align: left !important;
}

.content-wrapper .about-text-small a {
    text-decoration: underline;
    text-underline-position: from-font;
    text-transform: none;
}

/* Scope section (node 669:6543): bg secondary #e7e3e2 */
.about-scope-section {
    background: #e7e3e2;
    padding: 64px 16px;
    margin-top: 64px;
}

.about-scope-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.about-scope-title {
    font-family: var(--at-font-display);
    font-size: 48px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -0.96px;
    text-align: center;
    color: var(--at-text-primary);
    margin: 0 0 56px;
}

.about-scope-grid {
    display: flex;
    gap: 12px;
}

.scope-col {
    flex: 1 1 0;
    min-width: 0;
}

.scope-col h4 {
    font-family: var(--at-font-display);
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    color: var(--at-text-primary);
    margin: 0 0 12px;
}

.content-wrapper .scope-col p {
    font-family: var(--at-font-text) !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--at-text-primary) !important;
    margin: 0;
}

/* Team section (node 669:6555): px-40, title Ranade Light 60/72 */
.about-team-section {
    max-width: none;
    width: 100%;
    padding: 64px 40px;
    margin: 0;
}

/* Same heading as the ARTISTS / AUTHORS pages this section was modelled on —
   it was 4px smaller and a lighter weight at every breakpoint. */
.about-team-title {
    font-family: var(--at-font-display);
    font-size: 60px;
    font-weight: 500;
    line-height: 75px;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    color: var(--at-text-primary);
    margin: 0 0 40px;
}

.about-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.team-member img {
    width: 296px;
    height: 296px;
    max-width: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--at-bg-tertiary);
}

.content-wrapper .team-member .name {
    font-family: var(--at-font-display) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 32px !important;
    color: var(--at-text-primary) !important;
    text-align: center;
    padding-bottom: 10px;
}

@media (max-width: 991px) {
    .about-hero h1 {
        font-size: 48px;
        line-height: 58px;
        letter-spacing: -0.96px;
    }
    .content-wrapper .about-text-large {
        font-size: 30px !important;
        line-height: 40px !important;
        letter-spacing: -0.6px !important;
    }
    .about-video-wrapper {
        height: 380px;
    }
    .about-scope-title {
        font-size: 32px;
        line-height: 42px;
        letter-spacing: -0.64px;
    }
    .about-scope-grid {
        flex-direction: column;
        gap: 40px;
    }
    .about-team-title {
        font-size: 48px;
        line-height: 58px;
        letter-spacing: -0.96px;
    }
    .about-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 24px;
    }
    .team-member img {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 576px) {
    .about-video-wrapper {
        height: 220px;
    }
    .about-team-grid {
        grid-template-columns: 1fr;
    }
    .team-member img {
        width: 240px;
        height: 240px;
    }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1200px) {
    .footer-main {
        gap: 48px;
    }
    .footer-links-grid {
        flex-basis: 60%;
    }
    .links-header .footer-col:last-child {
        flex: 1 1 0;
    }
}

/* Home gallery: desktop shows all 12 (9 articles + 3 videos); on mobile show
   only the first 6 (4 articles + 2 videos). */
@media (max-width: 768px) {
    .landing-gallery-card-link:nth-child(n+7) {
        display: none;
    }
    /* A touch more breathing room between article cards on mobile (+10px) */
    .landing-gallery-card-link {
        margin-bottom: 50px;
    }
    /* Wider side margins for the artist/author biography on mobile */
    .author-details-page {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 991px) {
    .landing-gallery-grid {
        column-count: 2;
    }
    .search-results-grid {
        column-count: 2;
    }
    .landing-exhibition-section {
        padding: 64px 16px;
    }
    .landing-exhibition-grid {
        flex-direction: column;
        align-items: stretch;
    }
    .landing-exhibition-promo {
        flex: none;
        max-width: none;
        min-height: 0;
        align-self: stretch;
        aspect-ratio: 4 / 5;
    }
    /* On mobile the "CURRENT EXHIBITION" heading moves above the cover, and the
       in-column heading + redundant second image are hidden. */
    .exhibition-header-mobile {
        display: block;
    }
    .landing-current-exhibition .exhibition-header,
    .exhibition-header--top,
    .exhibition-heading-col {
        display: none;
    }
    .exhibition-image-wrapper {
        display: none;
    }
    .exhibition-header {
        margin-bottom: 40px;
    }
    .exhibition-header h2 {
        font-size: 44px;
        line-height: 52px;
    }
    .exhibition-image-wrapper {
        margin-bottom: 32px;
    }
    .exhibition-details {
        flex-direction: column;
    }
    .exhibition-text {
        flex: none;
        max-width: none;
    }
    .exhibition-date {
        width: 100%;
        padding-top: 0;
    }
    .footer-main {
        flex-direction: column;
        gap: 48px;
    }
    .footer-subscribe {
        width: 100%;
        padding: 24px 0;
    }
    .footer-links-grid {
        flex: none;
        width: 100%;
        max-width: none;
        gap: 64px;
    }
}

@media (max-width: 576px) {
    .landing-gallery-grid {
        column-count: 1;
    }
    .search-results-grid {
        column-count: 1;
    }
    .search-results-head {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    .search-results-form {
        flex: 1 1 auto;
        max-width: none;
    }
    .landing-hero-card {
        width: calc(100% - 32px);
        left: 16px;
        bottom: 16px;
        padding: 16px;
    }
    .landing-hero-card h1 {
        font-size: 30px;
        line-height: 38px;
        letter-spacing: -0.6px;
    }
    .landing-section-title {
        font-size: 38px;
        line-height: 46px;
        letter-spacing: -0.76px;
    }
    .landing-map-wrapper {
        height: 560px;
    }
    .map-container, #map {
        min-height: 560px;
    }
    .promo-title h2 {
        font-size: 36px;
    }
    .promo-title h3 {
        font-size: 28px;
    }
    .exhibition-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .exhibition-header h2 {
        font-size: 34px;
        line-height: 42px;
    }
    .footer-links-row.bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .footer-address-list {
        flex-direction: column;
        gap: 24px;
    }
    .scroll-to-top {
        align-self: flex-end;
    }
    .footer-bottom .copyright {
        font-size: 10px;
    }
}

/* ============================================================
   Figma mobile layouts (393px designs → applied ≤576px)
   ============================================================ */

/* Collection strip & mobile exhibition helpers hidden on desktop */
.landing-collection-strip,
.exhibition-mobile-title,
.exhibition-mobile-more {
    display: none;
}

@media (max-width: 576px) {
    /* --- Hero (node 114:240): px-8, card 24/32 title --- */
    .landing-hero-card {
        left: 8px;
        bottom: 16px;
        width: calc(100% - 16px);
        padding: 16px;
    }

    .landing-hero-card h1 {
        font-size: 24px;
        line-height: 32px;
        font-weight: 400;
        letter-spacing: 0;
        margin-bottom: 16px;
    }

    .content-wrapper .landing-hero-card p {
        font-size: 14px !important;
        line-height: 20px !important;
        margin-bottom: 32px;
    }

    /* "READ FULL ARTICLE BY {author}" must stay on ONE line on phones —
       shrink it and stop it wrapping (ellipsis only for extreme names). */
    .landing-hero-link {
        font-size: 13px;
        line-height: 18px;
        white-space: nowrap;
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- Gallery (node 114:246): px-8 py-32 --- */
    .landing-gallery-container {
        padding: 32px 8px;
    }

    /* --- ATINATI MAP on mobile: full-bleed, compact height --- */
    .landing-map-section {
        display: block;
        padding: 32px 0;
    }

    .landing-map-section .container {
        padding: 0 8px;
    }

    .landing-map-section .landing-section-title {
        margin-bottom: 24px;
    }

    /* Tall enough that a marker's info card clears the Explore/search row and
       the bottom edge — the tallest card measures 345px. */
    .landing-map-wrapper {
        height: 560px;
    }

    .map-container,
    #map {
        min-height: 560px;
    }

    /* Explore/filter sidebar full-width sheet on mobile */
    .map-sidebar {
        width: 88vw;
        max-width: 340px;
    }

    /* Marker overlay card on phones — position and width are set in the
       max-width:991px block at the end of this file; only the height bound
       lives here. */
    .landing-overlay-card {
        max-height: calc(100% - 84px);
    }
    /* Shorter cover + tighter text so the whole card (incl. READ MORE) fits on
       phones instead of the link being clipped by the card's overflow. */
    .landing-overlay-image-wrapper {
        /* 2:1 photo on mobile popup info card */
        height: auto;
        aspect-ratio: 2 / 1;
    }
    .landing-overlay-text-wrapper {
        /* 16px at the bottom read as no gap at all under READ MORE. */
        padding: 12px 18px 22px;
    }
    #landing-overlay-title {
        font-size: 19px;
        line-height: 24px;
        margin-bottom: 6px;
    }
    .landing-overlay-region-wrapper {
        margin-bottom: 6px;
    }
    .landing-overlay-description-wrapper {
        margin-bottom: 10px;
    }
    #landing-overlay-description {
        /* Fewer lines so the card (incl. READ MORE) always fits on phones */
        -webkit-line-clamp: 2;
        font-size: 14px;
        line-height: 20px;
    }

    .landing-collection-strip {
        display: block;
        padding: 32px 8px;
    }

    .collection-strip-title {
        font-family: var(--at-font-display);
        font-size: 32px;
        font-weight: 300;
        line-height: 40px;
        text-transform: uppercase;
        color: var(--at-text-primary);
        margin: 0 0 24px;
    }

    .collection-strip-items {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .collection-strip-items::-webkit-scrollbar {
        display: none;
    }

    .collection-strip-item {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: fit-content;
        max-width: 340px;
        text-decoration: none !important;
        color: inherit;
    }

    .collection-strip-item img {
        height: 244px;
        width: auto;
        display: block;
        object-fit: cover;
    }

    .content-wrapper .collection-strip-caption {
        font-family: var(--at-font-text) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
        color: var(--at-text-primary) !important;
        margin: 0;
        width: 0;
        min-width: 100%;
    }

    .collection-strip-more {
        display: flex;
        justify-content: center;
        padding: 8px;
        margin-top: 40px;
    }

    .collection-strip-more a,
    .exhibition-mobile-more a {
        font-family: var(--at-font-text);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: var(--at-text-primary);
        text-decoration: underline;
        text-underline-position: from-font;
    }

    /* --- Exhibition (node 114:405): title 32/40, image 580, strip 162 --- */
    .landing-exhibition-section {
        padding: 32px 8px;
    }

    .exhibition-mobile-title {
        display: block;
        font-family: var(--at-font-display);
        font-size: 32px;
        font-weight: 300;
        line-height: 40px;
        text-transform: uppercase;
        color: var(--at-text-primary);
        margin: 0 0 24px;
    }

    .exhibition-mobile-more {
        display: flex;
        justify-content: center;
        padding: 8px;
        margin-top: 40px;
    }

    .exhibition-header {
        display: none;
    }

    .landing-exhibition-grid {
        gap: 24px;
    }

    .landing-exhibition-promo {
        /* Smaller, centred poster on phones (was full-width 580px tall).
           Needs an explicit width (not just max-width) so aspect-ratio has a
           definite size to resolve against once align-self is no longer stretch. */
        aspect-ratio: 414 / 645;
        min-height: 0;
        height: auto;
        width: 240px;
        max-width: 100%;
        align-self: center;
        margin: 0 auto;
    }

    .exhibition-image-wrapper {
        height: 162px;
        margin-bottom: 24px;
    }

    /* --- Page titles: Figma mobile headings 36/44 --- */
    .category-main-title,
    .contact-main-title,
    .about-hero h1,
    .new-article-title {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -0.72px;
    }

    .landing-section-title,
    .recommended-heading,
    .about-team-title {
        font-size: 36px !important;
        line-height: 44px !important;
        letter-spacing: -0.72px !important;
        font-weight: 500 !important;
    }

    .author-articles-heading {
        font-size: 32px !important;
        line-height: 40px !important;
        letter-spacing: 0 !important;
        font-weight: 300 !important;
    }

    /* Global gutters on mobile — keep text off the screen edges */
    .category-page-wrapper,
    .contact-page-wrapper,
    .about-hero,
    .about-content-section,
    .about-video-section,
    .about-scope-section,
    .catalogue-page,
    .new-article-layout > .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .about-team-section {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* --- Footer (node 947:5731): px-8 py-32, stacked sections --- */
    .footer-main {
        padding: 32px 8px 0;
        gap: 24px;
    }

    .footer-subscribe {
        padding: 24px 0;
        gap: 48px;
    }

    .footer-subscribe h2 {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 0;
    }

    .footer-links-grid {
        padding-top: 24px;
        gap: 64px;
    }

    /* stacked per-section labels+dividers */
    .footer-links-top {
        display: none;
    }

    .footer-links-mobile {
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    .footer-links-mobile-section .col-label {
        display: block;
        margin-bottom: 16px;
    }

    .footer-links-mobile-section .links-line {
        margin-bottom: 28px;
    }

    .footer-links-mobile-section .col-items {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .footer-links-mobile-section .col-items a {
        font-family: var(--at-font-text);
        font-size: 18px;
        font-weight: 400;
        line-height: 28px;
        color: var(--at-text-primary);
        text-decoration: none;
    }

    .footer-links-row.bottom-row {
        position: relative;
        /* space so the scroll-up circle doesn't sit right on the bottom-bar line */
        margin-bottom: 32px;
        padding-bottom: 8px;
    }

    .footer-address-list {
        width: 100%;
        padding-right: 72px;
    }

    .footer-address-list .col-items p,
    .footer-address-list .col-items a {
        white-space: normal;
    }

    /* Scroll-up: 56px circle on mobile (node 947:5768) */
    .scroll-to-top {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
        position: absolute;
        right: 0;
        bottom: 0;
        align-self: auto;
    }

    .scroll-to-top svg {
        width: 24px;
        height: 24px;
    }

    /* Bottom bar: centered copyright */
    .footer-bottom {
        justify-content: center;
    }
}

/* Hide the mobile-only footer sections on desktop */
.footer-links-mobile {
    display: none;
}

@media (max-width: 576px) {
    .footer-links-mobile {
        display: flex;
    }
}

/* ============================================================
   Mobile menu overlay — Figma "Menu items" (node 942:7022)
   ============================================================ */
.mobile-menu {
    background: var(--at-bg-primary) !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}

/* Header: search (left) | logo (center) | close (right) */
.mobile-menu .mobile-menu_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 8px 12px;
    margin-bottom: 0;
}

.mobile-menu-hicon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.mobile-menu-hicon img { width: 24px; height: 24px; }

.mobile-menu-logobox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu .mobile-menu-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Body: list + language pill */
.mobile-menu-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 32px;
    overflow-y: auto;
}

.mobile-menu .mobile-menu-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: visible;
}

.mobile-menu .mobile-menu-item {
    width: 100%;
    padding: 0;
    border: none;
}

/* Item link / About toggle: Ranade Medium 18/28 */
.mobile-menu .mobile-menu-item > a,
.mobile-menu .mobile-about-toggle,
.mobile-menu .mobile-about-toggle span {
    font-family: var(--at-font-nav);
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    color: var(--at-text-primary);
    text-transform: uppercase;
    text-decoration: none;
    display: block;
    padding: 0;
}

.mobile-menu .mobile-menu-item > a:active {
    color: var(--at-text-tertiary);
}

/* About accordion toggle row (title + plus) */
.mobile-menu .mobile-about-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu .mobile-about-plus {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.mobile-menu .mobile-menu-item--about.open .mobile-about-plus {
    transform: rotate(45deg);
}

/* Sub-items (collapsed by default) */
.mobile-menu .mobile-subitem {
    display: block !important;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-menu .mobile-menu-item--about.open .mobile-subitem {
    max-height: 400px;
    margin-top: 12px;
}

.mobile-menu .mobile-subitem li { padding: 0; }

.mobile-menu .mobile-subitem a {
    display: block;
    font-family: var(--at-font-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--at-text-secondary);
    text-transform: none;
    text-decoration: none;
    padding: 8px 0 8px 16px;
}

/* Language pill (GEO / ENG) */
.mobile-lang-switcher {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--at-border-primary);
    border-radius: 24px;
    overflow: hidden;
    align-self: flex-start;
    height: 26px;
}

.mobile-lang-switcher form { margin: 0; }

.mobile-lang-switcher .mobile-lang-btn {
    background: transparent;
    border: none;
    padding: 3px 12px;
    height: 26px;
    font-family: var(--at-font-text);
    font-size: 14px;
    line-height: 20px;
    color: var(--at-text-tertiary);
    cursor: pointer;
    border-radius: 999px;
}

.mobile-lang-switcher .mobile-lang-btn.active {
    background: var(--at-text-primary);
    color: #f6f6f6;
}

/* ============================================================
   Tablet + phone map card. Placed at the end of the file on
   purpose: a media query adds no specificity, so these have to
   come after the base .landing-overlay-card rules to win.
   ============================================================ */
@media (max-width: 991px) {
    /* Horizontally centred on the map, sitting just under the Explore/search
       row rather than behind it. left/right 0 + auto margins centres an
       absolutely positioned box without touching `transform`, which the
       open/close scale animation owns. */
    .landing-overlay-card {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: min(340px, calc(100% - 16px));
        top: 68px;
        /* 68 top + 28 bottom, so the card always keeps clear air under it
           rather than stopping right on the map's edge. */
        max-height: calc(100% - 96px);
    }

    /* Shorter cover, same as on phones — with the tall desktop cover the card
       outgrew its own max-height and clipped the READ MORE link.
       min-height:0 is essential: flex items default to min-height:auto, so a
       portrait photo (e.g. 1772x2607) inflated this box to 485px instead of the
       170px its 2/1 ratio asks for, and pushed READ MORE out of the card. */
    .landing-overlay-image-wrapper {
        height: auto;
        aspect-ratio: 2 / 1;
        min-height: 0;
        overflow: hidden;
    }
}

/* ============================================================
   404 page. Most arrivals here come from an old link shared on
   social media, so it is a signpost rather than a dead end.
   ============================================================ */
.content-wrapper .not-found-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 96px 16px 120px;
    text-align: center;
}

.content-wrapper .not-found-code {
    font-family: var(--at-font-display);
    font-size: 96px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--at-text-primary);
    margin: 0 0 24px;
}

.content-wrapper .not-found-title {
    font-family: var(--at-font-display) !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 40px !important;
    color: var(--at-text-primary) !important;
    margin: 0 0 16px !important;
}

.content-wrapper .not-found-text {
    font-family: 'Roboto', sans-serif !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 28px !important;
    color: var(--at-text-secondary) !important;
    margin: 0 auto 40px !important;
    max-width: 520px;
}

.not-found-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
}

.content-wrapper .not-found-links a {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-transform: uppercase;
    color: var(--at-text-primary) !important;
    text-decoration: none !important;
    border: 1px solid var(--at-border-primary);
    border-radius: 24px;
    padding: 9px 18px;
    transition: background 0.2s ease, color 0.2s ease;
}

.content-wrapper .not-found-links a:hover {
    background: var(--at-text-primary);
    color: #fff !important;
}

.not-found-search {
    display: flex;
    gap: 8px;
    max-width: 420px;
    margin: 0 auto;
}

.not-found-search input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    padding: 11px 16px;
    border: 1px solid var(--at-border-tertiary);
    border-radius: 999px;
    background: #fff;
    outline: none;
    color: var(--at-text-primary);
}

.not-found-search input:focus {
    border-color: var(--at-border-primary);
}

.not-found-search button {
    flex: 0 0 auto;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    background: var(--at-text-primary);
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    cursor: pointer;
}

@media (max-width: 576px) {
    .content-wrapper .not-found-page {
        padding: 56px 16px 80px;
    }

    .content-wrapper .not-found-code {
        font-size: 64px;
    }

    .content-wrapper .not-found-title {
        font-size: 24px !important;
        line-height: 32px !important;
    }
}