:root {
    --ink: #0d0d0d;
    --paper: #fafafa;
    --accent: #e8382b;
    --accent-2: #ff9e2c;
    --muted: #6b6b6b;
    --border: #e0e0e0;
    --card: #ffffff;
    --radius: 10px;

    /* Semantic status colors - themes override these for proper contrast.
       This site's grayscale hierarchy: bolder fill = more prominent status. */
    --success-bg: #0d0d0d;
    --success-text: #fafafa;
    --warning-bg: #c4c4c4;
    --warning-text: #0d0d0d;
    --error-bg: #e8e8e8;
    --error-text: #8a8a8a;
    --neutral-bg: #f0f0f0;
    --neutral-text: #4a4a4a;

    --gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
    --banner-glow: rgba(0, 0, 0, 0.75);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.brand, .profile-name, .post-author, .footer-name,
.lightbox-sidebar h2, .testimonial-name {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; }
a:hover { text-decoration: underline; }

/* Header / tabs */
.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--card);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    padding-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}
.brand .logo {
    height: 38px;
    width: auto;
    border-radius: 6px;
    display: block;
}
.brand:hover { text-decoration: none; }
.tabs { display: flex; gap: 6px; }
.tabs a {
    color: var(--ink);
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    transition: background 0.2s ease, color 0.2s ease;
}
.tabs a:hover { background: var(--neutral-bg); text-decoration: none; }
.tabs a.active {
    background: var(--gradient);
    color: #fff;
}

main.wrap {
    padding: 40px 24px 60px;
}

/* When a custom page background (color or image) is active, give the main
   content its own solid "card" surface so text stays legible over a busy
   background instead of floating directly on top of it. */
body.custom-bg main {
    background: var(--card);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.18);
}
@media (max-width: 700px) {
    body.custom-bg main {
        border-radius: 0;
    }
}

.site-banner {
    width: 100%;
    max-height: 320px;
    overflow: hidden;
    line-height: 0;
}
.site-banner img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}
@media (max-width: 700px) {
    .site-banner img { height: 160px; }
}

/* When a header banner is set, pull the page's h1 up to overlay the bottom
   of the banner image, with a soft glow for legibility over any photo.
   Uses position:absolute (not negative margin) specifically so it's fully
   removed from the document flow and can't push surrounding content around. */
body.has-banner main {
    position: relative;
}
body.has-banner main > h1:first-of-type {
    position: absolute;
    top: -110px;
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 2.6rem;
    text-shadow:
        0 0 14px var(--banner-glow),
        0 0 32px var(--banner-glow),
        0 2px 10px var(--banner-glow);
}
@media (max-width: 700px) {
    body.has-banner main > h1:first-of-type {
        top: -68px;
        font-size: 1.9rem;
    }
}

h1 { font-size: 2.1rem; margin: 0 0 10px; line-height: 1.15; }
.page-intro {
    color: var(--muted);
    margin-bottom: 32px;
    max-width: 640px;
    font-size: 0.94rem;
}

/* Grids */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    align-items: start;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: var(--neutral-bg);
}
.card-body { padding: 14px 16px 18px; }
.card-body h3 { margin: 0 0 4px; font-size: 1.05rem; }
.card-body .meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 6px; }
.card-body p { margin: 0; font-size: 0.9rem; color: var(--ink); }

.badge {
    display: inline-block;
    align-self: flex-start;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--neutral-bg);
    color: var(--neutral-text);
}
.badge.coming_soon { background: var(--warning-bg); color: var(--warning-text); }
.badge.sold_out { background: var(--error-bg); color: var(--error-text); }
.badge.available { background: var(--success-bg); color: var(--success-text); }

/* --- Commission rate-card style --- */
.commission-card {
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s ease;
}
.commission-card:hover { transform: translateY(-3px); }
.commission-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.commission-image-wrap {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 0 0 1px var(--border);
    transition: box-shadow 0.2s ease;
}
.commission-card:hover .commission-image-wrap { box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.commission-image-wrap img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: var(--neutral-bg);
    transition: transform 0.3s ease;
}
.commission-card:hover .commission-image-wrap img { transform: scale(1.04); }
.commission-price-tag {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: var(--gradient);
    color: #fff;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    padding: 6px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
/* --- Will / Won't Draw list --- */
.commissions-intro-row {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 36px;
}
.commissions-intro-col {
    flex: 1 1 320px;
    min-width: 260px;
}
.commissions-intro-col .page-intro {
    margin-bottom: 0;
}
.boundaries-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    flex: 1 1 400px;
    min-width: 300px;
}
@media (max-width: 600px) {
    .boundaries-section { grid-template-columns: 1fr; gap: 20px; }
}
.boundaries-heading {
    font-size: 1.05rem;
    margin: 0 0 10px;
}
.boundaries-heading.will { color: #2e9e52; }
.boundaries-heading.wont { color: #c9463f; }
.boundaries-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.boundaries-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.92rem;
    color: var(--ink);
    line-height: 1.4;
}
.boundary-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    margin-top: 1px;
}
.boundary-icon.will { background: #2e9e52; }
.boundary-icon.wont { background: #c9463f; }

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Artist Profile homepage --- */
.profile-card {
    max-width: 560px;
    margin: 30px auto 0;
    text-align: center;
}
.profile-avatar-ring {
    display: inline-block;
    padding: 4px;
    border-radius: 50%;
    background: var(--gradient);
    margin: 0 auto 18px;
}
.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--neutral-bg);
    border: 3px solid var(--paper);
}
.profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    font-weight: 700;
    color: #fff;
    background: var(--ink);
    border: 3px solid var(--paper);
}
.profile-name {
    margin: 0 0 10px;
    font-size: 2.4rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent); /* fallback for browsers without background-clip:text support */
    display: inline-block;
}
.profile-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.profile-meta-item {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-text);
    background: var(--neutral-bg);
    padding: 5px 12px;
    border-radius: 999px;
}
.profile-blurb {
    color: var(--ink);
    line-height: 1.65;
    margin-bottom: 20px;
    white-space: pre-line;
}
.profile-cta {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}

/* --- Testimonials --- */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 18px;
}
.testimonial-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.testimonial-stars {
    color: #e0a733;
    font-size: 1rem;
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.testimonial-quote {
    font-style: italic;
    color: var(--ink);
    margin: 0 0 14px;
    line-height: 1.55;
}
.testimonial-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--muted);
}

/* --- Blog feed --- */
.subscribe-box {
    max-width: 600px;
    margin: 0 auto 30px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.subscribe-form {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
}
.subscribe-form input[type=email] {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 200px;
    background: var(--card);
    color: var(--ink);
}
.subscribe-form button {
    white-space: nowrap;
    padding: 9px 18px;
}

.feed {
    max-width: 600px;
    margin: 0 auto;
}
.post-card {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}
.post-card:first-child { padding-top: 0; }
.post-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--neutral-bg);
}
.post-avatar.fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    background: var(--gradient);
}
.post-body { flex: 1; min-width: 0; }
.post-header {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.92rem;
}
.post-author { font-weight: 700; color: var(--ink); }
.post-handle, .post-time, .post-dot { color: var(--muted); }
.post-content {
    margin-top: 4px;
    font-size: 0.98rem;
    white-space: pre-line;
    line-height: 1.5;
}
.post-image {
    margin-top: 10px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    line-height: 0;
}
.post-image img { width: 100%; display: block; }

@media (max-width: 600px) {
    .subscribe-box { flex-direction: column; align-items: stretch; text-align: center; }
    .subscribe-form { justify-content: center; }
}

.empty-state {
    color: var(--muted);
    padding: 40px 0;
    text-align: center;
}

/* --- Masonry gallery --- */
.masonry-grid {
    column-count: 3;
    column-gap: 18px;
}
@media (max-width: 900px) {
    .masonry-grid { column-count: 2; }
}
@media (max-width: 560px) {
    .masonry-grid { column-count: 1; }
}
.masonry-item {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 18px;
    border: none;
    background: none;
    cursor: pointer;
    break-inside: avoid;
    border-radius: var(--radius);
    overflow: hidden;
    line-height: 0;
}
.masonry-item img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}
.masonry-item:hover img {
    transform: scale(1.04);
}

/* --- Lightbox --- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.94);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-content {
    display: flex;
    flex-direction: row;
    height: 100%;
}
.lightbox-image-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}
.lightbox-image-wrap img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
}
.lightbox-sidebar {
    width: 320px;
    flex-shrink: 0;
    background: var(--card);
    padding: 30px 26px;
    overflow-y: auto;
}
.lightbox-sidebar h2 {
    margin: 0 0 8px;
    font-size: 1.4rem;
}
.lightbox-sidebar p {
    font-size: 0.92rem;
    color: var(--ink);
    white-space: pre-line;
}
.lightbox-addons-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-top: 22px;
    margin-bottom: 6px;
}
.lightbox-addons-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lightbox-addons-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.lightbox-addons-list li:last-child { border-bottom: none; }
.lightbox-addons-list .addon-label { color: var(--ink); }
.lightbox-addons-list .addon-price {
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
}
.lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1001;
    transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(0,0,0,0.65); transform: none; }

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.lightbox-nav-btn:hover { background: rgba(0,0,0,0.65); transform: translateY(-50%); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-counter {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.lightbox-view-toggle-btn {
    display: none;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0;
    margin-bottom: 14px;
    cursor: pointer;
    text-decoration: underline;
}
.lightbox-view-toggle-btn:hover { opacity: 0.8; }

/* --- Grid view (alternative to carousel for many small images) --- */
.lightbox-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 4px;
}
.lightbox-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lightbox-grid img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

@media (max-width: 720px) {
    .lightbox-content { flex-direction: column; }
    .lightbox-image-wrap { flex: 0 0 55%; padding: 16px; }
    .lightbox-sidebar { width: 100%; flex: 1; }
    .lightbox-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

/* About / contact */
.about-block { max-width: 700px; margin-bottom: 40px; white-space: pre-line; }
.social-links { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.social-link:hover { text-decoration: underline; opacity: 0.85; }
.social-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.social-icon svg { display: block; }

.social-link-copy {
    position: relative;
    cursor: pointer;
}
.social-link-copy::after {
    content: 'Copied!';
    position: absolute;
    left: 50%;
    top: -26px;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}
.social-link-copy.copied-flash::after { opacity: 1; }

/* In the footer, social links stack as full-width rows like the other
   footer link columns, and stay muted until hovered (matching the rest
   of the footer) rather than using the accent color by default. */
.footer-col .social-link,
.footer-col .social-link-copy {
    display: flex;
    width: 100%;
    color: var(--muted);
    margin-bottom: 8px;
}
.footer-col .social-link:hover,
.footer-col .social-link-copy:hover {
    color: var(--accent);
    text-decoration: none;
}

.contact-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    max-width: 640px;
}
form .field { margin-bottom: 18px; }
form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
form input[type=text],
form input[type=email],
form textarea,
form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--card);
    color: var(--ink);
}
form textarea { min-height: 140px; resize: vertical; }
button, .btn {
    display: inline-block;
    background: var(--gradient);
    color: #fff;
    border: none;
    padding: 11px 22px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
button:hover, .btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(232, 56, 43, 0.25);
}
.btn-secondary {
    background: var(--neutral-bg);
    color: var(--ink);
    box-shadow: none;
}
.btn-secondary:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.btn-danger { background: var(--ink); }

.alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 22px;
    font-size: 0.92rem;
    border-left: 4px solid transparent;
}
.alert-success { background: var(--success-bg); color: var(--success-text); border-left-color: var(--accent); }
.alert-error { background: var(--error-bg); color: var(--error-text); border-left-color: var(--ink); }

/* Honeypot field - hidden from real users */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

.site-footer {
    border-top: 1px solid var(--border);
    margin-top: 20px;
    color: var(--muted);
    font-size: 0.88rem;
}
/* Continue the content card straight into the footer with no gap and no
   dividing line, so the whole thing reads as one panel from the banner
   down to the very bottom of the page. */
body.custom-bg .site-footer {
    background: var(--card);
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.18);
}
@media (max-width: 700px) {
    body.custom-bg .site-footer {
        border-radius: 0;
    }
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 30px;
    padding: 44px 24px 30px;
}
.footer-col a {
    display: block;
    color: var(--muted);
    margin-bottom: 8px;
    transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--accent); text-decoration: none; }
.footer-heading {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink);
    margin-bottom: 12px;
}
.footer-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}
.footer-tagline { margin-bottom: 4px; }
.footer-location { font-size: 0.85rem; }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    font-size: 0.82rem;
}
@media (max-width: 800px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* --- Legal pages --- */
.legal-content {
    max-width: 720px;
    line-height: 1.7;
    color: var(--ink);
    margin-bottom: 60px;
}

/* --- FAQ accordion --- */
.faq-list {
    max-width: 720px;
}
.faq-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    background: var(--card);
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.faq-item summary {
    padding: 16px 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    color: var(--accent);
    font-weight: 400;
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-item[open] { border-color: var(--accent); }
.faq-answer {
    padding: 16px 20px;
    color: var(--ink);
    line-height: 1.6;
    animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Admin panel ---
   Deliberately NOT theme-aware: the admin panel always uses these fixed
   values regardless of which theme is active on the public site, so
   editing content stays predictable no matter how bold a theme gets. */
.admin-body { background: #f4f3ef; min-height: 100vh; font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
.admin-layout { display: flex; min-height: 100vh; }

.admin-sidebar {
    width: 230px;
    flex-shrink: 0;
    background: #0d0d0d;
    color: #ddd;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin-sidebar-brand {
    display: block;
    padding: 22px 20px 16px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 10px;
}
.admin-sidebar-brand:hover { text-decoration: none; }
.admin-sidebar-nav { display: flex; flex-direction: column; flex: 1; padding-bottom: 10px; }
.admin-sidebar-nav a {
    display: block;
    padding: 9px 20px;
    color: #cfcfcf;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}
.admin-sidebar-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; }
.admin-sidebar-nav a.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-left-color: #e8382b;
    font-weight: 600;
}
.admin-nav-heading {
    padding: 16px 20px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a7a7a;
}
.admin-sidebar-logout {
    display: block;
    padding: 14px 20px;
    color: #cfcfcf;
    font-size: 0.9rem;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.admin-sidebar-logout:hover { color: #fff; background: rgba(255,255,255,0.06); text-decoration: none; }

.admin-main { flex: 1; min-width: 0; padding: 32px 40px 60px; max-width: 1000px; }

@media (max-width: 860px) {
    .admin-layout { flex-direction: column; }
    .admin-sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 12px;
    }
    .admin-sidebar-brand { border-bottom: none; padding: 8px 10px; margin-bottom: 0; }
    .admin-sidebar-nav { flex-direction: row; flex-wrap: wrap; padding-bottom: 0; }
    .admin-sidebar-nav a { border-left: none; border-radius: 6px; padding: 7px 12px; }
    .admin-sidebar-nav a.active { border-left: none; }
    .admin-nav-heading { display: none; }
    .admin-sidebar-logout { border-top: none; padding: 7px 12px; }
    .admin-main { padding: 24px 20px 50px; max-width: 100%; }
}

table.admin-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
table.admin-table th, table.admin-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #e4e0d8;
    font-size: 0.92rem;
    vertical-align: middle;
}
table.admin-table th { background: #f0ede6; }
table.admin-table img.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.actions { display: flex; gap: 10px; }
.login-box {
    max-width: 380px;
    margin: 80px auto;
    background: #fff;
    padding: 32px;
    border-radius: 10px;
    border: 1px solid #e4e0d8;
}
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 30px; }
.stat-card { background: #fff; border: 1px solid #e4e0d8; border-radius: 10px; padding: 18px; }
.stat-card .num { font-size: 2rem; font-weight: 700; font-family: 'Fraunces', Georgia, serif; }
.stat-card .label { color: #6f6f6f; font-size: 0.85rem; }