@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Cinzel:wght@400;600&display=swap');

#vpr-root * { box-sizing: border-box; margin: 0; padding: 0; }

#vpr-root {
    background: #0a0805;
    color: #e8dcc8;
    font-family: 'Cormorant Garamond', Georgia, serif;
    position: relative;
    overflow-x: hidden;
    min-height: 500px;
    border-radius: 4px;
}

#vpr-root::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(180,130,60,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(100,60,20,0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.vpr-header {
    position: relative; z-index: 1;
    text-align: center;
    padding: 40px 24px 30px;
    border-bottom: 1px solid rgba(180,130,60,0.2);
}
.vpr-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 10px; letter-spacing: 0.4em;
    color: #b4823c; text-transform: uppercase;
    margin-bottom: 10px; opacity: 0.8;
}
.vpr-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(26px, 5vw, 46px);
    font-weight: 600; color: #f0e6d0;
    letter-spacing: 0.15em; line-height: 1.1;
}
.vpr-title span { color: #c8903c; }
.vpr-subtitle {
    font-style: italic; font-size: 15px;
    color: rgba(232,220,200,0.45); margin-top: 6px;
    letter-spacing: 0.05em;
}

.vpr-search-area {
    position: relative; z-index: 1;
    padding: 36px 24px; max-width: 680px; margin: 0 auto;
}
.vpr-search-wrapper {
    display: flex; align-items: center;
    border: 1px solid rgba(180,130,60,0.4);
    background: rgba(255,255,255,0.03);
    transition: border-color 0.3s;
}
.vpr-search-wrapper:focus-within {
    border-color: rgba(180,130,60,0.8);
    background: rgba(255,255,255,0.05);
}
.vpr-search-icon { padding: 0 14px; color: #b4823c; font-size: 17px; opacity: 0.7; }
.vpr-search-input {
    flex: 1; background: transparent; border: none; outline: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px; color: #f0e6d0;
    padding: 15px 0; letter-spacing: 0.03em;
}
.vpr-search-input::placeholder { color: rgba(232,220,200,0.3); font-style: italic; }
.vpr-search-btn {
    background: #b4823c; border: none; color: #0a0805;
    font-family: 'Cinzel', serif; font-size: 10px;
    letter-spacing: 0.25em; padding: 15px 22px;
    cursor: pointer; text-transform: uppercase; transition: background 0.2s;
    white-space: nowrap;
}
.vpr-search-btn:hover:not(:disabled) { background: #c8973f; }
.vpr-search-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.vpr-hints {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 14px; justify-content: center;
}
.vpr-hint {
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px; color: rgba(180,130,60,0.6);
    border: 1px solid rgba(180,130,60,0.2);
    padding: 4px 11px; cursor: pointer;
    letter-spacing: 0.05em; font-style: italic;
    transition: all 0.2s;
}
.vpr-hint:hover { color: #b4823c; border-color: rgba(180,130,60,0.5); background: rgba(180,130,60,0.05); }

.vpr-loading {
    position: relative; z-index: 1;
    text-align: center; padding: 70px 24px;
}
.vpr-loading-icon {
    width: 46px; height: 46px;
    border: 1px solid rgba(180,130,60,0.2);
    border-top-color: #b4823c; border-radius: 50%;
    animation: vpr-spin 1.2s linear infinite;
    margin: 0 auto 22px;
}
@keyframes vpr-spin { to { transform: rotate(360deg); } }
.vpr-loading-text { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.3em; color: rgba(180,130,60,0.7); text-transform: uppercase; }
.vpr-loading-name { font-style: italic; font-size: 20px; color: rgba(232,220,200,0.55); margin-top: 7px; }

.vpr-results { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 24px 60px; }

.vpr-artist-hero { text-align: center; padding: 0 0 40px; border-bottom: 1px solid rgba(180,130,60,0.15); margin-bottom: 40px; }
.vpr-artist-period { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.4em; color: #b4823c; text-transform: uppercase; margin-bottom: 10px; }
.vpr-artist-name { font-family: 'Cinzel', serif; font-size: clamp(28px, 5vw, 56px); font-weight: 600; color: #f0e6d0; letter-spacing: 0.1em; line-height: 1; }
.vpr-artist-tagline { font-style: italic; font-size: 17px; color: rgba(232,220,200,0.5); margin-top: 10px; letter-spacing: 0.04em; }

.vpr-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(180,130,60,0.15); margin-bottom: 1px; }
@media (max-width: 768px) { .vpr-columns { grid-template-columns: 1fr; } }
.vpr-col { background: #0a0805; padding: 36px 32px; }
.vpr-col-label {
    font-family: 'Cinzel', serif; font-size: 9px;
    letter-spacing: 0.45em; color: #b4823c;
    text-transform: uppercase; margin-bottom: 18px;
    padding-bottom: 11px; border-bottom: 1px solid rgba(180,130,60,0.2);
    display: flex; align-items: center; gap: 10px;
}
.vpr-col-label::after { content: ''; flex: 1; height: 1px; background: rgba(180,130,60,0.2); }
.vpr-col-text { font-size: 15px; line-height: 1.85; color: rgba(232,220,200,0.82); font-weight: 300; }
.vpr-col-text p { margin-bottom: 1.1em; }
.vpr-col-text p:last-child { margin-bottom: 0; }

.vpr-works-section { background: #0a0805; border-top: 1px solid rgba(180,130,60,0.15); padding: 40px 32px; }
.vpr-works-header { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.45em; color: #b4823c; text-transform: uppercase; margin-bottom: 30px; padding-bottom: 11px; border-bottom: 1px solid rgba(180,130,60,0.2); display: flex; align-items: center; gap: 10px; }
.vpr-works-header::after { content: ''; flex: 1; height: 1px; background: rgba(180,130,60,0.2); }
.vpr-works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: rgba(180,130,60,0.1); }
.vpr-work-card { background: #0d0b07; padding: 22px 26px; transition: background 0.2s; }
.vpr-work-card:hover { background: #121008; }
.vpr-work-date { font-family: 'Cinzel', serif; font-size: 11px; color: #b4823c; letter-spacing: 0.2em; margin-bottom: 7px; }
.vpr-work-name { font-style: italic; font-size: 19px; color: #f0e6d0; font-weight: 400; margin-bottom: 9px; line-height: 1.2; }
.vpr-work-desc { font-size: 13px; line-height: 1.7; color: rgba(232,220,200,0.6); font-weight: 300; }

.vpr-error { position: relative; z-index: 1; text-align: center; padding: 55px 24px; color: rgba(180,130,60,0.7); font-style: italic; font-size: 17px; }
.vpr-divider { width: 40px; height: 1px; background: rgba(180,130,60,0.4); margin: 28px auto; }
.vpr-new-search { text-align: center; padding: 28px; border-top: 1px solid rgba(180,130,60,0.1); }
.vpr-new-search-btn { background: transparent; border: 1px solid rgba(180,130,60,0.4); color: rgba(180,130,60,0.8); font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.35em; padding: 11px 26px; cursor: pointer; text-transform: uppercase; transition: all 0.2s; }
.vpr-new-search-btn:hover { border-color: #b4823c; color: #b4823c; background: rgba(180,130,60,0.05); }