/* Design tokens. Every value used by templates comes from here. */
:root {
    --c-paper: #ffffff;
    --c-ink: #111111;
    --c-mute: #767676;
    --c-line: #e6e6e6;
    /* Neutral bed behind artwork thumbnails: mixed-format images need a ground
       that reads as gallery wall, not as an empty slot. */
    --c-frame: #f5f5f5;
    --c-dark: #111111;
    --c-dark-ink: #ffffff;
    /* Text laid over a photo or a dark band. Kept out of the swappable palette
       on purpose: it must stay light however the page around it is coloured. */
    --c-on-media: #ffffff;
    --c-dark-mute: #9a9a9a;

    --f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.5rem;
    --fs-3xl: 3.5rem;

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 1rem;
    --sp-4: 1.5rem;
    --sp-5: 2.5rem;
    --sp-6: 4rem;
    --sp-7: 6rem;

    --w-page: 1600px;
    --g-header-height: 88px;
    --dur: 180ms;
}

@font-face {
    font-family: 'Inter';
    /* One variable file covers every weight the design uses. The format hint
       stays plain woff2: "woff2-variations" is not a valid CSS format() value,
       and a browser that does not recognise the hint skips the download - which
       on Chrome and Firefox meant shipping 344 KB per page that never loaded. */
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

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

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

body {
    margin: 0;
    background: var(--c-paper);
    color: var(--c-ink);
    font-family: var(--f-sans);
    font-size: var(--fs-md);
    line-height: 1.5;
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 400; letter-spacing: -0.01em; margin: 0 0 var(--sp-3); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

.g-container {
    width: 100%;
    max-width: var(--w-page);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

.g-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--sp-4);
    border: 1px solid var(--c-ink);
    background: var(--c-ink);
    color: var(--c-paper);
    font: inherit;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background var(--dur), color var(--dur);
}
.g-btn:hover { background: transparent; color: var(--c-ink); text-decoration: none; }

.g-btn--ghost { background: transparent; color: var(--c-ink); }
.g-btn--ghost:hover { background: var(--c-ink); color: var(--c-paper); }

/* Header */
.g-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--c-line);
    background: var(--c-paper);
    transition: background var(--dur), border-color var(--dur), box-shadow var(--dur), color var(--dur);
}
.admin-bar .g-header { top: 32px; }
.g-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 88px;
}
.g-header__logo { flex: 0 0 auto; }
.g-header__logo-image { width: auto; max-width: min(240px, 30vw); max-height: 52px; filter: none; transition: filter var(--dur); }
.g-header__nav ul {
    display: flex;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--fs-sm);
}
.g-header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}
.g-header__icon {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: border-color var(--dur), background var(--dur);
}
.g-header__icon[type="button"] { padding: 0; color: inherit; font: inherit; cursor: pointer; }
.g-header__icon:hover { border-color: var(--c-ink); background: var(--c-frame); text-decoration: none; }
.g-header__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.g-header__fav-count {
    position: absolute;
    top: -5px;
    right: -6px;
    display: none;
    min-width: 17px;
    height: 17px;
    padding-inline: 3px;
    border-radius: 999px;
    background: var(--c-ink);
    color: var(--c-paper);
    font-size: 10px;
    line-height: 17px;
    text-align: center;
}
.g-header__fav-count:not(:empty) { display: block; }

/* The account link is an icon button by default and unfolds into a word only
   where the header row has room for one — see the wide-screen block below. */
.g-header__account svg { display: block; }
.g-header__account-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (min-width: 1025px) {
    .g-header__account { width: auto; height: auto; border-radius: 0; }
    .g-header__account:hover { border-color: transparent; background: none; }
    .g-header__account svg { display: none; }
    .g-header__account-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }
}

.g-burger { display: none; padding: var(--sp-2); border: 0; background: none; color: inherit; cursor: pointer; }

/* The first slide starts behind the header. A small scroll turns the header
   into the stable white navigation used on the rest of the site. */
.home .g-header {
    margin-bottom: calc(-1 * var(--g-header-height));
    border-bottom-color: transparent;
    background: transparent;
    color: var(--c-paper);
}
.home .g-header.is-scrolled {
    border-bottom-color: var(--c-line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
    color: var(--c-ink);
}
.home .g-header:not(.is-scrolled) .g-header__icon:hover {
    border-color: var(--c-paper);
    background: rgba(255, 255, 255, .16);
}
.home .g-header:not(.is-scrolled) .g-header__fav-count { background: var(--c-paper); color: var(--c-ink); }
/* Over the hero the header carries no background, so the dark logo would
   disappear. Inverting it there keeps it readable; the filter is dropped
   again as soon as the scrolled header paints its white background. */
.home .g-header:not(.is-scrolled) .g-header__logo-image { filter: brightness(0) invert(1); }

@media (max-width: 1024px) {
    .g-burger { display: block; }
    .g-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        inset-inline: 0;
        background: var(--c-paper);
        border-bottom: 1px solid var(--c-line);
        padding: var(--sp-3) var(--sp-4);
        z-index: 20;
    }
    .g-header__nav.is-open { display: block; }
    .g-header__nav ul { flex-direction: column; gap: var(--sp-3); }
    .home .g-header:not(.is-scrolled) .g-header__nav { color: var(--c-ink); }
}

/* Five controls, a burger and a logo have to share one row on a phone. The
   gap closes and the logo yields width before anything wraps to a second line:
   a two-row header would push the hero down on the smallest screens. */
@media (max-width: 600px) {
    .g-header .g-container { padding-inline: var(--sp-3); }
    .g-header__inner { gap: var(--sp-2); min-height: 68px; }
    .g-header__actions { gap: 2px; }
    .g-header__logo-image { max-width: min(120px, 34vw); max-height: 30px; }
    .g-header__icon { width: 32px; height: 32px; }
    .g-header__icon svg { width: 19px; height: 19px; }
    .g-burger { padding: var(--sp-2) 2px; }
}

@media (max-width: 782px) {
    /* The mobile admin bar is overlayed by WordPress itself. Reserving 46px
       here produced an empty strip above the sticky site header. */
    .admin-bar .g-header { top: 0; }
}

/* Footer */
.g-footer {
    background: var(--c-dark);
    color: var(--c-dark-ink);
    padding-block: var(--sp-6);
    margin-top: var(--sp-7);
}
.g-footer a { color: var(--c-dark-mute); }
.g-footer a:hover { color: var(--c-dark-ink); }
.g-footer__inner { display: flex; align-items: flex-start; gap: var(--sp-5); }
.g-footer__left { display: flex; align-items: flex-start; gap: clamp(2.5rem, 5vw, 5rem); }
.g-footer__brand { display: flex; flex: 0 0 clamp(220px, 22vw, 340px); align-items: flex-start; }
.g-footer__logo { color: var(--c-dark-ink) !important; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 600; line-height: 1.1; }
.g-footer__logo:hover { color: var(--c-dark-ink) !important; text-decoration: none; }
.g-footer__logo-image { width: auto; max-width: min(240px, 100%); max-height: 54px; filter: brightness(0) invert(1); opacity: .72; transition: opacity var(--dur); }
.g-footer__logo:hover .g-footer__logo-image { opacity: 1; }
.g-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
.g-footer__contacts { margin-left: auto; text-align: right; font-size: var(--fs-sm); }
.g-footer__contacts p { margin: 0 0 var(--sp-2); }
.g-footer__socials { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
.g-footer__social {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: var(--c-dark-ink) !important;
    transition: background var(--dur), color var(--dur);
}
.g-footer__social:hover { background: var(--c-paper); color: var(--c-ink) !important; text-decoration: none; }
.g-footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.g-footer__social--telegram svg { fill: currentColor; stroke: none; }
.g-footer__social--vk span { font-size: 10px; font-weight: 800; letter-spacing: -.08em; }
.g-footer__social-dot { fill: currentColor; stroke: none; }
.g-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .16); color: var(--c-dark-mute); font-size: .75rem; }
.g-footer__copyright { margin: 0; }
.g-footer__legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem var(--sp-3); }
.g-footer__legal a { text-decoration: underline; text-underline-offset: .18em; }
.g-cookie-banner[hidden] { display: none; }
.g-cookie-banner { position: fixed; z-index: 1100; right: var(--sp-4); bottom: var(--sp-4); width: min(100% - 2rem, 580px); padding: var(--sp-4); background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: 0 .75rem 2.5rem rgba(0, 0, 0, .18); }
.g-cookie-banner p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; }
.g-cookie-banner a { text-decoration: underline; text-underline-offset: .18em; }
.g-cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.g-cookie-banner .g-btn { padding: .7rem 1rem; font-size: .75rem; }
.g-cookie-banner .g-btn--quiet { color: var(--c-ink); background: transparent; border-color: var(--c-line); }

@media (max-width: 640px) {
    .g-footer__inner, .g-footer__left { align-items: flex-start; flex-direction: column; }
    .g-footer__left { gap: var(--sp-4); }
    .g-footer__brand { flex-basis: auto; }
    .g-footer__contacts { margin-left: 0; }
    .g-footer__contacts { text-align: left; }
    .g-footer__socials { justify-content: flex-start; }
    .g-footer__bottom { align-items: flex-start; flex-direction: column; }
    .g-footer__legal { justify-content: flex-start; }
    .g-cookie-banner { right: 1rem; bottom: 1rem; width: calc(100% - 2rem); }
    h1 { font-size: var(--fs-xl); }
}

.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Home showcase */
.g-hero {
    min-height: min(680px, 68vw);
    display: grid;
    align-items: end;
    color: var(--c-paper);
    background: linear-gradient(135deg, #15292b, #7d3f42 52%, #d86d59);
    background-position: center;
    background-size: cover;
}
.g-hero__content { padding-block: clamp(5rem, 12vw, 11rem) clamp(3rem, 7vw, 7rem); }
.g-hero__eyebrow {
    margin: 0 0 var(--sp-3);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--fs-sm);
}
.g-hero h1 { max-width: 800px; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .95; margin-bottom: var(--sp-4); }
.g-hero__text { max-width: 500px; margin: 0 0 var(--sp-5); font-size: var(--fs-lg); }
.g-btn--light { border-color: var(--c-paper); background: transparent; color: var(--c-paper); }
.g-btn--light:hover { background: var(--c-paper); color: var(--c-ink); }

.g-home-section { padding-top: var(--sp-7); }
.g-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.g-section-heading h2 { font-size: clamp(1.8rem, 3vw, 3.25rem); margin: 0; }
.g-section-heading__link { flex: none; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; }
.g-artwork-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.g-artwork-card { position: relative; }
.g-artwork-card__image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-frame); }
.g-artwork-card__image img { display: block; width: 100%; height: 100% !important; max-width: none; object-fit: cover; transition: transform var(--dur); }
.g-artwork-card:hover .g-artwork-card__image img { transform: scale(1.025); }
.g-artwork-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #e9e6e1, #b2aaa1); }
.g-artwork-card__body { padding-top: var(--sp-2); }
.g-artwork-card h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.25; }
.g-artwork-card__details, .g-artwork-card__author { margin: .2rem 0 0; color: var(--c-mute); font-size: var(--fs-sm); }
.g-artwork-card__author { color: var(--c-ink); }
.g-artwork-card__price { margin: var(--sp-2) 0 0; font-weight: 700; }
.g-post-card { min-width: 0; }
.g-post-card__image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-frame); }
.g-post-card__image img { display: block; width: 100%; height: 100% !important; max-width: none; object-fit: cover; transition: transform var(--dur); }
.g-post-card:hover .g-post-card__image img { transform: scale(1.025); }
.g-post-card__body { padding-top: var(--sp-2); }
.g-post-card__meta { margin: 0 0 .25rem; color: var(--c-mute); font-size: var(--fs-sm); }
.g-post-card h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.25; }
.g-post-card__excerpt { margin: var(--sp-2) 0 0; color: var(--c-mute); font-size: var(--fs-sm); }
.g-post-card__link { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
.g-favorite-button { margin-top: var(--sp-2); padding: 0; border: 0; background: transparent; color: var(--c-ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.g-artwork-card .g-favorite-button:not(.g-favorite-button--single) { position: absolute; z-index: 2; top: var(--sp-3); right: var(--sp-3); width: 42px; height: 42px; margin: 0; display: grid; place-items: center; border: 1px solid rgba(17, 17, 17, .08); background: rgba(255, 255, 255, .92); font-size: 1.35rem; }
.g-artwork-card .g-favorite-button:not(.g-favorite-button--single):hover { border-color: var(--c-ink); background: var(--c-paper); }
.g-favorite-button.is-active { color: #a61431; }
.g-artwork-slider { position: relative; }
.g-artwork-slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3rem) / 4); gap: var(--sp-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.g-artwork-slider__track::-webkit-scrollbar { display: none; }
.g-artwork-slider__item { min-width: 0; scroll-snap-align: start; }
.g-artwork-slider__controls { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
.g-artwork-slider__controls button { width: 42px; height: 42px; border: 1px solid var(--c-ink); background: var(--c-paper); color: var(--c-ink); font-size: 1.25rem; cursor: pointer; }
.g-artwork-slider__controls button:hover { background: var(--c-ink); color: var(--c-paper); }
.g-hero-slider { position: relative; color: var(--c-paper); }
.g-hero-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.g-hero-slider__track::-webkit-scrollbar { display: none; }
.g-hero-slider__slide { flex: 0 0 100%; min-height: 560px; display: grid; align-items: end; scroll-snap-align: start; background-position: center; background-size: cover; }
.g-hero-slider--medium .g-hero-slider__slide { min-height: 420px; }
.g-hero-slider__content { padding-top: clamp(5rem, 13vw, 12rem); padding-bottom: clamp(3rem, 8vw, 7rem); padding-left: calc(var(--sp-4) + var(--g-hero-content-inset-left, 0px)); padding-right: calc(var(--sp-4) + var(--g-hero-content-inset-right, 0px)); }
.home .g-hero-slider__content { padding-top: calc(var(--g-header-height) + clamp(5rem, 13vw, 12rem)); }
.g-hero-slider__content-inner { width: min(100%, var(--g-hero-content-width, 820px)); }
.g-hero-slider__content h1, .g-hero-slider__content h2 { font-size: var(--g-hero-title-size, clamp(3rem, 7vw, 6.5rem)); line-height: .95; }
.g-hero-slider__content p { margin-bottom: var(--sp-5); font-size: var(--fs-lg); }
.g-hero-slider__controls { position: absolute; right: 0; bottom: var(--sp-4); left: 0; display: flex; justify-content: flex-end; gap: var(--sp-2); }
.g-hero-slider__controls button { width: 44px; height: 44px; border: 1px solid var(--c-paper); background: rgba(0, 0, 0, .25); color: var(--c-paper); font-size: 1.25rem; cursor: pointer; }
.g-hero-slider__controls button:hover { background: var(--c-paper); color: var(--c-ink); }
.g-favorite-button--single { margin-top: var(--sp-4); }
.g-empty-state { margin: 0; padding: var(--sp-5); color: var(--c-mute); background: var(--c-frame); }
.g-home-content { margin-top: var(--sp-7); }
.g-favorites { min-height: 55vh; padding-top: var(--sp-5); }
.g-favorites h1 { font-size: clamp(2.5rem, 5vw, 5rem); }
.g-favorites__empty { margin-block: var(--sp-5); color: var(--c-mute); }

@media (max-width: 900px) {
    .g-artwork-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-artwork-slider__track { grid-auto-columns: calc((100% - 1rem) / 2); }
}
@media (max-width: 640px) {
    .g-hero { min-height: 560px; }
    .g-hero__content { padding-block: 8rem 4rem; }
    .g-section-heading { align-items: flex-start; flex-direction: column; gap: var(--sp-2); }
    .g-home-section { padding-top: var(--sp-6); }
    .g-artwork-slider__track { grid-auto-columns: 100%; }
}

/* Catalogue */
.g-catalog { padding-top: var(--sp-5); }
.g-breadcrumb { margin: 0 0 var(--sp-4); color: var(--c-mute); font-size: var(--fs-sm); }
.g-breadcrumb a { color: var(--c-ink); }
/* Rank Math prints its trail as a nested <p>; the wrapper owns the spacing. */
.g-breadcrumb p { margin: 0; }
.g-breadcrumb .separator { padding-inline: .35em; }
.g-breadcrumb .last { color: var(--c-mute); }
.g-catalog__header { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line); }
.g-catalog__header h1 { font-size: clamp(2.5rem, 5vw, 5rem); margin: 0; }
.g-catalog__layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--sp-6); padding-top: var(--sp-5); }
.g-catalog__sidebar { align-self: start; }
.g-filter-sort { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-4); }
.g-filter-sort label, .g-filter summary { font-size: var(--fs-sm); font-weight: 600; }
.g-filter-sort select, .g-filter input { width: 100%; border: 0; border-bottom: 1px solid var(--c-line); padding: .55rem 0; background: transparent; color: var(--c-ink); font: inherit; }
.g-filter { border-top: 1px solid var(--c-line); padding-block: var(--sp-3); }
.g-filter:last-of-type { border-bottom: 1px solid var(--c-line); }
.g-filter summary { display: flex; cursor: pointer; list-style: none; justify-content: space-between; }
.g-filter summary::-webkit-details-marker { display: none; }
.g-filter summary::after { content: '+'; font-size: var(--fs-lg); font-weight: 400; }
.g-filter[open] summary::after { content: '−'; }
.g-filter__body { display: grid; gap: .55rem; padding-top: var(--sp-3); }
.g-filter__body label { display: flex; gap: .55rem; align-items: baseline; font-size: var(--fs-sm); }
.g-filter__body input[type="checkbox"], .g-filter__body input[type="radio"] { width: auto; accent-color: var(--c-ink); }
.g-filter__range { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.g-filter__range label { display: block; color: var(--c-mute); }
.g-filter__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-4); font-size: var(--fs-sm); }
.g-filter__actions .g-btn { min-height: 40px; padding-inline: var(--sp-3); }
.g-catalog__count { margin: 0 0 var(--sp-3); color: var(--c-mute); font-size: var(--fs-sm); }
.g-artwork-grid--catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-pagination { margin-top: var(--sp-6); }
.g-pagination .nav-links { display: flex; gap: var(--sp-2); align-items: center; }
.g-pagination a, .g-pagination span { display: grid; place-items: center; min-width: 2.3rem; height: 2.3rem; border: 1px solid var(--c-line); }
.g-pagination .current { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }

/* Artwork page */
.g-artwork { padding-top: var(--sp-5); }
.g-artwork__layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: clamp(2rem, 7vw, 8rem); align-items: start; }
.g-artwork__visual { min-width: 0; }
.g-artwork__media { min-height: 420px; background: var(--c-frame); display: grid; place-items: center; }
.g-artwork__main-image { width: 100%; height: 100%; min-height: inherit; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.g-artwork__main-image img { display: block; width: 100%; max-height: 82vh; object-fit: contain; }
.g-artwork__thumbnails { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: var(--sp-3); }
.g-artwork__thumbnail { width: 74px; height: 74px; padding: 0; overflow: hidden; border: 1px solid transparent; background: var(--c-frame); cursor: pointer; }
.g-artwork__thumbnail.is-active { border-color: var(--c-ink); }
.g-artwork__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-artwork__thumbnail:hover { border-color: var(--c-ink); }
.g-artwork__info { border: 1px solid var(--c-line); padding: var(--sp-5); }
.g-artwork__info h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; }
.g-artwork__author { margin: 0 0 var(--sp-2); }
.g-artwork__details { color: var(--c-mute); }
.g-artwork__price { margin-block: var(--sp-5); font-size: var(--fs-xl); font-weight: 700; }
.g-artwork__actions { display: flex; align-items: stretch; gap: var(--sp-2); flex-wrap: nowrap; }
.g-artwork__actions .g-btn { min-width: 0; flex: 1 1 0; white-space: nowrap; }
.g-favorite-button--single { flex: 0 0 48px; width: 48px; height: 48px; margin: 0; display: grid; place-items: center; border: 0; background: #eeeeee; color: var(--c-ink); font-size: 1.45rem; }
.g-favorite-button--single:hover, .g-favorite-button--single.is-active { background: var(--c-ink); color: var(--c-paper); }
@media (max-width: 640px) {
    .g-artwork__actions .g-btn { padding-inline: .75rem; font-size: clamp(.68rem, 2.8vw, var(--fs-sm)); }
}
.g-artwork__description { max-width: 720px; margin-top: var(--sp-7); }
.g-modal[hidden] { display: none; }
.g-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: var(--sp-4); }
.g-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.g-modal__dialog { position: relative; width: min(100%, 580px); max-height: calc(100vh - 3rem); overflow-y: auto; padding: clamp(1.5rem, 4vw, 3rem); background: var(--c-paper); box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .25); }
.g-modal__dialog h2 { margin-right: 2.5rem; }
.g-modal__close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 42px; height: 42px; border: 0; background: transparent; font-size: 2rem; line-height: 1; cursor: pointer; }
.g-modal__close:hover { background: var(--c-frame); }
.g-modal__artwork { margin: 0 0 var(--sp-4); color: var(--c-mute); }
.g-inquiry-form { max-width: 100%; }
.g-inquiry-form .g-field { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.g-inquiry-form .g-field label { font-size: var(--fs-sm); font-weight: 600; }
.g-inquiry-form .g-consent { display: block; margin-top: var(--sp-4); }
.g-inquiry-form .g-consent label { display: flex; align-items: flex-start; gap: .65rem; font-weight: 400; line-height: 1.45; }
.g-inquiry-form .g-consent input { width: 1rem; height: 1rem; min-width: 1rem; margin: .18rem 0 0; accent-color: var(--c-ink); }
.g-inquiry-form .g-consent a { text-decoration: underline; text-underline-offset: .18em; }
.g-inquiry-form input:not([type="hidden"]), .g-inquiry-form textarea { width: 100%; border: 1px solid var(--c-line); border-radius: 0; background: #fafafa; color: var(--c-ink); font: inherit; transition: border-color var(--dur), background var(--dur), box-shadow var(--dur); }
.g-inquiry-form input:not([type="hidden"]) { height: 50px; padding: 0 var(--sp-3); }
.g-inquiry-form textarea { min-height: 130px; padding: var(--sp-3); resize: vertical; }
.g-inquiry-form input:focus, .g-inquiry-form textarea:focus { outline: 0; border-color: var(--c-ink); background: var(--c-paper); box-shadow: 0 0 0 2px rgba(17, 17, 17, .12); }
.g-inquiry-form .g-btn { width: 100%; }
.g-form__status { min-height: 1.5em; margin: 0 0 var(--sp-3); }
.g-honeypot { position: absolute; left: -9999px; }
.g-modal-open { overflow: hidden; }
.g-artwork-lightbox[hidden] { display: none; }
.g-artwork-lightbox { position: fixed; z-index: 1200; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.g-artwork-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); }
.g-artwork-lightbox__dialog { position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.g-artwork-lightbox__dialog img { display: block; width: auto; height: auto; max-width: min(100%, 1280px); max-height: 100%; object-fit: contain; }
.g-artwork-lightbox__close, .g-artwork-lightbox__nav { position: absolute; z-index: 1; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .25); color: #fff; font-size: 1.65rem; cursor: pointer; }
.g-artwork-lightbox__close { top: .5rem; right: .5rem; font-size: 2rem; }
.g-artwork-lightbox__nav { top: 50%; transform: translateY(-50%); }
.g-artwork-lightbox__nav--previous { left: .5rem; }
.g-artwork-lightbox__nav--next { right: .5rem; }
.g-artwork-lightbox__close:hover, .g-artwork-lightbox__nav:hover { background: #fff; color: #111; }
.g-artwork-lightbox__count { position: absolute; right: 0; bottom: 0; left: 0; margin: 0; padding: .75rem; color: #fff; text-align: center; font-size: var(--fs-sm); text-shadow: 0 1px 3px #000; }
.g-search-modal[hidden] { display: none; }
.g-search-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: start center; padding: clamp(5rem, 16vh, 11rem) var(--sp-4) var(--sp-4); }
.g-search-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.g-search-modal__dialog { position: relative; width: min(100%, 760px); padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--c-paper); box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .25); }
.g-search-modal__dialog h2 { margin: 0 3rem var(--sp-4) 0; font-size: clamp(2rem, 4vw, 3.25rem); }
.g-search-modal__close { position: absolute; top: var(--sp-3); right: var(--sp-3); width: 42px; height: 42px; padding: 0; border: 0; background: transparent; color: var(--c-ink); font-size: 2rem; line-height: 1; cursor: pointer; }
.g-search-modal__close:hover { background: var(--c-frame); }
.g-search-modal__form { display: flex; gap: var(--sp-2); }
.g-search-modal__form input { min-width: 0; flex: 1; min-height: 50px; padding: 0 var(--sp-3); border: 1px solid var(--c-line); border-radius: 0; background: var(--c-paper); color: var(--c-ink); font: inherit; }
.g-search-modal__form input:focus { outline: 2px solid var(--c-ink); outline-offset: 2px; }
@media (max-width: 520px) { .g-search-modal__form { flex-direction: column; } .g-search-modal__form .g-btn { width: 100%; } }

/* Artist profile */
.g-artist__hero { position: relative; min-height: 320px; display: grid; align-items: end; color: var(--c-on-media); background: var(--c-dark); background-position: center; background-size: cover; }
/* The banner image is set inline on the element, so the scrim that keeps the
   name readable over a bright photo has to be its own layer rather than a
   second background-image the inline style would overwrite. */
.g-artist__hero--cover::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .15)); }
.g-artist__hero-inner { position: relative; display: flex; align-items: end; gap: var(--sp-4); padding-block: var(--sp-6); }
.g-artist__hero h1 { margin: 0; font-size: clamp(2.8rem, 6vw, 5rem); }
.g-artist__photo { width: 112px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 2px solid var(--c-on-media); }
.g-artist__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Same column split and gutter as the catalogue, so an artist page and a
   catalogue page render their cards at identical width. */
.g-artist__body { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--sp-6); padding-top: var(--sp-6); }
/* The colour an artist picks in the cabinet. It paints the whole page and, on a
   dark choice, swaps the palette tokens so text, links, buttons and card meta
   stay readable — each of them already reads its colour from these tokens. */
.g-artist--tinted { background: var(--g-artist-bg); }
.g-artist--tinted .g-artist__body { padding-bottom: var(--sp-6); }
.g-artist--dark {
    --c-paper: #111111;
    --c-ink: #f4f4f4;
    --c-mute: #b6b6b6;
    --c-line: rgba(255, 255, 255, .22);
    --c-frame: rgba(255, 255, 255, .08);
    color: var(--c-ink);
}
/* The card thumbnails keep their own light bed: an artwork photographed against
   white looks broken on a tinted one. */
.g-artist--dark .g-artwork-card__image { background: rgba(255, 255, 255, .12); }

.g-artist__body--wide { grid-template-columns: minmax(0, 1fr); }
/* Without the aside the works have the whole page width, so they need a fourth
   column to keep a card the same size as one in the catalogue beside its filters. */
.g-artist__body--wide .g-artwork-grid--catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-artist__about { align-self: start; }
.g-artist__about h2 { font-size: var(--fs-xl); }
.g-artist__about .g-btn { margin-top: var(--sp-4); }

@media (max-width: 900px) {
    .g-catalog__layout, .g-artwork__layout, .g-artist__body { grid-template-columns: 1fr; gap: var(--sp-5); }
    .g-catalog__sidebar { border-bottom: 1px solid var(--c-line); padding-bottom: var(--sp-4); }
    .g-artwork-grid--catalog,
    .g-artist__body--wide .g-artwork-grid--catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .g-artwork-grid--catalog,
    .g-artist__body--wide .g-artwork-grid--catalog { grid-template-columns: 1fr; }
    .g-artwork__info { padding: var(--sp-4); }
    .g-artwork__media { min-height: 300px; }
    .g-artwork__thumbnail { width: 60px; height: 60px; }
    .g-artwork-lightbox { padding: var(--sp-2); }
    .g-artwork-lightbox__close, .g-artwork-lightbox__nav { width: 40px; height: 40px; }
}

/* Regular WordPress and Elementor pages */
.g-page { min-height: 55vh; padding-top: var(--sp-6); }
.g-page__header { max-width: 900px; margin-bottom: var(--sp-5); }
.g-page__header h1 { font-size: clamp(2.5rem, 5vw, 5rem); }
.g-page__content { max-width: 900px; }
.g-page__content > :first-child { margin-top: 0; }
.g-post-list { max-width: 860px; display: grid; gap: var(--sp-4); }
.g-post-list__item { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-line); }
.g-post-list__item h2 { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.g-post-list__item p { margin: 0; color: var(--c-mute); }

/* Blog: editorial hierarchy, intentionally free of catalogue controls. */
.g-blog { min-height: 55vh; padding-top: var(--sp-6); }
.g-blog__list { display: grid; gap: var(--sp-6); }
.g-blog-card { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-line); }
.g-blog-card__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-frame); }
.g-blog-card__image img { width: 100%; height: 100%; object-fit: cover; }
.g-blog-card time, .g-article time { color: var(--c-mute); font-size: var(--fs-sm); }
.g-blog-card h2 { margin-top: var(--sp-2); font-size: clamp(1.7rem, 3vw, 3rem); }
.g-blog-card p { max-width: 680px; color: var(--c-mute); }
.g-text-link { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.g-article { max-width: 1100px; padding-top: var(--sp-6); }
.g-article__header { max-width: 850px; margin-bottom: var(--sp-6); }
.g-article__header h1 { margin-top: var(--sp-3); font-size: clamp(2.7rem, 6vw, 5.5rem); line-height: .98; }
.g-article__lead { max-width: 680px; color: var(--c-mute); font-size: var(--fs-lg); }
.g-article__image { margin: 0 0 var(--sp-6); }
.g-article__image img { width: 100%; }
.g-article__content { max-width: 760px; font-size: 1.125rem; }
.g-article__content > :first-child { margin-top: 0; }
.g-article__content h2 { margin-top: var(--sp-6); font-size: var(--fs-2xl); }
@media (max-width: 700px) { .g-blog-card { grid-template-columns: 1fr; gap: var(--sp-3); } }

/* Home page editorial blocks: SEO copy, figures, steps, FAQ and the closing
   call to action. They share the section rhythm of the artwork blocks so the
   page keeps one vertical grid whatever order the editor arranges them in. */
.g-seo-text__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.g-seo-text__intro h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 3.25rem); }
.g-seo-text__lead { margin: var(--sp-3) 0 0; color: var(--c-mute); font-size: var(--fs-lg); }
.g-seo-text__link { display: inline-block; margin-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.g-seo-text__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
.g-seo-text__item h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); }
.g-seo-text__item p { margin: 0; color: var(--c-mute); }

.g-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); border-top: 1px solid var(--c-line); }
.g-trust__item { padding: var(--sp-4) var(--sp-3) 0 0; }
.g-trust__value { margin: 0; font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 600; line-height: 1; }
.g-trust__label { margin: var(--sp-2) 0 0; color: var(--c-mute); font-size: var(--fs-sm); }

.g-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.g-steps__item { padding-top: var(--sp-3); border-top: 1px solid var(--c-ink); }
.g-steps__number { display: block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .1em; color: var(--c-mute); }
.g-steps__item h3 { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-lg); }
.g-steps__item p { margin: 0; color: var(--c-mute); font-size: var(--fs-sm); }

.g-faq__list { display: grid; border-top: 1px solid var(--c-line); }
.g-faq__item { border-bottom: 1px solid var(--c-line); }
.g-faq__item summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; font-size: var(--fs-lg); font-weight: 600; cursor: pointer; list-style: none; }
.g-faq__item summary::-webkit-details-marker { display: none; }
.g-faq__item summary::after { content: '+'; flex: none; font-weight: 400; font-size: 1.5rem; line-height: 1; }
.g-faq__item[open] summary::after { content: '−'; }
.g-faq__item p { max-width: 900px; margin: 0; padding-bottom: var(--sp-4); color: var(--c-mute); }

.g-cta { padding-top: var(--sp-7); }
.g-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: clamp(2rem, 5vw, 4rem); background: var(--c-dark); color: var(--c-dark-ink); }
.g-cta__text h2 { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.6rem); }
.g-cta__text p { max-width: 620px; margin: var(--sp-2) 0 0; color: var(--c-dark-mute); }
.g-cta__actions { display: flex; flex: none; align-items: center; gap: var(--sp-3); }
.g-cta__contact { color: var(--c-dark-ink); font-weight: 600; white-space: nowrap; }

@media (max-width: 1024px) {
    .g-seo-text__inner { grid-template-columns: 1fr; }
    .g-steps__list, .g-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .g-seo-text__grid, .g-steps__list, .g-trust__grid { grid-template-columns: 1fr; }
    .g-cta__inner { flex-direction: column; align-items: flex-start; }
    .g-cta__actions { flex-wrap: wrap; }
}

/* Header phone: the fastest path to a sale for a visitor who is ready to ask.
   Hidden on narrow screens, where the burger already crowds the bar. */
.g-header__phone { font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) { .g-header__phone { display: none; } }

/* The artwork call to action, pinned on phones only. */
.g-artwork__sticky { display: none; }
@media (max-width: 860px) {
    .g-artwork__sticky {
        position: sticky;
        bottom: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        margin: var(--sp-5) calc(-1 * var(--sp-4)) 0;
        padding: var(--sp-3) var(--sp-4);
        border-top: 1px solid var(--c-line);
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
    }
    .g-artwork__sticky-price { font-weight: 700; }
    .g-artwork__sticky .g-btn { flex: none; }
}