/* Tachometerpunk.ch — Entwurf 3, nach Figma-Design
   One-Pager: alles above the fold, klickbare Sticker öffnen Lightboxes. */

@font-face{ font-family:'Bungee'; src:url('../fonts/bungee-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Oswald'; src:url('../fonts/oswald-var.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Literata'; src:url('../fonts/literata-var.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Literata'; src:url('../fonts/literata-italic.woff2') format('woff2'); font-weight:400 700; font-style:italic; font-display:swap; }
@font-face{ font-family:'Edu VIC WA NT Hand'; src:url('../fonts/edu-vic-hand.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --stage-bg:#0b0a09;
  --paper:#efe6d2;
  --paper-2:#f8f2e5;
  --rule:#b9c9dd;
  --ink:#211c16;
  --ink-soft:#5a4f43;
  --red:#d5401e;
  --red-ink:#a5300f;
  --teal:#2c6f63;
  --mustard:#de9f35;
  --denim:#375c74;
  --shadow:rgba(0,0,0,.55);
  --focus:#8fb8ff;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--stage-bg);
  color:var(--ink);
  font-family:'Literata',Georgia,serif;
  line-height:1.6;
  overflow:hidden;
  cursor:url('../assets/cursor-knochen.png') 6 14, auto;
}
@media (max-width:760px){ body{overflow-y:auto; overflow-x:hidden;} }

img{max-width:100%; display:block;}
button{font:inherit; color:inherit; background:none; border:none; padding:0;}
a{color:var(--mustard);}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--paper); color:var(--ink);
  padding:.6rem 1rem; z-index:500; font-family:'Oswald',sans-serif;
}
.skip-link:focus{left:1rem; top:1rem;}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:3px;}
::selection{background:var(--mustard); color:#241d15;}

/* ---------- stage / canvas (the notebook, pinned collage) ---------- */
.stage{
  position:relative;
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:20px 1vw; box-sizing:border-box;
}
.stage > .circus-bg{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
  pointer-events:none; user-select:none; z-index:0;
}
/* book height fills the viewport minus a fixed 20px top/bottom margin;
   width follows from its own aspect ratio, capped so it never blows out sideways */
.canvas{
  position:relative; z-index:1;
  height:min(calc(100vh - 40px), calc(97vw / 1.509));
  height:min(calc(100dvh - 40px), calc(97vw / 1.509));
  aspect-ratio:5477/3630;
  margin:auto;
  container-type:inline-size;
}
.canvas > .book-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  pointer-events:none; user-select:none; z-index:1;
}

.brandmark{
  position:absolute; left:67%; top:2%; width:26%; transform:rotate(3deg);
  z-index:20; pointer-events:none;
}

/* handwritten section captions, matching the Figma reference exactly */
.caption{
  position:absolute; z-index:15; pointer-events:none; user-select:none;
  font-family:'Edu VIC WA NT Hand',cursive; font-weight:300; color:#6b6459;
  /* fluid, tied to the book's own width (not the viewport) via container query
     units — so the caption shrinks in lockstep with the book instead of
     staying a fixed px size and crowding into the artwork on small screens */
  font-size:1.69cqw; line-height:1.25;
}
/* no caption is underlined by default — each one draws an underline, left to
   right, only while its matching image is hovered/focused. Built as a ::after
   bar (not text-decoration) so it can be animated via scaleX; :has() reaches
   forward to the sticker since captions sit earlier in the DOM than the
   stickers they label. */
.caption::after{
  content:""; position:absolute; left:0; bottom:-.15em; width:100%; height:2px;
  background:#8b8477; transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease-out;
}
.cap-band:has(~ .sk-peter:hover)::after, .cap-band:has(~ .sk-peter:focus-visible)::after,
.cap-band:has(~ .sk-ricardo:hover)::after, .cap-band:has(~ .sk-ricardo:focus-visible)::after,
.cap-band:has(~ .sk-lucky:hover)::after, .cap-band:has(~ .sk-lucky:focus-visible)::after,
.cap-band:has(~ .sk-tapas:hover)::after, .cap-band:has(~ .sk-tapas:focus-visible)::after,
.cap-band:has(~ .sk-tina:hover)::after, .cap-band:has(~ .sk-tina:focus-visible)::after,
.cap-band:has(~ .sk-selma:hover)::after, .cap-band:has(~ .sk-selma:focus-visible)::after,
.cap-mitmachen:has(~ .sk-mitmachen:hover)::after, .cap-mitmachen:has(~ .sk-mitmachen:focus-visible)::after,
.cap-angelina:has(~ .sk-angelina:hover)::after, .cap-angelina:has(~ .sk-angelina:focus-visible)::after,
.cap-petrareto:has(~ .sk-ueber:hover)::after, .cap-petrareto:has(~ .sk-ueber:focus-visible)::after,
.cap-buch:has(~ .sk-buch:hover)::after, .cap-buch:has(~ .sk-buch:focus-visible)::after,
.cap-musik:has(~ .sk-musik:hover)::after, .cap-musik:has(~ .sk-musik:focus-visible)::after{
  transform:scaleX(1);
}
@media (prefers-reduced-motion: reduce){
  .caption::after{ transition:none; }
}
.cap-band{ left:33%; top:9.5%; transform:rotate(-1deg); }
.cap-mitmachen  { left:11.796%; top:51.788%; width:max-content; transform:rotate(-10deg); }
.cap-angelina   { left:38.067%; top:57.395%; transform:rotate(10deg); }
.cap-petrareto  { left:50.905%; top:13.279%; transform:rotate(-7deg); }
.cap-buch       { left:69%; top:29%; transform:rotate(6deg); }
.cap-musik      { left:51%; top:50.5%; transform:rotate(-5deg); }

/* decorative, non-interactive stickers */
.deco{ position:absolute; pointer-events:none; user-select:none; z-index:5; }
.deco-klecks{ left:36.5%; top:81.857%; width:9%; }
.deco-anarchie{ left:83%; top:82%; width:5%; }
.deco-rights{ left:75%; top:81.5%; width:5.5%; }
.deco-pflaster{ left:58%; top:16.5%; width:5.5%; transform:rotate(18deg); z-index:12; }
.deco-pfeil-musik{ left:51.875%; top:56.875%; width:1.75%; transform:rotate(2deg); }
.deco-pfeil-mitmachen{ left:26.463%; top:55.646%; width:3.5%; transform:rotate(-4deg); z-index:11; }

/* ---------- clickable stickers ---------- */
.sticker{
  position:absolute; z-index:10; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.3em;
  transform-origin:center center;
}
.sticker img{
  width:100%;
}
.sticker .tlabel{
  font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(.55rem, 1vw, .85rem);
  color:var(--paper); background:var(--ink); padding:.15em .55em;
  border-radius:999px; white-space:nowrap;
}

/* repositioned to eliminate bounding-box overlap between the (now much larger)
   band stickers — overlap was silently swallowing clicks on stickers whose
   transparent image margin sat under a later, higher-stacked neighbour */
.sk-peter  { left:11.479%; top:8.401%; width:12.96%; }
.sk-ricardo{ left:24.796%; top:14.533%;  width:10.8%; }
.sk-lucky  { left:37.442%; top:14.574%;   width:10.8%; }
.sk-tapas  { left:10.358%; top:27.194%; width:14.58%; }
.sk-selma  { left:33.715%; top:31.098%;  width:14.58%; }
.sk-tina   { left:23.264%; top:30.696%; width:10.37%; }

.sk-angelina{ left:30.485%;  top:55.144%; width:19.98%; }
.sk-mitmachen{ left:11.988%; top:61.996%; width:15%; }
.sk-ueber   { left:51.07%; top:18.935%; width:10%; }
.sk-buch    { left:67.801%;  top:38.051%; width:15%; }
.sk-musik   { left:51.98%; top:57.46%; width:21%; }

/* record spin rig: outer = hover scale/tilt (GSAP), inner = continuous spin (GSAP) */
.record-spin{ width:100%; }

/* ---------- lightboxes: speech-bubble card, IBM Plex Mono ---------- */
/* position (top/left) is set inline by JS to anchor the popup near whatever
   sticker triggered it; --tail-x and .tail-bottom follow along so the
   triangle always points back at that sticker. */
dialog.lightbox{
  border:1px solid var(--ink); border-radius:20px; padding:0; width:min(720px,92vw);
  max-height:86vh; max-height:86dvh; background:#fff; overflow:visible;
  margin:0; position:fixed; top:0; left:0; z-index:1000;
  box-shadow:0 0 30px 10px rgba(0,0,0,.22);
}
dialog.lightbox::backdrop{ background:transparent; }
/* speech-bubble tail: a rotated square, sitting on top of the card so its
   opaque fill hides the seam in the card's own border at that edge. */
dialog.lightbox::before{
  content:""; position:absolute; left:var(--tail-x, 50%); top:-13px;
  width:26px; height:26px; background:#fff;
  border-top:1px solid var(--ink); border-left:1px solid var(--ink);
  transform:translateX(-50%) rotate(45deg);
  z-index:2;
}
/* flipped variant: popup sits above its trigger, tail points down instead */
dialog.lightbox.tail-bottom::before{
  top:auto; bottom:-13px;
  border-top:none; border-left:none;
  border-bottom:1px solid var(--ink); border-right:1px solid var(--ink);
}
.lb-page{
  padding:2.2rem clamp(1.4rem,4vw,2.4rem) 2rem; max-height:86vh; max-height:86dvh;
  overflow-y:auto; position:relative;
  font-family:'IBM Plex Mono',monospace; color:var(--ink);
}
.lb-close{
  position:sticky; float:right; top:0; margin-left:1rem;
  width:2.2rem; height:2.2rem; border-radius:50%; border:2px solid var(--ink);
  background:var(--ink); color:#fff; font-size:1.05rem; line-height:1; font-family:'IBM Plex Mono',monospace;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .15s ease;
}
.lb-close:hover, .lb-close:focus-visible{ transform:translateY(-2px); }

.lb-page > h2{
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:clamp(1.6rem,3.6vw,2.1rem);
  color:var(--ink); margin:0 0 1.6rem; line-height:1.1;
}
.lb-head{ display:flex; align-items:flex-start; gap:1.6rem; flex-wrap:wrap; }
.lb-head img{ width:clamp(96px,20vw,150px); flex:none; }
.lb-meta .k{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.95rem; margin:0 0 .1rem; }
.lb-meta .v{ font-family:'IBM Plex Mono',monospace; color:var(--ink-soft); margin:0 0 .8rem; }
.lb-bio{ margin-top:1.1rem; font-size:.92rem; line-height:1.6; }

.lb-page p{ font-size:.92rem; line-height:1.6; }
.lb-page .scribble{ font-family:'IBM Plex Mono',monospace; font-weight:700; }

.tracks{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.2rem; }
@media (max-width:520px){ .tracks{ grid-template-columns:1fr; } }
.track{ border:1px solid #000; border-radius:12px; padding:.9rem; background:#fff; display:flex; align-items:center; gap:.8rem; }
.track .mini-vinyl{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:radial-gradient(circle at center, #fff 0 8%, #000 9% 11%, #333 12% 60%, #000 61% 63%, #333 64% 100%);
  border:2px solid #000;
}
.track-meta{ flex:1; }
.track-meta strong{ display:block; font-family:'Oswald',sans-serif; color:#000; }
.track-meta span{ color:#555; font-size:.88rem; }
.play-btn{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; border:2px solid #000; background:#000; color:#fff;
  border-radius:999px; padding:.4rem .75rem; cursor:not-allowed; opacity:.6;
}
.track-note{ grid-column:1/-1; font-size:.85rem; color:#555; font-style:italic; }

.btn{
  display:inline-block; margin-top:1rem; font-family:'Oswald',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; text-decoration:none;
  background:var(--ink); color:#fff; border:2px solid var(--ink); border-radius:999px;
  padding:.65rem 1.2rem; cursor:pointer;
  transition:transform .15s ease;
}
.btn:hover, .btn:focus-visible{ transform:translateY(-2px); }
.tbd{ margin-top:1.1rem; border-left:4px solid var(--mustard); padding-left:1rem; font-style:italic; color:var(--ink-soft); font-size:.9rem; }

/* ---------- mobile fallback: notebook collage → simple clickable grid ---------- */
@media (max-width:760px){
  .stage{ display:block; padding:1.2rem 1rem 4rem; }
  .canvas{ width:auto; aspect-ratio:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
  .canvas > .book-bg{ display:none; }
  .stage > .circus-bg{ display:none; }
  .brandmark{ position:static; width:70%; margin:0 auto 1.2rem; transform:rotate(-3deg); grid-column:1/-1; }
  .deco, .caption{ display:none; }
  .sticker{
    position:static; width:auto; background:var(--paper-2); border-radius:14px;
    padding:.8rem .6rem 1rem;
  }
  .sticker img{ width:70%; margin:0 auto; }
}