/* ————————————————————————————————
   LOU—KEE · v10
   one screen · three states · no page scroll
———————————————————————————————— */
:root{
  --bg:#0b0a09;
  --ink:#e9e4da;
  --dim:#8a847c;
  --yellow:#ffd60a;
  --spray:"Rubik Spray Paint",cursive;
  --label:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --px:var(--label);
  --mono:var(--label);
}

*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* never a native play button on any video */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button{
  display:none!important;-webkit-appearance:none!important;opacity:0!important;
}
video{pointer-events:none}

html,body{height:100%}
body{
  background-color:var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.91 0 0 0 0 0.89 0 0 0 0 0.85 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(rgba(233,228,218,.18) 1px, transparent 1.6px),
    radial-gradient(rgba(233,228,218,.11) 1px, transparent 1.4px),
    radial-gradient(rgba(233,228,218,.07) 1px, transparent 1.4px);
  background-size:160px 160px, 260px 260px, 380px 380px, 520px 520px;
  background-position:0 0, 40px 70px, 180px 40px, 90px 300px;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--label);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                 /* the page itself never scrolls */
}
a{color:inherit;text-decoration:none}

/* ————— state 1 · the circles ————— */
.stage{position:fixed;inset:0}
.dot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%,-50%);
  width:var(--d);
  height:var(--d);
  --d:clamp(96px,17vw,160px);
  border:none;background:none;padding:0;
  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  filter:grayscale(.6) brightness(.62);
  transition:filter .25s;
  border-radius:50%;
  box-shadow:0 0 26px rgba(255,255,255,.07);
}
.dot img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;pointer-events:none}
.dot.on{filter:none;box-shadow:0 0 34px 4px rgba(255,255,255,.16), 0 0 90px 8px rgba(255,255,255,.06)}
.dot:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.dot:nth-of-type(1){--x:26%; --y:50%}
.dot:nth-of-type(2){--x:50%; --y:50%}
.dot:nth-of-type(3){--x:74%; --y:50%}
.guide{
  position:absolute;
  left:50%;
  top:calc(50% + clamp(96px,17vw,160px)/2 + 24px);
  transform:translateX(-50%);
  font-family:var(--label);
  font-style:italic;
  font-weight:500;
  font-size:17px;
  color:var(--yellow);
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.55);
  transition:opacity .4s;
  cursor:pointer;                 /* people tap the word — let it work */
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  white-space:nowrap;
}
.guide.gone{opacity:0}

/* ————— state 2 · the world ————— */
.brand,.hud{
  position:fixed;
  left:0;right:0;
  opacity:0;
  pointer-events:none;
  z-index:4;
}
.brand,.hud{transition:opacity 1.1s ease}
.brand.in,.hud.in{opacity:1;pointer-events:auto}
.brand{
  top:max(22px, env(safe-area-inset-top));
  padding:0 22px;
  text-align:center;
}
.nav-top{margin-top:16px;justify-content:center}
.wordmark{
  font-family:var(--spray);
  font-weight:400;
  color:#fff;
  font-size:clamp(26px,6vw,44px);
  line-height:1;
  transform:rotate(-2deg);
  user-select:none;
}


.hud{bottom:0;padding:0 16px calc(18px + env(safe-area-inset-bottom));text-align:center}
.lp{
  font-family:var(--px);
  font-size:clamp(9px,2.4vw,11px);
  color:var(--yellow);
  text-align:center;
  margin-bottom:26px;
  letter-spacing:.02em;
}
.nav{display:flex;gap:18px;justify-content:center}
.nav-bottom{margin-top:2px}

.nav button{
  font-family:var(--label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  background:none;
  border:none;
  color:var(--ink);
  cursor:pointer;
  padding:4px 0;
  -webkit-tap-highlight-color:transparent;
}
.nav button:hover,.nav button.active{color:var(--yellow)}
.icons{display:flex;align-items:center;gap:22px;justify-content:center}
.icons a{display:block;width:26px;height:26px;color:var(--ink);opacity:.85}
.icons a:hover{opacity:1}
.icons svg{width:100%;height:100%;display:block}
.ra-ic{width:38px!important;height:auto}
.ra-ic img{width:100%;height:auto;display:block;opacity:.92}

/* ————— state 3 · panels ————— */
.panelwrap{
  position:fixed;
  inset:0;
  z-index:6;
  background:rgba(11,10,9,.93);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:14vh 18px 16vh;
}
.close{
  position:fixed;
  top:max(16px, env(safe-area-inset-top));
  right:16px;
  z-index:7;
  background:none;border:none;
  color:var(--ink);
  font-size:34px;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.close:hover{color:var(--yellow)}
.panel{display:none;max-width:820px;margin:0 auto}
.panel.open{display:block}
.panel h2{
  font-family:var(--label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:clamp(15px,3.6vw,20px);
  margin-bottom:26px;
  text-align:center;
}

/* who */
.clip{width:100%;height:auto;display:block;border-radius:18px}
.whogrid{
  columns:3 240px;
  column-gap:12px;
}
.whogrid > *{
  break-inside:avoid;
  margin:0 0 12px;
  line-height:0;
}
.whogrid img{width:100%;height:auto;display:block;border-radius:14px;-webkit-touch-callout:none;user-select:none}
.whogrid .clip{border-radius:14px;margin-bottom:12px}
.panel[data-panel="who"]{max-width:1000px}

/* music */
.musicwrap{position:relative;max-width:760px;margin:0 auto}
.photo{position:relative;line-height:0}
.photo img{width:100%;height:auto;display:block;border-radius:18px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.secret{
  position:absolute;
  right:-10px;
  bottom:-22px;
  width:clamp(84px,13vw,116px);
  transform:rotate(7deg);
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.7));
  z-index:2;
}
}
.secret img{width:100%;height:auto;display:block}
.credits{
  display:block;
  margin-top:16px;
  font-family:var(--label);
  letter-spacing:.06em;
  font-size:11px;
  color:var(--dim);
  text-align:right;
}
.credits:hover{color:var(--yellow)}

/* shows */
.panel ul{list-style:none}
.panel li{border-bottom:1px solid rgba(233,228,218,.14)}
.panel li a,.panel li.up{display:flex;align-items:center;gap:16px;padding:11px 2px}
.panel li a:hover{background:rgba(255,214,10,.06)}
.panel .st{width:52px;height:auto;flex:none;transform:rotate(-4deg)}
.panel li:nth-child(even) .st{transform:rotate(3deg)}
.panel .when{font-family:var(--label);font-weight:600;letter-spacing:.08em;font-size:13px;min-width:58px;color:var(--yellow)}
.panel .what{font-size:14px}
.panel li.past{color:var(--dim)}
.panel li.past .when{color:var(--dim)}
.panel li.past .st{filter:grayscale(1) brightness(.8)}

/* contact */
.panel[data-panel="contact"]{text-align:center;padding-top:6vh}
.icons-panel{margin-top:40px}
.email{
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(15px,3.6vw,24px);
  color:var(--yellow);
  display:inline-block;
  border-bottom:3px solid var(--yellow);
  line-height:1.4;
  word-break:break-all;
}
.email:hover{color:#fff;border-color:#fff}
.brandline{margin:30px auto 0;color:var(--dim);font-size:13px;max-width:40ch;line-height:1.7}
.icons-panel{margin-top:36px}

/* mobile */
@media (max-width:820px){
  .dot{--d:clamp(96px,27vw,150px)}
  .dot:nth-of-type(1){--x:27%; --y:37%}
  .dot:nth-of-type(2){--x:73%; --y:37%}
  .dot:nth-of-type(3){--x:50%; --y:60%}
  .guide{top:46%;transform:translate(-50%,-50%)}
  .nav-top{display:none}
  .brand{top:max(26px, env(safe-area-inset-top))}
  .nav{gap:24px;justify-content:center}
}
@media (min-width:821px){
  .nav-bottom{display:none}
}