:root {
  --yellow: #F5E84B;
  --teal: #00C2A8;
  --pink: #FF5A7A;
  --paper: #F4F1E8;
  --violet: #7B61FF;
  --ink: #071013;
  --green: #42D66B;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--display);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .38;
  background:
    radial-gradient(circle at 20% 10%, rgba(7,16,19,.08) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 80% 30%, rgba(255,90,122,.12) 0 1px, transparent 1px 7px),
    linear-gradient(115deg, rgba(245,232,75,.18), transparent 30%, rgba(0,194,168,.12) 70%, rgba(123,97,255,.18));
  mix-blend-mode: multiply;
}

.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.festival { position: relative; }
.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  place-items: center;
  isolation: isolate;
}

.diagonal-street {
  position: fixed;
  z-index: 0;
  left: -18vw;
  top: 18vh;
  width: 138vw;
  height: 18vh;
  background: repeating-linear-gradient(90deg, var(--ink) 0 18px, transparent 18px 32px), linear-gradient(90deg, var(--yellow), var(--teal), var(--violet));
  transform: translate3d(var(--street-x, 0), var(--street-y, 0), 0) rotate(-25deg);
  box-shadow: 0 2rem 0 rgba(7,16,19,.12), 0 -1rem 0 rgba(255,90,122,.2);
  opacity: .34;
}

.scene-ledger {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: .45rem;
}
.scene-ledger a {
  font: 700 .7rem var(--mono);
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: .35rem .5rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.scene-ledger a.active { background: var(--green); }

.sun-clock {
  position: fixed;
  left: 1.25rem;
  top: 1.25rem;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--yellow), var(--pink), var(--violet), var(--ink));
  border: 3px solid var(--ink);
  z-index: 30;
  transform: rotate(var(--sun-rotate, 0deg));
  box-shadow: 5px 5px 0 var(--ink);
}
.sun-clock span { display:block; width: 55%; height: 55%; margin: 22%; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }

.paste-wall, .folding-table, .notice-board, .quilt-yard {
  position: relative;
  z-index: 2;
  border: 4px solid var(--ink);
  box-shadow: 14px 14px 0 var(--ink);
  background: rgba(244,241,232,.92);
}

.dawn-wall {
  width: min(820px, 82vw);
  min-height: 58vh;
  padding: 2rem;
  transform: rotate(-2deg);
  background: linear-gradient(160deg, #F4F1E8 55%, rgba(245,232,75,.55));
}
.tiny-date { font-size: .78rem; }
.torn-flyer {
  display: inline-block;
  margin: 4rem 0 1rem;
  padding: .45rem .8rem;
  font: 800 clamp(3rem, 10vw, 8rem)/.85 var(--display);
  letter-spacing: -.07em;
  background: var(--yellow);
  transform: rotate(-5deg);
  clip-path: polygon(0 8%, 96% 0, 100% 84%, 88% 100%, 4% 92%);
  box-shadow: 9px 9px 0 var(--pink);
}
.manifesto { max-width: 46rem; font: 650 clamp(1.2rem, 2.5vw, 2rem)/1.15 var(--serif); }
.arrival-stamps { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.arrival-stamps span {
  opacity: 0;
  transform: translateY(18px) rotate(-8deg) scale(.9);
  border: 3px solid var(--pink);
  color: var(--pink);
  padding: .4rem .6rem;
  font: 800 1rem var(--mono);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,1.4,.3,1);
}
.arrival-stamps span.arrived { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }
.sunrise-badges { position: absolute; right: 11vw; bottom: 10vh; display:flex; gap:.7rem; transform: rotate(10deg); }
.sunrise-badges b { width: 4rem; height:4rem; display:grid; place-items:center; border-radius:50%; background:var(--teal); border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:var(--mono); font-size:.8rem; }

.scene-readme { background: linear-gradient(135deg, var(--paper), rgba(0,194,168,.24)); }
.readme-wall { width: min(980px, 84vw); padding: clamp(1.5rem, 4vw, 3.5rem); transform: rotate(2deg); }
.wall-header, .table-label, .board-label, .quilt-label { color: var(--violet); font-weight:700; }
h2 { margin: .5rem 0 1rem; font: 800 clamp(2.3rem, 6vw, 5.8rem)/.9 var(--display); letter-spacing: -.055em; }
.readme-wall p, .folding-table h2 + p { font: 620 1.35rem/1.35 var(--serif); }
.readme-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; align-items: stretch; }
.note, .receipt { min-height: 10rem; padding: 1rem; border:3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: rotate(var(--rot)); }
.note span { display:block; margin-bottom: 1.2rem; font-size:.75rem; }
.note strong { font-size: 1.45rem; line-height: 1; }
.yellow { background: var(--yellow); --rot:-3deg; }
.teal { background: var(--teal); --rot:2deg; }
.pink { background: var(--pink); --rot:-1deg; }
.receipt { --rot:4deg; background: #fff; font-family: var(--mono); display:grid; gap:.55rem; }
.receipt::before { content: "commit hashes / 8cf0ae7290be"; font: 700 .72rem var(--mono); color: var(--violet); }
.receipt span { display:block; border-bottom:2px dashed var(--ink); }
.hanging-string { position:absolute; top: 11vh; left: 6vw; right: 8vw; height: 4px; background: var(--ink); transform: rotate(-8deg); }
.hanging-string i { position:absolute; width:2.5rem; height:3.5rem; background: var(--green); border:2px solid var(--ink); top:.1rem; transform-origin:top; animation: swing 4s ease-in-out infinite; }
.hanging-string i:nth-child(1){left:12%;}.hanging-string i:nth-child(2){left:28%;background:var(--pink);animation-delay:-.8s}.hanging-string i:nth-child(3){left:50%;background:var(--yellow);animation-delay:-1.2s}.hanging-string i:nth-child(4){left:68%;background:var(--teal);animation-delay:-.4s}.hanging-string i:nth-child(5){left:84%;background:var(--violet);animation-delay:-1.8s}

.scene-forks { background: linear-gradient(140deg, rgba(245,232,75,.38), var(--paper) 45%, rgba(123,97,255,.22)); }
.folding-table { width:min(960px, 86vw); min-height:58vh; padding:2rem; background: linear-gradient(#F4F1E8 0 62%, var(--teal) 62%); transform: rotate(-1.5deg); }
.fork-spool { cursor:pointer; border:4px solid var(--ink); background:var(--pink); color:var(--ink); font:800 1.2rem var(--display); padding:.9rem 1.2rem; box-shadow:6px 6px 0 var(--ink); transform:rotate(3deg); }
.ribbon-field { position:relative; height:15rem; margin-top:1rem; }
.ribbon { position:absolute; left: 11rem; top: 3rem; height: 1rem; width: 58%; border: 2px solid var(--ink); border-radius:999px; transform-origin:left center; background: var(--yellow); transition: transform .8s cubic-bezier(.2,1,.2,1), width .8s; box-shadow: 0 4px 0 rgba(7,16,19,.2); }
.r2{background:var(--teal)}.r3{background:var(--violet)}.r4{background:var(--green)}.r5{background:var(--pink)}
.ribbon-field.split .r1{transform:rotate(-32deg);width:72%}.ribbon-field.split .r2{transform:rotate(-14deg);width:62%}.ribbon-field.split .r3{transform:rotate(6deg);width:70%}.ribbon-field.split .r4{transform:rotate(23deg);width:58%}.ribbon-field.split .r5{transform:rotate(39deg);width:66%}
.package-row { display:flex; gap:1rem; justify-content:flex-end; }
.pkg { width:7rem; height:5rem; background:var(--yellow); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:.55rem; font-family:var(--mono); transform:rotate(-5deg); }
.pkg:nth-child(2){background:var(--violet); transform:rotate(4deg)}.pkg:nth-child(3){background:var(--paper); transform:rotate(-1deg)}

.scene-issues { background: linear-gradient(120deg, rgba(255,90,122,.24), var(--paper)); }
.notice-board { width:min(1030px, 88vw); padding:2rem; background: linear-gradient(90deg, rgba(66,214,107,.25), rgba(244,241,232,.95)); transform:rotate(1deg); }
.ticket-lane { display:grid; grid-template-columns: repeat(4, minmax(12rem,1fr)); gap:1rem; margin-top:2rem; }
.ticket { position:relative; min-height:18rem; padding:1rem; border:3px solid var(--ink); box-shadow:7px 7px 0 var(--ink); background:var(--yellow); transform:translateY(var(--ty)) rotate(var(--tr)); transition: transform .35s ease, background .35s; overflow:hidden; }
.ticket:nth-child(2){background:var(--teal);--ty:2rem;--tr:3deg}.ticket:nth-child(3){background:var(--pink);--ty:-.7rem;--tr:-4deg}.ticket:nth-child(4){background:var(--green);--ty:1rem;--tr:5deg}.ticket:nth-child(1){--ty:.4rem;--tr:-2deg}
.ticket b { display:block; margin-top:1.2rem; font-size:1.55rem; line-height:1; }
.ticket em { position:absolute; left:1rem; right:1rem; bottom:1rem; padding:.8rem; background:var(--paper); border:2px dashed var(--ink); font: 700 1rem/1.1 var(--serif); transform: translateY(135%); transition: transform .35s cubic-bezier(.2,1.2,.3,1); }
.ticket:hover { transform: translateY(calc(var(--ty) - 1rem)) rotate(0deg); background:var(--paper); }
.ticket:hover em { transform: translateY(0); }

.scene-release { background: radial-gradient(circle at 70% 15%, var(--violet), transparent 28%), linear-gradient(160deg, var(--paper), rgba(7,16,19,.9)); color: var(--ink); }
.quilt-yard { width:min(900px, 84vw); padding:2rem; background:var(--paper); transform:rotate(-1deg); }
.quilt { display:grid; grid-template-columns:repeat(3, 1fr); border:4px solid var(--ink); margin-top:1rem; }
.patch { min-height:7rem; border:2px solid var(--ink); cursor:pointer; font:800 1.5rem var(--display); color:var(--ink); transition: transform .25s, filter .25s; }
.p1{background:var(--yellow)}.p2{background:var(--teal)}.p3{background:var(--pink)}.p4{background:var(--violet)}.p5{background:var(--green)}.p6{background:var(--paper)}
.patch.selected { transform: scale(.92) rotate(-2deg); filter: saturate(1.5); box-shadow: inset 0 0 0 8px rgba(7,16,19,.2); }
.maintainer-booth { margin-top:1rem; padding:1rem; border:3px dashed var(--ink); background:var(--green); transform:scale(.92); opacity:0; transition:opacity .4s, transform .4s; }
.maintainer-booth.open { opacity:1; transform:scale(1) rotate(1deg); }
.stamp-merged { display:inline-block; border:4px solid var(--pink); color:var(--pink); font:800 2rem var(--mono); padding:.2rem .5rem; transform:rotate(-8deg); }
.lanterns { position:absolute; right:8vw; top:8vh; display:flex; gap:1rem; }
.lantern { width:5rem; height:7rem; border:3px solid var(--ink); border-radius:45% 45% 12% 12%; background:var(--yellow); box-shadow:0 0 40px rgba(245,232,75,.65), 5px 5px 0 var(--ink); font:800 .9rem var(--mono); cursor:pointer; animation: float 3.5s ease-in-out infinite; }
.lantern:nth-child(2){background:var(--pink);animation-delay:-1s}.lantern:nth-child(3){background:var(--teal);animation-delay:-2s}
.lantern.lift { transform: translateY(-4rem) rotate(8deg); }
.closing-wall { position:absolute; left:4vw; bottom:3vh; right:4vw; display:flex; justify-content:space-between; gap:1rem; padding:1rem; background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }

@keyframes swing { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(8deg)} }
@keyframes float { 0%,100%{translate:0 0} 50%{translate:0 -1.2rem} }

@media (max-width: 820px) {
  .scene { padding: 5rem 1rem 3rem; }
  .readme-grid, .ticket-lane { grid-template-columns: 1fr; }
  .ticket { min-height: 13rem; --ty:0 !important; }
  .package-row, .closing-wall { flex-direction: column; align-items: flex-start; }
  .lanterns { position:relative; right:auto; top:auto; margin-top:1rem; }
  .scene-ledger { display:none; }
}