:root {
    --primary-color: #c8823c;
    --primary-text-color: #1a1208;
    --secondary-text-color: #7a6248;
    --red-color: #e48769;
    --white-color: #ffffff;
    --light-gray-color: #f4efe6;
    --mid-gray-color: #e0d4c0;
    --dark-gray-color: #1a1208;
    --black-color: #000000;
    --dark-mode-bg-color: #100d09;
    --dark-mode-darker-bg-color: #0d0a07;
    --dark-mode-primary-text-color: #f0e5d0;
    --dark-mode-secondary-text-color: #9a8060;
    --dark-mode-border-color: #3a2a18;
    --shadow-base: 0 22px 44px -34px rgba(80, 36, 4, 0.24);
    --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-serif: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --vinyllo-shell-max: 1280px;
    --vinyllo-shell-padding: 24px;
    --vinyllo-btn-radius: 16px;
}

body {
    color: var(--primary-text-color);
    background:
        radial-gradient(circle at top left, rgba(200, 130, 60, 0.07), transparent 22%),
        radial-gradient(circle at top right, rgba(212, 180, 100, 0.06), transparent 18%),
        linear-gradient(180deg, #f8f3ec 0%, #f0e8da 100%);
}

/* ── Header ── */

.gh-head {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(248, 243, 236, 0.88) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(120, 80, 30, 0.09);
}

.gh-head.gh-outer,
.gh-foot.gh-outer {
    padding-right: 0;
    padding-left: 0;
}

.gh-head-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(1.6rem, 2vw, 3.2rem);
    width: min(calc(100% - (var(--vinyllo-shell-padding) * 2)), var(--vinyllo-shell-max));
    margin: 0 auto;
    min-height: 11.6rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

.gh-head-logo {
    display: inline-flex;
    align-items: center;
    color: var(--primary-text-color);
}

.gh-head-brand,
.gh-head-brand-wrapper {
    display: flex;
    align-items: center;
}

.gh-head-logo img {
    display: none;
}

/* ── Wordmark ── */

.vb {
    display: inline-flex;
    align-items: center;
    font-family: "Cal Sans", "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    letter-spacing: -0.056em;
    line-height: 1;
    color: inherit;
    white-space: nowrap;
    font-size: var(--vb-size, 3.2rem);
}

.vb__text {
    display: inline;
    line-height: 1;
}

.vb__disc {
    display: block;
    flex: none;
    width: 0.60em;
    height: 0.60em;
    overflow: visible;
    margin-top: 0.4rem;
}

/* Grooves: subtle strokes, inverted by dark mode */
.vb-groove         { stroke: rgba(255, 255, 255, 0.055); }
.vb-groove--soft   { stroke: rgba(255, 255, 255, 0.030); }

/* On light bg the disc is dark (currentColor = primary-text-color) — switch groove tones */
.gh-head-logo .vb-groove,
.gh-foot-brand .vb-groove {
    stroke: rgba(0, 0, 0, 0.10);
}
.gh-head-logo .vb-groove--soft,
.gh-foot-brand .vb-groove--soft {
    stroke: rgba(0, 0, 0, 0.06);
}

/* Header logo size */
.gh-head-logo .vb {
    --vb-size: clamp(3.8rem, 3.2rem + 1.2vw, 4.8rem);
}

/* Footer logo size */
.gh-foot-brand .vb {
    --vb-size: clamp(2.8rem, 2.4rem + 0.6vw, 3.2rem);
}

/* ── Nav ── */

.gh-head-menu,
.gh-head-actions {
    font-weight: 600;
}

.gh-head-menu {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0 !important;
}

.gh-head .nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 0.95rem;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: normal;
}

.gh-head .nav li {
    display: flex;
}

.gh-head .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 4.6rem;
    padding: 0 1.35rem;
    border-radius: 999px;
    color: var(--secondary-text-color);
    font-size: 1.6rem;
    font-weight: 600;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.gh-head .nav a:hover,
.gh-head .nav-current a {
    color: var(--primary-text-color);
    background: rgba(200, 130, 60, 0.08);
    box-shadow: inset 0 0 0 1px rgba(200, 130, 60, 0.14);
}

.gh-head-link,
.gh-search,
.gh-burger {
    color: var(--secondary-text-color);
}

.gh-head-link:hover,
.gh-search:hover {
    color: var(--primary-text-color);
}

.gh-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-left: auto;
    white-space: nowrap;
}

.gh-head-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.8rem;
    padding: 0 1.4rem;
    border-radius: var(--vinyllo-btn-radius);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

.gh-head-link:hover {
    background: rgba(200, 130, 60, 0.08);
}

.gh-search {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: var(--vinyllo-btn-radius);
    background: rgba(255, 255, 255, 0.68);
}

.gh-head .gh-search svg {
    width: 2.15rem;
    height: 2.15rem;
}

/* ── Buttons ── */

.gh-primary-btn,
.kg-btn,
.kg-header-card-button {
    min-height: 5rem;
    padding: 0 1.65rem;
    border-radius: var(--vinyllo-btn-radius);
    border: 0;
    background: linear-gradient(135deg, #7a3c10 0%, #c8823c 60%, #e8a850 100%);
    color: white !important;
    box-shadow: 0 22px 42px -24px rgba(200, 130, 60, 0.45);
    font-size: 1.55rem;
    font-weight: 600;
}

.gh-primary-btn:hover,
.kg-btn:hover,
.kg-header-card-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}

/* ── Tags / meta ── */

.post-tag {
    border-radius: 999px;
    background: rgba(200, 130, 60, 0.10);
    color: #9a5a1a;
}

/* ── Cards / images ── */

.post-image,
.u-placeholder,
.kg-image-card img,
.kg-gallery-card img,
.kg-bookmark-card,
.kg-file-card-container,
.kg-product-card-container,
.kg-audio-card,
.comment-container {
    border-radius: 24px;
}

.page-number,
.kg-bookmark-card,
.post-footer {
    border-color: rgba(120, 80, 30, 0.12);
}

/* ── Footer ── */

.gh-foot {
    margin-top: 4rem;
    padding-top: 2.5rem;
    padding-bottom: 1.4rem;
    color: rgba(240, 229, 208, 0.92);
    white-space: normal;
    background:
        radial-gradient(circle at top right, rgba(200, 130, 60, 0.14), transparent 20%),
        radial-gradient(circle at bottom left, rgba(160, 100, 40, 0.08), transparent 18%),
        linear-gradient(180deg, #1a1208 0%, #100d09 100%);
}

.gh-foot-inner,
.gh-foot-base {
    width: min(calc(100% - (var(--vinyllo-shell-padding) * 2)), var(--vinyllo-shell-max));
    margin: 0 auto;
}

.gh-foot a {
    color: rgba(240, 229, 208, 0.92);
}

.gh-foot a:hover {
    color: #ffffff;
}

.gh-foot-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.65fr);
    gap: clamp(2.4rem, 4vw, 5rem);
    align-items: start;
}

.gh-copyright {
    color: rgba(190, 168, 130, 0.92);
    font-weight: 600;
}

.gh-foot-base {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(190, 168, 130, 0.12);
}

.gh-foot-brand {
    display: inline-flex;
    align-items: center;
    color: #f0e5d0;
}

/* Footer disc grooves on dark bg — back to light tones */
.gh-foot-brand .vb-groove {
    stroke: rgba(255, 255, 255, 0.055) !important;
}

.gh-foot-brand .vb-groove--soft {
    stroke: rgba(255, 255, 255, 0.030) !important;
}

.vinyllo-foot-brand-block {
    min-width: 0;
    max-width: 33rem;
}

.vinyllo-foot-copy {
    margin: 1rem 0 0;
    max-width: 31rem;
    color: rgba(190, 168, 130, 0.9);
    line-height: 1.7;
    font-size: 1.5rem;
}

.vinyllo-foot-links-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.8rem 2rem;
    min-width: 0;
}

.vinyllo-foot-column {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

.vinyllo-foot-column h4 {
    margin: 0 0 0.15rem;
    color: #ffffff;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.vinyllo-foot-column a {
    color: rgba(190, 168, 130, 0.92);
    line-height: 1.45;
    font-size: 1.4rem;
}

.vinyllo-foot-column a:hover {
    color: #ffffff;
}

.gh-powered-by {
    display: none;
}

/* ── Dark mode ── */

.dark-mode body {
    color: var(--dark-mode-primary-text-color);
    background:
        radial-gradient(circle at top left, rgba(200, 130, 60, 0.10), transparent 20%),
        radial-gradient(circle at bottom right, rgba(160, 100, 40, 0.07), transparent 18%),
        linear-gradient(180deg, #150f08 0%, #100d09 100%);
}

.dark-mode .gh-head,
.dark-mode .off-canvas {
    background: rgba(16, 13, 9, 0.92) !important;
    border-color: rgba(190, 140, 70, 0.08);
}

.dark-mode .gh-head-logo {
    color: #f0e5d0;
}

.dark-mode .gh-head-link:hover,
.dark-mode .gh-search:hover {
    color: #f0e5d0;
}

.dark-mode .gh-head .nav a,
.dark-mode .gh-head-link,
.dark-mode .gh-search,
.dark-mode .gh-burger,
.dark-mode .post-meta,
.dark-mode .page-number {
    color: var(--dark-mode-secondary-text-color);
}

.dark-mode .gh-head .nav a:hover,
.dark-mode .gh-head .nav-current a {
    color: #f0e5d0;
    background: rgba(200, 130, 60, 0.10);
    box-shadow: inset 0 0 0 1px rgba(200, 130, 60, 0.12);
}

/* Dark mode: disc uses currentColor (#f0e5d0) — grooves need dark tones */
.dark-mode .gh-head-logo .vb-groove {
    stroke: rgba(0, 0, 0, 0.10) !important;
}
.dark-mode .gh-head-logo .vb-groove--soft {
    stroke: rgba(0, 0, 0, 0.06) !important;
}

.dark-mode .gh-search {
    background: rgba(255, 255, 255, 0.06);
}

.dark-mode .kg-bookmark-card,
.dark-mode .comment-container,
.dark-mode pre,
.dark-mode :not(pre) > code,
.dark-mode .kg-header-card.kg-style-light {
    background-color: var(--dark-mode-darker-bg-color);
}

.dark-mode .post-footer,
.dark-mode .page-number,
.dark-mode .kg-bookmark-card {
    border-color: var(--dark-mode-border-color);
}

.dark-mode .post-tag {
    background: rgba(200, 130, 60, 0.14);
    color: #d49248;
}

/* ── Responsive ── */

@media (max-width: 1180px) {
    .gh-head-inner {
        grid-template-columns: 1fr auto;
        row-gap: 1rem;
    }

    .gh-head-menu {
        grid-column: 1 / -1;
        order: 3;
    }

    .gh-head-actions {
        justify-self: end;
    }

    .gh-foot-inner {
        grid-template-columns: 1fr;
    }

    .vinyllo-foot-links-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .gh-head-inner {
        min-height: auto;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .gh-head-actions .gh-head-link {
        display: none;
    }

    .gh-foot-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .gh-foot-base {
        margin-top: 1.5rem;
    }

    .vinyllo-foot-brand-block {
        max-width: none;
    }

    .vinyllo-foot-copy {
        max-width: none;
        font-size: 1.6rem;
    }

    .vinyllo-foot-links-grid {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
}