:root{
  --ground:#F0F0F0;--paper:#FFFFFF;--ink:#111;--muted:#666;
  --red:#C3000F;--yellow:#E9F56B;--blue:#6D9FE2;--lightblue:#DBE8FB;
  --display:'Archivo',sans-serif;--script:'Imperial Script',cursive;
  --sans:'Instrument Sans',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --apple:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Helvetica Neue',sans-serif;
}
@font-face{font-family:'Tempting';src:url('/tempting.otf') format('opentype');font-display:swap}
@font-face{font-family:'New Romantics';src:url('/new-romantics.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground) url('/grain.png');background-size:256px 256px;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:var(--red)}
button{font:inherit}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em}
.cond{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.88}
.script{font-family:var(--script);font-weight:400}
.ph{background:repeating-linear-gradient(135deg,#E2E2E2 0 10px,#D8D8D8 10px 20px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top bar */
.topbar{position:relative;z-index:20;background:var(--ground) url('/grain.png');background-size:256px 256px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 32px;border-bottom:1px solid #000}
.brand{display:flex;align-items:baseline;gap:6px;padding-top:12px;text-decoration:none}
.brand .s{font-family:'Tempting',var(--script);font-size:44px;line-height:1;color:var(--yellow);-webkit-text-stroke:1px #000}
.brand .l{font-family:'New Romantics',serif;font-weight:400;font-size:38px;line-height:1;color:var(--red)}

/* ---------- intro (full screen title) ---------- */
.intro{position:relative;height:220vh;border-bottom:1px solid #000}
.intro-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;padding:90px 16px 110px;overflow:hidden}
.intro-name{will-change:transform,opacity;transform-origin:50% 55%}
/* entrance: Loading types itself in, Still swoops on top */
.intro-loading .ch{display:inline-block;opacity:0;transform:translateY(.25em) scale(.9);filter:blur(10px);animation:chIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 110ms + .25s)}
@keyframes chIn{to{opacity:1;transform:none;filter:blur(0)}}
.intro-still{animation:stillIn 1.2s cubic-bezier(.2,.9,.3,1.25) 1.05s both}
@keyframes stillIn{0%{opacity:0;transform:translate(-.3em,-.35em) rotate(-28deg) scale(.55)}100%{opacity:1;transform:rotate(-6deg)}}
.intro-by{animation:fadeUp .7s ease-out 1.9s both}
.intro-row{animation:fadeUp .7s ease-out .1s both}
@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.intro{height:auto}.intro-loading .ch,.intro-still,.intro-by,.intro-row{animation:none;opacity:1;filter:none;transform:none}.intro-still{transform:rotate(-6deg)}}
.intro-row{position:absolute;left:40px;right:40px;top:32px;display:flex;justify-content:space-between;font-size:12px}
.intro-name{display:inline-block;text-align:left}
.intro-still{position:relative;z-index:2;margin:0 0 -.68em -.18em;font-family:'Tempting',var(--script);font-size:min(280px,19.5vw);line-height:1;color:var(--yellow);-webkit-text-stroke:clamp(1.5px,.21vw,3px) #000;transform:rotate(-6deg)}
.intro-loading{position:relative;z-index:1;margin:0;font-family:'New Romantics',serif;font-weight:400;font-size:min(380px,26.4vw);line-height:.9;color:var(--red);white-space:nowrap}
.intro-by{margin:22px 0 0;text-align:right;font-family:var(--apple);font-size:clamp(15px,1.8vw,26px);font-weight:600;color:var(--blue)}
.scroll-cue{position:absolute;left:50%;bottom:28px;margin-left:-40px;width:80px;text-align:center;font-size:12px;text-decoration:none;animation:fadeUp .7s ease-out 2.3s both,bob 1.6s ease-in-out 3s infinite}
.scroll-cue span{display:block;font-size:20px;letter-spacing:0}
@keyframes bob{50%{transform:translateY(8px)}}
@media (max-width:700px){.intro-still{font-size:25vw}.intro-loading{font-size:33vw}.intro-row{left:20px;right:20px}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none}}
.band{padding:40px 0 8px;border-bottom:1px solid #000}
.band .drops{margin-top:0}
.drops .drop{animation:none;opacity:0}
.drops.go .drop{animation:drop 1s cubic-bezier(.34,1.56,.64,1) both}
@media (prefers-reduced-motion:reduce){.drops .drop{opacity:1}}
.credits{max-width:1200px;margin:0 auto;padding:24px 24px 48px;font-size:10px;color:var(--muted);letter-spacing:.08em}
.byline-sm{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.nav{display:flex;gap:4px}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* chips & buttons */
.chip{display:inline-block;padding:7px 14px;border:1.5px solid #000;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;background:var(--lightblue);color:#000;text-decoration:none;white-space:nowrap}
.chip.red{background:var(--red);color:#fff}.chip.yellow{background:var(--yellow)}.chip.blue{background:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1.5px solid #000;background:#fff;color:#000;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn:hover{color:inherit;filter:brightness(.96)}
.btn.red{background:var(--red);color:#fff}.btn.yellow{background:var(--yellow)}.btn.black{background:#000;color:#fff}.btn.blue{background:var(--lightblue)}
.btn:disabled{opacity:.5;cursor:default}
.btn.sm{min-height:36px;padding:0 12px;font-size:10px}

/* ---------- home ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px 96px;min-height:100vh}
.mast{position:relative;padding:40px 0 56px;text-align:center;border-bottom:1px solid #000}
.mast-row{display:flex;justify-content:space-between;font-size:11px}
.mast-name{display:inline-block;text-align:center}
.mast-still{position:relative;z-index:2;margin:24px 0 -58px;font-family:var(--script);font-size:150px;line-height:1;color:var(--yellow);-webkit-text-stroke:2px #000;transform:translateX(-140px) rotate(-4deg)}
.mast-loading{position:relative;z-index:1;margin:0;font-size:176px;letter-spacing:-.01em;color:var(--red)}
.mast-by{margin:2px 0 0;text-align:right;font-family:var(--apple);font-size:22px;font-weight:600;letter-spacing:.01em;line-height:1;color:var(--blue)}
.drops{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:32px}
.drop{transform:rotate(var(--r));animation:drop 1s cubic-bezier(.34,1.56,.64,1) both;font-size:13px;padding:9px 18px}
@keyframes drop{0%{opacity:0;transform:translateY(-420px) rotate(0)}60%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.drop{animation:none}}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding-top:48px;align-items:start}
.main{display:flex;flex-direction:column;gap:56px;min-width:0}
.label{margin:0 0 16px;font-size:11px;font-weight:700}
.card{display:block;text-decoration:none;background:var(--paper);border:1.5px solid #000}
.card:hover{color:inherit}
.card-collage{position:relative;height:300px;overflow:hidden;border-bottom:1.5px solid #000}
.card-collage img,.card-collage .ph{position:absolute;object-fit:cover;border:8px solid #fff;box-shadow:0 6px 10px rgba(0,0,0,.16)}
.card-cover{border-bottom:1.5px solid #000;aspect-ratio:16/9;overflow:hidden;background:var(--ground)}
.card-cover img{display:block;width:100%;height:100%;object-fit:cover}
.card-body{padding:28px 32px 32px}
.card-lead{margin:16px 0 0;font-family:var(--script);font-size:38px;line-height:1;color:var(--blue)}
.card-title{margin:2px 0 14px;font-size:72px;color:var(--red);overflow-wrap:anywhere}
.card-ex{margin:0;font-size:19px;line-height:1.6}
.idx-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1.5px solid #000;padding-bottom:10px}
.idx-month{margin:28px 0 6px;font-size:11px;font-weight:700;color:var(--red)}
.row{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 4px;text-decoration:none;border-bottom:1px solid #000}
.row:hover{background:rgba(0,0,0,.04);color:inherit}
.row .t{font-size:21px;font-weight:500}
.pager{display:flex;justify-content:space-between;gap:16px;margin-top:28px}
.side{display:flex;flex-direction:column;gap:20px}
.box{background:var(--paper);border:1.5px solid #000;padding:24px}
.profile-photo{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border:1.5px solid #000}
.hi{margin:18px 0 0;font-family:var(--script);font-size:44px;line-height:1;color:var(--blue)}
dl.facts{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:16px}
dl.facts dt{font-size:10px;font-weight:700;padding-top:4px}
dl.facts dd{margin:0}
.about{margin:16px 0 0;font-size:16px;line-height:1.55}
.spotify{border:0;width:100%;border-radius:12px;display:block}
.playbox{background:#000;color:#fff;padding:16px;border:1.5px solid #000}
.playbox .mono{margin:0 0 12px;font-size:10px;color:var(--yellow)}
.empty{padding:48px 24px;text-align:center;border:1.5px dashed #000;background:var(--paper)}

/* ---------- post ---------- */
.stage{position:relative;max-width:1440px;margin:0 auto;padding:40px 16px 120px;overflow-x:clip}
.article{position:relative;z-index:50;width:100%;max-width:640px;margin:0 auto;background:var(--paper);border:1.5px solid #000}
.a-head{padding:40px 40px 32px;text-align:center;border-bottom:1.5px solid #000}
.a-meta{display:flex;justify-content:space-between;gap:12px;font-size:11px}
.a-lead{margin:22px 0 0;font-family:var(--script);font-size:46px;line-height:1;color:var(--blue)}
.a-title{margin:4px 0 0;font-size:96px;letter-spacing:-.01em;color:var(--red);overflow-wrap:anywhere}
.a-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.a-body{padding:36px 40px 8px;font-size:19px;line-height:1.65;overflow-wrap:anywhere}
.a-body p{margin:0 0 22px}
.a-song{margin:28px 40px 0}
.a-foot{display:flex;align-items:center;gap:14px;padding:20px 40px;margin-top:28px;border-top:1px solid #000;font-size:17px}
.a-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid #000}
.a-nav>*{display:block;padding:22px 28px;text-decoration:none;min-height:60px}
.a-nav>*:last-child{border-left:1.5px solid #000;text-align:right}
.a-nav .k{display:block;font-size:11px;color:var(--muted)}
.a-nav .t{display:block;margin-top:8px;font-size:30px}
.stk{position:absolute;filter:drop-shadow(0 6px 10px rgba(0,0,0,.16));transform-origin:50% 50%}
.stk img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}

@media (max-width:900px){
  .topbar{padding:10px 16px}
  .cols{grid-template-columns:1fr}
  .mast-still{font-size:92px;margin-bottom:-34px;transform:translateX(-50px) rotate(-4deg)}
  .mast-loading{font-size:92px}
  .mast-by{font-size:15px}
  .card-title{font-size:52px}
  .stage{display:flex;flex-direction:column;padding:16px 16px 80px}
  .stk{position:static !important;transform:rotate(var(--mr,0deg)) !important;width:auto !important;max-width:min(70%,300px);margin:12px auto !important}
  .stk.top{order:-1}.stk.bottom{order:1}
  .a-title{font-size:60px}
  .a-head,.a-body{padding-left:22px;padding-right:22px}
  .a-song{margin:24px 22px 0}
  .a-foot{padding:18px 22px}
}

/* ---------- editor ---------- */
.ed-panel{max-width:1100px;margin:0 auto;padding:32px 24px}
.ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.field input,.field textarea{width:100%;padding:12px 14px;border:1.5px solid #000;background:#fff;font:inherit;font-size:17px;color:#000;border-radius:0}
.field textarea{min-height:260px;line-height:1.55;resize:vertical}
.field .hint{font-size:13px;color:var(--muted)}
.ed-bar{position:sticky;top:0;z-index:300;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 24px;background:var(--yellow);border-bottom:1.5px solid #000}
.ed-bar .group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ed-status{font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.ed-stage{user-select:none;-webkit-user-select:none}
.ed-stage .stk{cursor:move;touch-action:none}
.ed-stage .stk.sel{outline:1.5px dashed var(--blue);outline-offset:8px}
.ed-stage .h{display:none;position:absolute;width:16px;height:16px;background:#fff;border:2px solid var(--blue);z-index:2;touch-action:none}
.ed-stage .stk.sel .h{display:block}
.h-rs{right:-16px;bottom:-16px;cursor:nwse-resize}
.h-rot{left:50%;top:-48px;margin-left:-8px;border-radius:50%;background:var(--blue) !important;cursor:grab}
.h-rot::after{content:"";position:absolute;left:5px;top:14px;width:2px;height:24px;background:var(--blue)}
.ed-stage.drag-over{outline:3px dashed var(--red);outline-offset:-12px}
.dropzone-note{position:absolute;left:24px;top:16px;z-index:5;max-width:300px;font-size:13px;line-height:1.4;padding:10px 12px;background:#fff;border:1.5px solid #000}
.stk-tools{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:400;display:none;flex-wrap:wrap;justify-content:center;gap:6px;padding:8px;background:#000;border-radius:999px;max-width:calc(100% - 24px)}
.stk-tools.on{display:flex}
.stk-tools .btn{border-color:#fff;border-radius:999px;min-height:40px}
.uploading{position:absolute;z-index:200;padding:10px 14px;background:#fff;border:1.5px solid #000;font-family:var(--mono);font-size:11px}
.list{display:flex;flex-direction:column;border-top:1.5px solid #000}
.list .item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px;border-bottom:1px solid #000}
.login{max-width:420px;margin:12vh auto;padding:32px;background:#fff;border:1.5px solid #000}
.err{color:var(--red);font-weight:600}
.toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:500;padding:12px 18px;background:#000;color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
@media (max-width:900px){.ed-grid{grid-template-columns:1fr}.ed-stage .stk{position:absolute !important}}