/* MURMUR identity / v02: an independent music journal meets a live mixing desk.
   Intentionally tactile and typographic rather than glass-card SaaS. The luminous
   audio and music gradient remain the visual hero. No external font dependencies. */
:root{
  --bg:#0c0b13;
  --surface:#191824;
  --surface2:#252131;
  --surface3:#2d283b;
  --line:#393544;
  --text:#f3eee5;
  --muted:#aca5b9;
  --mint:#85dec9;
  --lilac:#bba3ed;
  --amber:#efbd84;
  --coral:#ef917f;
  --paper:#f1eadc;
  --serif:Georgia,"Iowan Old Style","Baskerville",serif;
  --font:Arial,"Helvetica Neue",ui-sans-serif,system-ui,sans-serif;
}
html{background:var(--bg)}
body{
  background:radial-gradient(ellipse 75% 35% at 82% -7%,rgba(114,70,108,.14),transparent 80%),
             linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),rgba(255,255,255,.018) 50%,transparent calc(50% + 1px)),
             var(--bg);
  background-attachment:fixed;
}
::selection{background:#d7b3f3;color:#13101c}
.topbar{height:83px;background:#0e0d16;border-bottom:1px solid #514756;backdrop-filter:none;padding:0 clamp(18px,3.2vw,55px)}
.brand{gap:14px;letter-spacing:.18em;font-size:19px;font-weight:900}
.brand-word{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand-word small{font-size:7px;letter-spacing:.31em;color:#b2a8bc;font-weight:700}
.brand-mark{position:relative;display:block;flex:none;width:42px;height:42px;border:1px solid #e7b9a1;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0,transparent 5px,rgba(232,193,170,.34) 5.5px,transparent 6.5px);box-shadow:none}
.brand-mark:before{content:"";position:absolute;left:16px;top:16px;width:8px;height:8px;border-radius:50%;background:#e6b6a3;box-shadow:0 0 0 4px #12111b}
.brand-orbit{position:absolute;width:7px;height:7px;background:#88e2d2;top:2px;right:0;border-radius:50%;border:2px solid #0e0d16}
.top-links{gap:23px}
.top-links a{color:#d1c7d2;font-size:12px;border-bottom:1px solid transparent;padding-bottom:5px}
.top-links a:hover{color:var(--paper);border-bottom-color:var(--amber)}
.badge{background:transparent;border:1px solid #746271;border-radius:2px;color:#ead6c3;letter-spacing:.17em}
.badge:before{background:var(--coral);box-shadow:0 0 7px rgba(239,145,127,.4)}
.pill{background:transparent;border:1px solid #574e61;color:#d7c9d9;border-radius:3px}
.eyebrow,.module-label,.series-number{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:600;letter-spacing:.135em;color:#d5a6ad;text-transform:uppercase}
.panel{background:#171521;border:1px solid #393242;border-radius:9px;box-shadow:none}
.panel-pad{padding:25px}
.section-heading h2{font-weight:750;letter-spacing:-.045em}
.section-heading h2 em,.record-panel h2 em{font-family:var(--serif);font-weight:400}
.btn,.btn.small,.btn.ghost,.btn.primary,.input,.select,.link-button,.iconbtn{border-radius:5px}
.btn{background:#272434;color:#f4e8de;border-color:#625165;letter-spacing:.01em}
.btn:hover{background:#393044}
.btn.primary{background:#e8b49e;color:#281a20;border-color:#e8b49e;box-shadow:3px 3px 0 #73535d}
.btn.primary:hover{background:#f6c9b4}
.btn.ghost{background:#24202e;border-color:#574a61;color:#e9deeb}
.btn.ghost:hover{background:#352b3d}
.btn.danger{border-color:#975a63;background:#49242d;color:#ffd7d3}
.input,.select{background:#211d2b;border:1px solid #51455a;color:var(--paper)}
.input::placeholder{color:#8f8095}
.label{letter-spacing:.12em;color:#d0becd;font-size:10px}
.line{background:#433744}
.meta,.muted{color:var(--muted)}
/* Participant experience: deliberately asymmetric editorial composition. */
.join-wrap{max-width:1330px;grid-template-columns:minmax(0,1.13fr) minmax(335px,.8fr);gap:clamp(45px,7vw,115px);padding:clamp(60px,6.8vw,100px) 38px 95px;align-items:start}
.join-wrap .hero{padding-top:17px;position:relative}
.editorial-topline{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #62515d;padding-top:14px;max-width:670px}
.series-number{color:#817887;font-size:9px;white-space:nowrap}
.hero h1{font-size:clamp(65px,7.4vw,116px);line-height:.94;margin:33px 0 22px;letter-spacing:-.092em;font-weight:800;max-width:760px}
.gradient{background-image:linear-gradient(108deg,#8de6d0 0%,#c2a6f1 43%,#f0b4a7 73%,#eec392 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-afterword{font-family:var(--serif);font-size:clamp(22px,2.2vw,35px);line-height:1.16;letter-spacing:-.055em;color:#e8dfd9;margin:0 0 28px}
.hero-afterword em{font-weight:400;color:#e9ad9c}
.hero>p:not(.hero-afterword){font-size:14px;color:#c3b9c5;line-height:1.75;max-width:480px}
.hero-art{margin:18px 0 15px;height:182px;border-top:1px solid #3c3442;border-bottom:1px solid #3c3442;background:repeating-linear-gradient(90deg,transparent 0,transparent 66px,rgba(227,217,238,.035) 67px,transparent 68px)}
.hero-art svg{opacity:.9}
.art-caption{position:absolute;bottom:10px;left:0;color:#bbaaba;font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.14em}
.hero-rules{margin:20px 0 27px;gap:0;border-top:1px solid #514653}
.hero-step{padding:13px 0;border-bottom:1px solid #514653;align-items:center;color:#d7ced8;line-height:1.55}
.hero-step strong{color:#f4eade}
.step-num{width:32px;height:29px;border:0;border-radius:0;background:none;color:#f1ae9d;font-family:var(--serif);font-size:23px;font-style:italic;font-weight:400}
.link-button{padding:12px 16px;border-color:#75616c;color:#ead7ce;background:transparent;font-weight:700}
.link-button:hover{background:#2b2330}
.record-panel{position:relative;border:1px solid #8e6979;background:#241c2c;padding:34px 31px 30px;box-shadow:9px 10px 0 #15121c,10px 11px 0 #5e4353;transform:rotate(.22deg)}
.record-panel:before{content:"";position:absolute;top:-8px;right:38px;width:64px;height:14px;transform:rotate(-7deg);background:#c88f87aa;opacity:.8;pointer-events:none}
.record-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #625061;padding-bottom:14px}
.record-stamp{font-family:ui-monospace,monospace;color:#e8beac;font-size:10px;letter-spacing:.04em;white-space:nowrap;border:1px solid #ad7a7d;padding:5px 8px;transform:rotate(5deg)}
.record-stamp b{font-weight:700;font-size:13px}
.record-panel h2{font-size:clamp(27px,3.1vw,43px);letter-spacing:-.064em;line-height:1;margin:30px 0 13px}
.record-panel h2 em{color:#e6ab9f}
.record-panel .meta{color:#beb1c2}
.role-picker{gap:7px}
.role-picker button{border-radius:3px;padding:16px 7px;background:#2b2233;border-color:#584b60;color:#d6cbd7}
.role-picker button.active{background:#3b3041;border-color:#ddb4a5;outline:1px solid #ddb4a5;outline-offset:-4px;color:#fff5e7}
.role-picker button .round{width:12px;height:12px;border-radius:2px;transform:rotate(45deg)}
.wavebox{position:relative;background:#1a1722;border-color:#5a465d;border-radius:3px;height:110px;margin-top:18px;padding-top:15px}
.wave-label{position:absolute;top:8px;left:12px;font-size:8px;color:#aa9ab0;letter-spacing:.17em;font-family:ui-monospace,monospace}
.mic-btn{background:#e7b39f;color:#281e25;border:0;border-radius:3px;font-size:13px;letter-spacing:.03em;font-weight:800;box-shadow:4px 4px 0 #72525d;transition:transform .15s,box-shadow .15s}
.mic-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:5px 5px 0 #72525d}
.mic-btn.recording{background:#f58c8b}
.notice{background:#211e2b;border:1px solid #53495b;border-left:2px solid #bb9b9d;border-radius:2px;color:#c9bccb}
.vote-grid button{background:#2a2333;border-color:#514558;border-radius:3px;color:#eee2e7}
.vote-grid button:hover{border-color:#ebafab}
.viewer-status{color:#a8e4d3}
/* Studio: music hardware, not a business analytics dashboard. */
.studio{max-width:1770px;padding:38px clamp(19px,3vw,52px) 42px}
.studio-header{margin-bottom:25px;align-items:center;border-bottom:1px solid #51444f;padding-bottom:26px}
.studio-header h1{font-size:clamp(33px,3.8vw,53px);line-height:1.05;letter-spacing:-.07em;margin:14px 0 10px;font-weight:800}
.editorial-italic{font-family:var(--serif);font-weight:400;letter-spacing:-.065em}
.studio-header p{color:#b9aebe;font-size:13px;letter-spacing:.015em}
.studio-columns{grid-template-columns:minmax(0,1fr) 322px;gap:18px}
.stage{border-color:#564858;border-radius:4px;min-height:540px;background:#0a0c19}
.stage canvas{height:540px}
.stage-edge{z-index:1;position:absolute;right:17px;top:50%;writing-mode:vertical-rl;color:#e4abaa;font:9px ui-monospace,monospace;letter-spacing:.20em;opacity:.6;pointer-events:none}
.stage-title{font-family:ui-monospace,monospace;font-size:11px;color:#e6d8e6;letter-spacing:.14em}
.stage-subtitle{color:#b9b1c3}
.stage-bottom{border-top:1px solid #353144;padding-top:12px;bottom:13px}
.legenditem{color:#c8bdcd;font-size:11px}
.help-tip{color:#b6acbd}
.transport{background:#1b1723;border:1px solid #514350;padding:12px 14px;flex-wrap:wrap;border-radius:4px;margin-top:12px;gap:15px}
.transport .btn{min-height:37px}
.transport select{width:118px;background:#292331}
.stats-bar{gap:0;border-top:1px solid #645163;margin-top:20px}
.stat-card{padding:14px 17px 9px 2px;background:transparent;border:0;border-right:1px solid #3b3243;border-radius:0}
.stat-card:not(:first-child){padding-left:16px}
.stat-card:last-child{border-right:0}
.stat-card .stat{font-size:34px;font-weight:600;margin-top:10px;letter-spacing:-.07em;color:#f5eadd}
.stat-card .label{font:9px ui-monospace,monospace;color:#c0adbc;letter-spacing:.08em}
.sidebar .panel{background:#211b2a;border-color:#514050}
.sidebar .panel:nth-child(2){background:#201b25}
.sidebar .panel:nth-child(3){background:#161520}
.module-label{display:block;margin-bottom:19px;font-size:9px;color:#b99db8}
.sidebar h2{font-size:24px;letter-spacing:-.06em;font-weight:700}
.title-dot{color:#efab9e}
.range-row{border-top:1px solid #514050;padding-top:12px;margin-top:15px}
.range-head{font-size:12px}
.range{cursor:pointer}
.queue-item{background:#292130;border-color:#57445a;border-radius:4px}
.queue-empty{font-style:italic;font-family:var(--serif);font-size:16px}
.sample-list{gap:9px}
.sample-card{background:#211c2b;border-color:#524456;border-radius:4px}
.sample-card strong{color:#eae2e7}
.empty-samples{border-color:#665163;border-radius:2px}
.studio-foot{padding-top:20px;border-top:1px solid #453745;color:#a89aae;font:10px ui-monospace,monospace;letter-spacing:.06em}
.overlay{background:#090810e8;backdrop-filter:blur(6px)}
.modal{background:#241d2d;border:1px solid #a27683;border-radius:5px;box-shadow:12px 12px 0 #0b0a10}
.modal h2{font-family:var(--serif);font-weight:400;font-style:italic;font-size:39px}
/* Watch display deliberately restrained; the constellation stays the performer. */
.watch-wrap{max-width:1420px;margin:48px auto;padding:0 32px}
.watch-info{border-top:1px solid #685361;padding-top:20px;margin-bottom:25px}
.watch-title{margin:8px 0;font-size:clamp(31px,4.2vw,60px);line-height:1.05;letter-spacing:-.066em}
.watch-title em{font-family:var(--serif);font-weight:400}
.watch-wrap .stage{min-height:70vh}
.watch-wrap canvas{min-height:480px}
@media(max-width:1150px){.studio-columns{grid-template-columns:1fr}.sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.join-wrap{gap:32px;grid-template-columns:minmax(0,1fr) minmax(315px,.92fr);padding-left:25px;padding-right:25px}.hero h1{font-size:clamp(58px,7vw,88px)}}
@media(max-width:760px){.topbar{height:72px}.top-links .badge{display:none}.brand{font-size:16px}.brand-mark{width:36px;height:36px}.brand-mark:before{top:13px;left:13px}.brand-word small{font-size:6px}.join-wrap{display:flex;flex-direction:column;padding:37px 19px 60px;gap:36px}.join-wrap .hero{padding-top:0}.editorial-topline{gap:10px}.series-number{font-size:8px}.hero h1{font-size:clamp(55px,11.5vw,85px);margin-top:29px}.hero-afterword{font-size:26px}.hero-art{height:135px}.record-panel{width:calc(100% - 9px)!important;padding:27px 20px}.studio{padding:29px 14px}.studio-header{align-items:start;gap:18px}.studio-header h1{font-size:36px}.stage,.stage canvas{min-height:410px;height:410px}.sidebar{grid-template-columns:1fr}.transport{align-items:stretch}.transport-left{flex-wrap:wrap}.stats-bar{grid-template-columns:repeat(2,1fr);row-gap:13px}.stat-card:nth-child(2){border-right:0}.stat-card:nth-child(3){padding-left:2px}.watch-info{align-items:start;flex-wrap:wrap}.watch-wrap{padding:0 15px}.watch-wrap canvas{min-height:410px}}
@media(max-width:430px){.top-links{gap:9px}.top-links a{font-size:10px}.top-links a:last-child{display:none}.record-stamp{font-size:9px}.hero h1{font-size:52px}.stage-edge{display:none}.studio-header .row{flex-wrap:wrap}.transport-right{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.record-panel{transform:none}.record-stamp{transform:none}}
/* The signature reveal is a three-movement score, placed beside the instrument. */
.reveal-strip{border:1px solid #64505d;border-top:0;background:#201a27;display:grid;grid-template-columns:minmax(180px,1fr) 1.3fr;gap:12px 28px;padding:20px 23px}
.reveal-strip .module-label{margin:0 0 10px}.reveal-strip select{max-width:360px}.reveal-strip p{grid-column:1/-1;margin:0;overflow-wrap:anywhere}
#reveal-phases{display:flex;list-style:none;gap:20px;align-items:center;justify-content:space-between;padding:0;margin:0;font:10px ui-monospace,monospace;color:#aba0ae}
#reveal-phases li{border-bottom:2px solid #4c3e50;padding:13px 0;flex:1;transition:color .2s,border-color .2s}#reveal-phases em{display:block;font:italic 21px Georgia,serif;margin-top:7px;color:#cbbdc9}#reveal-phases .active{color:#a3edd9;border-color:#a3edd9}#reveal-phases .active em{color:#f7e9d8}
.review-route{border-top:1px solid #64515e;border-bottom:1px solid #64515e;margin:16px 0;padding:12px 0;display:grid;gap:10px}.review-route p{margin:0;line-height:1.6}.review-route label{line-height:1.6}.review-route .label{margin:0}.review-route input{accent-color:var(--mint)}
.sample-card.selected{border-color:var(--amber)}.sample-card .feature-select{background:none;border:0;text-align:left;color:inherit;min-width:0;flex:1;padding:0}.sample-card .feature-select strong{display:block;overflow:hidden;text-overflow:ellipsis}.sample-card:focus-within{outline:1px solid var(--mint)}
body.stage-mode{overflow:hidden}body.stage-mode .topbar,body.stage-mode .studio-header,body.stage-mode .sidebar,body.stage-mode .stats-bar,body.stage-mode .main-col>.panel:not(.stage),body.stage-mode .studio-foot,body.stage-mode .transport,body.stage-mode .reveal-strip{display:none}body.stage-mode .studio{padding:0;max-width:none}body.stage-mode .studio-columns{display:block}body.stage-mode .stage{position:fixed;inset:0;border:0;border-radius:0;min-height:100vh}body.stage-mode .stage canvas{height:100vh;min-height:100vh}body.stage-mode .stage-top{top:5vh;left:4vw;right:4vw}body.stage-mode .stage-title{font-size:clamp(14px,2vw,26px)}body.stage-mode .stage-subtitle{font:italic clamp(20px,3vw,44px) Georgia,serif;color:#f0e3d4;max-width:75vw}body.stage-mode .stage-bottom{left:4vw;right:4vw;bottom:4vh}body.stage-mode .help-tip{display:none}.stage-exit{display:none}body.stage-mode .stage-exit{display:block;position:fixed;top:12px;right:12px;z-index:100;opacity:.2}body.stage-mode .stage-exit:hover,body.stage-mode .stage-exit:focus-visible{opacity:1}
.my-contributions{border-top:1px solid #6c5365;margin-top:22px;padding-top:18px}.my-contribution{border-bottom:1px solid #57465e;padding:12px 0}.my-contribution p{font-size:12px;line-height:1.6}.my-contribution .row{flex-wrap:wrap;gap:7px}.queue-role{margin-top:8px}.watch-focus{margin:20px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media(max-width:760px){.reveal-strip{grid-template-columns:1fr;padding:17px 14px}#reveal-phases{gap:14px}.stage-top{gap:8px}.stage-top .pill{font-size:8px}.stage-subtitle{max-width:75%}.transport-left,.transport-right{flex-wrap:wrap}}
.participation-mode{position:absolute;left:24px;bottom:65px;z-index:2;color:#c5b6c6;font:10px ui-monospace,monospace;letter-spacing:.08em;pointer-events:none}.stage-mode .participation-mode{left:4vw;bottom:10vh}#first-sound{margin-top:12px;line-height:1.7}details{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}summary{cursor:pointer;font-size:12px}details .select{margin:10px 0}#admission-toggle{margin-bottom:10px}
/* Living Record / restrained projected ribbons, not a galaxy field. */
.stage{background:#080c0f}.stage canvas{touch-action:none}.stage canvas:focus-visible{outline:2px solid #eac69e;outline-offset:-4px}.stage-bottom{background:linear-gradient(transparent,#080c0fe8);pointer-events:none}.stage-edge{color:#c9b99d}.stage-subtitle{max-width:75ch}.participation-mode{bottom:85px}.watch-wrap .stage{border-color:#52605c}#export-record:disabled{opacity:.4}.stage-mode .participation-mode{bottom:85px}.stage-mode .stage-top{max-width:90%}
.composition-controls{margin-top:16px;padding:18px 0;border-top:1px solid #655e50;border-bottom:1px solid #393f3c;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.composition-controls .module-label{width:100%;margin:0}.composition-controls p{width:100%;margin:0}.composition-controls details{margin:0;border:0;padding:0}.composition-controls input{width:150px}.stage-mode .composition-controls{display:none}
/* The invitation reaches the microphone before explaining the instrument. */
.join-page .join-wrap{align-items:start;padding-top:35px;max-width:1200px}.join-page .join-wrap .hero{padding-top:8px}.join-page .hero h1{font-size:clamp(54px,6.8vw,88px);margin:20px 0}.join-page .hero-afterword{font-size:26px}.join-page .hero>p{font-size:17px;line-height:1.6}.join-page p.meta,.join-page .notice,.join-page .viewer-status{font-size:15px;line-height:1.6}.join-page .label{font-size:13px}.join-page .input,.join-page .btn,.join-page .link-button{font-size:16px;min-height:44px}.join-page .mic-btn{font-size:18px;min-height:58px}.join-page .record-panel{padding:26px;transform:none}.join-page .record-panel h2{font-size:30px}.join-page .record-stamp{font-size:13px}.join-page .join-explainer{margin-top:28px}.join-page summary{font-size:16px;line-height:1.5}.join-page .join-role{margin:18px 0;padding-top:12px}.join-page .role-picker{grid-template-columns:1fr 1fr}.join-page .role-picker button{font-size:14px;min-height:48px}.join-page .role-picker button:first-child{grid-column:1/-1}.join-page .role-picker .round{display:none}.join-page .wavebox{height:88px;margin:16px 0}.join-page .wave-label{font-size:11px}.join-page .my-contribution p{font-size:16px}.join-page .join-voting{margin-top:24px}.join-page #post-record{margin-top:12px}.join-page #post-record .row{flex-wrap:wrap}.join-page .hero-art{height:130px}.join-page .hero-step{font-size:16px}.join-page .join-explainer .link-button{margin-top:14px}.join-page .recording-consent-label{margin-top:16px}
@media(max-width:760px){.join-page .join-wrap{padding-top:24px;gap:22px}.join-page .hero h1{font-size:52px;margin:12px 0}.join-page .hero-afterword{font-size:21px;margin:10px 0}.join-page .hero>p:not(.hero-afterword){display:none}.join-page .editorial-topline{display:none}.join-page .join-explainer{margin:16px 0 0;padding:0;border:0}.join-page .record-topline{display:none}.join-page .record-panel h2{font-size:28px}.join-page .record-panel{padding:22px 18px}.join-page .record-panel .meta{margin-bottom:12px}.join-page .wavebox{height:72px}.join-page .join-role{margin:12px 0}.join-page .hero h1 br{display:none}.join-page .hero h1{max-width:340px}.join-page .hero-afterword br{display:none}}

@media(max-width:760px){.join-page .hero h1{font-size:48px;line-height:1.02}}