/* ============================================
   BKM Design System v3
   bracakumerle.com — canonical CSS
   Instrument Serif + Work Sans · teal #016068
   ============================================ */

/* Google Fonts loaded via <link> in HTML head — not here */

:root {
  --text-xs: clamp(.7rem, .65rem + .25vw, .82rem);
  --text-sm: clamp(.85rem, .78rem + .35vw, 1rem);
  --text-base: clamp(1rem, .95rem + .25vw, 1.1rem);
  --text-lg: clamp(1.1rem, 1rem + .6vw, 1.45rem);
  --text-xl: clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem);
  --text-2xl: clamp(1.9rem, 1.1rem + 2.2vw, 3.2rem);
  --text-3xl: clamp(2.4rem, .8rem + 4vw, 4.8rem);

  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;   --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;  --space-20: 5rem;   --space-24: 6rem;

  --radius-sm: .375rem; --radius-md: .5rem;  --radius-lg: .75rem;
  --radius-xl: 1rem;    --radius-2xl: 1.5rem; --radius-full: 9999px;

  --c-bg: #f6f4ef;
  --c-surf: #f9f8f4;
  --c-surf2: #fcfbf8;
  --c-offset: #eeeae3;
  --c-border: rgba(40,34,18,.11);
  --c-text: #211e17;
  --c-muted: #6b6860;
  --c-faint: #9a9891;
  --c-inv: #f8f7f2;
  --c-p: #016068;
  --c-ph: #0b4850;
  --c-p-hl: #cddcd8;
  --c-warm: #c48a3a;

  --shadow-sm: 0 1px 3px rgba(30,22,8,.07);
  --shadow-md: 0 10px 32px rgba(30,22,8,.09);
  --shadow-lg: 0 24px 56px rgba(30,22,8,.12);

  --content: 1100px;
  --font-d: 'Instrument Serif', Georgia, serif;
  --font-b: 'Work Sans', system-ui, sans-serif;
  --ease: 200ms cubic-bezier(.16,1,.3,1);
}

[data-theme="dark"] {
  --c-bg: #161512; --c-surf: #1b1a18; --c-surf2: #1f1e1b;
  --c-offset: #222018; --c-border: rgba(220,210,185,.1);
  --c-text: #cbc8bf; --c-muted: #918f89; --c-faint: #636159;
  --c-inv: #161512; --c-p: #4f99a4; --c-ph: #218190;
  --c-p-hl: #1e3435; --c-warm: #c98f44;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.25);
  --shadow-md: 0 10px 32px rgba(0,0,0,.38);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.5);
}

/* ── RESET ── */
*, :before, :after { box-sizing: border-box }
html { scroll-behavior: smooth }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0 }
body { font-family: var(--font-b); line-height: 1.65; background: var(--c-bg); color: var(--c-text) }
a { color: inherit; text-decoration: none }
img, svg { display: block; max-width: 100% }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
ul { list-style: none; padding: 0 }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *:before, *:after { transition: none !important } }

/* ── LAYOUT ── */
.bkm-container { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto }
.bkm-skip { position: absolute; left: -9999px }
.bkm-skip:focus { left: 1rem; top: 1rem; background: var(--c-p); color: var(--c-inv); padding: .6rem 1rem; border-radius: var(--radius-md); z-index: 200 }

/* ── HEADER / NAV ── */
.bkm-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-bg) 82%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--c-border);
}
.bkm-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) 0;
}
.bkm-brand { display: flex; flex-direction: column; gap: .1rem; line-height: 1 }
.bkm-brand-sub { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted) }
.bkm-brand-name { font-family: var(--font-d); font-size: var(--text-lg) }
.bkm-nav ul { display: flex; gap: var(--space-5); flex-wrap: wrap }
.bkm-nl { font-size: var(--text-sm); color: var(--c-muted); padding: .4rem .15rem; position: relative }
.bkm-nl:hover { color: var(--c-text) }
.bkm-nl:after { content: ""; position: absolute; left: 0; bottom: -.1rem; width: 100%; height: 1px; background: var(--c-p); transform: scaleX(0); transform-origin: left; transition: transform var(--ease) }
.bkm-nl:hover:after, .bkm-nl.active:after { transform: scaleX(1) }
.bkm-nl.active { color: var(--c-text) }
.bkm-theme-btn { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-surf); border: 1px solid var(--c-border) }

/* ── BREADCRUMB ── */
.bkm-breadcrumb {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--text-xs);
  color: var(--c-muted);
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
}
.bkm-breadcrumb a { color: var(--c-muted) }
.bkm-breadcrumb a:hover { color: var(--c-p) }
.bkm-breadcrumb .sep { color: var(--c-faint) }
.bkm-breadcrumb .current { color: var(--c-text) }

/* ── PAGE HERO (podstranice) ── */
.bkm-page-hero { padding: clamp(var(--space-10), 7vw, var(--space-20)) 0 clamp(var(--space-8), 5vw, var(--space-16)) }
.bkm-page-eyebrow { font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--space-3) }
.bkm-page-title { font-family: var(--font-d); font-size: var(--text-2xl); line-height: 1.02; margin-bottom: var(--space-4) }
.bkm-page-title em { font-style: italic; color: var(--c-p) }
.bkm-page-sub { max-width: 58ch; color: var(--c-muted); font-size: var(--text-base) }

/* ── UTILS ── */
.bkm-eyebrow { font-size: var(--text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--space-3) }
.bkm-card { background: var(--c-surf); border: 1px solid var(--c-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm) }
.bkm-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .85rem 1.35rem; border-radius: var(--radius-full); font-size: var(--text-sm); border: 1px solid transparent; transition: all var(--ease); font-weight: 500 }
.bkm-btn-p { background: var(--c-p); color: var(--c-inv) }
.bkm-btn-p:hover { background: var(--c-ph) }
.bkm-btn-s { background: var(--c-surf); border-color: var(--c-border) }
.bkm-btn-s:hover { background: var(--c-offset) }
.bkm-chip { font-size: var(--text-xs); padding: .35rem .75rem; border-radius: var(--radius-full); background: var(--c-p-hl); color: var(--c-p); letter-spacing: .04em; font-weight: 500 }
.bkm-chip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4) }
.bkm-divider { height: 1px; background: var(--c-border); margin: var(--space-6) 0 }

/* ── CONTENT SECTION ── */
.bkm-section { padding-block: clamp(var(--space-10), 7vw, var(--space-20)) }
.bkm-sec-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: end; margin-bottom: var(--space-8) }
.bkm-sec-head h2 { font-family: var(--font-d); font-size: var(--text-2xl); line-height: 1.02 }
.bkm-sec-sub { max-width: 46ch; color: var(--c-muted); font-size: var(--text-sm) }

/* ── PROSE (bio, tekstovi) ── */
.bkm-prose { max-width: 70ch }
.bkm-prose h2 { font-family: var(--font-d); font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-4); line-height: 1.1 }
.bkm-prose h3 { font-size: var(--text-lg); font-weight: 600; margin: var(--space-6) 0 var(--space-3) }
.bkm-prose p { color: var(--c-muted); line-height: 1.8; margin-bottom: var(--space-5) }
.bkm-prose ul { display: grid; gap: var(--space-2); margin-bottom: var(--space-5) }
.bkm-prose ul li { color: var(--c-muted); padding-left: var(--space-5); position: relative; font-size: var(--text-sm) }
.bkm-prose ul li:before { content: "—"; position: absolute; left: 0; color: var(--c-p) }
.bkm-prose a { color: var(--c-p); border-bottom: 1px solid var(--c-p-hl) }
.bkm-prose a:hover { border-color: var(--c-p) }

/* ── LYRICS ── */
.bkm-lyrics-meta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8) }
.bkm-lyrics-meta-item { font-size: var(--text-xs); color: var(--c-muted) }
.bkm-lyrics-meta-item strong { color: var(--c-text); font-weight: 600 }
.bkm-lyrics-body { font-size: var(--text-base); line-height: 1.5; white-space: pre-line; color: var(--c-text); max-width: 58ch }
.bkm-lyrics-stanza { margin-bottom: var(--space-6) }
.bkm-lyrics-label { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-p); margin-bottom: var(--space-2); font-weight: 600 }

/* ── CORPUS GRID (lyrics index, diskografija) ── */
.bkm-corpus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) }
.bkm-corpus-card { padding: var(--space-5); transition: all var(--ease) }
.bkm-corpus-card:hover { border-color: var(--c-p); box-shadow: var(--shadow-sm) }
.bkm-corpus-card h3 { font-family: var(--font-d); font-size: var(--text-lg); margin-bottom: var(--space-2) }
.bkm-corpus-card p { font-size: var(--text-sm); color: var(--c-muted) }

/* ── ENTITY LINKS ── */
.bkm-entity-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6) }
.bkm-entity-badge { font-size: var(--text-xs); padding: .35rem .75rem; border-radius: var(--radius-full); background: var(--c-offset); color: var(--c-muted); border: 1px solid var(--c-border); transition: all var(--ease) }
.bkm-entity-badge:hover { border-color: var(--c-p); color: var(--c-p) }

/* ── FOOTER ── */
.bkm-footer { padding: var(--space-10) 0 var(--space-16); border-top: 1px solid var(--c-border) }
.bkm-footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-8) }
.bkm-footer h4 { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: var(--space-4) }
.bkm-footer-links { display: grid; gap: var(--space-2) }
.bkm-footer-link { font-size: var(--text-sm); color: var(--c-muted); transition: color var(--ease) }
.bkm-footer-link:hover { color: var(--c-p) }
.bkm-footer-bottom { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--c-border); display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--c-faint) }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .bkm-corpus-grid { grid-template-columns: repeat(2, 1fr) }
  .bkm-footer-grid { grid-template-columns: 1fr }
  .bkm-sec-head { flex-direction: column; align-items: flex-start }
}
@media (max-width: 640px) {
  .bkm-corpus-grid { grid-template-columns: 1fr 1fr }
  .bkm-footer-bottom { flex-direction: column; gap: var(--space-2) }
}