/* Jazz World Peace. Blue-grey walls, records on them, plain type for the work. */
@font-face{font-family:Auralume;src:url(/fonts/auralume-lake.woff2) format('woff2');font-display:swap}
:root{--wall:#293f51;--deep:#1c2d3a;--mist:#e9eeed;--paper:#f6f8f7;--ink:#1d2c37;--mute:#54686e;--line:#c9d4d2;--sage:#385e55;--plum:#a74e72;--brass:#d6a83e;--lilac:#cfc8f0;--bg:var(--mist);--fg:var(--deep);--vinyl:var(--deep);--hit:var(--brass);--accent:var(--mist)}
*{box-sizing:border-box}
html{background:var(--wall);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--mist);font:17px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif}
main{flex:1}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:1px solid currentColor;padding:.45rem .85rem;border-radius:2px}
button:disabled{opacity:.5;cursor:not-allowed}
:focus-visible{outline:3px solid var(--plum);outline-offset:2px}
.primary{background:var(--brass);border-color:var(--brass);color:var(--deep);font-weight:700}
.primary:hover:not(:disabled){background:var(--mist);border-color:var(--mist)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.quiet{border-color:transparent;text-decoration:underline;padding-left:0;color:var(--mute)}

.bar{display:flex;align-items:center;gap:2rem;padding:.9rem clamp(1rem,3vw,2.6rem);position:relative;z-index:3}
.wordmark{font:2rem/1 Auralume,Georgia,serif;text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--brass);font:1.3rem/1 Georgia,serif;margin-left:.15rem;vertical-align:.5rem}
.bar nav{display:flex;gap:1.4rem;font-size:.95rem}
.bar nav a{text-decoration:none}.bar nav a:hover,.bar nav a[aria-current]{text-decoration:underline}
#account{margin-left:auto}
.dues{font-weight:700;color:var(--brass);text-decoration:none}
.join{background:var(--mist);border-color:var(--mist);color:var(--deep);font-weight:700}

.hero{position:relative;padding:clamp(1.6rem,4.5vw,3.6rem) clamp(1rem,3vw,2.6rem) clamp(2.4rem,5vw,3.6rem);overflow:hidden}
.hero h1{font:400 clamp(3.1rem,9vw,7.2rem)/.98 Auralume,Georgia,serif;max-width:11.5em;position:relative;z-index:1}
.lede{font-size:1.2rem;max-width:44ch;margin-top:1.4rem;position:relative;z-index:1}
.hero-actions{margin-top:1.8rem;position:relative;z-index:1}
.turntable{position:relative}
.hero-disc{position:absolute;right:max(-9vw,-130px);top:-3rem;width:min(56vw,640px);--vinyl:var(--deep);--hit:var(--brass);--accent:var(--plum)}

.disc{display:block;width:100%;height:auto;overflow:visible}
.vinyl{fill:var(--vinyl)}
.track{fill:none;stroke:var(--hit);stroke-opacity:.22;stroke-width:.3}
.hit{fill:var(--hit)}.hit.snare,.hit.kick{fill:var(--accent)}
.label{fill:var(--accent)}.spindle{fill:var(--vinyl)}
.platter{transform-origin:50% 50%;transform:rotate(var(--tilt,0deg))}
.spinning .platter{animation:spin 1.8s linear infinite}
@keyframes spin{from{transform:rotate(var(--tilt,0deg))}to{transform:rotate(calc(var(--tilt,0deg) + 360deg))}}
@media (prefers-reduced-motion:reduce){.spinning .platter{animation:none}.sleeve .turntable{transition:none}}
.needle{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;background:transparent;pointer-events:auto;z-index:2}
.needle::before{content:'';position:absolute;inset:32% 28% 32% 36%;background:var(--vinyl);clip-path:polygon(0 0,100% 50%,0 100%)}
.spinning .needle::before{inset:34%;clip-path:none}
.needle:hover{background:rgb(255 255 255/.25)}
.needle span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.floor{padding:0 clamp(1rem,3vw,2.6rem) 4rem}
.floor-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.6rem}
.floor-head h2,.rules h2{font:400 2.7rem/1.1 Auralume,Georgia,serif}
.sample{font-size:.92rem;color:#c7d3d3}
.kinds{display:flex;flex-wrap:wrap;gap:.3rem;margin:1.1rem 0 1.5rem}
.kinds button{border-color:transparent;padding:.25rem .6rem}
.kinds button:hover{text-decoration:underline}
.kinds button[aria-pressed=true]{background:var(--mist);color:var(--deep)}
.wall.trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.wall.trio h3{font-size:clamp(1.7rem,3.6vw,3.2rem)}
.floor h2{margin-bottom:1.1rem}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));gap:clamp(.8rem,1.6vw,1.3rem)}
.sleeve{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg);color:var(--fg)}
.sleeve .turntable{position:absolute;width:90%;left:26%;top:-34%;z-index:2;pointer-events:none;transition:transform .35s ease}
.sleeve:hover .turntable,.sleeve:focus-within .turntable{transform:translate(-7%,5%)}
.sleeve-link{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:.9rem 1rem;text-decoration:none;z-index:1}
.sleeve h3{font:400 2.05rem/1.02 Auralume,Georgia,serif}
.sleeve p{font-size:.86rem;margin-top:.3rem}
.tone-0{--bg:var(--mist);--fg:var(--deep);--vinyl:var(--wall);--hit:var(--brass);--accent:var(--lilac)}
.tone-1{--bg:var(--plum);--fg:#fff;--vinyl:var(--deep);--hit:var(--lilac);--accent:var(--brass)}
.tone-2{--bg:var(--sage);--fg:#fff;--vinyl:var(--deep);--hit:var(--brass);--accent:var(--mist)}
.tone-3{--bg:var(--brass);--fg:var(--deep);--vinyl:var(--deep);--hit:var(--mist);--accent:var(--plum)}
.tone-4{--bg:var(--lilac);--fg:var(--deep);--vinyl:var(--plum);--hit:var(--paper);--accent:var(--deep)}
.tone-5{--bg:var(--paper);--fg:var(--plum);--vinyl:var(--plum);--hit:var(--paper);--accent:var(--brass)}

.rules{background:var(--deep);padding:3rem clamp(1rem,3vw,2.6rem)}
.rule-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1.6rem 2.6rem;margin-top:1.3rem}
.rule-cols h3{font-size:1.1rem;color:var(--brass)}.rule-cols p{margin-top:.3rem;max-width:40ch}

body[data-page=room]{background:var(--paper);color:var(--ink)}
body[data-page=room] .bar{background:var(--wall);color:var(--mist)}
.room-layout{display:grid;grid-template-columns:210px minmax(0,1fr) 320px;min-height:calc(100vh - 66px)}
.your-rooms,.side{padding:1.3rem 1.2rem;border-right:1px solid var(--line)}
.side{border-right:0;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:1.8rem}
.your-rooms h2,.side h2{font-size:1.02rem;margin:0 0 .6rem}
.back{display:inline-block;margin-bottom:1.3rem}
.your-rooms li{margin:.3rem 0}.your-rooms a[aria-current]{font-weight:700;text-decoration:none;color:var(--plum)}
.stage{display:flex;flex-direction:column;min-width:0}
.room-head{background:var(--bg);color:var(--fg);display:flex;gap:1.3rem;align-items:center;padding:1.2rem clamp(1rem,2.4vw,1.8rem)}
.room-head .turntable{width:112px;flex:none}
.room-head h1{font:400 clamp(2.2rem,4.6vw,3.5rem)/1.05 Auralume,Georgia,serif;margin-top:.3rem}
.room-kind{font-size:.88rem}
.room-head p:last-child{max-width:60ch}
.sample-band{padding:.35rem clamp(1rem,2.4vw,1.8rem);font-size:.84rem;color:var(--mute);border-bottom:1px solid var(--line)}
.sample-note{color:var(--mute);font-size:.85rem}
.posts{flex:1;padding:1rem clamp(1rem,2.4vw,1.8rem);display:flex;flex-direction:column;gap:1.05rem;max-width:46rem;width:100%}
.post{display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;align-items:start}
.post p{grid-column:1;max-width:62ch}
.post .yeah{grid-column:2;grid-row:1/3;font-size:.8rem;padding:.1rem .5rem;border-color:var(--line);color:var(--mute)}
.yeah[aria-pressed=true]{background:var(--plum);border-color:var(--plum);color:#fff}
.author{border:0;padding:0;font-weight:700;font-size:.9rem;color:var(--sage);text-align:left}.author:hover{text-decoration:underline}
.composer{position:sticky;bottom:0;display:flex;gap:.6rem;align-items:flex-end;padding:.8rem clamp(1rem,2.4vw,1.8rem);background:var(--paper);border-top:1px solid var(--line)}
.composer label{flex:1}.composer textarea,.sheet input,.sheet select,.sheet textarea,.inline input{display:block;width:100%;border:1px solid #8ea19f;border-radius:2px;padding:.5rem;background:#fff;color:var(--ink)}
.composer textarea{resize:none}
body[data-page=room] .primary{background:var(--sage);border-color:var(--sage);color:#fff}
body[data-page=room] .primary:hover:not(:disabled){background:var(--deep);border-color:var(--deep)}
.at-door{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;align-items:center;padding:.9rem clamp(1rem,2.4vw,1.8rem);border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--paper)}
.side-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem}.side-head h2{margin:0}.side-head button{font-size:.85rem;padding:.2rem .55rem}
.call{border-top:1px solid var(--line);padding:.7rem 0;font-size:.94rem}
.call h4{font-size:1rem;line-height:1.25}.call-meta{color:var(--mute);font-size:.85rem;margin:.1rem 0 .3rem}.call-state{color:var(--sage);font-weight:700;margin-top:.3rem}
.call.done h4,.call.closed h4{color:var(--mute)}
.call>button{margin-top:.5rem;font-size:.85rem}
.answers li{display:grid;gap:.05rem;margin-top:.5rem}.answers button:not(.author){justify-self:start;font-size:.8rem;padding:.1rem .5rem;margin-top:.15rem}
.inline{margin-top:.6rem;display:flex;gap:.4rem;align-items:flex-end}.inline label{flex:1;font-size:.82rem}.inline button{font-size:.85rem}
.people li,.given li,.ledger li{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0}
.people span{color:var(--mute);font-size:.88rem;white-space:nowrap}
.empty{color:var(--mute)}
.floor .empty{color:#c7d3d3}

body[data-page=dues]{background:var(--paper);color:var(--ink)}
body[data-page=dues] .bar{background:var(--wall);color:var(--mist)}
body[data-page=dues] .primary{background:var(--sage);border-color:var(--sage);color:#fff}
.page{max-width:44rem;margin:0 auto;padding:clamp(2rem,5vw,3.6rem) clamp(1rem,3vw,1.5rem)}
.page h1{font:400 clamp(3rem,8vw,5.2rem)/1 Auralume,Georgia,serif}
.page h2{font-size:1.1rem;margin:2rem 0 .5rem}
.page .quiet{margin-top:2rem;display:block}
.ledger{margin-top:1.6rem;border-top:1px solid var(--line)}.ledger li{border-bottom:1px solid var(--line);padding:.5rem 0}
.given button{font-size:.82rem;padding:.1rem .5rem}
body[data-page=doc]{background:var(--wall)}
.doc-list{margin-top:1.8rem}.doc-list li{padding:.8rem 0;border-top:1px solid #4b6172}
.doc-list a{font-size:1.25rem;font-weight:700;text-decoration:none}.doc-list a:hover{text-decoration:underline}
.doc-list p{color:#c7d3d3;font-size:.92rem;max-width:58ch}

.sheet{border:0;border-radius:2px;padding:1.4rem;width:min(30rem,calc(100vw - 2rem));background:var(--paper);color:var(--ink)}
.sheet::backdrop{background:rgb(28 45 58/.72)}
.sheet h2{font:400 2.3rem/1.05 Auralume,Georgia,serif;margin-bottom:.8rem}
.sheet label{display:block;margin-top:.8rem;font-size:.9rem}.sheet label span{display:block;margin-bottom:.2rem}
.sheet .big{font-size:1.5rem;font-weight:700;margin:.2rem 0 .6rem;color:var(--sage)}
.sheet-actions{display:flex;gap:.6rem;margin-top:1.2rem}.sheet .primary{background:var(--sage);border-color:var(--sage);color:#fff}

.foot{padding:1.4rem clamp(1rem,3vw,2.6rem);background:var(--deep);color:#c7d3d3;font-size:.9rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem}
#status{position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);background:var(--deep);color:var(--mist);padding:.5rem .9rem;border-radius:2px;z-index:9;max-width:calc(100vw - 2rem)}
#status[data-error=true]{background:var(--plum);color:#fff}

@media (max-width:1040px){
 .room-layout{grid-template-columns:minmax(0,1fr)}
 .your-rooms{border-right:0;border-bottom:1px solid var(--line);padding:.7rem 1rem}.your-rooms h2,.your-rooms ul,.your-rooms p{display:none}.back{margin:0}
 .side{border-left:0;border-top:1px solid var(--line)}
 .composer,.at-door{position:static}
}
@media (max-width:640px){
 body{font-size:16px}
 .bar{gap:.9rem;flex-wrap:wrap}.bar nav{order:3;width:100%;gap:1.1rem;font-size:.92rem}
 .hero-disc{right:-34vw;top:1rem;width:84vw;opacity:.5}.hero-disc .needle{display:none}
 .wall,.wall.trio{grid-template-columns:minmax(0,1fr)}
 .sleeve .turntable{width:72%;left:42%;top:-27%}
 .sleeve-link{padding:.6rem .7rem}
 .sleeve h3{font-size:1.5rem}
 .sleeve p{font-size:.8rem}
 .room-head{padding:.9rem 1rem}.room-head .turntable{width:78px}
}