:root {
    color-scheme: dark light;

    --bg-dark: #050509;
    --bg-light: #f5f5f7;

    --fg-dark: #f5f5f7;
    --fg-light: #0b0b10;

    --muted-dark: #a0a0b8;
    --muted-light: #555873;

    --accent: rgb(205, 161, 104);

    --border-dark: #262638;
    --border-light: #d5d7e0;

    --svg-logo: var(--accent);
    --svg-text-dark: var(--fg-dark);
    --svg-text-light: var(--fg-light);

    /* vars que encapsulam os light-dark */
    --radial-bg: radial-gradient(circle at top, light-dark(#d9d9e6, #111325), light-dark(var(--bg-light), var(--bg-dark)) 40%);
    --fg: light-dark(var(--fg-light), var(--fg-dark));
    --svg-text-fill: light-dark(var(--svg-text-light), var(--svg-text-dark));
    --muted: light-dark(var(--muted-light), var(--muted-dark));
    --card-border: light-dark(var(--border-light), var(--border-dark));
    --card-bg: light-dark(rgba(255, 255, 255, 0.9), rgba(7, 7, 18, 0.9));
    --card-bg-hover: light-dark(rgba(245, 245, 252, 0.98), rgba(12, 12, 26, 0.98));
    --thumb-bg: light-dark(#d5d7e0, #111325);
}

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

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--radial-bg);
    color: var(--fg);
}

main {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px 24px;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

header.page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.brand-logo {
    width: 180px;
    height: auto;
    display: block;
}

.brand-logo svg,
.brand-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* texto da logo */
.brand-logo svg g path[data-text] {
    fill: var(--svg-text-fill);
}

p.subtitle {
    font-size: 0.95rem;
    color: var(--muted);
}

.list-wrapper {
    display: block;
}

ul {
    list-style: none;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

a.card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    text-decoration: none;
    color: inherit;
    transition:
        border-color 0.15s ease,
        transform 0.12s ease,
        background 0.15s ease;
}

a.card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    background: var(--card-bg-hover);
}

.thumb {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: var(--thumb-bg);
    aspect-ratio: 885 / 630;
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.path {
    font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.78rem;
    color: var(--accent);
}

.title {
    font-weight: 600;
    font-size: 0.98rem;
}

.desc {
    font-size: 0.86rem;
    color: var(--muted);
}

footer {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 20px;
    font-size: 0.78rem;
    color: var(--muted);
    flex-shrink: 0;
    text-align: center;
}