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

    :root {
        --color-bg: #f5f4ef;
        --color-text: #111;
        --color-muted: #888;
        --color-border: #d4d2cb;
        --color-accent: #111;
    }

    @font-face {
        font-family: 'PlumpeloV2';
        src: url('../../assets/fonts/PLUMPELOV2REGULAR.TTF') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    body {
        font-family: 'Hanken Grotesk', sans-serif;
        background: var(--color-bg);
        color: var(--color-text);
        min-height: 100vh;
    }

    a {
    text-decoration: none;
}

    .container {
        max-width: 820px;
        margin: 0 auto;
        padding: 48px 32px 80px;
    }

    .hero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 56px;
        gap: 16px;
    }

    .hero-name .plumpe-logo {
        font-size: clamp(64px, 14vw, 120px);
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 0.85;
        text-transform: uppercase;
        display: block;
        font-family: 'PlumpeloV2', sans-serif;
    }

    .hero-meta {
        text-align: right;
        padding-bottom: 4px;
    }

    .meta-name {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--color-text);
    }

    .meta-role {
        font-size: 12px;
        color: var(--color-muted);
        line-height: 1.5;
    }

    .meta-number {
        font-size: 11px;
        color: var(--color-border);
        margin-top: 4px;
        letter-spacing: 0.08em;
    }

    .section-header {
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin-bottom: 28px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--color-border);
    }

    .section-title {
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--color-text);
    }

    .section-count {
        font-size: 11px;
        color: var(--color-muted);
        letter-spacing: 0.06em;
    }


    .quests-list {
        list-style: none;
    }

    .quest-item {
        display: grid;
        grid-template-columns: 40px 1fr auto;
        align-items: baseline;
        gap: 0 20px;
        padding: 18px 0;
        border-bottom: 1px solid var(--color-border);
        cursor: default;
        transition: opacity 0.15s ease;
    }

    .quest-item:last-child {
        border-bottom: none;
    }

    .quest-item:hover .quest-name {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .quest-num {
        font-size: 11px;
        font-weight: 500;
        color: var(--color-muted);
        letter-spacing: 0.06em;
        padding-top: 2px;
    }

    .quest-body {}

    .quest-name {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: var(--color-text);
        display: block;
        margin-bottom: 3px;
    }

    .quest-desc {
        font-size: 12px;
        color: var(--color-muted);
        line-height: 1.5;
    }

    .quest-tag {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-muted);
        border: 1px solid var(--color-border);
        padding: 3px 8px;
        border-radius: 2px;
        white-space: nowrap;
        align-self: center;
    }


    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--color-muted);
        text-decoration: none;
        margin-bottom: 40px;
        text-transform: uppercase;
    }

    .back-link:hover {
        color: var(--color-text);
    }

    .back-link::before {
        content: '←';
        font-size: 14px;
    }