/* ==========================================================
   THEME: poster — German Expressionist woodcut movie poster.
   Flat inked color blocks (brick red / mustard / dusty teal),
   thick black rules, a Fraktur title on a cream ribbon, and a
   nested double-rule frame around the whole page, like a print
   mounted with a paper mat. No gradients, no glow — everything
   is flat and hand-cut.
   ========================================================== */

[data-theme="poster"] {
    --fx-paper: #e6d5ae;
    --fx-paper-dim: #d8c393;
    --fx-ink: #18130e;
    --fx-red: #c2311f;
    --fx-yellow: #e8ab12;
    --fx-teal: #167985;
    --fx-rust: #6d3350;
    --fx-cream-text: #f1e6cf;

    /* Retune the shared accent palette to the poster's ink
       colors, so every folder panel is a flat color block. */
    --c-magenta: #c2311f;
    --c-cyan: #167985;
    --c-amber: #e8ab12;
    --c-violet: #6d3350;
}

[data-theme="poster"] body {
    position: relative;
    padding-top: 16px;
    background:
        radial-gradient(ellipse 480px 300px at 12% 15%, rgba(122,59,42,0.10), transparent 60%),
        radial-gradient(ellipse 420px 260px at 88% 78%, rgba(122,59,42,0.09), transparent 62%),
        radial-gradient(ellipse 360px 240px at 55% 45%, rgba(24,19,14,0.06), transparent 65%),
        var(--fx-paper);
    color: var(--fx-ink);
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    /* Nested double-rule frame, like a print mounted on a mat. */
    box-shadow:
        inset 0 0 0 3px var(--fx-ink),
        inset 0 0 0 9px var(--fx-paper),
        inset 0 0 0 12px var(--fx-ink);
}

/* Grain overlay — sits above everything (including the colored
   panels) and multiplies in, the way film/paper grain shows
   through ink on a photographed print. */
/* Grain overlay — two passes above everything (including the
   colored panels): dark flecks multiply in, light flecks screen
   in, the way real emulsion/paper grain has both. */
[data-theme="poster"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 49;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20stitchTiles='stitch'%20seed='11'%20result='noise'/%3E%3CfeColorMatrix%20in='noise'%20type='matrix'%20values='0.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200%200%200%201%200'%20result='gray'/%3E%3CfeComponentTransfer%20in='gray'%3E%3CfeFuncR%20type='linear'%20slope='3.2'%20intercept='-1.05'/%3E%3CfeFuncG%20type='linear'%20slope='3.2'%20intercept='-1.05'/%3E%3CfeFuncB%20type='linear'%20slope='3.2'%20intercept='-1.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
    background-size: 170px 170px;
}

[data-theme="poster"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.38;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20stitchTiles='stitch'%20seed='3'%20result='noise'/%3E%3CfeColorMatrix%20in='noise'%20type='matrix'%20values='0.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200%200%200%201%200'%20result='gray'/%3E%3CfeComponentTransfer%20in='gray'%3E%3CfeFuncR%20type='linear'%20slope='3.2'%20intercept='-1.05'/%3E%3CfeFuncG%20type='linear'%20slope='3.2'%20intercept='-1.05'/%3E%3CfeFuncB%20type='linear'%20slope='3.2'%20intercept='-1.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url%28%23n%29'/%3E%3C/svg%3E");
    background-size: 170px 170px;
}

[data-theme="poster"] a:focus-visible,
[data-theme="poster"] button:focus-visible {
    outline-color: var(--fx-ink);
}

/* ---------- Header / title ribbon ---------- */

[data-theme="poster"] header {
    position: relative;
    background: var(--fx-red);
    background-image:
        radial-gradient(ellipse 70% 60% at 8% 15%, rgba(0,0,0,0.12), transparent 55%),
        radial-gradient(ellipse 60% 50% at 95% 90%, rgba(0,0,0,0.14), transparent 55%);
    border: 4px solid var(--fx-ink);
    padding: 22px 28px 20px;
    margin: 0 0 18px;
}

[data-theme="poster"] h1 {
    display: inline-block;
    font-family: 'UnifrakturMaguntia', var(--font-title);
    font-weight: 400;
    font-size: clamp(2.7rem, 9.5vw, 4.4rem);
    line-height: 1;
    letter-spacing: 0.01em;
    background: var(--fx-paper);
    color: var(--fx-ink);
    padding: 8px 22px 12px;
    border: 3px solid var(--fx-ink);
    border-radius: 0;
    transform: rotate(-1.1deg);
    -webkit-text-stroke: 1.75px var(--fx-ink);
    text-shadow:
        0.6px 0 0 currentColor,
        -0.6px 0 0 currentColor,
        0 0.6px 0 currentColor,
        0 -0.6px 0 currentColor,
        0.9px 0.9px 0 currentColor,
        -0.9px -0.9px 0 currentColor,
        0.9px -0.9px 0 currentColor,
        -0.9px 0.9px 0 currentColor;
}

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

[data-theme="poster"] .subtitle {
    color: var(--fx-cream-text);
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 400;
    letter-spacing: 0.01em;
    font-size: 1.05rem;
    line-height: 1.55;
    margin-top: 12px;
    max-width: 82ch;
    white-space: pre-line;
}

[data-theme="poster"] .subtitle .attribution {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

[data-theme="poster"] .subtitle .attribution em {
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.01em;
}

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

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

[data-theme="poster"] #dynamic-index .group {
    display: block;
    background: var(--accent, var(--fx-teal));
    border: 3px solid var(--fx-ink);
    border-radius: 0;
    padding: 12px 20px 14px;
    margin: 0;
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

[data-theme="poster"] #dynamic-index h2 {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.92rem;
    background: var(--fx-ink);
    color: var(--fx-paper);
    padding: 6px 14px;
    transform: rotate(-1deg);
    margin: 0 0 10px;
}
[data-theme="poster"] #dynamic-index h2::before {
    content: "";
}

/* An em-dash leader between entries, like a printed table of
   contents, rather than a row of separate buttons. */
[data-theme="poster"] #dynamic-index li:not(:last-child)::after {
    content: "\2014";
    color: var(--fx-ink);
    opacity: 0.55;
    margin: 0 14px;
}

[data-theme="poster"] #dynamic-index a {
    padding: 4px 2px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.95rem;
    color: var(--fx-ink);
    transition: border-color 0.15s ease;
}

[data-theme="poster"] #dynamic-index a:hover,
[data-theme="poster"] #dynamic-index a:focus-visible {
    color: var(--fx-ink);
    background: none;
    border-bottom-color: var(--fx-ink);
}

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

[data-theme="poster"] footer {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: var(--fx-ink);
    border-top: 3px solid var(--fx-ink);
    opacity: 0.85;
}

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