/* Cinkuši — stilovi.
   Grafički jezik izvorne stranice (tušem crtani nosorog i kolaž, plavi rukopisni logo, crvena,
   tinta na papiru) u suvremenom rasporedu. Sve linije i prijelazi su tušem vučeni potezi i
   poderani rubovi papira (SVG iz tools/make-lines.mjs) — nigdje oštrih CSS rubova.
   Fontovi su lokalni (OFL): Fraunces i Instrument Sans. */

@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 800; font-display: swap; src: url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 800; font-display: swap; src: url("../fonts/fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/fraunces-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/fraunces-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #f4efe6;
  --paper-2: #ebe3d4;
  --card: #fbf8f2;
  --ink: #15120f;
  --ink-2: #352f29;
  --muted: #6b6358;
  --red: #a81017;
  --red-2: #c11a22;
  --red-ink: #8c0d13;
  --red-hi: #e2383e; /* crvena na crnom */
  --on-ink: #e6ddcf; /* tekst na crnom */
  --on-ink-2: #a99d8e;
  --blue: #3f4b73;
  --lilac: #7f88c0;
  --spotify: #1db954;
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --dock-h: 0px;
  --header-h: 72px;
  /* tušem crtane linije, kutovi i poderani rubovi (maske — boja se zadaje bojom pozadine) */
  --ink-h: url("../img/lines/ink-h.svg");
  --ink-h2: url("../img/lines/ink-h2.svg");
  --ink-v: url("../img/lines/ink-v.svg");
  --ink-v2: url("../img/lines/ink-v2.svg");
  --corner-tl: url("../img/lines/corner-tl.svg");
  --corner-tr: url("../img/lines/corner-tr.svg");
  --corner-bl: url("../img/lines/corner-bl.svg");
  --corner-br: url("../img/lines/corner-br.svg");
  --edge: url("../img/lines/edge.svg");
  --edge-rim: url("../img/lines/edge-rim.svg");
  /* maska otiska pečata: tinta s rijetkim svijetlim točkicama (šum, prag na ~8 %) */
  --stamp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -16 0 0 0 11.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  color-scheme: light;
}

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

/* scrollbarovi: klizač je potez kistom, staza blijeda tušem crtana linija, strelice crtane perom
   (Chrome, Edge, Safari; Firefox dobiva samo boje) */
::-webkit-scrollbar { width: 14px; height: 12px; }
::-webkit-scrollbar-track:vertical { background: url("../img/lines/sb-track-v.svg") center top / 14px 160px repeat-y; }
::-webkit-scrollbar-track:horizontal { background: url("../img/lines/sb-track-h.svg") left center / 160px 12px repeat-x; }
::-webkit-scrollbar-thumb:vertical {
  border-style: solid;
  border-width: 10px 0;
  border-image: url("../img/lines/sb-thumb-v.svg") 12 0 fill / 10px 0 / 0 stretch round;
}
::-webkit-scrollbar-thumb:horizontal {
  border-style: solid;
  border-width: 0 10px;
  border-image: url("../img/lines/sb-thumb-h.svg") 0 12 fill / 0 10px / 0 round stretch;
}
::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active { border-image-source: url("../img/lines/sb-thumb-v-red.svg"); }
::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:horizontal:active { border-image-source: url("../img/lines/sb-thumb-h-red.svg"); }
::-webkit-scrollbar-button:single-button { display: block; width: 14px; height: 14px; background: center / 12px 12px no-repeat; }
::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("../img/lines/sb-up.svg"); }
::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("../img/lines/sb-down.svg"); }
::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("../img/lines/sb-left.svg"); }
::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("../img/lines/sb-right.svg"); }
::-webkit-scrollbar-button:hover { background-color: rgba(21, 18, 15, .08); }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--ink-2) transparent; scrollbar-width: thin; }
}
/* scrollbar-gutter: mjesto za traku za pomicanje ostaje i kad otvoren izbornik zaključa stranicu,
   pa se sadržaj ne pomakne */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); scrollbar-gutter: stable; }
body {
  margin: 0;
  background-color: var(--paper);
  /* blaga tekstura papira */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink-2);
  font: 400 17px/1.65 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { color: var(--ink); }
p { margin: 0 0 1em; }
strong { color: var(--ink); font-weight: 650; }

.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 {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
/* Na visokim ekranima (npr. 4K) kratka stranica ne smije završiti iznad dna: zadnja sekcija se
   produži do podnožja, pa je podnožje uvijek na dnu ekrana. */
.page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.main { display: flex; flex-direction: column; flex: 1 0 auto; }
.main > :last-child { flex-grow: 1; }
.main:focus { outline: none; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

.ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- tušem crtani okviri ---------- */
/* Okvir oko bilo kojeg elementa: ::before nosi okomite, ::after vodoravne linije i potamnjele kutove
   (kao okviri "gore levo / gore desno" sa stare stranice). Linije se spajaju u kutovima bez križanja.
   --rf boja, --rw debljina trake, --rl duljina uzorka, --rc veličina kuta (1 = obična, 0 = bez kutova). */
.event, .lrow, .credits, .members li, .notice, .partners a,
.poster, .release__cover, .feature__cover, .lrow__cover, .mosaic a, .gallery a, .event__poster,
.btn, .chip, .years a, .track__lyrics, .lang, .nav-toggle, .event__date time, .badge, .shelf-nav button,
.dock, .dock__src, .vmodal__close {
  --rf: var(--ink);
  --rw: 8px;
  --rl: 380px;
  --rc: 1;
  position: relative;
}
.btn, .chip, .years a, .track__lyrics, .lang, .nav-toggle, .event__date time, .badge, .shelf-nav button, .dock__src, .vmodal__close { --rw: 6px; --rc: 0; }
.track__lyrics { --rw: 5px; }
.poster, .release__cover, .feature__cover, .lrow__cover, .mosaic a, .gallery a, .event__poster { --rw: 9px; }

.event::before, .lrow::before, .credits::before, .members li::before, .notice::before, .partners a::before,
.poster::before, .release__cover::before, .feature__cover::before, .lrow__cover::before, .mosaic a::before, .gallery a::before, .event__poster::before,
.btn::before, .chip::before, .years a::before, .track__lyrics::before, .lang::before, .nav-toggle::before, .event__date time::before, .badge::before, .shelf-nav button::before,
.dock::before, .dock__src::before, .vmodal__close::before,
.event::after, .lrow::after, .credits::after, .members li::after, .notice::after, .partners a::after,
.poster::after, .release__cover::after, .feature__cover::after, .lrow__cover::after, .mosaic a::after, .gallery a::after, .event__poster::after,
.btn::after, .chip::after, .years a::after, .track__lyrics::after, .lang::after, .nav-toggle::after, .event__date time::after, .badge::after, .shelf-nav button::after,
.dock::after, .dock__src::after, .vmodal__close::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background-color: var(--rf);
}
.event::before, .lrow::before, .credits::before, .members li::before, .notice::before, .partners a::before,
.poster::before, .release__cover::before, .feature__cover::before, .lrow__cover::before, .mosaic a::before, .gallery a::before, .event__poster::before,
.btn::before, .chip::before, .years a::before, .track__lyrics::before, .lang::before, .nav-toggle::before, .event__date time::before, .badge::before, .shelf-nav button::before,
.dock::before, .dock__src::before, .vmodal__close::before {
  top: 0;
  bottom: 0;
  left: calc(var(--rw) / -2);
  right: calc(var(--rw) / -2);
  -webkit-mask-image: var(--ink-v), var(--ink-v2);
  -webkit-mask-position: left top, right 0 top 53px;
  -webkit-mask-size: var(--rw) var(--rl);
  -webkit-mask-repeat: repeat-y;
  mask-image: var(--ink-v), var(--ink-v2);
  mask-position: left top, right 0 top 53px;
  mask-size: var(--rw) var(--rl);
  mask-repeat: repeat-y;
}
.event::after, .lrow::after, .credits::after, .members li::after, .notice::after, .partners a::after,
.poster::after, .release__cover::after, .feature__cover::after, .lrow__cover::after, .mosaic a::after, .gallery a::after, .event__poster::after,
.btn::after, .chip::after, .years a::after, .track__lyrics::after, .lang::after, .nav-toggle::after, .event__date time::after, .badge::after, .shelf-nav button::after,
.dock::after, .dock__src::after, .vmodal__close::after {
  --rcs: calc(var(--rw) * 3 * var(--rc)) calc(var(--rw) * 6 * var(--rc));
  inset: calc(var(--rw) / -2);
  padding: 0 calc(var(--rw) / 2);
  -webkit-mask-image: var(--ink-h), var(--ink-h2), var(--corner-tl), var(--corner-tr), var(--corner-bl), var(--corner-br);
  -webkit-mask-position: left top, left 37px bottom 0, left top, right top, left bottom, right bottom;
  -webkit-mask-size: var(--rl) var(--rw), var(--rl) var(--rw), var(--rcs), var(--rcs), var(--rcs), var(--rcs);
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat;
  -webkit-mask-origin: content-box, content-box, border-box, border-box, border-box, border-box;
  -webkit-mask-clip: content-box, content-box, border-box, border-box, border-box, border-box;
  mask-image: var(--ink-h), var(--ink-h2), var(--corner-tl), var(--corner-tr), var(--corner-bl), var(--corner-br);
  mask-position: left top, left 37px bottom 0, left top, right top, left bottom, right bottom;
  mask-size: var(--rl) var(--rw), var(--rl) var(--rw), var(--rcs), var(--rcs), var(--rcs), var(--rcs);
  mask-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat;
  mask-origin: content-box, content-box, border-box, border-box, border-box, border-box;
  mask-clip: content-box, content-box, border-box, border-box, border-box, border-box;
}

/* jednostruke tušem crtane linije (razdjelnici) */
.frieze::before, .frieze::after, .section__title::after, .nav a[aria-current="page"]::after, .lineup__tabs button[aria-pressed="true"]::after,
.track::after, .track:first-child::before, .press-item::after, .site-footer__note::before,
.timeline::before, .press-quote::before, .bio__quote::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background-color: var(--ink);
  -webkit-mask: var(--ink-h) left top / 380px 100% repeat-x;
  mask: var(--ink-h) left top / 380px 100% repeat-x;
}
.timeline::before, .press-quote::before, .bio__quote::before {
  -webkit-mask: var(--ink-v) left top / 100% 380px repeat-y;
  mask: var(--ink-v) left top / 100% 380px repeat-y;
}

/* poderani rubovi listova papira (prijelazi između sekcija): traka stoji cijela izvan sekcije,
   pa se ravni rub same sekcije ne vidi */
.section--paper2::before, .section--paper2:not(:last-child)::after, .site-footer::before,
.site-header::after, .pagehead::after, .hero::after, .release::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 22px;
  pointer-events: none;
  -webkit-mask: var(--edge) left top / 900px 22px repeat-x;
  mask: var(--edge) left top / 900px 22px repeat-x;
}
/* donji rub crnog lista na vrhu stranice (zaglavlje, naslov, naslovnica, album) */
.site-header::after, .pagehead::after, .hero::after, .release::after {
  bottom: -22px;
  transform: scaleY(-1);
  background: var(--ink);
  -webkit-mask-position: 129px 0;
  mask-position: 129px 0;
}

/* ---------- crni list na vrhu stranice ----------
   Logotip i naslovi stoje na crnom (kao u podnožju), a list završava poderanim rubom. */
.site-header, .pagehead, .hero, .release { background-color: var(--ink); color: var(--on-ink); }
.site-header :focus-visible, .pagehead :focus-visible, .hero :focus-visible, .release :focus-visible,
.site-footer :focus-visible, .dock :focus-visible, .poster:focus-visible { outline-color: #f1e9dc; }
.pagehead .eyebrow, .hero .eyebrow, .release .eyebrow, .release .label { color: var(--on-ink-2); }
.hero .btn:not(.btn--red), .release .btn:not(.btn--red) { background: transparent; color: #f6efe4; --rf: #cfc6b8; }
.hero .btn:not(.btn--red):hover, .release .btn:not(.btn--red):hover { background: #f6efe4; color: var(--ink); }
.hero .btn--red, .release .btn--red, .release .badge { --rf: #000; }
.release .chip { background: transparent; color: var(--on-ink); --rf: #7d7266; }
.release .chip:hover { background: #f6efe4; color: var(--ink); }

/* ---------- zaglavlje ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
}
/* poderani rub ispod zaglavlja produži crni pojas u prosjeku za ~11 px, pa je sadržaj spušten
   za pola toga, da bude u sredini vidljivog crnog pojasa */
.site-header__in {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
  padding-top: 11px;
}
.brand { display: block; flex: none; color: var(--lilac); }
.brand img { width: 132px; height: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 2px; }
.nav a {
  display: block;
  padding: 8px 10px;
  color: var(--on-ink);
  text-decoration: none;
  font-weight: 550;
  font-size: 15.5px;
  position: relative;
}
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { left: 8px; right: 8px; bottom: 1px; height: 6px; background-color: var(--red-hi); }
.nav .nav__lang { display: none; }
.site-header__tools { display: flex; align-items: center; gap: 10px; }
.lang {
  font: 650 13px/1 var(--sans);
  letter-spacing: .06em;
  color: #f6efe4;
  text-decoration: none;
  padding: 8px 10px;
  --rf: #b9ad9c;
}
.lang:hover { background: #f6efe4; color: var(--ink); }
.nav-toggle { display: none; }

@media (max-width: 1060px) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: #f6efe4;
    --rf: #cfc6b8;
    padding: 9px 14px 9px 12px;
    cursor: pointer;
    font: 650 14px/1 var(--sans);
  }
  .js .nav-toggle:hover { background: #f6efe4; color: var(--ink); }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -5px; }
  .nav-toggle__bars::after { top: 5px; }
  [aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  [aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
  [aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }
  .js .site-header__tools { margin-left: auto; }
  .js .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    background: var(--ink);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 18px var(--gutter) 40px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .js .nav-open .nav { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .nav ul { flex-direction: column; gap: 0; }
  .js .nav li { position: relative; }
  .js .nav li::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; pointer-events: none;
    background-color: #f1e9dc; opacity: .22;
    -webkit-mask: var(--ink-h) left top / 380px 100% repeat-x;
    mask: var(--ink-h) left top / 380px 100% repeat-x;
  }
  .js .nav a {
    font: italic 600 clamp(28px, 7vw, 40px)/1.15 var(--serif);
    padding: 12px 4px;
    color: #f6efe4;
  }
  .js .nav a[aria-current="page"] { color: var(--red-hi); }
  .js .nav a[aria-current="page"]::after { display: none; }
  .js .nav .nav__lang { display: inline-block; margin-top: 22px; padding: 8px 4px; font: 650 16px var(--sans); color: #f6efe4; text-decoration: underline; }
  .nav-open body, body.nav-open { overflow: hidden; }
  .no-js-hidden { display: none; }
}
@media (max-width: 1060px) {
  html:not(.js) .site-header__in { flex-wrap: wrap; padding: 10px 0; }
  html:not(.js) .nav { width: 100%; margin: 0; }
}

/* ---------- naslov stranice ---------- */

.pagehead { padding: clamp(34px, 6vw, 72px) 0 clamp(34px, 5vw, 60px); position: relative; }
.eyebrow {
  font: 650 12.5px/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.pagehead__title {
  font: italic 600 clamp(40px, 12.5vw, 128px)/.92 var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  letter-spacing: -.02em;
  color: var(--red-hi);
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.release__title, .lyrics__title, .feature__title, .lrow__title { overflow-wrap: break-word; hyphens: auto; }
.pagehead__lead {
  max-width: 46ch;
  font: 400 clamp(19px, 2vw, 23px)/1.45 var(--serif);
  color: var(--on-ink);
  margin: 18px 0 0;
}
.frieze {
  position: relative;
  height: clamp(70px, 11vw, 140px);
  margin-top: clamp(44px, 5vw, 64px);
  background: url("../img/ink-collage.png") center / auto 100% repeat-x;
}
.frieze::before, .frieze::after { left: 0; right: 0; height: 6px; opacity: .75; }
.frieze::before { top: -9px; }
.frieze::after { bottom: -9px; -webkit-mask-position: 190px 0; mask-position: 190px 0; }

/* ---------- sekcije ---------- */

.section { padding: clamp(48px, 7vw, 96px) 0; }
.section--tight { padding-top: clamp(32px, 5vw, 56px); }
.section--paper2 { position: relative; background: var(--paper-2); }
/* list malo tamnijeg papira: poderan rub s tamnim, vlaknastim rubom gore i dolje */
.section--paper2::before, .section--paper2:not(:last-child)::after { background: var(--edge-rim) left top / 900px 22px repeat-x, var(--paper-2); }
.section--paper2::before { top: -22px; }
/* iza crnog lista prijelaz crta crni poderani rub, pa svjetliji list ne crta svoj */
.hero + .section--paper2::before, .release + .section--paper2::before, .pagehead + .section--paper2::before { display: none; }
.section--paper2:not(:last-child)::after {
  bottom: -22px;
  transform: scaleY(-1);
  background-position: 377px 0, 0 0;
  -webkit-mask-position: 377px 0;
  mask-position: 377px 0;
}
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 28px;
}
.section__head .section__title { margin-bottom: 0; }
.section__title {
  font: italic 600 clamp(30px, 4.4vw, 52px)/1.05 var(--serif);
  font-variation-settings: "opsz" 120, "SOFT" 30;
  letter-spacing: -.01em;
  margin: 0 0 28px;
  position: relative;
  padding-bottom: 16px;
}
.section__title::after { left: 0; bottom: 0; width: 120px; height: 8px; }
.label {
  font: 650 12.5px/1.3 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 10px;
}
.notice {
  background: var(--card);
  padding: 14px 18px;
  max-width: 820px;
  font-size: 15.5px;
}
.notice a { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; }
.more {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.more:hover { color: var(--red); }
.more .ic { transition: transform .15s ease; }
.more:hover .ic { transform: translateX(3px); }

/* ---------- gumbi ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin: 22px 0; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: 12px 20px;
  border: 0;
  background: var(--card);
  color: var(--ink);
  font: 650 15.5px/1.1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.btn:hover { transform: translate(-1px, -1px); color: var(--ink); background: #fff; }
.btn:active { transform: translate(1px, 1px); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-2); color: #fff; }
.btn--ghost { background: transparent; }
.btn .ic-pause, .play .ic-pause { display: none; }

/* okrugli gumb "pusti" */
.play {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease;
}
.play .ic { width: 22px; height: 22px; }
.play .ic-play { transform: translateX(1px); }
.play:hover { background: var(--red-2); transform: scale(1.06); }
.play--big { width: 68px; height: 68px; }
.play--big .ic { width: 32px; height: 32px; }
.is-playing .ic-play, [aria-pressed="true"] .ic-play { display: none; }
.is-playing .ic-pause, [aria-pressed="true"] .ic-pause { display: block; }

/* ---------- čipovi platformi ---------- */

.chips { list-style: none; margin: 0; padding: 4px 3px; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 8px 14px 8px 11px;
  background: var(--card);
  color: var(--ink);
  font: 600 14.5px/1 var(--sans);
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.chip .ic { width: 18px; height: 18px; }
.chip:hover { background: var(--ink); color: var(--paper); }
.chips--small .chip { padding: 6px 11px 6px 9px; font-size: 13.5px; --rw: 5px; }
.chips--small .chip .ic { width: 15px; height: 15px; }
.chip--spotify .ic { color: var(--spotify); }
.chip--applemusic .ic { color: #fa2d48; }
.chip--youtubemusic .ic, .chip--youtube .ic { color: #ff0000; }
.chip--deezer .ic { color: #a238ff; }
.chip--tidal .ic { color: #000; }
.chip--amazonmusic .ic { color: #25d1da; }
.chip--bandcamp .ic { color: #1da0c3; }
.chip--soundcloud .ic { color: #ff5500; }
.chip--facebook .ic { color: #0866ff; }
.chip:hover .ic { color: inherit; }

/* ---------- naslovnica ---------- */

/* crni list s logotipom kao u podnožju; nosorog je svijetli otisak istog crteža */
.hero { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(44px, 6vw, 84px); overflow-x: clip; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 24px clamp(24px, 4vw, 56px);
  align-items: center;
}
.hero__logo { margin: 0 0 6px; color: var(--lilac); }
.hero__logo img { width: min(100%, 460px); }
/* Na naslovnici u zaglavlju nema malog logotipa: veliki se pri skrolanju smanji i sjedne na njegovo
   mjesto (site.js, .logo-fly). Poveznica na malom logotipu ostaje (nevidljiva) i prima klik.
   Bez JavaScripta i uz isključene animacije zaglavlje ima običan logotip. */
@media (prefers-reduced-motion: no-preference) {
  .js .is-home .brand img { opacity: 0; }
}
.logo-fly .hero__logo { position: relative; z-index: 61; }
.logo-fly .hero__logo img { transform-origin: 0 0; will-change: transform; pointer-events: none; }
/* Animacija vezana uz skrolanje (preglednik je izvodi usklađeno sa skrolanjem, bez trzanja):
   od vrha do --logo-dist veliki logotip se smanji i pomakne na mjesto malog, a na samom kraju
   veliki nestane i pojavi se mali u zaglavlju. Mjere postavlja site.js. */
@supports (animation-timeline: scroll()) {
  .logo-fly .hero__logo img {
    animation: logo-shrink linear both, logo-hide linear both;
    animation-timeline: scroll(root), scroll(root);
    animation-range: 0px var(--logo-dist), var(--logo-dist) calc(var(--logo-dist) + 1px);
  }
  .logo-fly .brand img {
    animation: logo-show linear both;
    animation-timeline: scroll(root);
    animation-range: var(--logo-dist) calc(var(--logo-dist) + 1px);
  }
}
@keyframes logo-shrink { to { transform: translateX(var(--logo-dx)) scale(var(--logo-s)); } }
@keyframes logo-hide { to { opacity: 0; } }
@keyframes logo-show { from { opacity: 0; } to { opacity: 1; } }
/* bez podrške za takve animacije site.js mijenja logotipe klasom .logo-docked */
.js .is-home.logo-docked .brand img { opacity: 1; }
.logo-docked .hero__logo img { opacity: 0; }
/* otvoren izbornik na mobitelu: veliki logotip se skloni, a u zaglavlju je opet mali */
body.nav-open .is-home .brand img { opacity: 1 !important; }
body.nav-open .logo-fly .hero__logo { visibility: hidden; }
.hero__lead { font: 400 clamp(19px, 2.1vw, 24px)/1.45 var(--serif); color: var(--on-ink); max-width: 32ch; }
.hero__art { margin: 0 -2vw 0 0; }
.hero__art img { width: 100%; filter: invert(1) sepia(.2) brightness(.92); }

.feature { padding: clamp(56px, 7vw, 100px) 0; background: url("../img/ink-collage-faint.png") center bottom / auto 140px repeat-x, var(--paper-2); }
.feature__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px clamp(28px, 5vw, 72px); align-items: start; position: relative; }
.feature__cover img { width: 100%; }
.feature__cover .play { position: absolute; right: 18px; bottom: 18px; }
.feature__title { font: italic 600 clamp(36px, 5vw, 64px)/1 var(--serif); margin: 0 0 10px; }
.feature__title a { color: var(--ink); text-decoration: none; }
.feature__title a:hover { color: var(--red); }
.feature__meta { color: var(--muted); font-size: 15px; }
.feature .tracklist { margin: 18px 0 4px; }

.quote { padding: clamp(56px, 8vw, 110px) 0; text-align: center; }
.quote__body { margin: 0 auto; max-width: 900px; }
.quote__body p {
  font: italic 500 clamp(24px, 3.2vw, 38px)/1.3 var(--serif);
  color: var(--ink);
  margin: 0 0 18px;
}
.quote__body p::before { content: "„"; color: var(--red); }
.quote__body p::after { content: "”"; color: var(--red); }
.quote__body footer { color: var(--muted); font-size: 15px; display: inline-flex; gap: .5em; align-items: center; flex-wrap: wrap; justify-content: center; }
.quote__body cite { font-style: normal; font-weight: 600; color: var(--ink-2); }
.quote__body a { display: inline-flex; align-items: center; gap: .3em; }

.listen-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.listen-band .section__title { margin-bottom: 8px; }
.listen-band p { margin: 0; color: var(--muted); }

/* ---------- plakati ----------
   Kartice izdanja, spotova, predstava, suradnika i proizvoda: slika preko cijele kartice, a naslov
   i podaci otisnuti preko nje na tamnom prijelazu, kao na filmskom ili koncertnom plakatu. */

.poster { display: block; container-type: inline-size; background: var(--ink); color: #f6efe4; transition: transform .25s cubic-bezier(.2, .7, .3, 1); }
.poster__link { display: block; color: inherit; text-decoration: none; }
.poster__link:focus-visible { outline: 0; }
.poster:has(.poster__link:focus-visible) { outline: 2.5px solid var(--red); outline-offset: 7px; }
/* pod mišem se plakat podigne i malo nakrivi, kao skinut s oglasne ploče */
a.poster:hover, .poster:has(.poster__link:hover) { transform: translate(-3px, -4px) rotate(-.6deg); }
.poster__img { display: block; width: 100%; height: auto; aspect-ratio: var(--pa, 4 / 5); object-fit: cover; object-position: var(--pp, 50% 40%); background: #2a241f; }
.poster--square { --pa: 1; }
.poster__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  margin: 0;
  padding: clamp(36px, 22cqi, 72px) clamp(10px, 6.5cqi, 20px) clamp(10px, 6cqi, 18px);
  background: linear-gradient(to top, rgba(21, 18, 15, .97), rgba(21, 18, 15, .92) 40%, rgba(21, 18, 15, .62) 70%, rgba(21, 18, 15, 0));
  color: #e9e0d2;
  pointer-events: none;
}
.poster__label a { pointer-events: auto; }
.poster__label a:focus-visible { outline-color: #f1e9dc; }
.poster__title { display: block; margin: 0; font: italic 600 clamp(15px, 9.4cqi, 30px)/1.07 var(--serif); letter-spacing: -.005em; color: #f8f2e8; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.poster__meta { display: block; margin-top: .6em; font: 650 clamp(10px, 4.3cqi, 12px)/1.35 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: #bdb19f; }
a.poster:hover .poster__title, .poster__link:hover .poster__title { color: #fff; }
/* "pečat" s formatom (shop), otisnut iznad naslova da ne prekriva natpise na omotu */
.poster__tag { display: inline-block; margin: 0 0 9px; background: var(--red); color: #fff; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px 5px; transform: rotate(-2deg); }
.poster__play { position: absolute; z-index: 3; right: 10px; top: 10px; }
/* okrugli gumb u sredini (spotovi) */
.poster__btn {
  position: absolute;
  left: 50%; top: 40%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  transition: transform .15s ease;
}
.poster__btn .ic { width: 28px; height: 28px; transform: translateX(2px); }
.poster__link:hover .poster__btn { transform: scale(1.08); }
/* vodoravni plakat (snimka koncerta na albumskoj stranici) */
.poster--wide { --pa: 16 / 9; }
.poster--wide .poster__btn { --b: clamp(48px, 12.5cqi, 72px); top: 38%; width: var(--b); height: var(--b); margin: calc(var(--b) / -2) 0 0 calc(var(--b) / -2); }
.poster--wide .poster__btn .ic { width: 46%; height: 46%; }
.poster--wide .poster__label { padding-top: clamp(40px, 13cqi, 80px); }
.poster--wide .poster__title { font-size: clamp(18px, 5cqi, 30px); }

/* ---------- police i mreže izdanja ---------- */

/* Polica ide do desnog ruba ekrana: počinje poravnata sa sadržajem, a zadnje kartice izlaze iz kadra. */
.shelf {
  --shelf-start: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(190px, 21vw, 250px);
  gap: 26px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--shelf-start);
  padding: 10px var(--gutter) 16px var(--shelf-start);
}
.shelf > * { scroll-snap-align: start; }
.shelf--small { grid-auto-columns: clamp(160px, 17vw, 210px); }
.section__head .shelf-nav { margin-left: auto; }
.shelf-nav { display: flex; gap: 10px; }
.shelf-nav button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 38px;
  border: 0;
  padding: 0;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.shelf-nav button:not([aria-disabled="true"]):hover { background: var(--ink); color: var(--paper); }
.shelf-nav button[aria-disabled="true"] { opacity: .35; cursor: default; }
.shelf-nav .ic { width: 22px; height: 22px; }
html:not(.js) .shelf-nav { display: none; }
.grid--releases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 34px 26px; }

.rcard { min-width: 0; }
.rcard__play { opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease; }
.rcard:hover .rcard__play, .rcard__play:focus-visible, .rcard.is-playing .rcard__play, .rcard__play.is-playing { opacity: 1; transform: none; }
@media (hover: none) { .rcard__play { opacity: 1; transform: none; } }
.rcard.is-playing { --rf: var(--red); }

/* ---------- albumska stranica ---------- */

.release { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); }
.release__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 64px); align-items: center; }
.release__cover { --rf: #000; }
.release__cover img { width: 100%; }
.release__cover .play { position: absolute; right: 16px; bottom: 16px; }
.release__title {
  font: italic 600 clamp(40px, 6.4vw, 84px)/.98 var(--serif);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  letter-spacing: -.015em;
  color: #f8f2e8;
  margin: 0 0 12px;
}
.release__title a { color: inherit; text-decoration: none; }
.release__title a:hover { color: #ffd6d6; }
.release__meta { color: var(--on-ink-2); font-size: 16px; }
.release__meta a { color: inherit; }
.release__note { font-family: var(--serif); font-size: 19px; color: var(--on-ink); }
.badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font: 650 14px/1.3 var(--sans);
  padding: 7px 12px;
  transform: rotate(-1.2deg);
}
.release--compact { padding-bottom: clamp(30px, 4vw, 44px); }
.release--compact .release__grid { grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 22px; }
.release--compact .release__cover { --rw: 7px; }
.release--compact .release__cover .play { display: none; }
.release--compact .release__title { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 4px; }
.release--compact .release__meta { margin: 0; }
.release__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
/* snimka uz album: plakat (najviše 560 px, koliko podnosi YouTube sličica) i tekst uz njega */
.section--video { padding-bottom: 0; }
.release-video { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 64px); align-items: center; }
.release-video__text { max-width: 46ch; font-size: 17.5px; }
.release-video__text .section__title { margin-bottom: 20px; }
.release-video__text .actions { margin-bottom: 0; }
.release__body .label:first-child { margin-top: 0; }
.credits { background: var(--card); padding: 6px 22px 18px; font-size: 15.5px; }
.credits ul { list-style: none; margin: 0; padding: 0; }
.credits li { padding: 3px 0; }
.credits__note { color: var(--muted); font-size: 13.5px; margin: 18px 0 0; }

/* ---------- popis pjesama ---------- */

.tracklist { list-style: none; margin: 0; padding: 0; --track-line: var(--ink); }
.track {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0 12px;
  padding: 7px 4px;
}
.track::after, .track:first-child::before { left: 0; right: 0; height: 5px; background-color: var(--track-line); opacity: .42; }
.track::after { bottom: -2.5px; }
.track:first-child::before { top: -2.5px; -webkit-mask-image: var(--ink-h2); mask-image: var(--ink-h2); }
.track:nth-child(odd)::after { -webkit-mask-position: 160px 0; mask-position: 160px 0; }
.track__play {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0; border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
}
.track__n { font: 600 15px var(--serif); color: var(--muted); font-variant-numeric: tabular-nums; }
.track__play .ic { display: none; width: 20px; height: 20px; }
button.track__play:hover, button.track__play:focus-visible { background: var(--red); color: #fff; }
button.track__play:hover .track__n, button.track__play:focus-visible .track__n { display: none; }
button.track__play:hover .ic-play, button.track__play:focus-visible .ic-play { display: block; }
.track.is-playing .track__n { display: none; }
.track.is-playing button.track__play { background: var(--red); color: #fff; }
.track.is-playing .track__play .ic-pause { display: block; }
.track.is-playing .track__play .ic-play { display: none !important; }
.track__main { min-width: 0; display: flex; flex-direction: column; }
.track__title { font-weight: 600; color: var(--ink); }
.track.is-playing .track__title, .track.is-current .track__title { color: var(--red); }
.track__by { font-size: 13.5px; color: var(--muted); }
.track__lyrics {
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 9px;
  --rf: #a89c8b;
}
.track__lyrics:hover, .track__lyrics[aria-current] { color: var(--red); --rf: var(--red); }
.track__dur { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.tracklist--compact .track { padding: 3px 2px; grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.tracklist--compact .track__play { width: 32px; height: 32px; }
.tracklist--compact .track__title { font-weight: 550; font-size: 15.5px; }
.tracklist--compact .track__lyrics { padding: 3px 7px; font-size: 11px; }

/* ---------- tekstovi pjesama ---------- */

.lyrics-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
.lyrics { min-width: 0; }
.lyrics__title { font: italic 600 clamp(34px, 5vw, 60px)/1 var(--serif); margin: 0 0 8px; }
.lyrics__by { color: var(--muted); margin-bottom: 26px; }
.lyrics__sheet {
  position: relative;
  padding: clamp(24px, 4vw, 48px) clamp(34px, 6vw, 72px);
}
/* tintom crtani bočni okviri s originala */
.lyrics__sheet::before, .lyrics__sheet::after {
  content: "";
  position: absolute;
  top: 10px; bottom: 10px;
  width: 26px;
  background: url("../../hr.images/01.gore.levo.gif") left top / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: .85;
}
.lyrics__sheet::before { left: 6px; }
.lyrics__sheet::after { right: 6px; background-image: url("../../hr.images/03.gore.desno.gif"); }
.lyrics__img { margin: 0 auto; mix-blend-mode: multiply; }
.lyrics__text { text-align: center; font: 400 clamp(18px, 2vw, 21px)/1.6 var(--serif); color: var(--ink); }
.lyrics__text p { margin: 0 0 1.1em; }
.lyrics-layout__side { position: sticky; top: calc(var(--header-h) + 20px); }
.lyrics-layout__side .label { margin-top: 0; }

/* ---------- male kartice (kompilacije, suradnje) ---------- */

.minis { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 30px 24px; }
.mini { --rw: 7px; }

/* ---------- slušaonica ---------- */

.lrows { display: grid; gap: 22px; margin-top: 34px; }
.lrow {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  background: var(--card);
  padding: 18px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.lrow.is-playing { --rf: var(--red); }
.lrow__cover { --rw: 7px; }
.lrow__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.lrow__cover .play { position: absolute; right: 8px; bottom: 8px; width: 42px; height: 42px; }
.lrow__title { font: italic 600 clamp(24px, 2.6vw, 32px)/1.1 var(--serif); margin: 0 0 4px; }
.lrow__title a { color: var(--ink); text-decoration: none; }
.lrow__title a:hover { color: var(--red); }
.lrow__meta { color: var(--muted); font-size: 14.5px; margin-bottom: 12px; }
.lrow__tracks { margin-top: 12px; }
.lrow__tracks summary {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  cursor: pointer;
  font-weight: 650;
  color: var(--ink);
  list-style: none;
  padding: 4px 0;
}
.lrow__tracks summary::-webkit-details-marker { display: none; }
.lrow__tracks[open] summary .ic { transform: rotate(180deg); }
.lrow__tracks .tracklist { margin-top: 8px; columns: 2 300px; column-gap: 28px; }
.lrow__tracks .track { break-inside: avoid; }
.lrow__tracks .track:first-child::before { display: none; }

/* ---------- koncerti ---------- */

.events { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
.events .event__poster img { width: 120px; }
.events--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.event {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  background: var(--card);
  padding: 18px;
}
.events--grid .event { grid-template-columns: 76px minmax(0, 1fr); }
.event__date { margin: 0; text-align: center; }
.event__date time { display: grid; background: var(--paper); }
.event__day { font: 700 32px/1.05 var(--serif); color: var(--ink); padding-top: 6px; }
.event__month { font: 650 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.event__year { font: 600 12px/1.6 var(--sans); background: var(--ink); color: var(--paper); margin-top: 6px; }
.event__time { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.event__body { font-size: 15.5px; min-width: 0; overflow-wrap: anywhere; }
.event__body p { margin: 0 0 .45em; }
.event__title { font: 600 20px/1.25 var(--serif); margin: 0 0 6px; }
.event__title a { color: var(--ink); text-decoration: none; }
.event__title a:hover { color: var(--red); text-decoration: underline; }
.event__body strong { font-weight: 600; }
.event__poster { width: fit-content; --rw: 7px; }
.event__poster img { width: 150px; height: auto; }
.years ul { list-style: none; margin: 0; padding: 4px; display: flex; flex-wrap: wrap; gap: 10px; }
.years a {
  display: inline-block;
  padding: 5px 11px;
  color: var(--ink);
  text-decoration: none;
  font: 600 14px var(--sans);
  background: var(--card);
  --rw: 5px;
}
.years a:hover { background: var(--ink); color: var(--paper); }
.year {
  font: italic 600 34px/1 var(--serif);
  color: var(--red);
  margin: 40px 0 18px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ---------- spotovi ---------- */

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 32px 26px; }
.vcard { min-width: 0; }
.vcard.is-playing { --rf: var(--red); }
.vnote { margin: 36px 0 0; }

/* ---------- kazalište, film ---------- */

.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 30px 26px; }
/* tekst predstave je dulji: otisnut je preko donjeg dijela slike, poveznice ostaju klikabilne */
.work .poster__label { font-size: clamp(13px, 5.6cqi, 15px); line-height: 1.45; padding-top: clamp(60px, 34cqi, 110px); }
.work .poster__label strong, .work .poster__label b { color: #fff; }
.work .poster__label a { color: #fff; text-decoration-color: rgba(255, 255, 255, .55); }
.work .poster__label a:hover { color: #ffd6d6; }
/* rad sa sitnom slikom: crni plakat s malom zalijepljenom fotografijom (najviše 1,45× prirodne veličine) */
.poster--print { aspect-ratio: 4 / 5; }
.poster--print .poster__link { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 11cqi; }
.poster__print { display: block; padding: 5px; background: #f4efe6; transform: rotate(-1.6deg); }
.work:nth-child(even) .poster__print { transform: rotate(1.3deg); }
.poster__print .poster__img { width: min(74cqi, calc(var(--iw) * 1.45), calc(58cqi * var(--ar))); height: auto; aspect-ratio: auto; }
.poster--print .poster__label { padding-top: 18px; }

/* ---------- foto ---------- */

.mosaic { list-style: none; margin: 0; padding: 4px; columns: 4 220px; column-gap: 18px; }
.mosaic li { break-inside: avoid; margin-bottom: 18px; }
.mosaic a { display: block; transition: transform .15s ease; --rw: 7px; }
.mosaic a:hover { transform: translate(-2px, -2px); }
.mosaic img { width: 100%; }

/* ---------- biografija ---------- */

.bio { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.bio__intro { font: 400 clamp(20px, 2.2vw, 25px)/1.5 var(--serif); color: var(--ink); }
.bio__quote {
  position: relative;
  margin: 30px 0;
  padding: 6px 0 6px 28px;
  font: italic 500 clamp(20px, 2.1vw, 24px)/1.45 var(--serif);
  color: var(--ink);
}
.bio__quote::before { left: -2px; top: 0; bottom: 0; width: 9px; background-color: var(--red); }
.bio__quote p { margin: 0; }
.bio__photo { margin: 0; }
/* fotografija s vinjetom u boji papira, a tintne bočne crte sa stare stranice kao okvir */
.inkframe { position: relative; padding: 6px 30px; }
.inkframe::before, .inkframe::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 18px; background: url("../../hr.images/01.gore.levo.gif") left top / 100% 100% no-repeat; mix-blend-mode: multiply; }
.inkframe::before { left: 4px; }
.inkframe::after { right: 4px; background-image: url("../../hr.images/03.gore.desno.gif"); }
.inkframe img { width: 100%; }
/* stara i nova postava: nova se polako pretapa preko stare i obratno (site.js), gumbi biraju sliku */
.lineup__stage { display: grid; }
.lineup__img { grid-area: 1 / 1; opacity: 0; }
.lineup__img.is-shown { position: relative; z-index: 1; opacity: 1; transition: opacity 1.8s ease; }
.lineup__img.was-shown { opacity: 1; }
.lineup__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; margin-top: 10px; }
.lineup__tabs button { position: relative; border: 0; background: none; padding: 6px 2px 11px; font: italic 600 19px/1.2 var(--serif); color: var(--muted); cursor: pointer; }
.lineup__tabs button:hover { color: var(--ink); }
.lineup__tabs button[aria-pressed="true"] { color: var(--red); }
.lineup__tabs button[aria-pressed="true"]::after { left: 0; right: 0; bottom: 1px; height: 6px; background-color: var(--red); }
html:not(.js) .lineup__tabs { display: none; }
.members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.members li { background: var(--card); padding: 14px 18px; display: flex; flex-direction: column; }
.members__name { font: 600 20px/1.2 var(--serif); color: var(--ink); }
.members__role { color: var(--muted); font-size: 14.5px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 860px; }
.timeline::before { left: 73px; top: 10px; bottom: 10px; width: 8px; }
.timeline li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 26px; padding: 10px 0; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 70px; top: 19px; width: 14px; height: 13px; border-radius: 47% 53% 44% 56% / 55% 45% 55% 45%; background: var(--red); }
.timeline__year { font: italic 700 20px/1.4 var(--serif); color: var(--red); text-align: right; }
.timeline p { margin: 0; padding-left: 18px; }
.timeline .more { font-size: 14px; }

/* ---------- shop ---------- */

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px 26px; }
.product { display: flex; flex-direction: column; align-items: flex-start; }
.product .poster { width: 100%; margin-bottom: 18px; }
.product__price { font: 700 20px var(--sans); color: var(--ink); margin: 0 0 12px; }
.product__about { margin: -4px 0 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }


/* ---------- kontakt, linkovi ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.contact .label:first-child { margin-top: 0; }
.contact__mail { margin: 0 0 10px; }
.contact__mail a { display: inline-flex; align-items: center; gap: .4em; font: italic 600 clamp(26px, 3.6vw, 44px)/1.1 var(--serif); color: var(--red); text-decoration: none; word-break: break-all; }
.contact__mail a:hover { text-decoration: underline; }
.contact__art { margin: 0; }
.people { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 26px 22px; }
.people .poster { --rw: 7px; --pp: 50% 30%; }
.partners { list-style: none; margin: 0; padding: 4px; display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.partners a { display: grid; place-items: center; min-width: 150px; height: 96px; padding: 12px 18px; text-decoration: none; color: var(--ink); font: 650 18px var(--serif); transition: transform .15s ease; }
.partners img { max-height: 70px; width: auto; mix-blend-mode: multiply; }
.partners a:hover { transform: translate(-2px, -2px); }

/* ---------- press (sadržaj prenesen s originala) ---------- */

.press-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 24px clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4vw, 44px) 0;
}
.press-item::after { left: var(--gutter); right: var(--gutter); bottom: -3px; height: 6px; opacity: .55; }
.main > .press-item { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.main > .press-item:first-of-type { padding-top: clamp(36px, 5vw, 56px); }
.press-item__about { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
.press-item__about p { margin: 0 0 6px; font: 600 15px/1.4 var(--sans); color: var(--muted); }
.press-item__about p:first-child { font: italic 600 22px/1.25 var(--serif); color: var(--red); margin-bottom: 10px; }
.press-quote { position: relative; margin: 0 0 26px; padding: 0 0 0 24px; }
.press-quote::before { left: -2px; top: 2px; bottom: 2px; width: 7px; }
.press-quote p { font: 400 18px/1.6 var(--serif); color: var(--ink); margin: 0 0 8px; }
.press-quote cite { display: block; font: normal 600 14.5px/1.4 var(--sans); color: var(--muted); }
.press-quote cite a { color: var(--red-ink); }

/* ---------- članci (pisali o nama, kompilacije, suradnje) ---------- */

.main > .article { width: 100%; max-width: calc(860px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--gutter) clamp(48px, 6vw, 80px); }
.article__orn { display: none; }
.article__body { font-size: 17.5px; }
.article__body p { margin: 0 0 1.1em; }
.article__body h3, .article__body .h-blue { font: italic 600 26px/1.2 var(--serif); color: var(--ink); margin: 1.4em 0 .5em; }
.article__body .h-red { font: italic 600 30px/1.2 var(--serif); color: var(--red); margin: 1.2em 0 .5em; }
/* tušem crtani ukrasi s bijelom pozadinom: bez okvira, stapaju se s papirom */
.article__body img.ink { mix-blend-mode: multiply; }
.gallery img.ink { width: auto; height: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; align-self: start; justify-self: start; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-items: start; gap: 16px; margin: 14px 4px 28px; }
.gallery a, .gallery > img { display: block; }
.gallery a { line-height: 0; --rw: 6px; transition: transform .15s ease; }
.gallery a:hover { transform: translate(-2px, -2px); }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery--big { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.gallery:has(> :only-child) { grid-template-columns: minmax(0, 360px); }
.gallery:has(> :only-child) img { aspect-ratio: auto; height: auto; }
hr.divider { border: 0; height: 16px; margin: 30px auto; background: url("../../hr.images/u.gif") center / 86px 16px no-repeat; }
.h-serif { font: italic 600 28px/1.2 var(--serif); color: var(--ink); }

/* ---------- podnožje ---------- */

.site-footer {
  position: relative;
  background: var(--ink);
  color: #cfc6b8;
  padding: clamp(48px, 7vw, 88px) 0 28px;
}
.site-footer::before { top: -22px; background: var(--ink); -webkit-mask-position: 211px 0; mask-position: 211px 0; }
.site-footer a { color: #f1e9dc; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__in { position: relative; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-footer__logo { width: 170px; margin-bottom: 10px; }
.site-footer__brand p { margin: 0 0 6px; }
.site-footer__h { font: 650 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #8f8476; margin: 4px 0 14px; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; }
.site-footer__list a { display: inline-flex; align-items: center; gap: .55em; }
.site-footer__list .ic { width: 17px; height: 17px; opacity: .85; }
.site-footer__artbox { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.site-footer__art { position: absolute; right: -60px; bottom: -40px; width: min(680px, 70vw); max-width: none; filter: invert(1); opacity: .09; }
.site-footer__play { margin: 40px 0 0; font-size: 13.5px; color: #8f8476; }
.site-footer__note { position: relative; margin: 16px 0 0; padding-top: 18px; font-size: 13.5px; color: #8f8476; }
.site-footer__note a { color: #cfc6b8; text-decoration: underline; text-decoration-color: rgba(207, 198, 184, .5); }
.site-footer__note::before { left: 0; right: 0; top: -3px; height: 6px; background-color: #4a4038; }

/* Na većim ekranima desni stupac footera pripada crtežu nosoroga; player se na kraju stranice
   smjesti preko njega, pa ne treba rezervirati prazan prostor ispod footera. */
@media (min-width: 761px) {
  .site-footer__in { padding-right: calc(var(--gutter) + 400px); }
  .site-footer__art { width: 460px; right: max(-30px, calc((100vw - var(--wrap)) / 2 - 60px)); bottom: -24px; opacity: .2; }
}
@media (min-width: 761px) and (max-width: 1280px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- galerija (lightbox) ---------- */

.lightbox {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  background: rgba(18, 15, 12, .97);
  color: #f1e9dc;
}
.lightbox:focus { outline: none; }
.lightbox::backdrop { background: rgba(18, 15, 12, .9); }
.lightbox__stage { position: absolute; inset: 56px 70px 56px; display: flex; align-items: center; justify-content: center; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox__btn { position: absolute; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: #f1e9dc; padding: 10px; }
.lightbox__btn .ic { width: 40px; height: 40px; }
.lightbox__close .ic { width: 30px; height: 30px; }
.lightbox__btn:hover, .lightbox__btn:focus-visible { color: #fff; }
.lightbox__close { top: 6px; right: 10px; }
.lightbox__prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 6px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 14px; color: #a79c8e; margin: 0; }

/* ---------- spot u skočnom prozoru ---------- */

.vmodal { border: 0; padding: 0; margin: auto; width: min(1100px, 94vw); max-width: none; background: transparent; overflow: visible; }
.vmodal::backdrop { background: rgba(18, 15, 12, .92); }
.vmodal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.vmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vmodal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #f1e9dc; padding: 0 4px 14px; }
.vmodal__title { font: italic 600 22px/1.2 var(--serif); margin: 0; color: #fff; }
.vmodal__close { border: 0; background: none; color: #f1e9dc; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; flex: none; --rf: #f1e9dc; }
.vmodal__close:hover { background: #fff; color: var(--ink); }
.vmodal__close .ic { width: 22px; height: 22px; }

/* ---------- player (Spotify / YouTube) ---------- */

.dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 380px;
  background: var(--ink);
  color: #f1e9dc;
  box-shadow: 0 22px 50px -24px rgba(0, 0, 0, .6);
  --rw: 10px;
}
.dock[hidden], .dock [hidden] { display: none !important; }
.dock__head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 8px 14px; }
.dock__now { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.dock__label { display: block; font: 650 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #a79c8e; }
.dock__title { display: block; font: italic 600 16px/1.25 var(--serif); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.dock__title:hover { text-decoration: underline; color: #fff; }
.dock .ib {
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: #f1e9dc;
  cursor: pointer; padding: 0; flex: none;
}
.dock .ib .ic { width: 20px; height: 20px; }
.dock .ib:hover, .dock .ib:focus-visible { background: #2c2620; color: #fff; }
.dock .ib--main { background: var(--red); color: #fff; width: 38px; height: 38px; }
.dock .ib--main:hover { background: var(--red-2); }
.dock__stage { padding: 0 10px 8px; }
.dock__sp iframe { display: block; width: 100%; border: 0; border-radius: 12px; }
/* YouTube player mora biti vidljiv i najmanje 200×200 px (pravila YouTube API-ja) */
.dock__yt { position: relative; aspect-ratio: 16 / 9; min-width: 200px; min-height: 200px; background: #000; overflow: hidden; }
.dock__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dock__resume { margin: 0 4px 6px; display: flex; align-items: center; gap: 12px; }
.dock__resume img { width: 64px; height: 64px; object-fit: cover; }
.dock__resume p { margin: 0; font-size: 13.5px; color: #cfc6b8; }
.dock__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 4px 14px 14px; }
.dock__src { display: inline-flex; padding: 3px; --rf: #5a4f45; --rw: 5px; }
.dock__src button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; color: #cfc6b8;
  font: 600 12.5px/1 var(--sans); padding: 6px 10px; cursor: pointer;
}
.dock__src button .ic { width: 14px; height: 14px; }
.dock__src button:hover { color: #fff; }
.dock__src button[aria-pressed="true"] { background: #f1e9dc; color: var(--ink); }
.dock__src [data-src="spotify"][aria-pressed="true"] .ic { color: var(--spotify); }
.dock__src [data-src="youtube"][aria-pressed="true"] .ic { color: #ff0000; }
.dock__note { flex-basis: 100%; margin: 0; font-size: 12.5px; line-height: 1.45; color: #cfc6b8; }
.dock__note a, .dock__note .linklike { color: #fff; }
.linklike { border: 0; background: none; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dock.is-min .dock__stage, .dock.is-min .dock__note { display: none; }
.dock .ic-pause { display: none; }
.dock .is-playing .ic-play { display: none; }
.dock .is-playing .ic-pause { display: block; }

/* Do 760 px player je traka preko cijele širine dna ekrana; footer je viši točno za njegovu visinu,
   a player taj prostor potpuno prekriva — nema praznine. */
@media (max-width: 760px) {
  .dock { left: 0; right: 0; bottom: 0; width: auto; box-shadow: none; }
  .dock__stage, .dock__foot { max-width: 460px; margin: 0 auto; }
  .dock__note { font-size: 12px; }
  .site-footer { padding-bottom: calc(28px + var(--dock-h)); }
}

/* ---------- uvod: samo pri prvom posjetu ----------
   Crni list kao zaglavlje: nosorog istrči slijeva i povuče tušem crtu, „huja-brija” tresne ispod
   njega, „huja-haj!” tresne dijagonalno preko cijelog crteža (svaki udarac strese list), a onda se
   list podere prema gore i otkrije stranicu.
   Klasu .intro-on postavlja skripta u <head> (site.mjs), kraj i preskakanje vodi site.js;
   ako JavaScript zakaže, list ipak nestane nakon 6 s. */
.intro { display: none; }
.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #f6efe4;
  animation: intro-failsafe .5s 6s forwards;
}
.intro-on .intro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  height: 22px;
  background: var(--ink);
  transform: scaleY(-1);
  -webkit-mask: var(--edge) 129px 0 / 900px 22px repeat-x;
  mask: var(--edge) 129px 0 / 900px 22px repeat-x;
}
/* dva potresa, tek kad natpis udari: "huja-brija" (1,09 s) i "huja-haj" (1,84 s) */
.intro__stage { width: min(88vw, 640px); text-align: center; animation: intro-thud .34s linear 1.09s, intro-quake .64s linear 1.84s; }
.intro__art { position: relative; width: min(78vw, 560px); margin: 0 auto; container-type: inline-size; }
.intro__runner { display: block; animation: intro-charge .68s cubic-bezier(.2, .7, .3, 1) .12s both; }
.intro__rhino { display: block; width: 100%; filter: invert(1) sepia(.2) brightness(.92); animation: intro-gallop .16s ease-in-out .12s 4 alternate; }
.intro__ground {
  display: block;
  height: 8px;
  margin-top: -1.5%;
  background: #e6ddcf;
  -webkit-mask: var(--ink-h) left top / 380px 100% repeat-x;
  mask: var(--ink-h) left top / 380px 100% repeat-x;
  transform-origin: left;
  animation: intro-ground .68s cubic-bezier(.2, .7, .3, 1) .12s both;
}
/* oba natpisa su otisci pečata: ravnomjerna tinta s pokojom svijetlom točkicom */
.intro__brija, .intro__haj {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  white-space: nowrap;
}
.intro__brija, .intro__haj-ink {
  -webkit-mask: var(--stamp) 0 0 / 260px 260px repeat;
  mask: var(--stamp) 0 0 / 260px 260px repeat;
}
.intro__haj-ink { display: block; }
.intro__brija {
  margin: clamp(16px, 3.5vh, 34px) 0 0;
  font-weight: 600;
  font-size: clamp(40px, 11vw, 116px);
  line-height: .98;
  letter-spacing: -.015em;
  animation: intro-slam .24s .92s both;
}
/* dijagonala crteža (650 × 452) je pod 34,8° */
.intro__haj {
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight: 700;
  font-size: 31cqi;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--red-hi);
  /* tamna sjena odvaja crvena slova od svijetlog crteža; maska otiska je na unutarnjem dijelu,
     pa sjenu ne reže */
  filter: drop-shadow(0 0 .035em rgba(21, 18, 15, .95)) drop-shadow(.03em .045em .03em rgba(21, 18, 15, .85));
  transform: translate(-50%, -50%) rotate(-34.8deg);
  animation: intro-slam-haj .27s 1.64s both;
}
.intro-on .intro.is-out { animation: intro-lift .32s cubic-bezier(.6, 0, .85, .3) forwards; }

/* nosorog "izleti" iz lijevog ruba: crtež se otkriva slijeva nadesno uz kratak zalet */
@keyframes intro-charge {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-9%); }
  to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes intro-gallop { to { transform: translateY(-4%) rotate(-1.2deg); } }
@keyframes intro-ground { from { transform: scaleX(0); } }
/* potresi: titraj koji se brzo smiruje; što jači udarac, to veći pomak i zakret */
@keyframes intro-thud {
  10% { transform: translate(-12px, 7px) rotate(-.9deg) scale(1.015); }
  26% { transform: translate(11px, -6px) rotate(.8deg); }
  42% { transform: translate(-8px, 5px) rotate(-.5deg); }
  58% { transform: translate(6px, -3px) rotate(.3deg); }
  74% { transform: translate(-3px, 2px); }
  90% { transform: translate(2px, -1px); }
}
@keyframes intro-quake {
  6% { transform: translate(-22px, 13px) rotate(-1.8deg) scale(1.04); }
  16% { transform: translate(20px, -12px) rotate(1.6deg) scale(1.03); }
  27% { transform: translate(-17px, 10px) rotate(-1.2deg) scale(1.015); }
  38% { transform: translate(14px, -8px) rotate(1deg); }
  50% { transform: translate(-10px, 6px) rotate(-.7deg); }
  62% { transform: translate(8px, -4px) rotate(.4deg); }
  74% { transform: translate(-5px, 3px) rotate(-.2deg); }
  86% { transform: translate(3px, -2px); }
  95% { transform: translate(-1px, 1px); }
}
/* natpis padne s visine (ubrzava), udari i malo odskoči */
@keyframes intro-slam {
  0% { opacity: 0; transform: scale(2.4) rotate(-5deg); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  14% { opacity: 1; }
  72% { transform: scale(.95); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  100% { opacity: 1; transform: none; }
}
@keyframes intro-slam-haj {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-26deg) scale(3.4); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  12% { opacity: 1; }
  74% { transform: translate(-50%, -50%) rotate(-34.8deg) scale(.93); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-34.8deg); }
}
@keyframes intro-lift { to { transform: translateY(calc(-100% - 30px)) rotate(-1deg); } }
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-fade-out { to { opacity: 0; visibility: hidden; } }

/* ---------- animacije stranice ---------- */

/* pojavljivanje pri skrolanju (site.js dodaje .reveal / .wipe samo elementima ispod ruba ekrana) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .75s cubic-bezier(.2, .7, .3, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.timeline li.reveal { transform: translateX(-20px); }
.timeline li.reveal.is-in { transform: none; }
/* crta pod naslovom sekcije povuče se slijeva kad naslov izroni */
.section__title.reveal::after { clip-path: inset(0 100% 0 0); transition: clip-path .8s cubic-bezier(.2, .7, .3, 1) .25s; }
.section__title.reveal.is-in::after { clip-path: inset(0 0 0 0); }
/* nosorog u podnožju utrči slijeva, kao u uvodu */
.wipe { clip-path: inset(0 100% 0 0); transform: translateX(-8%); transition: clip-path .9s cubic-bezier(.2, .7, .3, 1), transform 1s cubic-bezier(.2, .7, .3, 1); }
.wipe.is-in { clip-path: inset(0 0 0 0); transform: none; }

/* vezano uz skrolanje: traka kolaža klizi vodoravno, okomita crta kronologije crta se kako se skrola */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .frieze { animation: frieze-drift linear both; animation-timeline: view(); }
    .timeline { view-timeline-name: --timeline; }
    .timeline::before { animation: timeline-draw linear both; animation-timeline: --timeline; animation-range: entry 10% cover 65%; }
  }
}
@keyframes frieze-drift { from { background-position: calc(50% + 150px) 50%; } to { background-position: calc(50% - 150px) 50%; } }
@keyframes timeline-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ploča izlazi iz omota i odleti u player (player.js): omot ostane na mjestu i izblijedi,
   ploča (žljebovi, odsjaj, omot kao etiketa) se zavrti i sleti na crveni gumb */
.vinyl-fly { position: fixed; z-index: 300; pointer-events: none; }
.vinyl-fly__sleeve { position: absolute; inset: 0; background: #2a241f center / cover no-repeat; }
.vinyl-fly__disc {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, transparent 0 17%, rgba(255, 255, 255, .11) 22%, transparent 27% 67%, rgba(255, 255, 255, .08) 72%, transparent 77%),
    repeating-radial-gradient(circle at 50% 50%, #0c0a08 0 1.4px, #1e1915 1.9px 3px);
  box-shadow: 0 0 0 1px #000, 0 8px 22px rgba(0, 0, 0, .35);
}
.vinyl-fly__label { position: absolute; inset: 32%; border-radius: 50%; background: var(--red) center / cover no-repeat; box-shadow: 0 0 0 3px #0c0a08; }
.vinyl-fly__label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12%; height: 12%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--paper); }

/* slušaonica: popis pjesama albuma se glatko rasklopi i sklopi (gdje preglednik to podržava),
   a pjesme se pri otvaranju pojave redom */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .lrow__tracks::details-content { block-size: 0; overflow: hidden; transition: block-size .4s cubic-bezier(.2, .7, .3, 1), content-visibility .4s allow-discrete; }
  .lrow__tracks[open]::details-content { block-size: auto; }
  .lrow__tracks summary .ic { transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
  .lrow__tracks[open] .track { animation: track-in .4s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(min(var(--i, 0), 14) * 28ms); }
}
@keyframes track-in { from { opacity: 0; transform: translateY(-8px); } }

/* prijelaz između stranica (View Transitions): stara se stranica brzo povuče, nova izroni;
   zaglavlje i player imaju svoja imena, pa ostaju na mjestu */
@media (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: site-header; }
  .dock { view-transition-name: dock; }
  ::view-transition-old(root) { animation: page-out .16s ease-in both; }
  ::view-transition-new(root) { animation: page-in .36s cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- prilagodba ---------- */

@media (max-width: 980px) {
  .hero__grid, .feature__grid, .release__grid, .release__body, .release-video, .lyrics-layout, .bio, .contact { grid-template-columns: minmax(0, 1fr); }
  .release-video .poster { max-width: 560px; }
  .hero__art { margin: 0 -4vw 0 4vw; order: -1; }
  .hero__logo img { width: min(100%, 380px); }
  .release__grid { max-width: 640px; }
  .release__cover { max-width: 420px; }
  .release--compact .release__grid { grid-template-columns: 96px minmax(0, 1fr); }
  .feature__cover { max-width: 460px; }
  .lyrics-layout__side { position: static; }
  .press-item { grid-template-columns: minmax(0, 1fr); }
  .press-item__about { position: static; }
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .brand img { width: 112px; }
  :root { --header-h: 64px; }
  .event { grid-template-columns: 70px minmax(0, 1fr); padding: 14px; gap: 14px; }
  .event__poster { grid-column: 1 / -1; }
  .event__poster img { width: auto; max-width: min(100%, 320px); }
  .event__day { font-size: 26px; }
  .lrow { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .lrow .chips { display: none; }
  .lrow__tracks .tracklist { columns: 1; }
  .track { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .track__dur { display: none; }
  .tracklist--compact .track { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .timeline::before { left: 51px; }
  .timeline li { grid-template-columns: 44px minmax(0, 1fr); gap: 20px; }
  .timeline li::before { left: 48px; }
  .timeline__year { font-size: 16px; }
  .lyrics__sheet { padding: 22px 30px; }
  .lyrics__sheet::before, .lyrics__sheet::after { width: 16px; }
  .shelf { grid-auto-columns: 62%; }
  .shelf--small { grid-auto-columns: 52%; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .lightbox__stage { inset: 56px 8px 56px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 4px; transform: none; }
}
@media (max-width: 360px) {
  .brand img { width: 96px; }
  .js .nav-toggle { padding: 10px 12px; }
  .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 420px) {
  .grid--releases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .minis, .people, .vgrid, .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .mosaic { columns: 2; column-gap: 12px; }
  .mosaic li { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  /* pretapanje fotografija postave nije pokret, pa ostaje */
  .lineup__img.is-shown { transition: opacity 1.8s ease !important; }
  /* uvod bez pokreta: nosorog, crta i refren se pojave, a list se pretopi */
  .intro__runner, .intro__ground { animation: intro-fade .48s ease .12s both !important; }
  .intro__brija { animation: intro-fade .36s ease .48s both !important; }
  .intro__haj { animation: intro-fade .36s ease 1.12s both !important; }
  .intro-on .intro { animation: intro-failsafe .5s 6s forwards !important; }
  .intro-on .intro.is-out { animation: intro-fade-out .28s ease forwards !important; }
}
@media print {
  .site-header, .dock, .site-footer, .frieze, .play, .actions, .intro { display: none !important; }
  body { background: #fff; }
  /* ispis usred skrolanja: sve što još nije izronilo mora biti vidljivo */
  .reveal, .wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}