/* ==========================================================================
   Elise — a white gallery wall. The artist's name in Nunito, set large over
   two lines, and a small uppercase Poppins menu in a white sidebar on the
   right; the work in calm grids with italic captions beneath.
   Ink #333 · grey #777 · white.
   ========================================================================== */

/* Defaults (Customize → Elise Design overrides them). */
:root {
    --art-bg: #ffffff;
    --art-surface: #f4f4f4;
    --art-text: #333333;
    --art-heading: #333333;
    --art-muted: #777777;
    --art-link: #333333;
    --art-link-hover: #777777;
    --art-accent: #333333;
    --art-accent-2: #e6e6e6;
    --art-price: #333333;
    --art-font: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --art-size: 14px;
    --art-heading-font: "Nunito", "Helvetica Neue", Arial, sans-serif;
    --art-heading-weight: 400;
    --art-heading-case: none;
    --art-meta-font: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --art-header-bg: #ffffff;
    --art-header-text: #333333;
    --art-header-hover: #777777;
    --art-header-rule: #f0f0f0;
    --art-header-rule-w: 1px;
    --art-title-font: "Nunito", "Helvetica Neue", Arial, sans-serif;
    --art-title-size: 44px;
    --art-title-weight: 400;
    --art-title-case: none;
    --art-title-tracking: 0px;
    --art-logo-h: 60px;
    --art-nav-font: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --art-nav-size: 13px;
    --art-nav-weight: 400;
    --art-nav-case: uppercase;
    --art-nav-tracking: 0px;
    --art-footer-bg: #ffffff;
    --art-footer-text: #777777;
    --art-footer-link: #333333;
    --art-footer-hover: #777777;
    --art-footer-rule: #f0f0f0;
    --art-footer-rule-w: 0px;
    --art-footer-font: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --art-footer-size: 12px;
    --art-footer-case: none;
    --art-gallery-gap: 32px;
}

:root { --vs-side: 255px; --vs-pad: 32px; --vf-screen-bg: rgba(255, 255, 255, .98); --vf-screen-text: #333; }

body { line-height: 1.85; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.01em; }

/* The name: large, light, and allowed to break over two lines in the sidebar. */
.art-brand { line-height: 1.02; letter-spacing: -.02em; }
.art-tagline { font-size: 11px; color: var(--art-muted); opacity: 1; }

/* The menu: small uppercase, grey on hover, the current page in ink. */
.art-menu .nav-link, .art-menu .dropdown-item { opacity: 1; }
.art-menu .nav-link:hover, .art-menu .dropdown-item:hover { color: var(--art-header-hover); }
.art-menu .nav-link.active, .art-menu .current-menu-item > .nav-link, .art-menu .current-menu-ancestor > .nav-link { color: var(--art-header-text); font-weight: 500; }

/* Desktop: the sidebar sits on the right (the shared video layer puts it on the left). */
@media (min-width: 992px) {
    .vs-side { padding-left: 0; padding-right: var(--vs-side); }
    .vs-side .art-header { left: auto; right: 0; border-right: 0; border-left: var(--art-header-rule-w) solid var(--art-header-rule); }
    .vs-side .art-header__inner { gap: 2rem; padding-top: 52px; }
    /* A section's albums unfold under it when its + is pressed (theme-extra.php); the section
       you're in starts open. Without the script, they unfold on hover instead. */
    .vs-side .art-menu .dropdown-menu { position: static !important; display: none; float: none; inset: auto !important; transform: none !important; margin: .1rem 0 .5rem; padding: 0 0 0 .9rem; min-width: 0; border: 0; border-left: 1px solid var(--art-header-rule); box-shadow: none; background: transparent; }
    html:not(.el-subnav) .vs-side .art-menu .dropdown:hover > .dropdown-menu,
    html:not(.el-subnav) .vs-side .art-menu .dropdown:focus-within > .dropdown-menu,
    html:not(.el-subnav) .vs-side .art-menu .current-menu-ancestor > .dropdown-menu,
    .el-subnav .vs-side .art-menu .dropdown > .dropdown-menu { display: none; } /* Not on hover (the shared stylesheet opens them on hover). */
    .vs-side .art-menu .dropdown.is-open > .dropdown-menu,
    .el-subnav .vs-side .art-menu .dropdown.is-open > .dropdown-menu { display: block; }
    /* Each item stacks: the link on its own line, its submenu under it (as a flex row the
       link could shrink to nothing beside the open submenu). The menu keeps the sidebar's
       width, so opening a submenu doesn't shift it. */
    .vs-side .art-nav, .vs-side .art-menu { width: 100%; }
    .vs-side .art-menu > li { display: block; position: relative; }
    .vs-side .art-menu > li > .nav-link { display: block; width: 100%; }
    .el-subnav .vs-side .art-menu > li.dropdown > .nav-link { padding-right: 2rem; }
    .el-subnav .vs-side .art-menu .dropdown-toggle::after { display: none; }
    .el-sub-toggle {
        position: absolute; top: .15rem; right: 0; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; background: none;
        color: var(--art-header-text); font: 300 18px/1 var(--art-nav-font); cursor: pointer; opacity: .7;
    }
    .el-sub-toggle:hover, .el-sub-toggle:focus-visible { opacity: 1; }
    .vs-side .art-menu .dropdown-item { padding: .22rem 0; font-size: 12px; white-space: normal; text-transform: none; color: var(--art-header-text); }
    .vs-side .art-menu .dropdown-toggle::after { border: 0; content: "›"; vertical-align: 0; margin-left: .5rem; font-size: 15px; line-height: 1; opacity: .6; transition: transform .2s ease; }
    html:not(.el-subnav) .vs-side .art-menu .dropdown:hover > .dropdown-toggle::after,
    html:not(.el-subnav) .vs-side .art-menu .current-menu-ancestor > .dropdown-toggle::after { transform: rotate(90deg); }
}

/* Home: the sections, as on the artist's own site — a cover and the title beneath. */
.el-home { padding-top: clamp(28px, 4vw, 48px); }
.el-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
@media (max-width: 991.98px) { .el-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .el-tiles { grid-template-columns: minmax(0, 1fr); } }
.el-tile { display: block; color: var(--art-text); text-decoration: none; text-align: center; }
.el-tile__media { display: block; aspect-ratio: 11 / 10; overflow: hidden; background: var(--art-surface); }
.el-tile__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
.el-tile:hover .el-tile__img { opacity: .88; }
.el-tile__title { display: block; margin-top: 1.1rem; font: 500 20px/1.25 var(--art-heading-font); letter-spacing: -.01em; color: var(--art-heading); }

/* Pages and albums */
.edith-page__title, .edith-post__title { font: 400 clamp(28px, 3vw, 38px)/1.2 var(--art-heading-font); }
.fran-artwork__caption { padding-top: .6rem; font-size: 13px; font-style: italic; text-align: center; color: var(--art-muted); }
.fran-artwork__title { font-style: italic; }
.art-home-section__head { border: 0; }
.art-home-section__head .edith-section-title { font: 400 26px var(--art-heading-font); color: var(--art-heading); }
.art-news-list__title { font: 400 19px var(--art-heading-font); }
.edith-shop-grid .btn.edith-btn { background: #333; border-color: #333; color: #fff; border-radius: 0; }
.edith-shop-grid .btn.edith-btn:hover { background: #000; border-color: #000; }

/* Footer: quiet, white */
.art-footer__name { font: 400 18px var(--art-heading-font); color: var(--art-footer-link); }
@media (max-width: 991.98px) { .el-sub-toggle { display: none; } }