/* Diatonica · Chains (2026). CGP benda: ocean (sence Kodak 2383), pena in led kot edini poudarek (brez živih barv),
   naslovi Oswald Light (CGP Diatonica, razprte verzalke), besedilo pesmi Cormorant Garamond, besedilo Archivo. */
:root {
  --ink: #070c10;
  --abyss: #0b161d;
  --deep: #0f212b;
  --foam: #ebe5d9;
  --mist: #9aabb3;
  --steel: rgba(154, 171, 179, .28);
  --led: #bcd2d9;                 /* umirjen poudarek: led, brez živih barv */
  --rob: clamp(20px, 5vw, 72px);
  --sirina: 1240px;
  --odsek: clamp(104px, 15vh, 190px);
  --mehko: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }
body {
  margin: 0; color: var(--foam);
  background: linear-gradient(180deg, var(--deep) 0, var(--deep) max(100svh, 560px), var(--abyss) 36%, #08121a 64%, var(--ink) 100%);
  font-family: 'Archivo', system-ui, sans-serif; font-size: 18px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 300; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--led); color: var(--ink); }
:focus-visible { outline: 1px solid var(--led); outline-offset: 4px; }

/* filmsko zrno čez vse */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: .045;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: zrno 1.4s steps(5) infinite;
}
@keyframes zrno {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* oznake in naslovi */
.oznaka {
  font-size: 13px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--mist);
}
.naslov-odseka, .hero-naslov, .konec-napis {
  font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.naslov-odseka { font-size: clamp(44px, 6.8vw, 96px); letter-spacing: .42em; margin-top: 22px; }
/* razpra za zadnjo črko se ne šteje, da je naslov optično na sredini */
.naslov-odseka span { margin-right: -.42em; }
.naslov-dolg { font-size: clamp(32px, 3.8vw, 54px); letter-spacing: .3em; }
.naslov-srednji { font-size: clamp(38px, 4.8vw, 70px); letter-spacing: .36em; }
.naslov-srednji span { margin-right: -.36em; }
.naslov-dolg span { margin-right: -.3em; }
.uvod { font-size: clamp(20px, 1.6vw, 23px); line-height: 1.55; max-width: 34ch; }
.pika { color: var(--mist); opacity: .7; }

/* globinomer: stran je potop od gladine do dna; tanka veriga, svetla do trenutne globine */
.globina {
  position: fixed; right: 30px; top: 50%; z-index: 30; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--mist);
  opacity: 0; transition: opacity .8s ease;
  filter: drop-shadow(0 0 3px rgba(7, 12, 16, .95)) drop-shadow(0 0 8px rgba(7, 12, 16, .8));   /* berljiv tudi nad bleščicami heroja */
}
.globina.vidno { opacity: 1; }
.globina-oznaka { writing-mode: vertical-rl; transform: rotate(180deg); }
.globina-veriga { position: relative; width: 10px; height: 432px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16'%3E%3Crect x='1.5' y='.5' width='7' height='11' rx='3.5' fill='none' stroke='%239aabb3' stroke-width='1'/%3E%3Crect x='4.4' y='8' width='1.2' height='8' fill='%239aabb3'/%3E%3Crect x='4.4' y='0' width='1.2' height='3' fill='%239aabb3'/%3E%3C/svg%3E") 0 0 / 10px 16px repeat-y; opacity: .55; }
.globina.vidno .globina-veriga { opacity: 1; }
.globina-veriga i { position: absolute; inset: 0; clip-path: inset(0 0 calc((1 - var(--g, 0)) * 100%) 0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16'%3E%3Crect x='1.5' y='.5' width='7' height='11' rx='3.5' fill='none' stroke='%23ebe5d9' stroke-width='1'/%3E%3Crect x='4.4' y='8' width='1.2' height='8' fill='%23ebe5d9'/%3E%3Crect x='4.4' y='0' width='1.2' height='3' fill='%23ebe5d9'/%3E%3C/svg%3E") 0 0 / 10px 16px repeat-y; }
.globina-m { font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: none; min-width: 7ch; text-align: center; }
.pesem, .knjizica, .nastanek, .album, .film, .lekcije, .bend, .merch { position: relative; z-index: 2; }

/* hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; text-align: center; }
.hero-vsebina { grid-row: 2; }
.hero-video, .hero::before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ''; background: var(--deep) center / cover no-repeat; background-image: var(--plakat); }
.hero-video { opacity: 0; transition: opacity 2s ease; }
.hero-video.tece { opacity: 1; }
.hero-tema { position: absolute; inset: 0;      /* brez temnega kroga pod napisi (Mitja, 2. 11.) */
  background: linear-gradient(180deg, rgba(7, 12, 16, .6) 0%, rgba(7, 12, 16, .1) 26%, rgba(7, 12, 16, .05) 58%, var(--deep) 100%); }
.hero-vsebina { position: relative; padding: 0 var(--rob); }
.hero-logo { display: block; width: clamp(240px, 24vw, 400px); margin: 0 auto; }
.hero-logo img { width: 100%; height: auto; }
.hero-pod { color: var(--foam); }
.hero-naslov { font-size: clamp(38px, 5.6vw, 92px); font-weight: 200; letter-spacing: 1em; margin: 30px 0 30px; }
.hero-naslov .zadnja { margin-right: -1em; }
/* CHAINS valuje kot kit v vodi: črke se z zamikom dvigajo in spuščajo, prosojnost diha, čez vse rahlo podvodno popačenje */
.hero-naslov .valovi span { display: inline-block; animation: valuj 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.05s); }
@keyframes valuj {
  0%, 100% { transform: translateY(-.045em); opacity: 1; }
  50% { transform: translateY(.045em); opacity: .62; }
}
.filtri { position: absolute; width: 0; height: 0; }
@media (prefers-reduced-motion: no-preference) { .hero-naslov .valovi { filter: url(#voda); } }
.hero-pod { font-size: 15px; letter-spacing: .3em; text-transform: uppercase; }

/* odseki */
.odsek { padding: var(--odsek) var(--rob); }

/* pesem */
.pesem-mreza { max-width: var(--sirina); margin: 0 auto; display: grid; align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); }
/* plošča (v žepu knjižice in za ovitkom): vrti jo JS prek --kot */
.disk { position: absolute; z-index: 1; top: 2.5%; left: 2.5%; width: 95%; height: 95%; border-radius: 50%;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55); transition: transform 1.4s var(--mehko); }
.disk-vrti { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--kot, 0deg));
  background: repeating-radial-gradient(circle at 50% 50%, #0b0b0c 0 1.2px, #17181a 1.6px 2.8px), #101112;
  box-shadow: inset 0 0 0 3px #1c1d1f, inset 0 0 0 5px #0a0a0b; }
.disk-nalepka { position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%);
  border-radius: 50%; background: url(../img/merch/nalepka.jpg) 50% 47% / 160% no-repeat;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); }
.disk-nalepka::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8%; height: 8%;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--abyss); box-shadow: 0 0 0 1px rgba(235, 229, 217, .35); }
.disk-sij { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from 210deg, transparent 0 4%, rgba(255, 255, 255, .11) 9%, transparent 16% 50%,
    rgba(255, 255, 255, .07) 58%, transparent 66%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 18.5%, #000 19%);
          mask-image: radial-gradient(circle, transparent 0 18.5%, #000 19%); }
.pesem-glava .uvod { margin-top: 30px; }
.pesem-mreza { align-items: end; }

.predvajalnik { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 22px;
  margin: 44px 0 52px; }
.igraj { width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(235, 229, 217, .4); background: none;
  display: grid; place-items: center; cursor: pointer; transition: border-color .35s, color .35s, transform .35s var(--mehko); }
.igraj svg { width: 22px; height: 22px; fill: currentColor; }
.igraj:hover { border-color: var(--led); color: var(--led); transform: scale(1.04); }
.igraj .i-pavza, .predvajalnik.igra .igraj .i-igraj { display: none; }
.predvajalnik.igra .igraj .i-pavza { display: inline; }
.val { height: 64px; cursor: pointer; touch-action: pan-y; }
.val canvas { width: 100%; height: 100%; }
.cas { font-size: 15px; color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cas #casZdaj { color: var(--foam); }

.oznaka-platforme { margin-bottom: 16px; }
/* različice pesmi: albumska in a cappella (Mitja, 2. 11.) */
.oznaka-razlicice { margin: 40px 0 14px; }
.razlicice { list-style: none; margin: 0; padding: 0; max-width: 420px; border-top: 1px solid var(--steel); }
.razlicice li { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 50px;
  border-bottom: 1px solid var(--steel); }
.razlicice .ime { font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300; font-size: 19px; letter-spacing: .14em;
  text-transform: uppercase; }
.razlicice .stanje { font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mist);
  white-space: nowrap; }
.platforme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.platforme a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--steel); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; transition: border-color .3s, color .3s;
}
.platforme a::after { content: '↗'; letter-spacing: 0; color: var(--mist); }
.platforme a[href]:hover { border-color: var(--led); color: var(--led); }
.platforme a[href]:hover::after { color: var(--led); }
.platforme a[aria-disabled] { color: rgba(235, 229, 217, .6); cursor: default; }
.platforme a[aria-disabled]::after { opacity: .5; }
.opomba { margin-top: 16px; font-size: 15px; color: var(--mist); }


/* knjižica: ovitek 12″ se ob pomiku odpre kot katalog (po vzoru Trgopek), listi se obračajo; JS: --x, --rx, --sk, --o, --s */
.knjizica { position: relative; height: 560vh; }
.knjizica-oder { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.knjizica-namig { position: absolute; top: clamp(28px, 7vh, 72px); left: 0; right: 0; text-align: center; }
.knjizica-stevec { position: absolute; bottom: clamp(24px, 5vh, 56px); left: 0; right: 0; text-align: center; font-size: 13px;
  font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mist); }
.knjiga { --ph: 600px; position: relative; width: calc(var(--ph) * 2); height: var(--ph); perspective: calc(var(--ph) * 6); }
.knjiga-senca { position: absolute; left: calc(52% - 48% * var(--o, 0)); right: 2%; bottom: -7%; height: 15%; transform: translateX(var(--x, -25%));
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .6), transparent 72%); }
.knjiga-telo { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: translateX(var(--x, -25%)) rotateX(var(--rx, 22deg)) scale(var(--sk, .88)); }
.list { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; }
.stran { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #0e1b22;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 34px 50px -34px rgba(0, 0, 0, .7); }
.stran.spredaj { transform: rotateY(0deg) translateZ(.5px); }
.stran.zadaj { transform: rotateY(180deg) translateZ(.5px); }
.knjiga-osnova.stran { left: 50%; right: 0; width: auto; transform: translateZ(-2px); }   /* za listi, brez prekrivanja v 3D */
.stran > i { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.spredaj > i, .knjiga-osnova > i { background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .06) 8%, transparent 26%); }
.zadaj > i { background: linear-gradient(270deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .06) 8%, transparent 26%); }
.stran > i::after { content: ''; position: absolute; inset: 0; background: rgba(7, 12, 16, .55); opacity: var(--s, 0); }
.knjiga-hrbet { position: absolute; left: calc(50% - 12px); top: 0; width: 24px; height: 100%; pointer-events: none; z-index: 99;
  opacity: var(--o, 0); background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .4), transparent); transform: translateZ(2px); }
.s-ovitek img, .s-polna img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* plošča pokuka izza zaprtega ovitka; ob predvajanju bolj ven */
.plosca-pokuka { position: absolute; left: 50%; top: 2.5%; width: 47.5%; height: 95%; opacity: var(--po, 1);
  transform: translateX(var(--pokuka, 10%)); transition: transform 1.2s var(--mehko); }
.plosca-pokuka .disk { position: absolute; inset: 0; width: 100%; height: 100%; }
.knjiga.igra .plosca-pokuka { --pokuka: 24%; }

/* notranjost knjižice: kot knjižica rock plošče; morje v ozadju, drobna natančna tipografija (nikoli pod 12 px) */
.s-bg { background: #0b161d center / cover no-repeat; }
.s-bg::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.s-bg-povrsje { background-image: url(../img/knjizica/povrsje.jpg); }
.s-bg-povrsje::before { background: linear-gradient(180deg, rgba(11, 22, 29, .75) 0%, rgba(11, 22, 29, .25) 30%, rgba(11, 22, 29, .2) 55%, rgba(11, 22, 29, .9) 100%); }
.s-bg-temno { background-image: url(../img/knjizica/globina.jpg); background-size: 200% 100%; background-position: 50% 0; }
.s-bg-temno::before { background: rgba(9, 18, 24, .86); }
.s-bg-razpon { background-image: url(../img/knjizica/globina.jpg); background-size: 200% 100%; }
.s-levo { background-position: 0 0; }
.s-desno-pol { background-position: 100% 0; }
.s-bg-razpon::before { background: linear-gradient(180deg, rgba(9, 18, 24, .25), rgba(9, 18, 24, .55)); }
.s-bg-hrbet { background-image: url(../img/knjizica/povrsje.jpg); }
.s-bg-hrbet::before { background: linear-gradient(180deg, rgba(9, 18, 24, .92) 0%, rgba(9, 18, 24, .8) 60%, rgba(9, 18, 24, .45) 100%); }
.s-polna-temna::before { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(9, 18, 24, .45), rgba(9, 18, 24, 0) 30%, rgba(9, 18, 24, .1) 70%, rgba(9, 18, 24, .6)); }

.s-vsebina { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 7cqw 7.5cqw;
  font-size: clamp(12px, 2cqw, 14px); line-height: 1.6; color: var(--foam); }
.s-glava, .s-st, .s-oznaka, .s-noga, .s-pod-val, .s-podatki dt {
  font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--mist); }
.s-glava { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 1.6cqw; border-bottom: 1px solid rgba(154, 171, 179, .22); }
.s-glava span { color: rgba(154, 171, 179, .8); }
.s-bg-povrsje .s-glava, .s-na-sliki .s-glava { text-shadow: 0 0 8px rgba(7, 12, 16, .95), 0 0 2px rgba(7, 12, 16, .9); }
.s-st { position: absolute; right: 7.5cqw; bottom: 5.2cqw; font-variant-numeric: tabular-nums; letter-spacing: .14em; }
.zadaj .s-st, .s-levo .s-st { right: auto; left: 7.5cqw; }
.s-sredina { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2.6cqw; }
.s-znak { width: 44cqw; height: auto; filter: drop-shadow(0 0 2cqw rgba(7, 12, 16, .6)); }
.s-nagovor { max-width: 34ch; margin-top: 1cqw; font-size: clamp(12px, 2cqw, 14px); line-height: 1.55; color: rgba(235, 229, 217, .86); text-shadow: 0 0 8px rgba(7, 12, 16, .9); }
.s-naslov { font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300; font-size: max(18px, 4.4cqw); letter-spacing: .5em;
  text-transform: uppercase; line-height: 1; margin-top: 1cqw; }
.s-naslov span { margin-right: -.5em; }
.s-citat { font-family: 'Cormorant Garamond', Georgia, serif; font-size: max(14px, 2.5cqw); color: rgba(235, 229, 217, .85);
  margin-bottom: 4cqw; }
.s-besedilo { margin-top: 5cqw; }
.s-kitica { font-family: 'Cormorant Garamond', Georgia, serif; font-size: max(14px, 2.45cqw); line-height: 1.5; color: rgba(235, 229, 217, .92); }
.s-kitica + .s-kitica { margin-top: 3.6cqw; }
.s-dva { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5cqw; }
.s-dva .s-kitica + .s-kitica { margin-top: 0; }
.s-kitica b { font-weight: 600; color: var(--foam); }
.s-tekst { font-size: clamp(12px, 2cqw, 14px); color: rgba(235, 229, 217, .86); max-width: 40ch; }
.s-dno { margin-top: auto; margin-bottom: 6cqw; }
.s-polna img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-na-sliki { text-shadow: 0 0 10px rgba(7, 12, 16, .8); }
/* filmski trak: slika zgoraj, besedilo spodaj na temni strani */
.s-trak { background: #0b161d; }
.s-trak img { top: 14cqw; bottom: auto; height: 57cqw; object-fit: contain; }
.s-trak .s-tekst { max-width: none; }
.s-trak .s-dno { margin-bottom: 7cqw; }
.s-na-sliki .s-glava { border-color: rgba(235, 229, 217, .25); }

/* žep z notranjim ovojem in ploščo */
.zep { position: relative; width: 58cqw; height: 58cqw; margin: auto; margin-top: 16cqw; cursor: pointer; }
.zep-ovoj { position: absolute; inset: 0; z-index: 2; background: #101c22; box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(235, 229, 217, .1);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 10%, #000 10.3%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 0 10%, #000 10.3%); }
.zep-ovoj img { position: absolute; left: 50%; top: 12%; width: 38%; height: auto; transform: translateX(-50%); opacity: .5; }
.zep-ovoj span { position: absolute; left: 0; right: 0; bottom: 6cqw; text-align: center; font-family: 'Oswald', 'Archivo', sans-serif;
  font-weight: 300; font-size: max(12px, 2cqw); letter-spacing: .5em; text-transform: uppercase; color: rgba(235, 229, 217, .55); }
.zep .disk { position: absolute; top: 3%; left: 3%; width: 94%; height: 94%; z-index: 1; transform: translate(10%, -40%) rotate(-6deg);
  transition: transform 1.2s var(--mehko); }
.zep:hover .disk, .knjiga.igra .zep .disk { transform: translate(12%, -50%) rotate(-6deg); }
.s-noga { display: flex; gap: 2cqw; margin-top: auto; margin-bottom: 6cqw; color: var(--foam); }
.s-noga span:first-child { color: var(--mist); }
.s-desno { margin-left: auto; color: var(--mist); }

/* zvok: tehnični list */
.s-val { display: flex; align-items: center; gap: 2px; height: 16cqw; margin-top: 8cqw; }
.s-val i { flex: 1; height: var(--h); min-height: 1px; background: rgba(235, 229, 217, .7); max-width: 2px; margin: 0 auto; }
.s-pod-val { display: flex; justify-content: space-between; margin-top: 1.8cqw; letter-spacing: .14em; }
.s-podatki { margin: auto 0 6cqw; display: grid; }
.s-podatki div { display: grid; grid-template-columns: minmax(7.5em, 38%) minmax(0, 1fr); gap: 3cqw; align-items: baseline;
  border-top: 1px solid rgba(154, 171, 179, .18); padding: 1.3cqw 0; font-size: clamp(12px, 2cqw, 14px); }
.s-podatki dd { margin: 0; font-variant-numeric: tabular-nums; }

/* hrbet */
.s-hrbet { margin-top: 7cqw; }
/* zasluge kot na hrbtu plošče: brez črt, oznaka nad imenom, dva stolpca, več zraka (Mitja, 2. 11.) */
.s-hrbet .s-podatki { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.6cqw 5cqw; }
.s-hrbet .s-podatki div { display: block; border-top: 0; padding: 0; }
.s-hrbet .s-podatki dt { letter-spacing: .2em; line-height: 1.45; margin-bottom: 1cqw; text-wrap: balance; }
.s-hrbet .s-podatki dd { font-size: clamp(13px, 2.3cqw, 16px); line-height: 1.45; }
@container (max-width: 440px) { .s-hrbet .s-podatki dt { letter-spacing: .1em; } .s-hrbet .s-podatki { column-gap: 4cqw; } }
.s-skladba { display: flex; align-items: baseline; gap: 2.4cqw; margin: 2.4cqw 0 7cqw; font-family: 'Oswald', 'Archivo', sans-serif;
  font-weight: 300; font-size: max(16px, 3.4cqw); letter-spacing: .24em; text-transform: uppercase; line-height: 1; }
.s-skladba span:first-child, .s-skladba .s-desno { font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; color: var(--mist); }
.s-pravno { margin-top: auto; display: flex; align-items: flex-end; gap: 3cqw; font-size: 12px; color: var(--mist); line-height: 1.6; }
.s-pravno img { width: 13cqw; height: auto; opacity: .8; }
.s-pravno .dom { margin: 0; font-size: 12px; color: var(--foam); }

/* nastanek pesmi: od skice (2018) do masterja (2026), številke iz datotek sej (ZGODOVINA-CHAINS.md) */
.nastanek-mreza { max-width: var(--sirina); margin: 0 auto; display: grid; align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); }
.nastanek-glava .uvod { margin-top: 30px; }
.nastanek-glava p + p { margin-top: 20px; max-width: 42ch; color: rgba(235, 229, 217, .86); }
.nastanek-stevila { margin: 44px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
.nastanek-stevila div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px;
  padding-top: 16px; border-top: 1px solid var(--steel); }
.nastanek-stevila dd { margin: 0; font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 200; line-height: 1;
  font-size: clamp(44px, 4.6vw, 68px); letter-spacing: .04em; color: var(--foam); }
.nastanek-stevila dt { text-wrap: balance; font-size: 12px; font-weight: 500; letter-spacing: .22em; line-height: 1.5; text-transform: uppercase; color: var(--mist); }
.nastanek-cas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--steel); }
.nastanek-cas li { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); gap: 18px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--steel); }
.nastanek-cas .leto { font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300; font-size: 21px; letter-spacing: .14em; color: var(--foam); }
.nastanek-cas p { font-size: 17px; line-height: 1.5; color: rgba(235, 229, 217, .86); }

/* album: pesmi izhajajo ena za drugo */
.album-mreza { max-width: var(--sirina); margin: 0 auto; display: grid; align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); }
.album-glava .uvod { margin-top: 30px; }
.album-glava p + p { margin-top: 20px; max-width: 40ch; color: rgba(235, 229, 217, .86); }
.seznam { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--steel); }
.seznam li { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; align-items: center; gap: 18px; min-height: 50px;
  border-bottom: 1px solid var(--steel); }
.seznam .st { font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300; font-size: 17px; letter-spacing: .08em; color: var(--mist);
  font-variant-numeric: lining-nums tabular-nums; }
.seznam .ime { font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300; font-size: 20px; letter-spacing: .24em; text-transform: uppercase; line-height: 1; }
.seznam .ime i { display: inline-block; width: calc(var(--d) * .5em); max-width: 100%; height: .42em; vertical-align: middle;
  border-radius: 2px; background: linear-gradient(90deg, rgba(154, 171, 179, .12) 20%, rgba(154, 171, 179, .34) 50%, rgba(154, 171, 179, .12) 80%);
  background-size: 250% 100%; animation: nastaja 3.6s ease-in-out infinite; }
.seznam li:nth-child(3n) .ime i { animation-delay: -1.2s; }
.seznam li:nth-child(3n+1) .ime i { animation-delay: -2.4s; }
@keyframes nastaja { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.seznam .stanje { font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mist); white-space: nowrap; }
.seznam .izdana .st, .seznam .izdana .ime { color: var(--foam); }
.seznam .izdana .stanje { color: var(--foam); }
.seznam .finale .st, .seznam .finale .stanje { color: var(--foam); }
.seznam .napovedana .st, .seznam .napovedana .ime { color: var(--foam); }
.seznam .napovedana .ime { line-height: 1.3; padding: 8px 0; }   /* a cappella na 6. mestu (Mitja, 2. 11.) */

/* medigra z verigo */
.medigra { height: clamp(340px, 72vh, 780px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.medigra img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
  transform: scale(var(--m, 1.12)); will-change: transform; }

/* veriga: dolg, mehak prehod zgoraj in spodaj (krivulja smootherstep), temneje, več kontrasta, temen Multiply (Mitja, 1. 11.) */
.medigra-veriga { position: relative; height: clamp(420px, 88vh, 940px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.000) 0.0%, rgba(0, 0, 0, 0.009) 3.6%, rgba(0, 0, 0, 0.058) 7.2%, rgba(0, 0, 0, 0.163) 10.8%, rgba(0, 0, 0, 0.317) 14.4%, rgba(0, 0, 0, 0.500) 18.0%, rgba(0, 0, 0, 0.683) 21.6%, rgba(0, 0, 0, 0.837) 25.2%, rgba(0, 0, 0, 0.942) 28.8%, rgba(0, 0, 0, 0.991) 32.4%, rgba(0, 0, 0, 1.000) 36.0%, rgba(0, 0, 0, 1.000) 64.0%, rgba(0, 0, 0, 0.991) 67.6%, rgba(0, 0, 0, 0.942) 71.2%, rgba(0, 0, 0, 0.837) 74.8%, rgba(0, 0, 0, 0.683) 78.4%, rgba(0, 0, 0, 0.500) 82.0%, rgba(0, 0, 0, 0.317) 85.6%, rgba(0, 0, 0, 0.163) 89.2%, rgba(0, 0, 0, 0.058) 92.8%, rgba(0, 0, 0, 0.009) 96.4%, rgba(0, 0, 0, 0.000) 100.0%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.000) 0.0%, rgba(0, 0, 0, 0.009) 3.6%, rgba(0, 0, 0, 0.058) 7.2%, rgba(0, 0, 0, 0.163) 10.8%, rgba(0, 0, 0, 0.317) 14.4%, rgba(0, 0, 0, 0.500) 18.0%, rgba(0, 0, 0, 0.683) 21.6%, rgba(0, 0, 0, 0.837) 25.2%, rgba(0, 0, 0, 0.942) 28.8%, rgba(0, 0, 0, 0.991) 32.4%, rgba(0, 0, 0, 1.000) 36.0%, rgba(0, 0, 0, 1.000) 64.0%, rgba(0, 0, 0, 0.991) 67.6%, rgba(0, 0, 0, 0.942) 71.2%, rgba(0, 0, 0, 0.837) 74.8%, rgba(0, 0, 0, 0.683) 78.4%, rgba(0, 0, 0, 0.500) 82.0%, rgba(0, 0, 0, 0.317) 85.6%, rgba(0, 0, 0, 0.163) 89.2%, rgba(0, 0, 0, 0.058) 92.8%, rgba(0, 0, 0, 0.009) 96.4%, rgba(0, 0, 0, 0.000) 100.0%); }
.medigra-veriga img { filter: contrast(1.3) brightness(.98) saturate(.92); }
.medigra-veriga::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none;
  background: radial-gradient(ellipse 78% 74% at 34% 50%, #ccd4d6 0%, #a5b0b4 58%, #7a878c 100%); }

.medigra-gore { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 38%, #000 62%, transparent 100%); }
.medigra-gore img { object-position: 50% 40%; opacity: .34; filter: contrast(.72) saturate(.85); }
/* album se dvigne v gore: spodnji del gor ostane za naslovom kot prehod */
.medigra-gore + .album { margin-top: calc(clamp(340px, 72vh, 780px) * -.46); }

/* film */
.film-glava, .merch-glava { text-align: center; }
.film-meta { margin-top: 26px; font-size: 15px; letter-spacing: .26em; text-transform: uppercase; color: var(--mist); }
.platno { position: relative; max-width: var(--sirina); margin: clamp(48px, 7vw, 88px) auto 0; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--ink); box-shadow: 0 50px 110px rgba(0, 0, 0, .5); }
.platno-slika { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--mehko), opacity .6s; }
.platno-gumb { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px;
  border: 0; background: radial-gradient(ellipse at center, rgba(7, 12, 16, .05), rgba(7, 12, 16, .45)); cursor: pointer; }
.krog { width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(235, 229, 217, .55); display: grid; place-items: center;
  transition: border-color .35s, color .35s, transform .5s var(--mehko); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.krog svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.platno-oznaka { font-size: 13px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.platno-gumb:hover .krog { border-color: var(--led); color: var(--led); transform: scale(1.06); }
.platno-gumb:hover ~ .platno-slika, .platno:hover .platno-slika { transform: scale(1.03); }
.platno-video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--ink); }
.platno.tece .platno-gumb, .platno.tece .platno-slika { display: none; }

/* odmev: kit iz zvoka (sonar), filmski prizor ob pomiku; platno riše odmev.js (Mitja, 1. 11.: »vrhunsko, filmsko«) */
.odmev { position: relative; z-index: 2; height: 380vh; }
.odmev-oder { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.odmev-platno { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.odmev-nadomestek { display: none; position: absolute; left: 50%; top: 50%; width: min(60vw, 720px); height: auto;
  transform: translate(-50%, -54%); opacity: .9; }
.odmev-vrstica { position: absolute; left: 0; right: 0; margin: 0 auto; padding: 0 var(--rob); text-align: center;
  opacity: 0; transform: translateY(var(--y, 14px)); pointer-events: none; }
.odmev-uvod { top: 50%; margin-top: -.7em; font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300;
  font-size: clamp(16px, 1.5vw, 21px); letter-spacing: .42em; text-transform: uppercase; color: rgba(235, 229, 217, .9); }
.odmev-citat { bottom: 12%; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 38px); line-height: 1.3; color: var(--foam); }
.odmev.mirno { height: auto; }
.odmev.mirno .odmev-oder { position: relative; height: 100vh; height: 100svh;
  background: linear-gradient(180deg, var(--deep), #0a141a); }
.odmev.mirno .odmev-platno { display: none; }
.odmev.mirno .odmev-nadomestek { display: block; }
.odmev.mirno .odmev-vrstica { opacity: 1; transform: none; }
.odmev.mirno .odmev-uvod { top: 16%; }

/* lekcije čez cel zaslon: prekinitev pred merchem, brez okvirja; gumb vodi na podstran lessons/ (Mitja, 2. 11.) */
.lekcije-oder { position: relative; display: flex; align-items: flex-end;
  height: clamp(560px, 100svh, 66vw); padding: 0 var(--rob) clamp(64px, 11vh, 132px); }
.lekcije-oder picture { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.000) 0.0%, rgba(0, 0, 0, 0.009) 2.6%, rgba(0, 0, 0, 0.058) 5.2%, rgba(0, 0, 0, 0.163) 7.8%, rgba(0, 0, 0, 0.317) 10.4%, rgba(0, 0, 0, 0.500) 13.0%, rgba(0, 0, 0, 0.683) 15.6%, rgba(0, 0, 0, 0.837) 18.2%, rgba(0, 0, 0, 0.942) 20.8%, rgba(0, 0, 0, 0.991) 23.4%, rgba(0, 0, 0, 1.000) 26.0%, rgba(0, 0, 0, 1.000) 74.0%, rgba(0, 0, 0, 0.991) 76.6%, rgba(0, 0, 0, 0.942) 79.2%, rgba(0, 0, 0, 0.837) 81.8%, rgba(0, 0, 0, 0.683) 84.4%, rgba(0, 0, 0, 0.500) 87.0%, rgba(0, 0, 0, 0.317) 89.6%, rgba(0, 0, 0, 0.163) 92.2%, rgba(0, 0, 0, 0.058) 94.8%, rgba(0, 0, 0, 0.009) 97.4%, rgba(0, 0, 0, 0.000) 100.0%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.000) 0.0%, rgba(0, 0, 0, 0.009) 2.6%, rgba(0, 0, 0, 0.058) 5.2%, rgba(0, 0, 0, 0.163) 7.8%, rgba(0, 0, 0, 0.317) 10.4%, rgba(0, 0, 0, 0.500) 13.0%, rgba(0, 0, 0, 0.683) 15.6%, rgba(0, 0, 0, 0.837) 18.2%, rgba(0, 0, 0, 0.942) 20.8%, rgba(0, 0, 0, 0.991) 23.4%, rgba(0, 0, 0, 1.000) 26.0%, rgba(0, 0, 0, 1.000) 74.0%, rgba(0, 0, 0, 0.991) 76.6%, rgba(0, 0, 0, 0.942) 79.2%, rgba(0, 0, 0, 0.837) 81.8%, rgba(0, 0, 0, 0.683) 84.4%, rgba(0, 0, 0, 0.500) 87.0%, rgba(0, 0, 0, 0.317) 89.6%, rgba(0, 0, 0, 0.163) 92.2%, rgba(0, 0, 0, 0.058) 94.8%, rgba(0, 0, 0, 0.009) 97.4%, rgba(0, 0, 0, 0.000) 100.0%); }
.lekcije-slika { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%;
  transform: scale(var(--m, 1.12)); will-change: transform; filter: contrast(1.12); }
/* temen Multiply: najtemneje spodaj levo, kjer je besedilo; kitara ostane v svetlobi */
.lekcije-oder picture::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 72% 38%, #dfe4e6 0%, #a9b3b7 46%, #4d585d 100%),
              linear-gradient(90deg, #6d7a80 0%, #fff 55%); background-blend-mode: multiply; }
.lekcije-glava { position: relative; z-index: 1; width: 100%; max-width: var(--sirina); margin: 0 auto; }   /* rob kot ostali odseki */
.lekcije-glava .uvod { margin-top: 30px; }

/* gumb na podstran Lessons (Mitja, 2. 11.: »samo CTA, potem se odpre podstran«) */
.gumb-lekcije, .gumb-tanek { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 24px;
  border: 1px solid rgba(235, 229, 217, .4); font-size: 13px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; transition: border-color .3s, color .3s; }
.gumb-lekcije { margin-top: 36px; }
.gumb-lekcije::after { content: '→'; letter-spacing: 0; transition: transform .4s var(--mehko); }
.gumb-lekcije:hover, .gumb-tanek:hover { border-color: var(--led); color: var(--led); }
.gumb-lekcije:hover::after { transform: translateX(4px); }

/* prehod med stranjo in podstranjo: fotografija kitare se razširi v glavo podstrani */
@view-transition { navigation: auto; }
.lekcije-slika { view-transition-name: lekcije-slika; }

/* bend */
.bend-mreza { max-width: var(--sirina); margin: 0 auto; display: grid; align-items: start;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); }
.bend-besedilo .uvod { margin-top: 30px; }
.bend-besedilo p + p { margin-top: 20px; max-width: 42ch; color: rgba(235, 229, 217, .86); }
.foto { margin: 0; }
.foto-studio { margin-top: clamp(40px, 5vw, 64px); }
.foto-portret { position: sticky; top: 12vh; }
.foto-prostor { position: relative; aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, rgba(22, 44, 56, .9), rgba(10, 20, 26, .9)); }
.foto-studio .foto-prostor { aspect-ratio: 3 / 2; }
.zasluge { margin: 36px 0 0; display: grid; gap: 10px; }
.zasluge div { display: grid; grid-template-columns: 14em minmax(0, 1fr); align-items: baseline; gap: 4px 18px; }
.zasluge dt { font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mist); }
.zasluge dd { margin: 0; font-size: 17px; }
.foto-studio img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: 0 34px 70px rgba(0, 0, 0, .5); }
.foto-prostor::after { content: attr(data-opis); position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; text-align: center; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--mist); }

/* merch */
.merch-mreza { max-width: var(--sirina); margin: clamp(48px, 7vw, 88px) auto 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 56px); }
.izdelek h3, .izdelek p { text-align: center; }
.izdelek h3 { margin-top: 26px; font-family: 'Oswald', 'Archivo', sans-serif; font-weight: 300; font-size: 22px;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.3; }
.izdelek p { margin-top: 8px; font-size: 17px; color: var(--mist); }
.oder { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(154, 171, 179, .13), rgba(154, 171, 179, 0) 72%); }
.oder-majica, .oder-foto { background: none; }
.majica-foto, .merch-foto { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--mehko);
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 58%, transparent 100%); }
.izdelek:hover .majica-foto, .izdelek:hover .merch-foto { transform: scale(1.04); }
/* izdelki brez ozadja (WebP z alfo) lebdijo na podlagi strani (Mitja, 2. 11.) */
.merch-izrez { width: 92%; height: 92%; object-fit: contain; transition: transform 1.4s var(--mehko); }
.izdelek:hover .merch-izrez { transform: scale(1.04); }
.plakat { width: 64%; height: auto; aspect-ratio: 900 / 1260; border: 7px solid #0d1013;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 34px 60px rgba(0, 0, 0, .6), 0 8px 16px rgba(0, 0, 0, .4);
  transition: transform 1s var(--mehko); }
.izdelek:hover .plakat { transform: translateY(-6px); }
.vinil { position: relative; width: 64%; aspect-ratio: 1; transform: translateX(-24%); }
.ovoj { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  box-shadow: 0 30px 50px rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .4); }
.plosca { position: absolute; top: 3%; left: 3%; width: 94%; height: 94%; border-radius: 50%; container-type: inline-size;
  background:
    repeating-radial-gradient(circle at 50% 50%, #0c0c0d 0 1.1px, #18191a 1.5px 2.6px), #111;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .55), inset 0 0 0 3px #1c1d1f;
  transform: translateX(40%); transition: transform 1.2s var(--mehko); }
.plosca::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 6%, rgba(255, 255, 255, .09) 12%, transparent 20% 50%,
    rgba(255, 255, 255, .07) 62%, transparent 70%); }
.nalepka { position: absolute; left: 50%; top: 50%; width: 36%; height: 36%; transform: translate(-50%, -50%); z-index: 1;
  border-radius: 50%; background: url(../img/merch/nalepka.jpg) 50% 47% / 160% no-repeat; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55); }
.nalepka::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8%; height: 8%; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--abyss); }
.izdelek:hover .plosca { transform: translateX(56%) rotate(28deg); }

/* konec */
.konec { position: relative; overflow: hidden; padding: clamp(380px, 62vh, 680px) var(--rob) max(56px, env(safe-area-inset-bottom));
  text-align: center; }
/* noga: grbavec iz filma čez celo širino, dolg prehod iz sekcije nad njo, napis na globoki vodi */
.konec-kit { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .25) 14%, rgba(0, 0, 0, .7) 28%, #000 42%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .25) 14%, rgba(0, 0, 0, .7) 28%, #000 42%, #000 82%, transparent 100%); }
.konec-kit img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.konec-kit::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 36% at 50% 74%, rgba(7, 12, 16, .5), rgba(7, 12, 16, 0) 100%); }
.konec-vsebina { position: relative; }
.konec-napis { text-shadow: 0 0 34px rgba(7, 12, 16, .95), 0 0 8px rgba(7, 12, 16, .8); }
.konec-napis { font-size: clamp(36px, 6vw, 84px); letter-spacing: .5em; }
.konec-napis span { margin-right: -.5em; }
.kontakt { margin-top: clamp(64px, 9vw, 112px); display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 40px; }
.kontakt a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 17px; text-decoration: none;
  transition: color .3s; }
.kontakt a[href]:hover { color: var(--led); }
.kontakt a[aria-disabled] { color: rgba(235, 229, 217, .6); }
.kmalu { margin-left: 2px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); opacity: .8; }
.kontakt svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.dom { margin-top: 48px; font-size: 17px; letter-spacing: .08em; }
.dom i { font-style: normal; font-weight: 300; }
.dom b { font-weight: 700; }
.drobno { margin-top: 14px; font-size: 15px; color: var(--mist); }

/* prikaz ob pomiku */
.js .prikaz { opacity: 0; transform: translateY(28px); transition: opacity 1.2s ease, transform 1.2s var(--mehko); }
.js .prikaz.vidno { opacity: 1; transform: none; }
.merch-mreza .prikaz:nth-child(3n+2) { transition-delay: .12s; }
.merch-mreza .prikaz:nth-child(3n+3) { transition-delay: .24s; }

/* knjižica: vodoravno listanje na tablici, telefonu in nizkih oknih */
@media (max-width: 900px), (max-height: 599px) {
  .knjizica { height: auto; padding: 24px 0 clamp(64px, 10vh, 120px); }
  .knjizica-oder { position: static; height: auto; display: block; overflow: visible; }
  .knjizica-namig { position: static; margin: 0 var(--rob) 18px; text-align: left; }
  .knjizica-stevec, .knjiga-senca, .knjiga-hrbet, .plosca-pokuka, .stran > i { display: none; }
  .knjiga { width: 100%; height: auto; perspective: none; }
  .knjiga-telo { position: static; transform: none !important; transform-style: flat; display: flex; gap: 14px; overflow-x: auto;
    scroll-snap-type: x mandatory; padding: 0 var(--rob) 12px; scrollbar-width: none; }
  .knjiga-telo::-webkit-scrollbar { display: none; }
  .list { display: contents; transform-style: flat; }
  .stran, .knjiga-osnova.stran { position: relative; inset: auto; left: auto; flex: 0 0 min(82vw, 460px); width: auto;
    height: auto; min-height: min(82vw, 460px); container-type: inline-size; transform: none !important;
    visibility: visible !important; scroll-snap-align: center; -webkit-backface-visibility: visible; backface-visibility: visible; }
  .s-vsebina { position: relative; inset: auto; min-height: 100%; padding-bottom: 14cqw; }
  .s-polna .s-vsebina { position: absolute; inset: 0; }
  .s-dva { grid-template-columns: 1fr; }
  .s-dva .s-kitica + .s-kitica { margin-top: 3.6cqw; }
  .s-glava { flex-wrap: wrap; }
}
/* tablica */
@media (max-width: 1599px) {
  .globina { right: 20px; }
}
@media (max-width: 1399px), (max-height: 680px) {
  .globina { display: none; }
}
@media (max-width: 900px) {
  .pesem-mreza, .bend-mreza, .album-mreza, .nastanek-mreza { grid-template-columns: minmax(0, 1fr); }
  .foto-portret { position: static; }
  .foto-portret { max-width: 480px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .izdelek h3 { font-size: 18px; letter-spacing: .12em; }
}
@media (max-width: 700px) {
  .odmev { height: 320vh; }
  /* telefon: pokončni izrez kitare, besedilo na spodnjem prelivu */
  .lekcije-oder { display: block; height: auto; padding: 0; }
  .lekcije-oder picture { position: relative; display: block; aspect-ratio: 4 / 5; }
  .lekcije-slika { object-position: 50% 50%; }
  .lekcije-glava { margin-top: -30vw; padding: 0 var(--rob); }
  .gumb-lekcije { width: 100%; justify-content: center; }
  .medigra-veriga img { object-position: 8% 50%; }
  .odmev-citat { bottom: 17%; }
  .merch-mreza { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
/* telefon */
@media (max-width: 600px) {
  body { font-size: 17px; }
  .hero-pod .pika { display: none; }
  .hero-vsebina .del { display: block; }
  .hero-pod .del + .pika + .del { margin-top: 8px; }
  .seznam li { grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 12px; }
  .seznam .ime { font-size: 17px; letter-spacing: .18em; }
  .seznam .stanje { letter-spacing: .14em; }
  .zasluge div { grid-template-columns: minmax(0, 1fr); }
  .hero-naslov { font-size: min(9vw, 38px); letter-spacing: .7em; margin: 22px 0 24px; }
  .hero-naslov .zadnja { margin-right: -.7em; }
  .naslov-odseka { font-size: min(11vw, 46px); letter-spacing: .3em; }
  .naslov-odseka span { margin-right: -.3em; }
  .naslov-dolg, .naslov-srednji { font-size: min(9.6vw, 40px); }
  .predvajalnik { grid-template-columns: 56px minmax(0, 1fr); gap: 16px 18px; }
  .igraj { width: 56px; height: 56px; }
  .cas { grid-column: 2; justify-self: end; margin-top: -8px; }
  .platforme { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platforme a { font-size: 12px; letter-spacing: .08em; padding: 0 14px; white-space: nowrap; }
  .krog { width: 72px; height: 72px; }
  .film-meta { letter-spacing: .18em; }
  .konec-napis { letter-spacing: .4em; }
  .konec-napis span { margin-right: -.4em; }
  .kontakt { flex-direction: column; align-items: flex-start; width: fit-content; margin-inline: auto; }
}
/* telefon ležeče */
@media (max-width: 380px) {
  .platforme a { letter-spacing: .04em; padding: 0 12px; gap: 6px; white-space: nowrap; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 340px; }
  .hero-naslov { font-size: clamp(32px, 5vw, 56px); margin: 14px 0 16px; }
  .hero-logo { width: clamp(170px, 22vw, 260px); }
  .medigra { height: 80vh; }
  .lekcije-oder { height: max(340px, 100svh); padding-bottom: 40px; }
  .odmev-citat { bottom: 6%; }
  .odmev.mirno .odmev-nadomestek { width: min(56vh, 38vw); transform: translate(-50%, -50%); }
  .odmev.mirno .odmev-uvod { top: 8%; }
}

/* znak kita v nogi, majhen, kot podpis (Mitja, 2. 11.) */
.konec-znak { display: block; width: 64px; height: auto; margin: 56px auto 0; opacity: .78; }
.konec-znak + .dom { margin-top: 22px; }

/* na vrh (Mitja, 2. 11.): okrogel tanek gumb spodaj desno, po prvem zaslonu */
.na-vrh { position: fixed; z-index: 40; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid rgba(235, 229, 217, .4); color: var(--foam);
  background: rgba(7, 12, 16, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s var(--mehko), visibility .45s, border-color .3s, color .3s; }
.na-vrh.vidno { opacity: 1; visibility: visible; transform: none; }
.na-vrh svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.na-vrh:hover { border-color: var(--led); color: var(--led); }
@media (max-width: 600px) {
  .konec, .l-noga { padding-bottom: max(100px, calc(env(safe-area-inset-bottom) + 84px)); }   /* gumb na vrh ne prekrije noge */
  .konec-znak { width: 56px; margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .prikaz { opacity: 1; transform: none; }
  .medigra img, .lekcije-slika { transform: none; }
}