/* ==========================================================================
   ks.css — Krešimir Starčević 2026
   Bespoke stylesheet for the starcevic-2026 child theme.
   Enqueue after the parent theme style; this file owns all layout & type.
   No border-radius anywhere except the Spotify facade, which deliberately
   quotes the player it loads. No shadows except the hero H1 text-shadow.
   ========================================================================== */

/* --- 1. Fonts (self-hosted, latin + latin-ext) --------------------------- */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/cormorant-garamond-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("../fonts/cormorant-garamond-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2"); }

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/barlow-300.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-400-italic.woff2") format("woff2"); }

/* --- 2. Tokens ----------------------------------------------------------- */

:root {
  --ks-paper: #f6f4f0;
  --ks-paper-alt: #eceae4;
  --ks-ink: #171614;
  --ks-ink-soft: #2b2823;
  --ks-muted: #46423b;
  --ks-muted-2: #4a453e;
  --ks-muted-3: #5f5a52;
  --ks-light: #f7f5f1;
  --ks-light-2: #e2ded6;
  --ks-scrim: #0b0a09;

  --ks-line: rgba(23, 22, 20, 0.13);
  --ks-line-strong: rgba(23, 22, 20, 0.16);
  --ks-line-soft: rgba(23, 22, 20, 0.11);
  --ks-line-hair: rgba(23, 22, 20, 0.14);
  --ks-field-border: #d8d4cc;
  --ks-field-bg: #fbfaf8;

  --ks-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ks-sans: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --ks-max: 1360px;
  --ks-gutter: 40px;
}

/* --- 3. Base ------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ks-paper);
  color: var(--ks-ink);
  font-family: var(--ks-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ks-muted); }

p { text-wrap: pretty; }

::selection { background: var(--ks-ink); color: var(--ks-paper); }

:focus-visible { outline: 2px solid var(--ks-ink); outline-offset: 3px; }

.ks-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 4. Layout primitives ----------------------------------------------- */

.ks-wrap {
  max-width: var(--ks-max);
  margin: 0 auto;
  padding: 0 var(--ks-gutter);
}

/* standard inner page: eyebrow + h2 + content */
.ks-page { max-width: var(--ks-max); margin: 0 auto; padding: 72px var(--ks-gutter) 120px; }

.ks-section { padding: 100px 0; }
.ks-section--alt { background: var(--ks-paper-alt); }

.ks-eyebrow {
  font-family: var(--ks-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin: 0;
}

.ks-h1 {
  font-family: var(--ks-serif);
  font-weight: 300;
  font-size: clamp(46px, 6.6vw, 104px);
  line-height: 0.98;
  letter-spacing: 0.04em;
  margin: 0;
}

.ks-h2 {
  font-family: var(--ks-serif);
  font-weight: 500;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 18px 0 0;
  text-wrap: pretty;
}

.ks-h2--rep { font-size: 66px; letter-spacing: 0.01em; margin: 16px 0 14px; }
.ks-h2--section { font-size: 46px; margin: 0; }

.ks-lead {
  font-family: var(--ks-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.32;
  margin: 0 0 30px;
}

.ks-body {
  font-size: 16px;
  line-height: 1.72;
  color: var(--ks-muted-2);
  max-width: 62ch;
  margin: 0 0 20px;
}

.ks-intro {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ks-muted);
  max-width: 64ch;
  margin: 0 0 44px;
}

.ks-rule { height: 1px; background: var(--ks-line-strong); border: 0; margin: 0; }

/* section head: title left, meta right, hairline under */
.ks-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--ks-line-strong);
  padding-bottom: 22px;
  margin-bottom: 8px;
}
.ks-head__meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-muted);
  white-space: nowrap;
}

/* --- 5. Buttons & links -------------------------------------------------- */

.ks-btn {
  display: inline-block;
  font-family: var(--ks-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid var(--ks-ink);
  color: var(--ks-ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ks-btn:hover { background: var(--ks-ink); color: var(--ks-paper); }

.ks-btn--solid { background: var(--ks-ink); color: var(--ks-paper); }
.ks-btn--solid:hover { background: transparent; color: var(--ks-ink); }

.ks-btn--light { border-color: rgba(247, 245, 241, 0.55); color: var(--ks-light); }
.ks-btn--light:hover { background: var(--ks-light); color: var(--ks-ink); }

.ks-link {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-muted);
  border-bottom: 1px solid rgba(23, 22, 20, 0.3);
  padding-bottom: 3px;
}
.ks-link:hover { color: var(--ks-ink); border-bottom-color: var(--ks-ink); }

/* --- 6. Header ----------------------------------------------------------- */

.ks-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 244, 240, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ks-line);
}
.ks-header__inner {
  max-width: var(--ks-max);
  margin: 0 auto;
  padding: 0 var(--ks-gutter);
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.ks-brand { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.ks-brand__name {
  font-family: var(--ks-serif);
  font-size: 19px;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}
.ks-brand__role {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ks-muted);
}

.ks-nav { display: flex; align-items: center; gap: 30px; }
.ks-nav__item { position: relative; }
.ks-nav__link {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-muted);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.ks-nav__link:hover { color: var(--ks-ink); }
.ks-nav__item.current-menu-item > .ks-nav__link,
.ks-nav__item.current-menu-parent > .ks-nav__link,
.ks-nav__item.current-page-ancestor > .ks-nav__link {
  color: var(--ks-ink);
  border-bottom-color: var(--ks-ink);
}

/* dropdown (Repertoire, Media) */
.ks-nav__sub {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 260px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  background: var(--ks-paper);
  border: 1px solid var(--ks-line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.ks-nav__item:hover > .ks-nav__sub,
.ks-nav__item:focus-within > .ks-nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.ks-nav__sub a {
  display: block;
  padding: 9px 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.ks-nav__sub a:hover { color: var(--ks-ink); background: var(--ks-paper-alt); }

/* mobile toggle — details/summary, no JS */
.ks-burger { display: none; }
.ks-burger > summary {
  list-style: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: 1px solid var(--ks-line-strong);
}
.ks-burger > summary::-webkit-details-marker { display: none; }
.ks-burger__panel {
  position: fixed;
  inset: 74px 0 0;
  background: var(--ks-paper);
  padding: 32px var(--ks-gutter);
  display: grid;
  gap: 4px;
  align-content: start;
  overflow-y: auto;
}
.ks-burger__panel a {
  display: block;
  padding: 14px 0;
  font-size: 16px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ks-line-soft);
}
.ks-burger__panel a.is-sub {
  font-size: 13px;
  letter-spacing: 0.14em;
  padding-left: 18px;
  color: var(--ks-muted);
}

/* --- 7. Hero ------------------------------------------------------------- */

.ks-hero { position: relative; height: 92vh; min-height: 640px; overflow: hidden; }
.ks-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.ks-hero__scrim { position: absolute; inset: 0; background: var(--ks-scrim); opacity: 0.34; }
.ks-hero__inner {
  position: relative;
  height: 100%;
  max-width: var(--ks-max);
  margin: 0 auto;
  padding: 0 var(--ks-gutter) 88px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  color: var(--ks-light);
}
.ks-hero .ks-h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.ks-hero__role {
  font-size: 12px;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--ks-light-2);
  margin: 26px 0 0;
}
.ks-hero__dash {
  width: 64px; height: 1px;
  background: rgba(247, 245, 241, 0.45);
  margin: 30px 0 34px;
  border: 0;
}

/* --- 8. Next concert bar ------------------------------------------------- */

.ks-next {
  background: var(--ks-paper-alt);
  border-bottom: 1px solid var(--ks-line);
}
.ks-next__inner {
  max-width: var(--ks-max);
  margin: 0 auto;
  padding: 34px var(--ks-gutter);
  display: flex;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}
.ks-next__label {
  width: 100%;
  max-width: 120px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.ks-next__date {
  font-family: var(--ks-serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ks-next__where { flex: 1; min-width: 260px; }
.ks-next__city { font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; }
.ks-next__venue { font-size: 14px; color: var(--ks-muted); margin-top: 6px; }
.ks-next__title {
  max-width: 380px;
  font-family: var(--ks-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--ks-muted-2);
}

/* --- 9. Concert list ----------------------------------------------------- */

/* tabs: Upcoming / Past */
.ks-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 46px;
  border-bottom: 1px solid var(--ks-line-strong);
}
.ks-tabs__list { display: flex; gap: 36px; }
.ks-tab {
  padding-bottom: 16px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-muted);
  border-bottom: 2px solid transparent;
}
.ks-tab:hover { color: var(--ks-ink); }
.ks-tab[aria-current="true"] { color: var(--ks-ink); border-bottom-color: var(--ks-ink); }

/* one concert row — full list */
.ks-concert {
  display: grid;
  /* 210px is "3 September 2026" on one line at 26px in the serif. */
  grid-template-columns: 210px 1fr 300px;
  gap: 48px;
  padding: 44px 0;
  border-bottom: 1px solid var(--ks-line-soft);
  align-items: start;
}
/*
 * Same treatment as .ks-next__date on the front page, one step down in size to
 * suit the column. Not nowrap like that one: a date range is long, and in a
 * 210px column it has to be allowed to break rather than push the grid.
 */
.ks-concert__date {
  font-family: var(--ks-serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.ks-badge {
  display: inline-block;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ks-muted);
  border: 1px solid rgba(23, 22, 20, 0.2);
  padding: 4px 8px;
}
.ks-concert__city {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ks-concert__venue { font-size: 14px; color: var(--ks-muted); margin-top: 8px; }
.ks-concert__cycle {
  font-family: var(--ks-serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: var(--ks-muted);
  margin-top: 10px;
}
.ks-concert__title {
  font-family: var(--ks-serif);
  font-size: 30px;
  font-style: italic;
  line-height: 1.24;
  color: var(--ks-ink);
  margin: 20px 0 0;
  text-wrap: pretty;
}
.ks-works {
  display: grid;
  gap: 5px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ks-muted);
}
.ks-concert__cta { margin-top: 24px; }
.ks-people {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ks-muted);
}

/* home variant — tighter */
.ks-concert--home {
  grid-template-columns: 190px 1fr 220px;
  gap: 40px;
  padding: 30px 0;
}
.ks-concert--home .ks-concert__date { font-size: 23px; }
.ks-concert--home .ks-concert__city { font-size: 13px; }
.ks-concert--home .ks-concert__venue { margin-top: 7px; }
.ks-concert--home .ks-concert__title { font-size: 24px; margin-top: 16px; }

/* past — grouped by year */
.ks-year {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--ks-line-strong);
  padding-bottom: 14px;
  margin: 60px 0 0;
}
.ks-year__num { font-family: var(--ks-serif); font-size: 34px; font-weight: 400; }
.ks-year__count {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.ks-concert--past {
  grid-template-columns: 130px 1fr 260px auto;
  gap: 32px;
  padding: 22px 0;
  align-items: baseline;
}
/*
 * The archive keeps its own weight — it is a long list and 26px serif rows
 * would bury the concert titles — but it is no longer set in caps, so the date
 * reads word for word as it does everywhere else: "25 August 2026".
 */
.ks-concert--past .ks-concert__date {
  font-family: var(--ks-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ks-muted);
}
.ks-concert--past .ks-concert__title {
  font-size: 21px;
  margin: 0;
  color: var(--ks-muted-2);
}

.ks-empty {
  padding: 60px 0;
  font-family: var(--ks-serif);
  font-size: 24px;
  font-style: italic;
  color: var(--ks-muted-3);
}

/* --- 10. Biography ------------------------------------------------------- */

.ks-bio { display: grid; grid-template-columns: 1fr 1.25fr; gap: 76px; align-items: start; }
.ks-bio__media { position: sticky; top: 110px; }
.ks-bio__img { width: 100%; height: 620px; object-fit: cover; object-position: 50% 22%; }
.ks-caption {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ks-muted-3);
  margin-top: 14px;
}

/* home biography block */
.ks-bio-home { display: grid; grid-template-columns: 1.15fr 1fr; gap: 90px; align-items: start; }
.ks-bio-home .ks-eyebrow { margin-bottom: 34px; }

/* --- 11. Repertoire ------------------------------------------------------ */

/* special projects */
.ks-project {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 60px;
  padding: 56px 0;
  border-bottom: 1px solid var(--ks-line-hair);
  align-items: start;
}
.ks-project__title {
  font-family: var(--ks-serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  text-wrap: pretty;
}
.ks-project__note {
  font-family: var(--ks-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ks-muted-3);
  margin: 12px 0 0;
}
.ks-project__with { font-size: 14px; line-height: 1.6; color: var(--ks-muted); margin: 20px 0 0; }
.ks-part + .ks-part { margin-top: 34px; }
.ks-part__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ks-line-hair);
  margin-bottom: 14px;
}
.ks-part__works {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 7px;
  font-size: 16px; line-height: 1.5; color: var(--ks-ink-soft);
}
.ks-kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-paper);
  background: var(--ks-ink);
  padding: 6px 10px;
  margin-bottom: 16px;
}

/* chamber index */
.ks-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 46px 56px;
  padding-top: 50px;
}
.ks-index__composer {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ks-line-hair);
  margin: 0 0 12px;
}
.ks-index__works {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 6px;
  font-size: 15px; line-height: 1.55; color: var(--ks-muted);
}

/* solo */
.ks-solo-feature { display: grid; gap: 18px; }
.ks-work__composer { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; }
.ks-work__title { font-size: 16px; line-height: 1.5; color: var(--ks-ink-soft); margin-top: 5px; }
.ks-work__note {
  font-family: var(--ks-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ks-muted-3);
  margin-top: 5px;
}
.ks-programs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 50px 56px;
  padding-top: 50px;
}
.ks-program__no {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.ks-program__title {
  font-family: var(--ks-serif);
  font-size: 26px;
  font-weight: 500;
  margin: 10px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ks-line-hair);
}

/* --- 12. Media ----------------------------------------------------------- */

.ks-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 44px 40px;
  padding-top: 52px;
}
.ks-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ks-paper-alt);
  border: 1px solid var(--ks-line-hair);
}
.ks-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ks-video__title { font-family: var(--ks-serif); font-size: 22px; margin: 16px 0 0; }
.ks-video__meta { font-size: 13px; color: var(--ks-muted); margin-top: 6px; }

.ks-photos { display: grid; gap: 64px; padding-top: 52px; }
.ks-photo { display: grid; grid-template-columns: 1fr 300px; gap: 44px; align-items: start; }
.ks-photo__img {
  width: 100%; height: 520px;
  object-fit: cover;
  border: 1px solid var(--ks-line-hair);
}
.ks-photo__slot {
  width: 100%; height: 520px;
  border: 1px solid var(--ks-line-hair);
  background: repeating-linear-gradient(135deg, #e6e3dd 0 10px, var(--ks-paper-alt) 10px 20px);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ks-muted-3);
}
.ks-photo__name { font-family: var(--ks-serif); font-size: 22px; margin: 0 0 12px; }
.ks-photo__meta { font-size: 13px; line-height: 1.7; color: var(--ks-muted); }

/* --- 13. Contact --------------------------------------------------------- */

.ks-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.ks-contact__col { display: grid; gap: 34px; }
.ks-field__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin-bottom: 8px;
}
.ks-field__value { font-family: var(--ks-serif); font-size: 26px; }
.ks-field__value a { border-bottom: 1px solid var(--ks-line-strong); padding-bottom: 2px; }
.ks-field__value a:hover { border-bottom-color: var(--ks-ink); }

/* forms (only if a contact form is added later) */
.ks-input, .ks-textarea, .ks-select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ks-ink);
  background: var(--ks-field-bg);
  border: 1px solid var(--ks-field-border);
  padding: 12px 13px;
  outline: none;
}
.ks-input:focus, .ks-textarea:focus, .ks-select:focus { border-color: var(--ks-ink); }
.ks-input::placeholder, .ks-textarea::placeholder { color: var(--ks-muted); font-weight: 500; }

/* --- 14. Footer ---------------------------------------------------------- */

.ks-footer { border-top: 1px solid var(--ks-line); background: var(--ks-paper); }
.ks-footer__inner {
  max-width: var(--ks-max);
  margin: 0 auto;
  padding: 46px var(--ks-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.ks-footer__copy,
.ks-footer__social a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.ks-footer__social { display: flex; gap: 26px; }
.ks-footer__social a:hover { color: var(--ks-ink); }

/* --- 15. Responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
  .ks-h2 { font-size: 52px; }
  .ks-h2--rep { font-size: 52px; }
  .ks-h2--section { font-size: 40px; }

  .ks-concert { grid-template-columns: 175px 1fr; gap: 36px; }
  .ks-concert__date { font-size: 22px; }
  .ks-concert .ks-people { grid-column: 2; margin-top: 20px; }
  .ks-concert--home { grid-template-columns: 165px 1fr; gap: 30px; }
  .ks-concert--home .ks-concert__date { font-size: 21px; }
  .ks-concert--past { grid-template-columns: 120px 1fr; gap: 24px; }
  .ks-concert--past .ks-concert__cta { grid-column: 2; margin-top: 10px; }

  .ks-project { grid-template-columns: 320px 1fr; gap: 44px; }
  .ks-bio { gap: 52px; }
  .ks-bio-home { gap: 56px; }
  .ks-contact { gap: 52px; }
  .ks-photo { grid-template-columns: 1fr 240px; gap: 32px; }
}

@media (max-width: 860px) {
  :root { --ks-gutter: 28px; }

  .ks-nav { display: none; }
  .ks-burger { display: block; }

  .ks-hero { height: 88vh; min-height: 560px; }
  .ks-hero .ks-h1 { font-size: clamp(38px, 11vw, 64px); }
  .ks-hero__inner { padding-bottom: 64px; }
  .ks-hero__img { object-position: 50% 25%; }

  .ks-page { padding: 48px var(--ks-gutter) 88px; }
  .ks-section { padding: 72px 0; }
  .ks-h2, .ks-h2--rep { font-size: 42px; }
  .ks-lead { font-size: 27px; }

  .ks-next__inner { gap: 20px 32px; }
  .ks-next__title { max-width: none; }

  .ks-bio,
  .ks-bio-home,
  .ks-contact,
  .ks-project,
  .ks-photo { grid-template-columns: 1fr; }
  .ks-bio__media { position: static; }
  .ks-bio__img { height: 460px; }
  .ks-photo__img, .ks-photo__slot { height: 380px; }

  .ks-videos { grid-template-columns: 1fr; }
  .ks-index { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; }
  .ks-programs { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --ks-gutter: 24px; }

  .ks-page { padding: 40px var(--ks-gutter) 72px; }
  .ks-section { padding: 56px 0; }
  .ks-h2, .ks-h2--rep { font-size: 34px; }
  .ks-h2--section { font-size: 30px; }
  .ks-lead { font-size: 23px; }
  .ks-intro { font-size: 16px; }

  .ks-concert,
  .ks-concert--home,
  .ks-concert--past { grid-template-columns: 1fr; gap: 0; padding: 30px 0; }
  .ks-concert .ks-people,
  .ks-concert--past .ks-concert__cta { grid-column: 1; }
  .ks-concert__date,
  .ks-concert--home .ks-concert__date { font-size: 22px; }
  .ks-concert__title { font-size: 24px; }
  .ks-concert__body { margin-top: 18px; }

  .ks-next__date { font-size: 28px; }
  .ks-project__title { font-size: 27px; }
  .ks-btn { padding: 15px 24px; }
  .ks-tabs__list { gap: 22px; }
  .ks-tab { font-size: 11px; letter-spacing: 0.16em; }
}

/* --- 16. Print ----------------------------------------------------------- */

@media print {
  .ks-header, .ks-burger, .ks-hero__scrim, .ks-footer__social { display: none !important; }
  body { background: #fff; color: #000; }
  .ks-concert { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; color: #555; }
}

/* --- 17. Fixes on top of the delivered stylesheet ------------------------ */

/*
   The burger panel is display:grid, which overrides the user-agent rule that
   hides the contents of a closed <details>. Current Chrome still hides it via
   content-visibility, but browsers without that fall back to a full-screen
   paper panel covering the site. Show it only when the menu is open.
*/
.ks-burger:not([open]) > .ks-burger__panel { display: none; }

/*
   .ks-head__meta is nowrap so the concert count never breaks mid-phrase. At
   phone widths the "sorted automatically against today" line is wider than the
   viewport and gets clipped, so let it wrap there.
*/
@media (max-width: 600px) {
  .ks-head__meta { white-space: normal; }
}

/*
   The rightmost dropdown (Media) sits close to the viewport edge; opening it
   leftwards pushes 260px of menu past the right edge and creates a horizontal
   scrollbar even while hidden, because visibility:hidden still occupies space.
*/
.ks-nav__sub--right { left: auto; right: -18px; }

/*
   The burger summary is also the only way back out of the panel, so it swaps
   from "Menu" to a close cross while the menu is open. A fixed width keeps the
   button from resizing between the two states, and 44px of height meets the
   hit-target minimum (the original padding gave 38px).
*/
.ks-burger > summary {
  width: 64px;
  text-align: center;
  padding-top: 13px;
  padding-bottom: 13px;
}
.ks-burger__label--close { display: none; font-size: 13px; line-height: 1; }
.ks-burger[open] > summary .ks-burger__label--open { display: none; }
.ks-burger[open] > summary .ks-burger__label--close { display: inline-block; }

/*
   Anchor the mobile panel to the header instead of to the viewport.

   The delivered rule is `position: fixed; inset: 74px 0 0`, which assumes the
   header always sits flush against the top of the viewport. Two things break
   that assumption:

   1. backdrop-filter makes .ks-header the containing block for its fixed
      descendants, so 74px resolves against the 75px header and the panel opens
      as a sliver;
   2. the WordPress admin bar pushes the header down, so a panel pinned at 74px
      slices the close button in half.

   .ks-header is position:sticky and therefore already the containing block for
   absolutely positioned children, so `top: 100%` lands on its bottom edge
   wherever that edge happens to be — no admin-bar arithmetic, and the blur in
   §6 can stay. The body is locked while the panel is open, so absolute behaves
   exactly like fixed from the visitor's side.
*/
.ks-burger__panel {
  position: absolute;
  top: 100%;
  right: 0;
  bottom: auto;
  left: 0;
  height: calc(100vh - 74px);
  height: calc(100dvh - 74px);
  overscroll-behavior: contain;
}

/*
   With the panel open the page behind it still scrolled, so the content slid
   under a stationary ✕. overscroll-behavior stops the scroll chaining from the
   panel; :has() locks the document itself. Both without JavaScript.
*/
@media (max-width: 860px) {
  html:has(.ks-burger[open]),
  html:has(.ks-burger[open]) body { overflow: hidden; }
}

/*
   Logged-in views: keep the sticky header clear of the admin bar, and take the
   bar's height out of the panel so it cannot run past the bottom of the screen.
   The bar is 32px above 782px, 46px below it, and turns position:absolute at
   600px — where it scrolls away and the header belongs back at the top.
*/
.admin-bar .ks-header { top: 32px; }
.admin-bar .ks-burger__panel { height: calc(100dvh - 74px - 32px); }

@media (max-width: 782px) {
  .admin-bar .ks-header { top: 46px; }
  .admin-bar .ks-burger__panel { height: calc(100dvh - 74px - 46px); }
}

@media (max-width: 600px) {
  .admin-bar .ks-header { top: 0; }
}

/*
   Dokumenti na skidanje ispod portreta na biografiji — u dizajnu su složeni
   jedan ispod drugoga s razmakom 12px. `.ks-doc--empty` je stanje dok PDF još
   nije postavljen: isti tekst, bez linka i bez crte.
*/
.ks-docs { display: grid; gap: 12px; justify-items: start; margin-top: 26px; }
.ks-doc { letter-spacing: 0.2em; padding-bottom: 6px; }
.ks-doc--empty {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-muted-3);
  padding-bottom: 6px;
}

/*
   Napomena ispod datuma i oznaka praizvedbe — polja iz admin mockupa koja
   handout §7 ne spominje, pa nemaju zadanu klasu u §9.
*/
.ks-concert__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ks-muted-3);
  max-width: 22ch;
}
.ks-concert--past .ks-concert__note { margin-top: 6px; }
.ks-badge + .ks-concert__note { margin-top: 8px; }

/*
   Prečaci prema adminu. Vide ih samo prijavljeni urednici — PHP ih inače uopće
   ne ispisuje, ovo je samo izgled. Namjerno su drukčiji od ostalih linkova
   stranice da se ne čitaju kao dio javnog sadržaja.
*/
.ks-edit {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-muted-3);
  border: 1px dashed rgba(23, 22, 20, 0.28);
}
.ks-edit:hover { color: var(--ks-ink); border-color: var(--ks-ink); border-style: solid; }

.ks-edit--manage { margin: 0 14px 0 0; vertical-align: baseline; }

/*
   Ikona čovječuljka u navigaciji — ulaz za prijavu, a prijavljenima prečac do
   koncerata. Nosi boju iz nav itema (currentColor u SVG-u) pa prati iste hover
   i focus stilove kao ostatak izbornika.
*/
.ks-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: -8px;
  color: var(--ks-muted);
  flex-shrink: 0;
}
.ks-account:hover { color: var(--ks-ink); }
.ks-account__icon { display: block; }

/* U mobilnom panelu ide kao i ostale stavke, samo s ikonom ispred. */
.ks-burger__panel a.ks-account--panel {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: auto;
  margin: 10px 0 0;
  padding: 14px 0;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ks-muted);
  border-bottom: 0;
}
.ks-burger__panel a.ks-account--panel .ks-account__icon { width: 17px; height: 17px; }

/* --- 18. Concert manager (client area) ---------------------------------- */

.ks-mgr__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ks-mgr__who { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ks-muted-3); margin: 0; }
.ks-mgr__who a { border-bottom: 1px solid var(--ks-line-strong); padding-bottom: 2px; }

.ks-mgr__notice {
  margin: 30px 0 0;
  padding: 14px 18px;
  background: var(--ks-paper-alt);
  border-left: 3px solid var(--ks-ink);
  font-size: 14px;
}
.ks-mgr__notice--quiet { border-left-color: var(--ks-line-strong); color: var(--ks-muted-2); }

/* counters ---------------------------------------------------------------- */

.ks-mgr__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 20px; margin: 40px 0 0; }
.ks-mgr__stat { border: 1px solid var(--ks-line-strong); padding: 20px 22px; }
.ks-mgr__stat-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.ks-mgr__stat-num { display: block; font-family: var(--ks-serif); font-size: 44px; line-height: 1.1; margin-top: 6px; }

.ks-mgr__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 54px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ks-line-strong);
}
.ks-mgr__bar-title { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ks-muted); }

/* table ------------------------------------------------------------------- */

.ks-mgr__row {
  display: grid;
  grid-template-columns: 150px 1fr 1fr 110px 70px;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--ks-line-soft);
  font-size: 14px;
}
.ks-mgr__row--head {
  padding: 14px 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ks-muted);
  border-bottom-color: var(--ks-line-strong);
}
.ks-mgr__cell--title { font-family: var(--ks-serif); font-style: italic; font-size: 18px; }
.ks-mgr__cell--action { text-align: right; }

.ks-mgr__pill {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ks-mgr__pill--up { border-color: var(--ks-ink); color: var(--ks-ink); }
.ks-mgr__pill--past { border-color: var(--ks-field-border); color: var(--ks-muted-3); }

/* form -------------------------------------------------------------------- */

.ks-mgr__form { margin-top: 40px; }

.ks-mgr__block {
  border: 1px solid var(--ks-line-strong);
  padding: 10px 22px 26px;
  margin: 0 0 22px;
}
.ks-mgr__block legend {
  padding: 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-muted);
}

.ks-field + .ks-field, .ks-mgr__grid + .ks-field, .ks-field + .ks-mgr__grid { margin-top: 18px; }
.ks-field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin-bottom: 7px;
}
.ks-mgr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ks-mgr__grid .ks-field + .ks-field { margin-top: 0; }
.ks-mgr__grid [hidden] { display: none; }
.ks-mgr__help { font-size: 13px; color: var(--ks-muted-3); margin: 10px 0 18px; }

/* date shape switch */
.ks-modes { display: flex; flex-wrap: wrap; }
.ks-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 -1px 0 0;
  padding: 11px 16px;
  border: 1px solid var(--ks-line-strong);
  background: var(--ks-field-bg);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ks-mode input { margin: 0; }
.ks-mode.is-active { background: var(--ks-ink); border-color: var(--ks-ink); color: var(--ks-paper); }

/* repeaters */
.ks-rep + .ks-rep { margin-top: 30px; }
.ks-rep__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ks-line-hair);
  margin-bottom: 12px;
}
.ks-rep__label { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ks-muted); }
.ks-rep__add {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ks-muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ks-line-strong);
  padding: 0 0 3px;
  cursor: pointer;
}
.ks-rep__add:hover { color: var(--ks-ink); border-bottom-color: var(--ks-ink); }

.ks-rep__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) 40px; gap: 10px; }
.ks-rep__row + .ks-rep__row { margin-top: 8px; }
.ks-rep__remove {
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  color: var(--ks-muted-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.ks-rep__remove:hover { color: var(--ks-ink); border-color: var(--ks-line-strong); }
.ks-rep__cols { display: none; }

.ks-mgr__check { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 14px; }

.ks-mgr__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 30px 0 16px; }

.ks-mgr__delete { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--ks-line-soft); }
.ks-mgr__delete-btn {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a3b32;
  background: transparent;
  border: 1px solid rgba(154, 59, 50, 0.4);
  padding: 13px 22px;
  cursor: pointer;
}
.ks-mgr__delete-btn:hover { background: #9a3b32; border-color: #9a3b32; color: var(--ks-paper); }

/* mobile ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .ks-mgr__grid { grid-template-columns: 1fr; }
  .ks-mgr__grid .ks-field + .ks-field { margin-top: 18px; }
  .ks-mgr__stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ks-mgr__stat { padding: 16px 18px; }
  .ks-mgr__stat-num { font-size: 36px; }

  /* Redak tablice postaje kartica; naslov stupca dolazi iz data-label. */
  .ks-mgr__row--head { display: none; }
  .ks-mgr__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 0;
  }
  /* justify-items: start da se oznaka statusa ne rastegne preko cijele širine */
  .ks-mgr__cell { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; justify-items: start; }
  .ks-mgr__cell::before {
    content: attr(data-label);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ks-muted-3);
  }
  .ks-mgr__cell--action { display: block; text-align: left; margin-top: 8px; }
  .ks-mgr__cell--title { font-size: 17px; }

  .ks-rep__row { grid-template-columns: 1fr 40px; }
  .ks-rep__row input:first-child { grid-column: 1 / -1; }

  .ks-mgr__block { padding: 10px 16px 22px; }
  .ks-mode { flex: 1 1 auto; justify-content: center; padding: 12px 10px; }
  .ks-mgr__actions .ks-btn { flex: 1 1 auto; text-align: center; }
}

/*
   Hero po prototipu: naslov, „Pianist", crtica i gumb su centrirani.
   Isporučeni §7 ima align-items: flex-start, što se ne slaže s dizajnom —
   ovo je ispravak, ne zaobilaženje.
*/
.ks-hero__inner { align-items: center; text-align: center; }
.ks-hero__dash { margin-left: auto; margin-right: auto; }

/* --- 19. Kontakt forma (CF7) -------------------------------------------- */

.ks-form { display: grid; gap: 22px; margin-top: 6px; }
.ks-form .ks-field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin-bottom: 7px;
}
/* CF7 omata svako polje u <span class="wpcf7-form-control-wrap"> */
.ks-form .wpcf7-form-control-wrap { display: block; }
.ks-form .ks-textarea { min-height: 150px; resize: vertical; }
.ks-form__actions { margin: 6px 0 0; }
.ks-form .ks-btn { cursor: pointer; }

/* honeypot — skriven od ljudi, vidljiv botovima */
.ks-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/*
   CF7 svoja skrivena polja stavlja u <fieldset>, a njegov stylesheet je maknut
   pa preglednik crta zadani okvir fieldseta kao prazan pravokutnik iznad forme.
*/
.wpcf7 .hidden-fields-container { display: none; }

/* CF7 poruke */
.ks-form .wpcf7-not-valid-tip {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #9a3b32;
  margin-top: 6px;
}
.ks-form .ks-input.wpcf7-not-valid,
.ks-form .ks-textarea.wpcf7-not-valid { border-color: #9a3b32; }
/* Traka s porukom postoji i prazna — prikaži je tek kad ima što reći. */
.wpcf7-response-output[aria-hidden="true"] { display: none; }
.wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-left: 3px solid var(--ks-ink) !important;
  background: var(--ks-paper-alt);
  font-size: 14px;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed /* Traka s porukom postoji i prazna — prikaži je tek kad ima što reći. */
.wpcf7-response-output[aria-hidden="true"] { display: none; }
.wpcf7-response-output { border-left-color: #9a3b32 !important; }
.wpcf7-spinner { display: none; }

/* --- 20. Ensembles ------------------------------------------------------- */

.ks-ensembles { margin-top: 46px; }

.ks-ens {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 56px;
  padding: 46px 0;
  border-bottom: 1px solid var(--ks-line-hair);
  align-items: start;
  color: inherit;
}
.ks-ens:hover { color: inherit; }
.ks-ens__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.35s ease;
}
.ks-ens:hover .ks-ens__img { filter: grayscale(0); }

.ks-ens__instrument {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin: 0;
}
.ks-ens__name {
  font-family: var(--ks-serif);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.1;
  margin: 12px 0 0;
}
.ks-ens__with {
  font-family: var(--ks-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--ks-muted-3);
  margin: 6px 0 0;
}
.ks-ens__lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ks-muted-2);
  max-width: 58ch;
  margin: 22px 0 0;
}
.ks-ens__prog {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin: 26px 0 24px;
  padding: 16px 0;
  border-top: 1px solid var(--ks-line-soft);
  border-bottom: 1px solid var(--ks-line-soft);
}
.ks-ens__prog-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.ks-ens__prog-title { font-family: var(--ks-serif); font-style: italic; font-size: 24px; }
.ks-ens .ks-link { border-bottom-color: rgba(23, 22, 20, 0.3); }
.ks-ens:hover .ks-link { color: var(--ks-ink); border-bottom-color: var(--ks-ink); }

/* single ------------------------------------------------------------------ */

.ks-duo__name {
  font-family: var(--ks-serif);
  font-size: 62px;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 14px 0 0;
}
.ks-duo__sub {
  font-family: var(--ks-serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ks-muted-3);
  margin: 10px 0 0;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ks-line-strong);
}

.ks-duo { display: grid; grid-template-columns: 380px 1fr; gap: 70px; align-items: start; margin-top: 54px; }
.ks-duo__media { position: sticky; top: 110px; display: grid; gap: 20px; }
.ks-duo__portrait { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ks-duo__together { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.ks-program {
  background: var(--ks-paper-alt);
  border: 1px solid var(--ks-line-hair);
  padding: 34px 36px 38px;
}
.ks-program__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin: 0;
}
.ks-program__name {
  font-family: var(--ks-serif);
  font-style: italic;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  margin: 10px 0 26px;
}
.ks-program__works { display: grid; gap: 16px; }

.ks-duo__bio { margin-top: 40px; }
.ks-duo__bio p { font-size: 17px; line-height: 1.75; color: var(--ks-muted-2); max-width: 68ch; margin: 0 0 20px; }
.ks-duo__site { margin-top: 10px; }

/* other duos -------------------------------------------------------------- */

.ks-ens-more { margin-top: 90px; padding-top: 40px; border-top: 1px solid var(--ks-line-strong); }
.ks-ens-more__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; margin-top: 28px; }
.ks-ens-card { display: block; color: inherit; }
.ks-ens-card:hover { color: inherit; }
.ks-ens-card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.35s ease;
}
.ks-ens-card:hover .ks-ens-card__img { filter: grayscale(0); }
.ks-ens-card__name { display: block; font-family: var(--ks-serif); font-size: 24px; margin-top: 14px; }
.ks-ens-card__instrument {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin-top: 5px;
}

@media (max-width: 1100px) {
  .ks-ens { grid-template-columns: 240px 1fr; gap: 40px; }
  .ks-duo { grid-template-columns: 300px 1fr; gap: 48px; }
  .ks-ens-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ks-ens { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
  .ks-ens__img { aspect-ratio: 3 / 2; }
  .ks-ens__name { font-size: 34px; }
  .ks-ens__with { font-size: 18px; }
  .ks-duo { grid-template-columns: 1fr; gap: 34px; }
  .ks-duo__media { position: static; }
  .ks-duo__name { font-size: 40px; }
  .ks-duo__sub { font-size: 21px; }
  .ks-program { padding: 26px 22px 30px; }
  .ks-program__name { font-size: 27px; }
}

@media (max-width: 600px) {
  .ks-ens-more__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ks-ens-card__name { font-size: 19px; }
}

/* --- 21. Galerija fotografija ------------------------------------------- */

/*
   Produkcija koristi klasičnu WP galeriju u tri stupca, s prirodnim omjerima
   slika. CSS stupci daju isti dojam bez razlomljenih redova koje grid stvara
   kad se portreti i pejzaži miješaju.
*/
.ks-gallery {
  columns: 3;
  column-gap: 24px;
  margin-top: 46px;
}
.ks-gallery__item {
  display: block;
  break-inside: avoid;
  margin-bottom: 24px;
}
.ks-gallery__img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ks-line-hair);
  transition: opacity 0.25s ease;
}
.ks-gallery__item:hover .ks-gallery__img { opacity: 0.82; }

/* lightbox — bez JS-a, preko :target ------------------------------------- */

.ks-lightbox { display: none; }
.ks-lightbox:target {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: center;
  justify-content: center;
  padding: 56px 72px;
  background: rgba(11, 10, 9, 0.94);
}
.ks-lightbox__backdrop { position: absolute; inset: 0; }
.ks-lightbox__frame { position: relative; margin: 0; max-width: 100%; max-height: 100%; }
.ks-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  object-fit: contain;
}
.ks-lightbox__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-light-2);
}
.ks-lightbox__bar a { border-bottom: 1px solid rgba(247, 245, 241, 0.4); padding-bottom: 3px; }
.ks-lightbox__bar a:hover { color: var(--ks-light); border-bottom-color: var(--ks-light); }

.ks-lightbox__nav,
.ks-lightbox__close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--ks-light-2);
  border: 1px solid rgba(247, 245, 241, 0.28);
  font-size: 17px;
  line-height: 1;
}
.ks-lightbox__nav:hover,
.ks-lightbox__close:hover { color: var(--ks-ink); background: var(--ks-light); border-color: var(--ks-light); }
.ks-lightbox__nav--prev { left: 18px; top: 50%; margin-top: -24px; }
.ks-lightbox__nav--next { right: 18px; top: 50%; margin-top: -24px; }
.ks-lightbox__close { top: 18px; right: 18px; }

@media (max-width: 1100px) { .ks-gallery { columns: 2; } }

@media (max-width: 860px) {
  .ks-lightbox:target { padding: 64px 16px 24px; }
  .ks-lightbox__nav--prev { left: 10px; }
  .ks-lightbox__nav--next { right: 10px; }
}

@media (max-width: 600px) {
  .ks-gallery { columns: 1; }
  .ks-lightbox__img { max-height: calc(100vh - 190px); }
}

/* --- 22. Pravna stranica ------------------------------------------------ */

.ks-footer__legal {
  margin-left: 22px;
  border-bottom: 1px solid var(--ks-line-strong);
  padding-bottom: 2px;
}
.ks-footer__legal:hover { color: var(--ks-ink); border-bottom-color: var(--ks-ink); }

.ks-legal { max-width: 70ch; }
.ks-legal__h {
  font-family: var(--ks-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  margin: 46px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ks-line-soft);
}
.ks-legal__list {
  margin: 0 0 20px;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.72;
  color: var(--ks-muted-2);
}
.ks-legal__list li { margin-bottom: 7px; }
.ks-legal .ks-body a,
.ks-legal__list a { border-bottom: 1px solid var(--ks-line-strong); padding-bottom: 1px; }
.ks-legal .ks-body a:hover { border-bottom-color: var(--ks-ink); }

@media (max-width: 600px) {
  .ks-legal__h { font-size: 23px; margin-top: 36px; }
  .ks-footer__legal { margin-left: 0; display: inline-block; margin-top: 8px; }
}

/* --- 23. Video: klikni za učitavanje ------------------------------------ */

/*
   Dok posjetitelj ne klikne, na stranici nema ničega s Googleovih servera —
   ni iframea ni sličice. Poster je iz naše medijske biblioteke.
*/
.ks-embed--facade {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ks-embed__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}
.ks-embed--facade:hover .ks-embed__poster { opacity: 0.85; }

/* Trokut je čisti CSS — nema ikone koju bi trebalo učitavati. */
.ks-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border: 1px solid rgba(247, 245, 241, 0.75);
  background: rgba(11, 10, 9, 0.42);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ks-embed__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -5px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--ks-light);
}
.ks-embed--facade:hover .ks-embed__play { background: var(--ks-ink); border-color: var(--ks-ink); }

.ks-embed__note {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 7px 11px;
  background: rgba(11, 10, 9, 0.72);
  color: var(--ks-light-2);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Aktivan video dobiva tanki okvir da se vidi koji je pokrenut. */
.ks-embed:has(iframe) { outline: 1px solid var(--ks-ink); outline-offset: 3px; }

/* --- 24. Diskografija ---------------------------------------------------- */

/* Index: two covers side by side, each the whole click target. */
.ks-albums {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  padding-top: 52px;
  max-width: 1000px;
}

.ks-album-card__link { display: block; color: inherit; }
.ks-album-card__link:hover { color: inherit; }

/*
 * Album art is the thing being shown, so it is never desaturated the way the
 * ensemble portraits are, and never cropped. A square box with the cover
 * contained inside keeps the two titles on one line even though the sleeves
 * are not the same shape; on this paper the letterboxing does not read.
 */
.ks-album-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center top;
  transition: opacity 0.3s ease;
}
.ks-album-card__link:hover .ks-album-card__img { opacity: 0.9; }

.ks-album-card__slot {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--ks-line-strong);
  color: var(--ks-muted-3);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ks-album-card__composer {
  display: block;
  margin-top: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ks-muted);
}
.ks-album-card__title {
  display: block;
  font-family: var(--ks-serif);
  font-size: 30px;
  line-height: 1.2;
  margin-top: 8px;
}
.ks-album-card__meta {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ks-muted-3);
}
.ks-album-card__more { margin-top: 18px; }
.ks-album-card__link:hover .ks-album-card__more { color: var(--ks-ink); border-bottom-color: var(--ks-ink); }

/* Click-to-load player, same bargain as the video facade. */
.ks-listen-box { margin-top: 26px; }
.ks-album .ks-listen-box { margin-top: 30px; max-width: 62ch; }

/*
 * The facade is built to the shape of the player it becomes — same height, same
 * dark card, artwork left, play control right. Clicking then swaps like for
 * like instead of replacing one of our frames with something else entirely.
 * This is the one place on the site with a radius and a dark panel; it is
 * quoting Spotify's UI on purpose, so a visitor knows what the click will load.
 */
.ks-listen-box__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 152px;
  padding: 16px;
  background: #2b2622;
  border-radius: 12px;
  color: var(--ks-light);
  transition: background 0.2s ease;
}
.ks-listen-box__cta:hover { background: #35302a; color: var(--ks-light); }

.ks-listen-box__art { flex: 0 0 auto; width: 120px; }
.ks-listen-box__art-img { width: 120px; height: 120px; object-fit: cover; border-radius: 4px; }

.ks-listen-box__body { min-width: 0; flex: 1 1 auto; }

.ks-listen-box__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1ED760;
}
.ks-listen-box__mark { display: block; flex: 0 0 auto; }

.ks-listen-box__title {
  display: block;
  margin-top: 10px;
  font-family: var(--ks-serif);
  font-size: 21px;
  line-height: 1.25;
  color: var(--ks-light);
  /* Two lines, then ellipsis — the card must not grow past the player's height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ks-listen-box__note {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 245, 241, 0.6);
}

.ks-listen-box__play {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ks-light);
  transition: transform 0.2s ease;
}
.ks-listen-box__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -4px;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #171614;
}
.ks-listen-box__cta:hover .ks-listen-box__play { transform: scale(1.06); }

/*
 * 152px is Spotify's compact player, and the player draws its own rounded card
 * inside it — a hairline of ours around that would read as a second frame, so
 * the iframe carries no border. The height is Spotify's to change; if the
 * player ever looks cropped or leaves a white strip, this is the number.
 */
.ks-listen-box__player {
  display: block;
  width: 100%;
  height: 152px;
  border: 0;
}

/* Album page: front and back artwork, then the text column. */
.ks-covers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
  margin-top: 52px;
  max-width: 900px;
}
.ks-covers--one { grid-template-columns: minmax(0, 460px); }
.ks-covers__img { width: 100%; }

.ks-album { margin-top: 64px; }

.ks-album__h {
  font-family: var(--ks-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ks-muted);
  margin: 56px 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ks-line-strong);
  max-width: 62ch;
}

/* Streaming services read as a row of links, not a bullet list. */
.ks-listen { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; }

.ks-awards {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  max-width: 62ch;
  color: var(--ks-muted-2);
  line-height: 1.72;
}
.ks-awards li { padding-left: 22px; position: relative; margin-bottom: 8px; }
.ks-awards li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 1px;
  background: var(--ks-line-strong);
}

/*
 * The quote stays upright — the serif already sets it apart from the body
 * text, and a page of italic paragraphs this long reads as strain. Only the
 * outlet is styled as metadata, in the same small caps as everything else.
 */
.ks-review {
  margin: 0 0 40px;
  padding-left: 26px;
  border-left: 1px solid var(--ks-line-strong);
  max-width: 64ch;
}
.ks-review p {
  font-family: var(--ks-serif);
  font-size: 23px;
  line-height: 1.45;
  color: var(--ks-ink-soft);
  margin: 0;
}
.ks-review cite {
  display: block;
  margin-top: 14px;
  font-family: var(--ks-sans);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ks-muted-3);
}

.ks-album__back { margin: 56px 0 0; }

@media (max-width: 860px) {
  .ks-albums { gap: 44px; }
  .ks-album-card__title { font-size: 25px; }
  .ks-covers { gap: 28px; margin-top: 40px; }
  .ks-album { margin-top: 48px; }
  .ks-review p { font-size: 20px; }
}

@media (max-width: 860px) {
  .ks-listen-box__art, .ks-listen-box__art-img { width: 96px; }
  .ks-listen-box__art-img { height: 96px; }
  .ks-listen-box__title { font-size: 18px; }
}

@media (max-width: 600px) {
  .ks-albums { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .ks-listen-box__cta { gap: 12px; padding: 14px; }
  .ks-listen-box__play { width: 40px; height: 40px; }
  .ks-covers { grid-template-columns: minmax(0, 1fr); }
  .ks-covers--one { grid-template-columns: minmax(0, 1fr); }
  .ks-listen { gap: 18px; }
  .ks-review { padding-left: 18px; }
  .ks-review p { font-size: 19px; }
}