/* ============================================================
   Pictavera — responsive / fluid layer (modern skeleton).
   Loaded LAST. Keeps the dark identity, logo, hero and framed
   art cards, but replaces the fixed 950px layout with a fluid
   container + CSS grid + mobile breakpoints.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body {                   /* the ornament reaches the bottom even on short pages */
    background: #0e0c0b url("img/bg_ornate.40924f09224c.gif") repeat;
}
body { color: #e7e7ea; min-height: 100vh; }

/* Fluid, centred container instead of the fixed 1000/950px block */
#container {
    width: auto !important;
    max-width: 1360px;
    margin: 0 auto !important;
    background: none !important;
    padding: 0 16px;
}
#cont { width: 100% !important; margin: 0 !important; }
.clear { clear: both; }

/* ---- Top login strip ---- */
#login_panel {
    width: 100% !important; height: auto !important; float: none !important;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 8px 0; margin: 0;
}
#login_panel form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#languages { margin-left: auto; }
#languages a { display: inline-block; }

/* ---- Logo + navigation as a flex bar ---- */
#logo_menu {
    width: 100% !important; height: auto !important; float: none !important;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 0;
}
a.logo {
    float: none !important; margin: 0 !important; flex: 0 0 auto;
    width: 200px; height: 66px; background-size: contain;
}
/* Navigation: quiet text links (gallery style) — no boxes. A thin bronze line
   grows under the link on hover and stays under the current page. */
#menu {
    width: auto !important; height: auto !important;
    float: none !important; margin: 0 !important;
    flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 30px; justify-content: center;
}
a.but {
    float: none !important; width: auto !important; height: auto !important;
    flex: 0 0 auto; min-width: 0; position: relative;
    background: none !important; border: 0; border-radius: 0;
    margin: 0 !important; opacity: 1; text-align: center; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
}
a.but::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: 3px; height: 2px;
    background: var(--c-line); transition: left .25s ease, right .25s ease;
}
a.but:hover::after, a.but:focus-visible::after, a.but.active::after { left: 0; right: 0; }
a.but:focus-visible { outline: 2px solid var(--c-line-hover); outline-offset: 4px; }
a.but span {
    float: none !important; width: auto !important; height: auto !important;
    margin: 0 !important; display: block; padding: 12px 0; text-align: center;
    white-space: nowrap; font: 500 12.5px 'Inter', sans-serif; letter-spacing: .14em;
    color: var(--c-nav-text); transition: color .2s ease;
}
a.but:hover span { color: var(--c-text-hover); }
.site-stats {
    display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px;
    color: var(--c-nav-text); white-space: nowrap;
    font: 500 12px 'Inter', sans-serif; letter-spacing: .02em;
}
.site-stats-dot {
    width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%;
    background: #42c866; box-shadow: 0 0 6px rgba(66, 200, 102, .55);
}
.site-stats-mobile { display: none; }
/* Logo + menu sit on a calm dark band so the ornamental page background never
   shows behind the menu text (the old boxes used to cover it). */
#logo_menu {
    background: #0b0a09; border: 1px solid #2a2622; border-bottom-color: var(--c-line-soft);
    border-radius: 5px; padding: 8px 18px !important; margin: 4px 0 6px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* Menu centred on the PAGE, not just in the space after the logo: an empty
   right-hand column as wide as the logo balances the row. */
@media (min-width: 601px) {
    #logo_menu { display: grid !important; grid-template-columns: 200px 1fr 200px; align-items: center; }
    #logo_menu > #menu { grid-column: 2; }
    #logo_menu > .site-stats { grid-column: 3; justify-self: end; }
}
@media (min-width: 601px) and (max-width: 900px) {
    /* tablets: smaller logo column so the centred menu keeps enough room */
    #logo_menu { grid-template-columns: 140px 1fr 140px; }
    #logo_menu > a.logo { width: 140px; }
}

/* ---- Hero: full width, keeps aspect ratio, scales down ---- */
#header {
    width: 100% !important; height: auto !important; aspect-ratio: 960 / 235;
    float: none !important; background-size: cover !important; background-position: center;
    border-radius: 8px; overflow: hidden; position: relative; display: block;
}
.hero-link { display: block; position: relative; }

/* ---- "Upload artwork" in the page bar (Contemporary / For Sale only), right after
   the section title; the search stays on the right. ---- */
#page_bar .upload-cta {
    margin-right: auto; padding: 6px 14px; border: 1px solid var(--c-line); border-radius: 3px;
    color: var(--c-text) !important; text-decoration: none;
    font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
#page_bar .upload-cta:hover { border-color: var(--c-line-hover); color: var(--c-text-hover) !important; background: var(--c-glow); }

#page_bar .archive-counts {
    display: flex; gap: 8px; margin-right: auto; color: #c9c3bb;
    font: 12px Inter, Arial, sans-serif;
}
#page_bar .archive-counts > div {
    padding: 5px 10px; border: 1px solid #535353; border-radius: 4px; background: #171717;
}
#page_bar .archive-counts strong { color: var(--c-text); font-size: 15px; margin-right: 3px; }
.archive-back {
    display: inline-block; margin-bottom: 14px; padding: 6px 10px;
    border: 1px solid var(--c-line); border-radius: 4px; color: var(--c-text) !important;
    font: 600 12px Inter, Arial, sans-serif; text-decoration: none;
}
.archive-back:hover { border-color: var(--c-line-hover); color: var(--c-text-hover) !important; background: var(--c-glow); }

/* ---- Full-width bars ---- */
#breadcrumb, #page_bar, #alphabet_holder, #content_holder,
#foother, #view_holder, .view-image, #view_comments {
    width: 100% !important; float: none !important;
}
#breadcrumb { height: auto !important; padding: 9px 12px; }
#breadcrumb span { float: none !important; height: auto !important; line-height: 1.4 !important; margin: 0 !important; }
#page_bar {
    height: auto !important; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 12px; flex-wrap: wrap;
}
#page_bar span { float: none !important; margin: 0 !important; }
#page_bar form { float: none !important; }
#search { float: none !important; }


#alphabet_holder { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px; }
#alphabet_holder a { margin: 0 !important; }
.archive-style-filter {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    border: 1px solid #454545; background: #090909;
    font: 600 12px Inter, Arial, sans-serif; color: #c9c3bb;
}
.archive-style-filter select {
    min-width: 220px; max-width: 100%; padding: 7px 34px 7px 10px;
    border: 1px solid #575757; border-radius: 4px; background: #202020; color: #eee;
}

/* ---- Modern responsive art grid ---- */
#content_holder { padding: 14px; display: flex; flex-wrap: wrap; gap: 14px; align-content: flex-start; }
.archive_list { float: none !important; width: 300px !important; flex: 0 0 300px; }
.archive_list a { float: none !important; width: 100% !important; margin: 0 0 8px 0 !important; box-sizing: border-box; }
.ads { float: none !important; width: auto !important; flex: 1 1 320px; margin: 0 !important; display: flex; flex-wrap: wrap; gap: 14px; align-content: flex-start; }
.archive-pager { flex: 0 0 100%; width: 100%; }

#content_holder > .image, .ads > .image {
    float: none !important; margin: 0 !important;
    flex: 1 1 240px; max-width: 320px; width: auto !important;
    aspect-ratio: 6 / 5; height: auto !important; line-height: normal !important;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#content_holder .image img, .ads .image img {
    max-width: 100% !important; max-height: 100% !important; width: auto !important;
    height: auto !important; margin: 0 !important; object-fit: contain;
}
span.roll { width: 100% !important; height: 100% !important; }

/* ---- Painting (view) page ---- */
.view-image img { max-width: 100% !important; height: auto !important; }

/* ---- Footer ---- */
#foother { height: auto !important; padding: 16px; display: block; text-align: center; }
#foother span { float: none !important; width: auto !important; margin: 0 !important; }

/* ============================================================
   Breakpoints
   ============================================================ */
@media (max-width: 900px) {
    #menu { justify-content: center; gap: 2px 22px; }
    a.but span { padding: 10px 0; font-size: 12px; }
    .archive_list { flex: 1 1 100%; width: 100% !important; }
}

@media (max-width: 600px) {
    #container { padding: 0 10px; }
    #login_panel { justify-content: center; font-size: 12px; }
    #logo_menu { flex-direction: column; align-items: stretch; }
    a.logo { align-self: center; }
    #menu { justify-content: center; gap: 0 18px; }
    a.but span { padding: 9px 0; font-size: 11.5px; letter-spacing: .1em; }
    .site-stats[data-stats-layout="desktop"] { display: none; }
    .hero-link > .site-stats-mobile {
        display: inline-flex; position: absolute; z-index: 2; top: 10px; right: 12px;
        padding: 5px 8px; border: 1px solid rgba(196, 141, 72, .35); border-radius: 12px;
        background: rgba(7, 7, 7, .58); color: var(--c-text);
        font-size: 10px; line-height: 1;
    }
    #header { aspect-ratio: 16 / 9; }
    #content_holder > .image, .ads > .image { flex: 1 1 100%; max-width: 100%; aspect-ratio: 4 / 3; }
    #page_bar { justify-content: center; }
    #page_bar .archive-counts { width: 100%; justify-content: center; margin-right: 0; }
    #page_bar form, #page_bar #search { width: 100% !important; }
    .search_cont, #inputString { min-width: 0; width: 100%; }
}

/* ============================================================
   Polish layer — small, tasteful touches (not a redesign)
   ============================================================ */

/* Current page in the navigation: cream text + the bronze line (see a.but::after) */
a.but.active span { color: var(--c-text); font-weight: 600; }

/* Smooth, refined interactions */
a.but, a.cat_but, #alphabet_holder a, .archive_list a, .upload-cta,
.image, .art-artist a, #breadcrumb a {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease,
                border-color .16s ease, color .16s ease;
}

/* Art cards — gentle lift + accent on hover, softer frames */
#content_holder .image, .ads .image {
    border-color: #3a3a3a; border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#content_holder .image:hover, .ads .image:hover {
    transform: translateY(-3px);
    border-color: var(--c-line-hover);
    box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 1px var(--c-glow);
}
/* Roll-over fades in instead of snapping */
span.roll {
    display: block !important; opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    background: linear-gradient(180deg, rgba(10,12,16,.55), rgba(10,12,16,.82)) !important;
}
.image:hover span.roll { opacity: 1; visibility: visible; }

/* Subtle depth + rounded corners on the main panels */
#content_holder, #alphabet_holder, .view-image,
#view_comments, #breadcrumb, #page_bar {
    border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* A touch more air + crisper type */
#page_bar span { letter-spacing: .3px; }
.author-n { text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* Accessible focus ring */
a:focus-visible, input:focus-visible, button:focus-visible {
    outline: 2px solid var(--c-line-hover); outline-offset: 2px;
}

/* ============================================================
   Elegant layer — typography, captions, hero scrim, search
   ============================================================ */

/* Typography: Inter for UI, Playfair Display for titles; Georgia stays for long text */
body { font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif; }
a.but span, #alphabet_holder a, .archive_list a, #breadcrumb span a, .upload-cta,
.cap-a, input, button, #languages { font-family: 'Inter', sans-serif !important; }
.cap-t, .author-n, #page_bar span, #view_comments .vc-title {
    font-family: 'Playfair Display', Georgia, serif !important;
}
#page_bar span { font-size: 18px; font-weight: 600; letter-spacing: .2px; }

/* Cards: image on top + always-visible caption (title + author) below */
#content_holder > .image, .ads > .image {
    flex: 1 1 240px; max-width: 320px; width: auto !important;
    aspect-ratio: auto !important; height: auto !important; line-height: normal !important;
    display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start;
    background: #141414; border: 1px solid #333; border-radius: 6px; overflow: hidden;
    text-align: left;
}
.ads > .image { max-width: 300px; }
.image .pic {
    position: relative; width: 100%; aspect-ratio: 5 / 4;
    display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0e0e0e;
}
.image .pic img {
    max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important;
    object-fit: contain; transition: transform .35s ease;
}
.image:hover .pic img { transform: scale(1.06); }
.image .noimg { color: #8a7f72; padding: 18px; font-size: 12px; text-align: center; }
.image .cap { display: block; padding: 9px 11px; background: #181818; border-top: 1px solid #262626; }
.cap-t {
    display: block; font-size: 14px; font-weight: 600; color: #f0f0f0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cap-a {
    display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.image:hover .cap-t { color: #fff; }
.image:hover .cap-a { color: var(--c-text-hover); }


/* Search: the magnifier button sits INSIDE the field, on the right */
#page_bar #search {
    position: relative; display: flex; align-items: center;
    width: auto !important; height: auto !important;
}
.search_cont, #inputString {
    background: #0e0e0e !important; border: 1px solid #3a3a3a !important; border-radius: 20px;
    color: #eee !important; padding: 8px 40px 8px 14px; font: 13px 'Inter', sans-serif;
    min-width: 260px; height: auto; float: none !important; margin: 0 !important;
    box-sizing: border-box; transition: border-color .2s, box-shadow .2s;
}
.search_cont::placeholder, #inputString::placeholder { color: #8a8272; }
.search_cont:focus, #inputString:focus {
    border-color: var(--c-line-hover) !important; outline: none; box-shadow: 0 0 0 3px var(--c-glow);
}
.search-btn {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--c-text); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: color .2s, background .2s;
}
.search-btn:hover, .search-btn:focus-visible { color: var(--c-text-hover); background: var(--c-glow); outline: none; }
.search-btn svg { width: 16px; height: 16px; display: block; }

@media (max-width: 600px) {
    #content_holder > .image, .ads > .image { flex: 1 1 47%; max-width: 47%; }
    .image .pic { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Studio / auth / artist-profile pages
   ============================================================ */
.page-panel {
    width: 100%; float: none; box-sizing: border-box;
    background: #000; border: 2px solid #535353; border-radius: 5px;
    box-shadow: 0 1px 4px rgba(0,0,0,.35); padding: 22px; margin-top: 3px;
}
.page-panel h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
    color: #f0f0f0; margin: 0 0 8px; }
.muted { color: #99a; }
.muted-link { color: var(--c-text); text-decoration: none; }
.muted-link:hover { color: var(--c-text-hover); text-decoration: underline; }

/* Forms */
.form-card { max-width: 640px; }
.form-card form p { margin: 0 0 15px; }
.form-card label { color: #cdd; font: 600 13px 'Inter', sans-serif; }
.form-card input[type=text], .form-card input[type=email], .form-card input[type=password],
.form-card input[type=number], .form-card input[type=url], .form-card textarea,
.form-card select, .form-card input[type=file] {
    display: block; width: 100%; margin-top: 5px; box-sizing: border-box;
    background: #111; border: 1px solid #3a3a3a; border-radius: 6px; color: #eee;
    padding: 9px 11px; font: 14px 'Inter', sans-serif;
}
.form-card textarea { resize: vertical; }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus {
    border-color: var(--c-line-hover); outline: none;
}
.form-card input[type=checkbox] { width: auto; margin: 0 8px 0 0; transform: scale(1.25);
    vertical-align: middle; }
.form-card .helptext { display: block; color: #7f8790; font-size: 12px; margin-top: 4px; }
.form-card ul.errorlist { color: #ff8a8a; font-size: 13px; list-style: none; padding: 0; margin: 4px 0; }
.form-actions { margin-top: 6px; display: flex; align-items: center; gap: 16px; }

.btn-primary {
    display: inline-block; background: linear-gradient(180deg, var(--c-fill-top), var(--c-fill-bottom)); color: #fff;
    border: 1px solid var(--c-line); border-radius: 7px; padding: 11px 22px; cursor: pointer;
    font: 600 14px 'Inter', sans-serif; text-decoration: none; transition: filter .15s, transform .15s;
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Artist panel: menu on the left, section on the right */
.studio-panel { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start;
    text-align: left; }
.studio-main h2 { font-size: 24px; text-align: left; margin: 0 0 10px; }
.studio-main .form-card label { display: block; }
.studio-nav { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid #262626;
    padding-right: 18px; position: sticky; top: 12px; }
.sn-who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sn-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-line); }
.sn-name { font: 600 15px 'Playfair Display', Georgia, serif; color: #f0f0f0; }
.sn-link { display: block; padding: 9px 12px; border-radius: 6px; color: var(--c-nav-text);
    text-decoration: none; font: 500 14px 'Inter', sans-serif; border-left: 2px solid transparent; }
.sn-link:hover { background: #141414; color: var(--c-text-hover); }
.sn-link.on { color: var(--c-text); border-left-color: var(--c-line); background: #121110; }
.sn-out { margin-top: 10px; font-size: 13px; }
.studio-main { min-width: 0; }
.studio-msg { background: #131210; border: 1px solid var(--c-line-soft); border-radius: 6px;
    padding: 10px 14px; color: var(--c-text); margin: 0 0 14px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 8px; }
.stat { background: #121110; border: 1px solid #2a2622; border-radius: 8px; padding: 14px 16px; }
.stat-n { display: block; font: 600 24px 'Playfair Display', Georgia, serif; color: var(--c-text); }
.stat-l { display: block; font: 500 12px 'Inter', sans-serif; color: #9a9185; margin-top: 2px; }
.stat-top { color: #cfc6b4; margin: 4px 0 14px; font-size: 14px; }
.si-hearts { display: inline-block; margin-left: 6px; color: #e0506a; font: 600 12px 'Inter', sans-serif; }
.si-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.si-actions a { color: var(--c-text); text-decoration: none; }
.si-actions a:hover { color: var(--c-text-hover); text-decoration: underline; }
.si-actions a.si-del { color: #d98c8c; }
.btn-danger { background: #6a1f24; color: #fff; border: 1px solid #9a3a40; border-radius: 7px;
    padding: 11px 22px; cursor: pointer; font: 600 14px 'Inter', sans-serif; }
.btn-danger:hover { background: #82262c; }
.del-pic { max-width: 220px; max-height: 180px; display: block; margin: 8px 0 12px; border-radius: 4px; }
.artist-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--c-line); display: block; margin: 0 auto 10px; }
.become-artist { background: #131313; border: 1px solid #2a2a2a; border-radius: 8px;
    padding: 16px; margin: 6px 0 16px; }
.become-artist p { margin: 0 0 10px; color: #dde; }
.studio-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.studio-item { width: 210px; background: #141414; border: 1px solid #333; border-radius: 6px;
    overflow: hidden; }
.si-pic { height: 150px; background: #0e0e0e; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.si-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.si-pic .noimg { color: #8a7f72; font-size: 12px; padding: 10px; text-align: center; }
.si-cap { padding: 9px 11px; }
.si-title { display: block; font-weight: 600; color: #eee; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.si-meta { display: block; color: var(--c-text); font-size: 12px; margin: 2px 0 6px; }
.badge { display: inline-block; font: 600 11px 'Inter', sans-serif; padding: 3px 9px; border-radius: 20px; }
.badge.ok { background: rgba(64,160,80,.18); color: #6dd06d; border: 1px solid rgba(64,160,80,.4); }
.badge.pending { background: rgba(224,180,80,.15); color: #e0b46d; border: 1px solid rgba(224,180,80,.4); }

/* Artist public profile */
.artist-head .artist-name { font-size: 26px; }
.artist-meta { color: var(--c-text); font: 500 13px 'Inter', sans-serif; margin: 0 0 12px; }
.artist-bio { color: #cdd; line-height: 1.65; max-width: 820px; font-family: Georgia, serif; }
.notice { color: #e0b46d; margin-top: 12px; }

@media (max-width: 760px) {
    .studio-panel { grid-template-columns: 1fr; gap: 14px; }
    .studio-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #262626;
        padding: 0 0 10px; position: static; }
    .sn-who { width: 100%; margin-bottom: 4px; }
    .sn-link { border-left: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 10px; }
    .sn-link.on { border-bottom-color: var(--c-line); background: none; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .studio-item { width: 100%; }
    .form-actions { flex-wrap: wrap; }
}

/* Search results: a panel like the other pages — artists as links, paintings as cards */
.search-results {
    margin-top: 3px; padding: 18px 16px 22px; background: #000; border: 2px solid #535353;
    border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.35); text-align: left;
}
.search-results h3 {
    margin: 4px 0 12px; color: var(--c-text); text-align: left;
    font: 600 13px 'Inter', sans-serif; letter-spacing: .2em; text-transform: uppercase;
}
.search-results h3 ~ h3 { margin-top: 22px; }
.sr-artists { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-artists a {
    padding: 7px 14px; border: 1px solid var(--c-line); border-radius: 20px; color: var(--c-text);
    text-decoration: none; font: 500 14px 'Inter', sans-serif;
}
.sr-artists a:hover { border-color: var(--c-line-hover); color: #fff; background: var(--c-glow); }
.search-results #content_holder { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.search-results .empty-note { margin: 4px 0; color: #cfc6b4; font: 15px 'Inter', sans-serif; }

/* ---- The page title as a button (Home: "Painting of the Day" → all paintings of the day) ---- */
#page_bar .bar-btn {
    display: inline-block; padding: 5px 14px; border: 1px solid var(--c-line); border-radius: 3px;
    color: inherit !important; text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
#page_bar .bar-btn:hover, #page_bar .bar-btn:focus-visible {
    border-color: var(--c-line-hover); background: var(--c-glow); color: var(--c-text-hover) !important;
}