/* ==========================================================
   THEME: gallery — a 19th-century oil-painting gallery wall.
   Deep chiaroscuro background with a candlelit vignette, old-
   master jewel-tone panels set in gilt frames, brass-plaque
   captions, a fine canvas grain. Depth comes from framing,
   color, and light — not cast shadow; nothing here uses a
   drop shadow. Two painterly touches carry the "oil" idea
   further: a rough brushstroke swipe under the title, and
   small paint-daub blobs as the link separators.
   ========================================================== */

[data-theme="gallery"] {
    --gl-bg: #15100c;
    --gl-ink: #f2e8d3;
    --gl-accent: #cf7a4f;
    --gl-accent-dim: rgba(207, 122, 79, 0.5);
    --gl-red: #6d2430;
    --gl-green: #24503f;
    --gl-plum: #5c2a49;
    --gl-navy: #26325c;

    /* Retune the shared accent palette to old-master jewel
       tones, so every folder panel reads as a framed canvas. */
    --c-magenta: var(--gl-red);
    --c-cyan: var(--gl-green);
    --c-amber: var(--gl-plum);
    --c-violet: var(--gl-navy);
}

[data-theme="gallery"] body {
    background:
        radial-gradient(ellipse 900px 620px at 50% 6%, rgba(255, 214, 140, 0.08), transparent 60%),
        radial-gradient(circle, rgba(242, 232, 211, 0.035) 1px, transparent 1.3px) 0 0 / 18px 18px,
        var(--gl-bg);
    color: var(--gl-ink);
    font-family: 'Lora', Georgia, serif;
    font-weight: 500;
}

[data-theme="gallery"] a:focus-visible,
[data-theme="gallery"] button:focus-visible {
    outline-color: var(--gl-accent);
}

/* ---------- Header ---------- */

[data-theme="gallery"] header {
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--gl-accent-dim);
}

[data-theme="gallery"] h1 {
    display: inline-block;
    font-family: 'Alice', Georgia, serif;
    font-weight: 700;
    font-style: normal;
    font-size: clamp(2.4rem, 7.5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: 0.005em;
    background: none;
    border-radius: 0;
    padding: 0;
    color: var(--gl-accent);
}

/* A rough-edged brush swipe under the title, built the same
   way the site's paper-grain textures are: a turbulence filter
   distorting a plain bar so its edges come out uneven. */
[data-theme="gallery"] header::after {
    content: "";
    display: block;
    width: min(280px, 70%);
    height: 14px;
    margin-top: 4px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='16'%3E%3Cfilter%20id='r'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.015%200.5'%20numOctaves='2'%20seed='7'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='10'/%3E%3C/filter%3E%3Crect%20x='0'%20y='3'%20width='300'%20height='9'%20fill='%23cf7a4f'%20filter='url(%23r)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.85;
}

[data-theme="gallery"] .cursor {
    display: none;
}

[data-theme="gallery"] .subtitle {
    color: var(--gl-ink);
    opacity: 0.88;
    font-family: 'Lora', Georgia, serif;
    font-style: normal;
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 60ch;
    margin-top: 12px;
    white-space: pre-line;
}

[data-theme="gallery"] .subtitle .attribution {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gl-accent);
    opacity: 0.9;
}
[data-theme="gallery"] .subtitle .attribution em {
    font-style: normal;
    text-transform: none;
    letter-spacing: 0.01em;
    opacity: 0.85;
}

/* ---------- Folder panels ---------- */

[data-theme="gallery"] #dynamic-index {
    display: grid;
    gap: 14px;
}

/* Each category sits like a framed canvas: a jewel-tone field,
   a dark mat, and a thin gilt line — the depth comes from the
   frame itself, not a cast shadow. */
[data-theme="gallery"] #dynamic-index .group {
    display: block;
    background: var(--accent, var(--gl-red));
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 0 0 5px rgba(10, 8, 6, 0.55),
        inset 0 0 0 6px var(--gl-accent-dim);
    padding: 16px 28px;
    margin: 0;
}

/* Category reads like a brass plaque mounted under the frame. */
[data-theme="gallery"] #dynamic-index h2 {
    display: inline-block;
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.95rem;
    color: var(--gl-accent);
    background: rgba(10, 8, 6, 0.4);
    padding: 6px 14px;
    border-top: 1px solid var(--gl-accent-dim);
    border-bottom: 1px solid var(--gl-accent-dim);
    margin: 0 0 10px;
}
[data-theme="gallery"] #dynamic-index h2::before {
    content: "";
}

/* A small irregular paint-daub instead of a straight glyph. */
[data-theme="gallery"] #dynamic-index li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 9px;
    height: 7px;
    margin: 0 15px;
    vertical-align: middle;
    background: var(--gl-accent);
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    opacity: 0.75;
}

[data-theme="gallery"] #dynamic-index a {
    padding: 4px 2px;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: none;
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: 1.35rem;
    color: var(--gl-ink);
    transition: color 0.15s ease, border-color 0.15s ease;
}

[data-theme="gallery"] #dynamic-index a:hover,
[data-theme="gallery"] #dynamic-index a:focus-visible {
    color: var(--gl-accent);
    border-bottom-color: var(--gl-accent);
}

/* ---------- Footer ---------- */

[data-theme="gallery"] footer {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.78rem;
    border-top: 1px solid var(--gl-accent-dim);
    color: var(--gl-accent);
    opacity: 0.8;
}

@media (max-width: 560px) {
    [data-theme="gallery"] #dynamic-index .group {
        padding: 14px 18px;
    }
    [data-theme="gallery"] #dynamic-index h2 {
        font-size: 1.05rem;
    }
    [data-theme="gallery"] #dynamic-index a {
        font-size: 1.5rem;
        padding: 6px 2px;
    }
    [data-theme="gallery"] #dynamic-index li:not(:last-child)::after {
        margin: 0 12px;
    }
}