/* ===========================================================
   footer.css — Colophon v4
   =========================================================== */

.colophon {
    padding: 60px 36px 70px;
    background: var(--color-primary-dark);
    color: var(--color-paper);
    text-align: center;
    position: relative;
}

.colophon::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23d97706' stroke-width='0.6' opacity='0.25'><circle cx='80' cy='80' r='40'/><circle cx='80' cy='80' r='26'/><path d='M80 30 L96 80 L80 130 L64 80 Z'/><path d='M30 80 L80 96 L130 80 L80 64 Z'/></g></svg>");
    background-size: 200px;
    opacity: 0.4;
}

.colophon__inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.colophon__ornament {
    color: var(--color-secondary-soft);
    font-size: 18px;
    margin-bottom: 24px;
    opacity: 0.7;
    letter-spacing: 0.8em;
}

.colophon__text {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 380;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-paper);
    opacity: 0.9;
    font-variation-settings: 'opsz' 24, 'SOFT' 30;
}

.colophon__text em {
    color: var(--color-secondary-soft);
    font-style: italic;
    font-weight: 460;
}

.colophon__credits {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.colophon__nav {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.colophon__nav a {
    color: inherit;
    transition: color var(--transition-fast);
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.colophon__nav a:hover {
    color: var(--color-secondary-light);
    border-bottom-color: var(--color-secondary-light);
}

.colophon__dot {
    color: var(--color-secondary-soft);
    opacity: 0.5;
}