/* Kain Guilty — kainguilty.com
   2000s/2010s "MySpace profile" pastiche, built with modern CSS.
   No web fonts, no external requests — system serif/mono stack only. */
:root{
  --bg:#000; --bg2:#000; --panel-border:#000;
  --ink:#f1efe6; --dim:#8f8f8f;
  --red:#e2001a; --pink:#ff2fb0; --orange:#ff9900; --blue:#00c8ff; --green:#39ff14;
  --serif:"Times New Roman",Times,Georgia,serif;
  --mono:"Courier New",Courier,monospace;
  --sans:Helvetica,Arial,sans-serif;
  --maxw:760px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);overflow-x:clip;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.skip-link{position:absolute;top:-100px;left:0;background:var(--red);color:#fff;padding:.6rem 1rem;z-index:200;font-family:var(--mono);transition:top .2s}
.skip-link:focus{top:0}

/* film grain + scanlines, very low opacity, decorative only */
.grain{position:fixed;inset:-8%;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-2%,1.5%)}40%{transform:translate(1.5%,-2%)}60%{transform:translate(-1.5%,-1.5%)}80%{transform:translate(2%,2%)}}
.scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.12;background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px)}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}

/* ---------- Marquee ---------- */
.marquee-bar{position:sticky;top:0;z-index:50;width:100%;overflow:hidden;background:var(--red);border-bottom:2px solid #000;white-space:nowrap}
.marquee-track{display:inline-flex;width:max-content;animation:marquee 26s linear infinite}
.marquee-track span{display:inline-block;padding:.4rem 0;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.06em;color:#fff;text-shadow:0 1px 0 #000}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation-duration:90s}}

/* ---------- Blink ---------- */
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}

/* ---------- Hero ---------- */
.hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem 1rem 2.5rem;border-bottom:1px solid var(--panel-border)}
.textnav{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.4rem}
.textnav a{color:var(--pink);text-transform:uppercase}
.textnav a:hover{color:var(--ink);text-shadow:0 0 8px var(--pink)}
.textnav span{color:var(--dim)}

.banner-full{width:100vw;position:relative;left:50%;transform:translateX(-50%);margin-bottom:1.4rem;border-bottom:1px solid var(--panel-border);background:#000}
/* contain, not cover — cover crops the wide wordmark's left/right edges off
   whenever the viewport's aspect ratio is narrower than the video's; the
   banner's own black background matches the page so any letterboxing is
   invisible and the full logo always stays on screen */
.banner-full video{width:100%;display:block;height:auto;min-height:100px;max-height:29vh;object-fit:contain;filter:contrast(1.1) saturate(0)}

.wordmark-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem;margin:.5rem 0 1rem}
.wordmark{width:min(260px,80vw);height:auto;filter:drop-shadow(0 0 10px rgba(226,0,26,.35))}

.tagline{font-family:var(--mono);letter-spacing:.1em;color:var(--red);font-size:.95rem;text-transform:uppercase;margin-bottom:1.4rem}

.badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:560px}
.badge-row.small{max-width:640px;margin:1.2rem auto}
.badge{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:.5rem .7rem;border:1px solid currentColor;background:#000;color:var(--ink);transition:background .15s,color .15s,transform .15s}
.badge:hover{background:currentColor;color:#000;transform:translateY(-2px)}
.badge.sp{color:var(--green)} .badge.yt{color:var(--red)} .badge.am{color:#fc3c97}
.badge.az{color:var(--orange)} .badge.ig{color:var(--pink)} .badge.x{color:var(--ink)}
.badge.sc{color:var(--orange)} .badge.bc{color:var(--blue)}

/* ---------- Panels ---------- */
main{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto}
.panel{padding:3rem 1.25rem;border-bottom:1px solid var(--panel-border)}
.panel.alt{background:var(--bg2)}
.section-title{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.6rem,5vw,2.3rem);letter-spacing:.02em;text-align:center;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:8px;margin-bottom:.6rem}
.section-title.helvetica{font-family:var(--sans);font-style:italic;font-weight:700}
.section-sub{text-align:center;color:var(--dim);font-size:1.02rem;margin-bottom:1.5rem}
.sub-title{text-align:center;font-family:var(--serif);font-style:italic;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1.2rem;color:var(--ink);font-size:1.2rem}
.sub-title .dim{color:var(--dim);font-weight:400;text-transform:none;font-style:normal}

/* ---------- Music ---------- */
.stream-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.6rem;font-family:var(--mono);font-weight:700;letter-spacing:.05em;margin-bottom:2rem}
.stream-links a{font-size:1.15rem}
.stream-links a:hover{text-decoration:underline}
.stream.orange{color:var(--orange)} .stream.blue{color:var(--blue)} .stream.green{color:var(--green)} .stream.red{color:var(--red)}

.music-layout{display:grid;gap:2rem;max-width:640px;margin:0 auto;justify-items:center}
.portrait{width:min(420px,88vw);border:1px solid var(--panel-border)}
.portrait img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;filter:contrast(1.05)}
.tracklist-wrap{display:grid;gap:1.6rem;width:100%;max-width:520px;margin:0 auto}
.tracklist{border:1px solid var(--panel-border);background:#0a0a0a;font-family:var(--mono);font-size:1.05rem}
.tracklist li{counter-increment:track;padding:.75rem 1rem;border-bottom:1px solid var(--panel-border);display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.tracklist li:last-child{border-bottom:none}
.tracklist li::before{content:counter(track) ".";color:var(--dim);margin-right:.6rem;flex-shrink:0}
.tracklist{counter-reset:track}
.tracklist li:nth-child(odd){background:rgba(255,255,255,.02)}
.tracklist li.current{color:var(--red)}
.tracklist .tag{font-size:.68rem;color:var(--dim);text-transform:uppercase;white-space:nowrap}
.embed-wrap iframe{display:block;width:100%;border:none}

/* ---------- Video ---------- */
.video-wrap{position:relative;width:100%;padding-top:56.25%;max-width:560px;margin:0 auto;border:1px solid var(--panel-border)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
.caption{text-align:center;color:var(--dim);font-size:.85rem;margin-top:1.2rem;max-width:480px;margin-inline:auto}

/* ---------- Forms ---------- */
.retro-form{display:grid;gap:.4rem;max-width:420px;margin:0 auto}
.retro-form label{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-top:.5rem}
.retro-form input[type="text"],.retro-form input[type="email"],.retro-form textarea{background:#0a0a0a;border:1px solid var(--panel-border);color:var(--ink);padding:.6rem .7rem;font-family:var(--mono);font-size:.88rem}
.retro-form input:focus,.retro-form textarea:focus{outline:2px solid var(--pink);outline-offset:1px}
.retro-form textarea{resize:vertical}
.retro-form button{margin-top:1rem;justify-self:start;background:var(--red);color:#fff;font-family:var(--mono);font-weight:700;letter-spacing:.06em;padding:.7rem 1.4rem;border:1px solid #000;box-shadow:3px 3px 0 #000;transition:transform .12s,box-shadow .12s}
.retro-form button:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #000}
.retro-form button:active{transform:translate(3px,3px);box-shadow:0 0 0 #000}
.retro-form.inline{display:flex;flex-wrap:wrap;gap:.6rem;max-width:480px}
.retro-form.inline input{flex:1;min-width:200px}
.retro-form.inline button{margin-top:0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.form-status{font-family:var(--mono);font-size:.8rem;min-height:1.2em;margin-top:.6rem}
.form-status.ok{color:var(--green)}
.form-status.err{color:var(--red)}
.direct-email{text-align:center;color:var(--dim);font-size:.85rem;margin-top:1.5rem}
.direct-email a{color:var(--pink)}

/* ---------- Guestbook ---------- */
.guestbook-entries{max-width:520px;margin:2rem auto 0;border:1px solid var(--panel-border);background:#0a0a0a}
.guestbook-entries .entry{padding:.7rem .9rem;border-bottom:1px solid var(--panel-border);font-size:.9rem}
.guestbook-entries .entry:nth-child(odd){background:rgba(255,255,255,.02)}
.guestbook-entries .entry:last-child{border-bottom:none}
.guestbook-entries .entry-name{font-family:var(--mono);font-weight:700;color:var(--pink);text-transform:uppercase;font-size:.78rem;letter-spacing:.04em}
.guestbook-entries .entry-date{color:var(--dim);font-size:.72rem;font-family:var(--mono);margin-left:.4rem}
.guestbook-entries .entry-message{margin-top:.25rem}
.guestbook-empty{padding:1.2rem;text-align:center;color:var(--dim);font-family:var(--mono);font-size:.85rem}

/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:1;text-align:center;padding:2.5rem 1.25rem 3rem;max-width:var(--maxw);margin:0 auto}
.footer-line{font-family:var(--mono);color:var(--red);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.5rem}
.construction-bar{height:14px;margin:1.6rem auto;max-width:420px;background:repeating-linear-gradient(45deg,#000 0 14px,var(--orange) 14px 28px);background-size:200% 100%;animation:stripes 4s linear infinite;border:1px solid #000}
@keyframes stripes{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.construction-bar{animation:none}}
.visitor-counter{font-family:var(--mono);font-size:.85rem;color:var(--dim);margin-top:1.6rem}
.odometer{display:inline-block;background:#0a0a0a;color:var(--green);border:1px solid var(--panel-border);padding:.15rem .5rem;letter-spacing:.15em;font-weight:700}
.best-viewed{font-family:var(--mono);font-size:.68rem;color:var(--dim);opacity:.6;margin-top:.8rem}
.copyright{font-family:var(--mono);font-size:.75rem;color:var(--dim);margin-top:1rem}
.copyright a{color:var(--pink)}

/* ---------- Cursor sparkle (JS-driven, styled here) ---------- */
.sparkle{position:fixed;z-index:100;pointer-events:none;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 6px 1px var(--pink);animation:sparkle-fade .6s ease-out forwards}
@keyframes sparkle-fade{to{transform:translateY(14px) scale(0);opacity:0}}

@media (max-width:520px){
  .hero{padding:1.2rem .75rem 2rem}
  .panel{padding:2.2rem 1rem}
  .badge-row{gap:.4rem}
  .badge{font-size:.66rem;padding:.45rem .55rem}
}

/* Desktop — bigger everything: type, wordmark, tracklist, portrait photo */
@media (min-width:900px){
  :root{--maxw:880px}
  .wordmark{width:min(360px,32vw)}
  .tagline{font-size:1.2rem}
  .badge{font-size:.85rem;padding:.65rem 1rem}
  .section-title{font-size:clamp(2rem,3.2vw,2.9rem)}
  .section-sub{font-size:1.1rem}
  .sub-title{font-size:1.4rem}
  .stream-links a{font-size:1.35rem}
  .music-layout{max-width:820px}
  .portrait{width:min(520px,42vw)}
  .tracklist-wrap{max-width:560px}
  .tracklist{font-size:1.2rem}
  .tracklist li{padding:.9rem 1.2rem}
  .caption{font-size:1rem}
  .guestbook-entries .entry{font-size:1rem}
  .banner-full video{min-height:0;height:400px;max-height:400px}
}