/* RED FEED – vinyl: base, hero, gigs, videos, gallery, band, footer, dialogs */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

:root { --cream: #efe6d2; --paper: #f7f0e1; --vinyl: #111112; --red: #d7262e; --mustard: #e0a526; --brown: #2a1a12; --soft: #7a6553; --ease: cubic-bezier(.2, .9, .2, 1);
  /* paper grain: a tiny tile rendered once by the browser, not an overlay that repaints while scrolling */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .1 0 0 0 0 .07 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
body { background: var(--grain), var(--cream); color: var(--brown); font: 18px/1.55 "DM Sans", system-ui, sans-serif; }
::selection { background: var(--red); color: var(--paper); }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
h1, h2, .brand { font-family: Righteous, "DM Sans", sans-serif; font-weight: 400; }
.skip { position: absolute; z-index: 100; left: 12px; top: -80px; padding: 10px 16px; border-radius: 8px; background: var(--brown); color: var(--cream); }
.skip:focus { top: 12px; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 18px; }
.brand { font-size: 26px; text-decoration: none; } .brand b { color: var(--red); font-weight: 400; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 6px; font-weight: 700; }
.top nav a { position: relative; padding: 6px 10px; border-radius: 999px; text-decoration: none; transition: background .2s, color .2s; }
.top nav a:hover { background: var(--brown); color: var(--cream); }
[hidden] { display: none !important; }

/* record parts (hero, deck, gallery, band) */
.grooves { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.05) 31.5% 32%, transparent 32.5% 60%, rgba(255,255,255,.05) 60.5% 61%, transparent 61.5%),
    repeating-radial-gradient(circle, #141415 0 1px, #1d1d1f 1px 2.6px), var(--vinyl); box-shadow: 0 0 0 2px #000 inset; }
.lbl { position: absolute; inset: 33%; border-radius: 50%; background: var(--red); color: var(--paper); display: grid; place-content: center; text-align: center; gap: 2px; box-shadow: 0 0 0 4px rgba(0,0,0,.25) inset; }
.lbl.m { background: var(--mustard); color: var(--brown); }
.lbl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8%; height: 8%; margin: -4% 0 0 -4%; border-radius: 50%; background: var(--cream); }
.lbl b { font: clamp(10px, 1.6vw, 18px)/1 Righteous, sans-serif; letter-spacing: .04em; }
.lbl span { font: 600 clamp(7px, .9vw, 11px)/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.sheen { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 30deg, transparent 0 8%, rgba(255,255,255,.13) 12%, transparent 18% 50%, rgba(255,255,255,.1) 56%, transparent 62%); }
.spin { position: absolute; inset: 0; border-radius: 50%; animation: spin 1.8s linear infinite; animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 999px; font-weight: 700; text-decoration: none; background: var(--brown); color: var(--cream); transition: transform .2s; }
.btn.alt { background: transparent; color: var(--brown); box-shadow: inset 0 0 0 2px var(--brown); }
.btn:hover { transform: translateY(-2px); }
.btn::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, var(--cream) 0 18%, var(--red) 20% 45%, #111 47%); }
.btn.alt::before { background: radial-gradient(circle, var(--cream) 0 18%, var(--mustard) 20% 45%, #111 47%); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* hero: record slides out of the sleeve, the pair tilts toward the pointer */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 30px; align-items: center; padding-block: 30px 90px; }
.hero h1 { font-size: clamp(64px, 11vw, 150px); line-height: .86; }
.hero h1 span { display: block; color: var(--red); }
.tag { font-size: clamp(20px, 2.2vw, 26px); margin-top: 18px; max-width: 22em; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--soft); font: 500 14px/1.4 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.vin { position: relative; aspect-ratio: 1.45; perspective: 1200px; }
.vin-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s var(--ease); will-change: transform; }
.vin.tilting .vin-in { transition-duration: .15s; }
.vin .sleeve { position: absolute; left: 0; top: 0; width: 69%; aspect-ratio: 1; transform: translateZ(40px); box-shadow: 12px 18px 40px rgba(42,26,18,.35); overflow: hidden; }
.vin .sleeve img { width: 100%; height: 100%; object-fit: cover; }
.glare { position: absolute; inset: -50%; background: radial-gradient(circle, rgba(255,255,255,.3), transparent 34%); opacity: 0; transition: opacity .4s; will-change: transform; }
.vin.tilting .glare { opacity: 1; }
.vin .disc { position: absolute; left: 2%; top: 2%; width: 65%; aspect-ratio: 1; translate: 44% 0; transition: translate .8s var(--ease); }
.vin:hover .disc { translate: 54% 0; }
.js .vin .disc { animation: slide 1.4s .4s var(--ease) backwards; }
@keyframes slide { from { translate: 0 0; } }
.vin .disc .rot { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.vin.run .spin, html:not(.js) .vin .spin { animation-play-state: running; }

/* sections */
.sec { padding-block: 80px; }
.sec h2 { font-size: clamp(40px, 6vw, 76px); line-height: .95; margin-bottom: 10px; }
/* numbered like tracks on a sleeve: 01 / Koncerty, 02 / Videa … (hidden sections don't count) */
main { counter-reset: sec; }
.sec h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero) " /"; display: block; margin-bottom: 10px; font: 500 14px/1 "DM Mono", monospace; letter-spacing: .16em; color: var(--red); }
.sub { color: var(--soft); margin-bottom: 34px; } .sub a { color: var(--red); }
.subhead { font: 500 15px/1.2 "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 8px 0 18px; }
.subhead small { margin-left: 10px; color: var(--soft); font-size: 13px; letter-spacing: .04em; text-transform: none; }
.js [data-r] { opacity: 0; translate: 0 22px; transition: opacity .6s var(--d, 0s), translate .7s var(--d, 0s) var(--ease); }
.js [data-r].in { opacity: 1; translate: none; }
.empty { padding: 26px; border: 2px dashed #cdbfa6; border-radius: 10px; color: var(--soft); font-size: 20px; } .empty a { color: var(--red); }
.gig-open { padding: 0; border: 0; background: none; font: inherit; text-align: left; }
.gig-open:hover { color: var(--red); }

/* upcoming gigs: a new release in its sleeve, the record peeks out on hover */
.ups { display: grid; gap: 26px; margin-bottom: 64px; }
.up { position: relative; display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); gap: 32px; align-items: center; padding: 24px; background: var(--paper); border-radius: 10px; box-shadow: 0 18px 40px rgba(42,26,18,.16); }
.up-sleeve { position: relative; aspect-ratio: 1; isolation: isolate; }
.up-sleeve::before { content: ""; position: absolute; z-index: -1; inset: 3%; border-radius: 50%; transition: translate .6s cubic-bezier(.3, 1.4, .5, 1);
  background: radial-gradient(circle, var(--cream) 0 2%, var(--red) 2.5% 17%, transparent 17.5%), repeating-radial-gradient(circle, #141415 0 1px, #1f1f21 1px 2.6px); }
.up:hover .up-sleeve::before, .up:focus-within .up-sleeve::before { translate: 30% 0; }
.up-art { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; box-shadow: 6px 10px 22px rgba(42,26,18,.3); }
.up-art.txt, .art.txt { display: grid; place-content: center; text-align: center; padding: 10px; background: var(--red); color: var(--cream); font: 26px/1 Righteous, sans-serif; }
.up-art.txt.m, .art.txt.m { background: var(--mustard); color: var(--brown); }
.sticker { position: absolute; top: -14px; left: -14px; width: 66px; height: 66px; border-radius: 50%; display: grid; place-content: center; background: var(--mustard); color: var(--brown); font: 16px Righteous, sans-serif; rotate: -14deg; box-shadow: 0 6px 14px rgba(42,26,18,.3); }
.up-when { font: 500 15px/1.3 "DM Mono", monospace; color: var(--red); text-transform: uppercase; letter-spacing: .06em; }
.up h3 { font: clamp(28px, 3.4vw, 44px)/1 Righteous, sans-serif; margin: 8px 0 6px; }
.up-place { font-weight: 700; } .up-note { color: var(--soft); margin-top: 6px; white-space: pre-line; }
.up-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* past gigs: crate digging – sleeves flip up to face you as they scroll in */
.crate { display: grid; gap: 18px; perspective: 1100px; }
.sl { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 14px; background: var(--paper); border-radius: 6px;
  box-shadow: 0 14px 30px rgba(42,26,18,.16); transform-origin: 50% 100%; transition: translate .3s var(--ease); }
/* the deeper hover shadow fades in as opacity instead of animating box-shadow (which repaints every frame) */
.sl::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; box-shadow: 0 24px 40px rgba(42,26,18,.24); opacity: 0; transition: opacity .3s; }
.sl:hover { translate: 0 -4px; } .sl:hover::before { opacity: 1; }
.sl .gig-open::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.sl .art { width: 150px; aspect-ratio: 1; object-fit: cover; border-radius: 3px; background: var(--red); }
.sl time { font: 500 14px/1 "DM Mono", monospace; color: var(--red); letter-spacing: .08em; } .sl h3 { font: 28px/1.05 Righteous, sans-serif; margin: 6px 0; } .sl p { color: var(--soft); }
.sl .cat { font: 500 13px/1 "DM Mono", monospace; color: var(--soft); writing-mode: vertical-rl; letter-spacing: .14em; text-transform: uppercase; }
.sda .sl { animation: flipup linear both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
@keyframes flipup { from { transform: rotateX(72deg); opacity: .25; } to { transform: none; opacity: 1; } }

/* videos: a dark screening room */
.vids-sec { background: #1c120d; color: var(--cream); } .vids-sec .sub { color: #cbb9a3; }
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 30px; }
.vid-btn { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.vid-frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #000; box-shadow: 0 20px 40px rgba(0,0,0,.45); }
.vid-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05); transition: transform .7s var(--ease), filter .4s; }
.vid-btn:hover img, .vid-btn:focus-visible img { transform: scale(1.06); filter: none; }
.vid-frame iframe, .vid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vid-disc { position: absolute; left: 50%; top: 50%; width: 78px; aspect-ratio: 1; margin: -39px 0 0 -39px; border-radius: 50%; box-shadow: 0 10px 24px rgba(0,0,0,.55); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
  background: radial-gradient(circle, var(--red) 0 36%, transparent 37%), repeating-radial-gradient(circle, #141415 0 1px, #232325 1px 2.6px); }
.vid-disc::after { content: ""; position: absolute; left: 53%; top: 50%; translate: -50% -50%; border-left: 17px solid var(--cream); border-block: 11px solid transparent; }
.vid-btn:hover .vid-disc, .vid-btn:focus-visible .vid-disc { transform: scale(1.14) rotate(-8deg); }
.vid-ph { display: grid; place-content: center; height: 100%; padding: 20px; text-align: center; font: 26px/1.1 Righteous, sans-serif; color: var(--cream); background: repeating-radial-gradient(circle at 50% 130%, #2a1a12 0 14px, #3a2a20 14px 28px); }
.vid h3 { font: 24px/1.15 Righteous, sans-serif; margin-top: 14px; } .vid time { font: 500 13px/1 "DM Mono", monospace; color: var(--mustard); letter-spacing: .08em; }

/* gallery shelf: hover a sleeve and the 7" comes out */
.shelf { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 70px 4px 26px; scrollbar-width: thin; scrollbar-color: var(--red) rgba(42,26,18,.12); }
.shelf::-webkit-scrollbar { height: 8px; } .shelf::-webkit-scrollbar-track { background: rgba(42,26,18,.12); border-radius: 4px; } .shelf::-webkit-scrollbar-thumb { background: var(--red); border-radius: 4px; }
.item { position: relative; flex: 0 0 clamp(220px, 30vw, 340px); scroll-snap-align: start; }
.ph { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.item .d7 { position: absolute; left: 6%; right: 6%; top: 0; aspect-ratio: 1; border-radius: 50%; translate: 0 -9%; transition: translate .45s cubic-bezier(.3, 1.4, .5, 1); }
.item:hover .d7, .item:focus-within .d7 { translate: 0 -26%; }
.item img { position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 14px 28px rgba(42,26,18,.25); transition: translate .3s var(--ease); }
.item:hover img { translate: 0 4px; }

/* band */
.singles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.single { text-align: center; }
.single .rec7 { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin-inline: auto; }
.single .lbl { inset: 26%; overflow: hidden; } .single .lbl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.single .spin { animation-duration: 6s; } .single.run .spin { animation-play-state: running; }
.single h3 { font: 30px/1.1 Righteous, sans-serif; margin-top: 18px; } .single p { color: var(--red); font-weight: 700; }
.bio { font-size: 22px; max-width: 34em; margin-bottom: 40px; }

.foot { position: relative; overflow: hidden; background: var(--brown); color: var(--cream); padding-block: 80px 0; }
.wordmark { margin-top: 40px; font: clamp(80px, 21vw, 300px)/.78 Righteous, sans-serif; white-space: nowrap; text-align: center; color: transparent; -webkit-text-stroke: 2px rgba(239,230,210,.14); translate: 0 12%; user-select: none; }
.foot h2 { font-size: clamp(40px, 6vw, 76px); } .foot p { color: #cbb9a3; max-width: 36em; margin: 12px 0 22px; }
.mail { font: clamp(22px, 3.6vw, 40px)/1.2 Righteous, sans-serif; color: var(--mustard); text-decoration: none; word-break: break-all; }
.soc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .soc a { display: block; padding: 8px 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px #6b5443; text-decoration: none; } .soc a:hover { background: var(--red); box-shadow: none; }
.small { margin-top: 30px; color: #8d7866; font-size: 14px; }

/* dialogs: gig sleeve + photo lightbox */
dialog { padding: 0; border: 0; background: none; color: inherit; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(20, 12, 8, .84); backdrop-filter: blur(4px); }
dialog[open] { display: grid; place-items: center; width: 100vw; height: 100vh; height: 100dvh; }
.x, .lb-prev, .lb-next { position: fixed; display: grid; place-content: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--cream); color: var(--brown); font-size: 30px; line-height: 1; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.x { right: 16px; top: 16px; } .lb-prev { left: 16px; top: calc(50% - 26px); } .lb-next { right: 16px; top: calc(50% - 26px); }
.gig-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; width: min(980px, 100vw - 32px); max-height: calc(100dvh - 90px); overflow: auto;
  padding: 30px; border-radius: 12px; background: var(--paper); color: var(--brown); animation: sleeve-in .55s var(--ease); }
.gig-in .x { position: absolute; width: 42px; height: 42px; right: 12px; top: 12px; font-size: 24px; background: var(--brown); color: var(--cream); }
.gig-art { position: relative; isolation: isolate; }
.gig-art::before { content: ""; position: absolute; z-index: -1; inset: 4%; border-radius: 50%; animation: peek .9s .25s var(--ease) both;
  background: radial-gradient(circle, var(--cream) 0 2%, var(--red) 2.5% 17%, transparent 17.5%), repeating-radial-gradient(circle, #141415 0 1px, #1f1f21 1px 2.6px); }
.gig-art img, .gig-art .art { width: 100%; border-radius: 4px; box-shadow: 8px 14px 28px rgba(42,26,18,.3); }
.gig-art .art { aspect-ratio: 1; }
.gig-when { font: 500 15px/1.3 "DM Mono", monospace; color: var(--red); text-transform: uppercase; letter-spacing: .06em; }
.gig-txt h3 { font: clamp(30px, 4vw, 48px)/1 Righteous, sans-serif; margin: 10px 0 8px; }
.gig-place { font-weight: 700; } .gig-note { color: var(--soft); margin-top: 8px; white-space: pre-line; }
.gig-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
@keyframes sleeve-in { from { opacity: 0; transform: translateY(40px) rotateX(18deg); } }
@keyframes peek { from { translate: 0 0; } to { translate: 0 -14%; } }
.lb figure { max-width: min(92vw, 1400px); }
.lb img { max-height: 82vh; max-height: 82dvh; width: auto; margin-inline: auto; border-radius: 6px; box-shadow: 0 30px 60px rgba(0,0,0,.5); animation: pop .4s var(--ease); touch-action: pan-y; }
.lb figcaption { margin-top: 12px; color: var(--cream); text-align: center; font-size: 16px; }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

/* 404 */
.nf main { min-height: 100vh; display: grid; place-content: center; gap: 16px; text-align: center; }
.nf h1 { font-size: clamp(56px, 10vw, 120px); line-height: .9; } .nf h1 span { display: block; color: var(--red); }
.nf .kicker { font: 500 16px "DM Mono", monospace; letter-spacing: .2em; color: var(--red); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; } .vin { width: min(100%, 520px); }
  .up { grid-template-columns: 1fr; gap: 20px; padding: 18px; } .up-sleeve { width: min(100%, 300px); }
  .sl { grid-template-columns: 96px minmax(0, 1fr); } .sl .art { width: 96px; } .sl .cat { display: none; } .sl h3 { font-size: 22px; }
  .gig-in { grid-template-columns: 1fr; gap: 18px; padding: 18px; } .gig-art { width: min(100%, 360px); }
}
@media (max-width: 560px) { .singles { grid-template-columns: 1fr; } .lb-prev, .lb-next { top: auto; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sda .sl { animation: none; }
}