/* ========== Kurtz Vintage Vibes – site.css (vanilla CSS only) ========== */
/* ===== Dark theme (default) – Jazz club / midnight Deco ===== */
:root{
    /* Core */
    --bg: #0d0c0a;          /* coal black with warm hint */
    --panel: #1c1f26;       /* charcoal-navy panel */
    --text: #d8d2c4;        /* champagne silver */
    --muted: #a9a49a;       /* soft warm gray */
    --heading: #b8860b;     /* brass (headings) */
    --accent: #e5c07b;      /* brighter champagne gold (highlights) */
    --border: #262b33;      /* deep charcoal */
    --outline: #ffd54d;     /* focus gold */

    /* Nav */
    --nav-bg: var(--panel);
    --nav-text: #efe9da;    /* slightly lighter than body text */
    --nav-hover-bg: var(--text);
    --nav-hover-text: var(--panel);
    --nav-accent: var(--accent);
    --nav-border: var(--border);

    /* Links */
    --link: var(--accent);
    --link-visited: #c49a5a;

    /* Radii & shadows */
    --radius: 12px;
    --shadow: 0 8px 20px rgba(0,0,0,.35);

    /* Typography – system-native, KDE-friendly (no JS) */
    /* Sans: prefer Noto/Oxygen on Linux, then platform system UI */
    --font-sans:
    "Noto Sans", Oxygen, "Oxygen-Sans", "DejaVu Sans", "Liberation Sans",
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    /* Serif: include Noto/DejaVu/Liberation, plus your curated set */
    --font-serif:
    "Noto Serif", "DejaVu Serif", "Liberation Serif",
    SamsungOne, "New York", Skeena, FreeSerif, ui-serif, serif;

    /* Mono for code snippets (if any) */
    --font-mono:
    "Noto Sans Mono", "DejaVu Sans Mono", "Liberation Mono",
    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Type tuning */
    --fs-base: 18px;
    --lh: 1.58;
    --ls: 0.03em;
    --heading-scale: 1.06;

    /* Containers */
    --container-sm: 480px;
    --container-md: 600px;
    --container-lg: 768px;
    --container-xl: 880px;
    --container-xxl: 980px;
}

/* ===== Light theme (OS/browser preference) – Parchment / daytime Deco ===== */
@media (prefers-color-scheme: light){
    :root{
        /* Core */
        --bg: #fdfaf5;        /* parchment ivory */
        --panel: #e6dfc9;     /* aged paper */
        --text: #2e2b23;      /* ink charcoal */
        --muted: #5b564c;     /* warm dark gray */
        --heading: #7b5e2d;   /* bronze/copper (headings) */
        --accent: #a84300;    /* Deco vermilion (highlights) */
        --border: #cdbf9d;    /* parchment edge */
        --outline: #a36d00;   /* warm focus */

        /* Nav */
        --nav-bg: var(--panel);
        --nav-text: var(--text);
        --nav-hover-bg: #2e2b23;   /* dark hover for contrast */
        --nav-hover-text: #ffffff;
        --nav-accent: var(--heading);
        --nav-border: var(--border);

        /* Links */
        --link: var(--accent);
        --link-visited: #7b2f00;
    }
}

/* Base */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fs-base);
    line-height: var(--lh);
    letter-spacing: var(--ls);
    color: var(--text);
    background: var(--bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* OpenType flavor (safe fallbacks across platforms) */
    font-variant-ligatures: common-ligatures discretionary-ligatures;
    font-feature-settings: "liga","dlig","calt","hlig";
}

/* Utilities */
.container{ margin: 0 auto; padding-inline: 1rem; max-width: var(--container-xxl); }
.visually-hidden{
    position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link */
.skip-link{
    position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
    position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem;
    background: var(--panel); color: var(--heading); border-radius: var(--radius);
    outline: 3px solid var(--outline);
}

/* Focus visibility */
:where(a, button, [tabindex]):focus-visible{
    outline: 3px solid var(--outline);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Links */
a{ color: var(--link); text-decoration: none; }
a:visited{ color: var(--link-visited); }
a:hover{ text-decoration: underline; }

/* Header banner */
.banner{
    font-family: var(--font-serif);
    color: var(--heading);
    font-size: clamp(1.5rem, 3vw + .5rem, 2.25rem);
    font-weight: 800;
    letter-spacing: var(--ls);
    margin: 0;
    padding: .5rem .75rem;
    background: var(--panel);
    box-shadow: var(--shadow);
}

/* ===== Navigation (theme-aware, no hard-coded colors) ===== */
.site-header .bar{
    width:100%;
    display:block;
    padding:.25rem .5rem;
    margin:0 auto 1rem;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    font-family: var(--font-sans);
    font-size:.95rem;

    position: sticky;          /* keep visible */
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(120%) blur(2px);
}

.bar .bar-item{
    color: var(--nav-text);
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.45rem .8rem;
    border-radius:10px;
    white-space:nowrap;
    text-decoration:none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.bar .bar-item:hover,
.bar .bar-item:focus-visible{
    background: var(--nav-hover-bg);
    color: var(--nav-hover-text);
    text-decoration:none;
}
.bar .bar-item[aria-current="page"]{
    outline: 2px solid var(--nav-accent);
    outline-offset: 2px;
}
.icon{ line-height: 1; }

/* Headings */
h1, h2, h3{
    font-family: var(--font-serif);
    color: var(--heading);
    font-weight: 700;
    transform: scaleY(var(--heading-scale)); /* subtle deco elongation */
    margin: 1.2em 0 .4em;
}
h2{ font-weight: 600; font-style: oblique 6deg; }
h3{ font-weight: 500; font-style: oblique 9deg; }

/* Text blocks */
p{ margin: .9em 0; }
.indent{ padding-left: 2em; padding-right: 1em; text-align: left; }

/* Horizontal rule */
hr{
    border: 0;
    height: 3px;
    background: var(--text);
    opacity: .6;
    border-radius: 1em;
    max-width: 600px;
    margin: 2em auto;
}

/* Figures */
figure{ margin: .6em 1em; display: inline-block; }
.k-image{
    display:block;
    width:100%;
    border: 1px solid var(--text);
    border-radius: 15px 50px;
}
figcaption{
    font-family: var(--font-sans);
    color: var(--text);
    font-size: .9rem;
    text-align: center;
    margin: 4px 0 18px;
}

/* Article layout */
article{
    margin: 0 auto;
    padding: 0 1rem;
    hyphens: auto;
    max-width: var(--container-md);
}
@media (min-width: 480px){ article{ max-width: var(--container-lg); } }
@media (min-width: 768px){ article{ max-width: var(--container-xl); } }
@media (min-width: 1200px){ article{ max-width: var(--container-xxl); } }

/* Card grid — Phillaneum-style geometry and behaviour, KVV theme retained */
.prow{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}
@media (min-width: 600px){ .prow{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .prow{ grid-template-columns: repeat(4, 1fr); } }

.pcard{
    display: block;
    overflow: hidden;
    color: inherit;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.pcard:visited{
    color: inherit;
}
.pcard:hover{
    color: inherit;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.pcard-thumbnail{
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.pcard p,
.pcard-description{
    margin: .75rem .85rem 1rem;
    font-family: var(--font-sans);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}

/* Footer */
footer{
    font-family: var(--font-sans);
    line-height: 1.3;
    width: 100%;
    color: var(--text);
    text-align: center;
    font-size: .9rem;
    margin: 2em 0 0;
    padding: 2em 1em 1em;
    background: var(--panel);
}

/* Code blocks (optional) */
code, pre, kbd, samp{ font-family: var(--font-mono); }

/* Motion respect */
@media (prefers-reduced-motion: reduce){
    *{ transition: none !important; animation: none !important; }
}

/* Editorial / Curator Writer Block */
.section-editorial {
    margin: 2.5rem 0;
}

.pWriterBlock {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem;

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.pWriterThumbnail {
    flex: 0 0 auto;
    width: 140px;
    height: 140px;
    object-fit: cover;

    border: 2px solid var(--accent);
    border-radius: var(--radius);
}

.pWriterInfo {
    flex: 1 1 auto;
    min-width: 0;
}

.pWriterName {
    margin: 0 0 .4rem;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
}

.pWriterName a {
    color: var(--link);
    text-decoration: none;
}

.pWriterName a:visited {
    color: var(--link-visited);
}

.pWriterName a:hover {
    text-decoration: underline;
}

.pWriterTagline {
    margin: 0;
    font-family: var(--font-sans);
    font-size: .95rem;
    line-height: 1.5;
    color: var(--text);
}

/* Mobile — portrait above curator details */
@media (max-width: 640px) {
    .pWriterBlock {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pWriterThumbnail {
        width: 120px;
        height: 120px;
    }

    .pWriterInfo {
        width: 100%;
    }
}