:root {
  color-scheme: dark;
  --bg: #161719;
  --panel: #1d1e20;
  --muted: #aaaead;
  --lime: #d88735;
  --line: #37393b
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 30px
}

body {
  margin: 0;
  background: var(--bg);
  color: #f3f3ed;
  font: 16px/1.6 Arial, Helvetica, sans-serif
}

a {
  color: inherit;
  text-decoration: none
}

button,
input {
  font: inherit
}

button,
a,
label.file-button {
  -webkit-tap-highlight-color: transparent
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
label:focus-within {
  outline: 2px solid var(--lime);
  outline-offset: 5px
}

header,
main {
  max-width: 1320px;
  margin: auto;
  padding: 0 6%
}

header {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line)
}

.brand {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em
}

.brand span {
  color: var(--lime)
}

nav {
  display: flex;
  gap: 36px;
  font-size: 14px
}

nav a:hover {
  color: var(--lime)
}

.hero {
  position: relative;
  padding: 70px 0 72px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end
}

.eyebrow {
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 500;
  color: var(--muted)
}

.hero>.eyebrow {
  grid-column: 1/-1;
  margin: 0 0 32px
}

h1 {
  font-size: clamp(66px, 9vw, 132px);
  line-height: .96;
  font-weight: 400;
  letter-spacing: -.065em;
  margin: 0
}

h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--lime)
}

.intro {
  padding-left: 18%;
  padding-bottom: 8px
}

.intro p {
  color: #c5c7c1;
  font-size: 18px;
  line-height: 1.65;
  margin: 24px 0 32px
}

.line {
  display: block;
  width: 52px;
  height: 1px;
  background: var(--lime)
}

.pill {
  display: inline-flex;
  gap: 46px;
  align-items: center;
  border: 1px solid #805c42;
  padding: 11px 22px;
  border-radius: 30px;
  font-size: 14px
}

.pill:hover {
  background: var(--lime);
  color: var(--bg)
}

.hero-index {
  position: absolute;
  right: 0;
  top: 75px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .15em
}

section:not(.hero) {
  padding: 58px 0 18px
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 30px
}

h2 {
  font-weight: 400;
  font-size: 42px;
  letter-spacing: -.04em;
  line-height: 1.2;
  margin: 13px 0 0
}

.formats {
  font-size: 12px;
  letter-spacing: .13em;
  color: var(--muted);
  padding-bottom: 7px
}

.audio-layout {
  display: grid;
  grid-template-columns: .85fr 1.3fr;
  background: var(--panel)
}

.cover {
  min-height: 380px;
  background: #8b4c21;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden
}

.cover>span {
  position: absolute;
  bottom: 20px;
  left: 22px;
  color: #2b180d;
  font-size: 10px;
  letter-spacing: .16em
}

.disc {
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #202421 0px, #202421 2px, #363b31 3px, #202421 4px);
  box-shadow: 10px 18px 28px #242d3440;
  display: grid;
  place-items: center
}

.disc>div {
  width: 83px;
  height: 83px;
  border-radius: 50%;
  background: var(--lime);
  border: 30px solid #a45c27;
  box-shadow: 0 0 0 1px #555
}

.player {
  padding: 34px 40px
}

.track-top {
  display: flex;
  justify-content: space-between;
  gap: 12px
}

.track-top>span:last-child {
  font-size: 11px;
  color: var(--muted)
}

h3 {
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -.02em;
  font-weight: 400;
  margin: 26px 0 7px;
  overflow-wrap: anywhere
}

.player>p {
  font-size: 14px;
  color: var(--muted);
  margin: 0
}

.timeline {
  margin: 27px 0 12px
}

.timeline>input {
  width: 100%;
  display: block
}

.timeline>div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px
}

input[type=range] {
  accent-color: var(--lime);
  cursor: pointer;
  height: 4px
}

.controls,
.controls>div {
  display: flex;
  align-items: center;
  gap: 16px
}

.controls {
  justify-content: space-between;
  margin-bottom: 28px
}

.controls button {
  border: 0;
  cursor: pointer
}

.play {
  background: var(--lime);
  color: #20160f;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  font-size: 20px
}

.icon {
  background: none;
  color: #ddd;
  width: 24px;
  padding: 0
}

button:disabled {
  opacity: .4;
  cursor: default
}

.volume {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px
}

.volume input {
  width: 65px
}

.file-button {
  display: inline-flex;
  position: relative;
  border: 1px solid #795b45;
  padding: 9px 17px;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 3px
}

.file-button:hover {
  border-color: var(--lime);
  color: var(--lime)
}

.file-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer
}

.player>.local-note,
.local-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px
}

.tracks button {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  background: none;
  color: #ddd;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 19px 16px;
  text-align: left;
  cursor: pointer
}

.tracks button.active {
  color: var(--lime);
  background: #d8873508
}

.tracks button span:last-child {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted)
}

.tracks button span:nth-child(2) {
  overflow-wrap: anywhere
}

.video-frame {
  position: relative;
  aspect-ratio: 16/8;
  background: #101113;
  border: 1px solid #303235;
  display: grid;
  place-items: center
}

.video-frame video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: contain
}

.video-frame:not(.loaded) video {
  visibility: hidden
}

#video-empty {
  text-align: center;
  padding: 20px
}

.video-symbol {
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 1px solid #795b45;
  color: var(--lime);
  font-size: 35px;
  border-radius: 50%
}

#video-empty h3 {
  margin: 20px 0 6px
}

#video-empty p {
  color: var(--muted);
  font-size: 14px
}

.video-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.video-bottom h3 {
  font-size: 18px;
  margin: 20px 0 0
}

.video-bottom .local-note {
  margin-top: 4px
}

[role=alert] {
  color: #ffc5a8;
  font-size: 14px
}

footer {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--muted)
}

@media(max-width:760px) {

  header,
  main {
    padding-left: 6%;
    padding-right: 6%
  }

  header {
    height: 80px
  }

  .brand {
    font-size: 11px
  }

  nav {
    gap: 20px
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 48px 0
  }

  .hero-index {
    display: none
  }

  .intro {
    padding: 35px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
  }

  .intro .line {
    display: none
  }

  .intro p {
    font-size: 16px;
    margin: 0
  }

  .pill {
    gap: 20px
  }

  .audio-layout {
    grid-template-columns: 1fr
  }

  .cover {
    min-height: 250px
  }

  .disc {
    width: 190px;
    height: 190px
  }

  .cover>span {
    font-size: 9px
  }

  .player {
    padding: 28px 22px
  }

  .section-head {
    gap: 16px
  }

  h2 {
    font-size: 34px
  }

  .formats {
    font-size: 10px
  }

  .video-frame {
    aspect-ratio: 4/3
  }

  .video-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px
  }

  footer {
    flex-wrap: wrap
  }

  footer>span {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
}

.video-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px
}

.video-gallery:empty {
  display: none
}

.video-card {
  min-width: 0;
  padding: 0;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  color: inherit;
  cursor: pointer
}

.video-card:hover {
  border-color: #b1733e
}

.video-card.active {
  border-color: var(--lime)
}

.video-card:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px
}

.video-thumbnail {
  display: grid;
  place-items: center;
  position: relative;
  aspect-ratio: 16/9;
  background: #101113;
  overflow: hidden
}

.video-thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.thumbnail-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #101113c9;
  color: var(--lime);
  font-size: 16px
}

.video-card-title {
  display: block;
  padding: 13px 15px;
  font-size: 14px;
  overflow-wrap: anywhere;
  line-height: 1.5
}

.video-card.active .video-card-title {
  color: var(--lime)
}

@media(max-width:650px) {
  .video-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
  }
}

@media(max-width:420px) {
  .video-gallery {
    grid-template-columns: 1fr
  }
}

.about-layout {
  display: grid;
  grid-template-columns: .85fr 1.3fr;
  gap: 60px;
  align-items: center
}

.about-portrait {
  margin: 0
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: var(--panel)
}

.about-portrait figcaption {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.5
}

.about-copy h3 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.12;
  margin: 20px 0 30px;
  letter-spacing: -.04em
}

.bio-placeholder {
  border-top: 1px solid var(--line);
  padding-top: 24px
}

.placeholder-label {
  font-size: 12px;
  color: var(--lime);
  letter-spacing: .08em
}

.bio-placeholder p {
  color: var(--muted);
  font-size: 16px;
  max-width: 40ch
}

.contact-panel {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.contact-panel p {
  margin: 0;
  max-width: 40ch
}

.contact-pending {
  color: var(--muted);
  font-size: 14px
}

nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 24px
}

@media(max-width:760px) {
  header {
    height: auto;
    min-height: 90px;
    gap: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    flex-wrap: wrap
  }

  nav {
    gap: 22px;
    justify-content: flex-start
  }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .about-portrait {
    max-width: 480px
  }

  .about-copy h3 {
    margin-top: 14px
  }

  .contact-panel {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px
  }
}

.about-layout {
  align-items: start
}

.biography {
  border-top: 1px solid var(--line);
  padding-top: 8px
}

.biography p {
  font-size: 16px;
  line-height: 1.8;
  color: #c5c7c1;
  margin: 20px 0
}

.about-copy h3 {
  margin-top: 16px
}

body {
  isolation: isolate
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../zdjecia/tlo/nuty-tlo.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  filter: invert(1);
  opacity: .095;
}

.contact-email {
  color: var(--lime);
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: -.02em;
  overflow-wrap: anywhere
}

.contact-email span {
  display: inline-block;
  margin-left: 12px
}

.contact-email:hover {
  text-decoration: underline;
  text-underline-offset: 6px
}

@media(max-width:760px) {
  body::before {
    background-size: 760px auto;
    opacity: .075
  }
}

[hidden] {
  display: none !important
}

#language {
  border: 1px solid #805c42;
  border-radius: 20px;
  background: transparent;
  color: var(--lime);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer
}

.album-toolbar,
.album-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px
}

.album-toolbar p {
  color: var(--muted);
  font-size: 14px
}

.album-toolbar button,
.album-detail-head button {
  background: transparent;
  color: var(--lime)
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px
}

.album-card {
  min-width: 0
}

.album-open {
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer
}

.album-open img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border: 1px solid var(--line);
  transition: filter .2s
}

.album-open:hover img {
  filter: brightness(1.15)
}

.album-open[aria-pressed=true] img {
  outline: 2px solid var(--lime);
  outline-offset: 4px
}

.album-open h3 {
  margin: 17px 0 2px
}

.album-open>span {
  font-size: 12px;
  color: var(--lime)
}

.album-card>p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin: 10px 0 0
}

.album-detail-head {
  margin-top: 38px
}

.album-detail-head h3 {
  margin: 0
}

.cover {
  background: #111;
  min-height: 0
}

.cover>img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover
}

.track-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 10px
}

.tracks .track-row button {
  border: 0;
  flex: 1;
  min-width: 0
}

.track-row button img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0
}

.track-image-button {
  flex-shrink: 0;
  font-size: 12px;
  margin-right: 12px
}

.track-row button span:nth-child(2) {
  flex: 1
}

dialog {
  color: var(--text, #f3f3ed);
  background: var(--panel);
  border: 1px solid #795b45;
  border-radius: 8px;
  padding: 30px;
  width: min(540px, 90vw);
  max-height: 90vh
}

dialog::backdrop {
  background: #000b
}

dialog h2 {
  font-size: 28px;
  margin: 0
}

.dialog-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px
}

.dialog-heading button {
  background: none;
  border: 0;
  color: inherit;
  font-size: 30px;
  cursor: pointer
}

dialog form>label {
  display: block;
  margin: 16px 0;
  font-size: 14px
}

dialog input:not([type=file]),
dialog textarea {
  display: block;
  width: 100%;
  background: #121314;
  border: 1px solid #555;
  color: #eee;
  border-radius: 3px;
  padding: 10px;
  margin-top: 6px;
  font: inherit
}

dialog input[type=file] {
  display: block;
  max-width: 100%;
  margin-top: 10px
}

dialog button[type=submit] {
  background: var(--lime);
  color: #21160e
}

#storage-status {
  margin-top: 22px
}

#album-detail {
  scroll-margin-top: 24px
}

@media(max-width:760px) {
  .album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px
  }

  .album-toolbar {
    align-items: flex-start
  }

  .album-toolbar p {
    margin: 0
  }

  .album-toolbar button {
    flex-shrink: 0
  }

  .cover>img {
    max-height: 440px
  }

  .track-row {
    gap: 4px
  }

  .tracks .track-row button {
    gap: 10px;
    padding-left: 0
  }

  .track-image-button {
    margin-right: 0;
    padding: 8px
  }

  .track-row button img {
    width: 38px;
    height: 38px
  }
}

@media(max-width:420px) {
  .album-grid {
    grid-template-columns: 1fr
  }

  .album-toolbar {
    flex-direction: column;
    gap: 12px
  }
}

@media(prefers-reduced-motion:reduce) {
  .album-open img {
    transition: none
  }
}

/* Public hosting edition: editing is performed in dane/katalog.js. */
.video-card-description {
  display: block;
  padding: 0 15px 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}

.player>.track-comment {
  margin: 8px 0 28px;
  padding: 18px 20px;
  border-left: 2px solid var(--lime);
  background: rgba(216, 135, 53, .07);
  color: #e5d8cd;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
}

#add-album,
#edit-album,
#storage-status,
.player>.file-button,
.player>.local-note,
.track-image-button,
.video-bottom>.file-button,
.video-bottom .local-note {
  display: none !important
}

/* Social media in the contact section */
.contact-panel { flex-wrap: wrap; }
.social-block { flex: 0 0 100%; margin-top: 16px; }
.contact-panel .social-heading { max-width: none; margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; }
.social-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; color: inherit; text-decoration: none; transition: border-color .2s, background-color .2s; }
.social-link svg { width: 20px; height: 20px; flex: none; }
.social-link:hover, .social-link:focus-visible { border-color: var(--lime); background: rgba(216,135,53,.10); }

/* Links to selected film projects and the game soundtrack in the biography */
.biography a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.biography a:hover { color: #f3f3ed; }

/* Film player appears only after a thumbnail is selected. */
.video-frame[hidden], .video-bottom[hidden] { display: none !important; }
.video-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 38px; height: 38px; border: 1px solid #aaaead; border-radius: 50%; background: rgba(16,17,19,.8); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.video-close:hover, .video-close:focus-visible { color: var(--lime); border-color: var(--lime); }
.video-frame:fullscreen .video-close, .video-frame video:fullscreen ~ .video-close { display: none; }

/* Composer name in the hero eyebrow uses the site accent. */
.hero .composer-name { color: var(--lime); }

/* Close an album and return to its cover grid. */
.album-detail-head .album-close {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid #aaaead;
  border-radius: 50%;
  background: rgba(16,17,19,.8);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.album-detail-head .album-close:hover, .album-detail-head .album-close:focus-visible { color: var(--lime); border-color: var(--lime); }

/* Keep the longer headline on one line per word on small screens. */
.hero h1 { font-size: clamp(52px, 8vw, 118px); }

/* Clear, compact introduction centred on the composer. */
.hero {
  display: block;
  padding: clamp(54px, 8vw, 104px) 0;
}
.hero h1 {
  margin: 0;
  font-size: clamp(42px, 6.7vw, 88px);
  line-height: 1.06;
  letter-spacing: -.05em;
}
.hero .composer-name { display: block; color: var(--lime); }
.hero .hero-subtitle {
  display: block;
  margin-top: 16px;
  color: #f3f3ed;
  font: 500 clamp(17px, 2.1vw, 27px)/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Composer name and portfolio sit in one calm line on wider screens. */
.hero { padding: clamp(48px, 6vw, 76px) 0; }
.hero h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(16px, 2vw, 28px);
  row-gap: 8px;
  font-size: inherit;
  line-height: 1.15;
  letter-spacing: normal;
}
.hero .composer-name {
  display: inline;
  white-space: nowrap;
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 400;
  letter-spacing: -.04em;
}
.hero .hero-subtitle {
  display: inline;
  margin: 0;
  white-space: nowrap;
  color: #969b98;
  font: 400 clamp(22px, 2.4vw, 31px)/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .02em;
  text-transform: none;
}

/* Selected section headings use the accent color. */
#muzyka .section-head h2,
#obraz .section-head h2,
#o-mnie .section-head h2 { color: var(--lime); }

#kontakt .section-head h2 { color: var(--lime); }

/* Pokaz zdjęć przy biografii */
.bio-slideshow-frame { position: relative; aspect-ratio: 4 / 5; background: #111214; overflow: hidden; }
.about-portrait.bio-slideshow img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; transition: opacity .35s ease; }
.bio-slideshow img.is-changing { opacity: 0; }
.bio-slideshow button { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 48px; border: 1px solid #ffffff77; border-radius: 4px; background: #101113b8; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.bio-slideshow button:hover, .bio-slideshow button:focus-visible { border-color: var(--lime); color: var(--lime); }
.bio-slide-prev { left: 10px; }
.bio-slide-next { right: 10px; }
.bio-slideshow figcaption { text-align: center; }
@media (prefers-reduced-motion: reduce) { .about-portrait.bio-slideshow img { transition: none; } }

/* Powiększanie zdjęcia ponad treścią strony */
.bio-slideshow-frame #bio-slide { cursor: zoom-in; }
.bio-slideshow-frame #bio-slide:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.bio-lightbox { position: fixed; width: min(96vw, 1500px); max-width: none; max-height: none; height: min(94dvh, 1000px); padding: 0; border: 1px solid #777; background: #101113; color: #fff; overflow: hidden; }
.bio-lightbox::backdrop { background: rgba(0,0,0,.88); }
.bio-lightbox-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 0; padding: 58px 52px 44px; }
.bio-lightbox img { display: block; max-width: 100%; max-height: calc(min(94dvh, 1000px) - 102px); width: auto; height: auto; object-fit: contain; flex: 0 1 auto; }
.bio-lightbox button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff77; border-radius: 50%; background: #101113c9; color: #fff; font-size: 30px; cursor: pointer; }
.bio-lightbox button:hover, .bio-lightbox button:focus-visible { color: var(--lime); border-color: var(--lime); }
.bio-lightbox-close { top: 12px; right: 12px; }
.bio-lightbox-close::before { content: '×'; }
.bio-lightbox-prev { top: 50%; left: 8px; transform: translateY(-50%); }
.bio-lightbox-next { top: 50%; right: 8px; transform: translateY(-50%); }
.bio-lightbox-count { position: absolute; bottom: 12px; font-size: 13px; color: #ddd; }
@media (max-width: 600px) {
  .bio-lightbox { width: 100vw; height: 100dvh; border: 0; }
  .bio-lightbox-content { padding: 60px 12px 48px; }
  .bio-lightbox img { max-height: calc(100dvh - 108px); }
  .bio-lightbox-prev { left: 4px; }
  .bio-lightbox-next { right: 4px; }
}

/* Miniatury są czarno-białe; kolor pojawia się podczas wskazania. */
.album-open img,
.video-thumbnail img,
.tracks .track-row button img {
  filter: grayscale(1);
  transition: filter .35s ease;
}
.album-open:hover img,
.album-open:focus-visible img,
.video-card:hover .video-thumbnail img,
.video-card:focus-visible .video-thumbnail img,
.tracks .track-row button:hover img,
.tracks .track-row button:focus-visible img {
  filter: grayscale(0);
}
/* Fotografie w bio są zawsze kolorowe, również przed kliknięciem. */
.bio-slideshow-frame #bio-slide { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .album-open img, .video-thumbnail img, .tracks .track-row button img { transition: none; }
}

/* Przełącznik powtarzania bieżącego utworu */
#loop-track { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #795b45; border-radius: 50%; background: transparent; color: #c5c7c1; font-size: 26px; line-height: 1; }
#loop-track:hover, #loop-track:focus-visible, #loop-track[aria-pressed="true"] { border-color: var(--lime); color: var(--lime); }
#loop-track[aria-pressed="true"] { background: rgba(216,135,53,.12); }