:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #171717;
}
@font-face {
  font-family: "Dresden";
  src: url("assets/KCDresden.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Smoke Shop";
  src: url("assets/KCSmokeShop.otf") format("opentype");
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { position: relative; height: 100svh; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.site-header {
  position: fixed;
  z-index: 30;
  top: clamp(20px, 3.3vh, 36px);
  left: clamp(22px, 4vw, 64px);
  right: clamp(22px, 4vw, 64px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
}
.site-header nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 2vw, 28px); white-space: nowrap; }
.site-header nav button {
  position: relative;
  z-index: 0;
  isolation: isolate;
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: clamp(11px, .9vw, 13px);
  font-weight: 400;
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
}
.site-header nav button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  background: url("assets/logo-star-print-clean.png") center / contain no-repeat;
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: hue-rotate(4deg) saturate(.72) brightness(.78);
  pointer-events: none;
}
.site-header nav button:hover::before,
.site-header nav button:focus-visible::before,
.site-header nav button.has-visible-panel::before { opacity: .62; }
.site-header nav button:nth-child(1)::before { filter: hue-rotate(-25deg) saturate(.88) brightness(.82); }
.site-header nav button:nth-child(2)::before { filter: hue-rotate(-15deg) saturate(.72) brightness(.74); }
.site-header nav button:nth-child(3)::before { filter: hue-rotate(-5deg) saturate(.96) brightness(.86); }
.site-header nav button:nth-child(4)::before { filter: hue-rotate(7deg) saturate(.78) brightness(.72); }
.site-header nav button:nth-child(5)::before { filter: hue-rotate(17deg) saturate(.9) brightness(.84); }
.site-header nav button:nth-child(6)::before { filter: hue-rotate(27deg) saturate(.76) brightness(.78); }
.site-header nav button:hover { color: inherit; }
.page { display: grid; min-height: 100svh; place-items: center; padding: 72px 24px 28px; }
.hero-image { position: relative; display: grid; place-items: center; margin: 0; }
.hero-image > img:first-child {
  display: block;
  width: auto;
  height: auto;
  max-width: min(86vw, 900px);
  max-height: calc(100svh - 140px);
  object-fit: contain;
}
.window-layer { position: fixed; z-index: 10; inset: 0; overflow: hidden; pointer-events: none; }
.floating-window {
  --panel-blue: #0b25b9;
  --star-filter: hue-rotate(4deg) saturate(.72) brightness(.78);
  --panel-size: 350px;
  --star-width: 100%;
  --star-height: 100%;
  --star-rotation: 0deg;
  position: absolute;
  display: flex;
  flex-direction: column;
  width: min(var(--panel-size), calc(100vw - 24px), calc(100dvh - 24px));
  height: min(var(--panel-size), calc(100vw - 24px), calc(100dvh - 24px));
  overflow: visible;
  background: transparent;
  color: #fff;
  pointer-events: auto;
}
.floating-window::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--panel-blue);
  mask-image: url("assets/logo-star-print-clean.png");
  mask-mode: alpha;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: var(--star-width) var(--star-height);
  filter: var(--star-filter) drop-shadow(6px 8px 0 rgba(20, 30, 95, .25));
  transform: rotate(calc(var(--star-rotation) + var(--motion-rotation, 0deg)));
  transform-origin: center;
  pointer-events: none;
}
.floating-window[data-panel-kind="music"] { --star-filter: hue-rotate(-25deg) saturate(.88) brightness(.82); --star-width: 101.5%; --star-height: 99%; --star-rotation: -11deg; }
.floating-window[data-panel-kind="gigs"] { --star-filter: hue-rotate(-15deg) saturate(.72) brightness(.74); --star-width: 99%; --star-height: 101.5%; --star-rotation: 8deg; }
.floating-window[data-panel-kind="socials"] { --star-filter: hue-rotate(-5deg) saturate(.96) brightness(.86); --star-width: 102%; --star-height: 98.5%; --star-rotation: -16deg; }
.floating-window[data-panel-kind="enquire"] { --star-filter: hue-rotate(7deg) saturate(.78) brightness(.72); --star-width: 98.5%; --star-height: 102%; --star-rotation: 13deg; }
.floating-window[data-panel-kind="other"] { --star-filter: hue-rotate(17deg) saturate(.9) brightness(.84); --star-width: 100%; --star-height: 98%; --star-rotation: -5deg; }
.window-titlebar {
  position: absolute;
  top: 36%;
  left: 22%;
  right: 22%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 36px;
  padding: 0;
  z-index: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.window-titlebar:active { cursor: grabbing; }
.window-body {
  position: absolute;
  inset: 0 18%;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: visible;
  padding: 0;
  z-index: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}
.window-body p { margin: 0; }
.window-body p:last-child { margin-bottom: 0; }
.placeholder-row { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .35); }
.placeholder-row:first-child { padding-top: 0; border-top: 0; }
.panel-link { display: block; width: 100%; padding: 4px 0; color: inherit; font: inherit; text-align: center; text-decoration: none; }
.panel-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.full-mix-player { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.full-mix-audio { display: none; }
.music-toggle { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; pointer-events: auto; transition: opacity 160ms; }
.music-toggle:hover { opacity: .78; }
.music-toggle:focus-visible { outline: 1px dashed rgba(255, 255, 255, .8); outline-offset: 4px; }
.music-toggle svg { display: block; width: 40px; height: 40px; overflow: visible; }
.music-icon-play, .music-icon-pause { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.music-icon-play, .music-icon-pause { display: none; }
.music-icon-play { fill: currentColor; stroke: none; }
.music-toggle:not(.is-playing) .music-icon-play { display: block; }
.music-toggle.is-playing .music-icon-pause { display: block; }
.window-body--music { inset: 0; display: grid; place-items: center; overflow: visible; padding: 0; }
@media (max-width: 620px) {
  .site-header { top: 20px; left: 18px; right: 18px; }
  .site-header nav { justify-content: space-between; gap: 8px; }
  .site-header nav button { font-size: 10px; }
  .page { padding: 68px 14px 20px; }
  .hero-image > img:first-child { max-width: 92vw; max-height: calc(100svh - 120px); }
  .floating-window { width: min(300px, calc(100vw - 24px), calc(100dvh - 24px)); height: min(300px, calc(100vw - 24px), calc(100dvh - 24px)); }
  .window-titlebar { left: 22%; right: 22%; }
  .window-body { left: 24%; right: 24%; font-size: 9px; line-height: 1.25; }
}