/* Reception pages. Tokens and patterns mirror index.html so the pages read as part of pulsewith.dev. */
@font-face{font-family:'VT323';src:url(../vt323.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IM Fell English';src:url(../im-fell-english.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{
  --bg:#0A0714;--rosy:#E26A8D;--rosy-lt:#E87BAE;--purple1:#9B5CE5;--purple2:#6A3AAD;
  --glow:#BB88FF;--dim:rgba(214,176,224,0.72);--text:#EDE8FF;--muted:rgba(226,200,236,0.86);
  --terminal:'VT323',monospace;--serif:'IM Fell English',Georgia,serif;
  --reader:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--terminal);overflow-x:hidden;cursor:crosshair}
/* scanline veil, same as the main page */
body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.09) 3px,rgba(0,0,0,0.09) 4px)}

.top{max-width:987px;margin:0 auto;padding:34px 48px 0;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.wordmark{font-family:var(--serif);font-size:clamp(38px,5.4vw,60px);   /* sized to read level with the Reception heading; phones stay at 38px */line-height:.95;letter-spacing:-1px;color:var(--text);text-decoration:none;text-shadow:0 0 34px rgba(155,92,229,.7),0 0 70px rgba(100,50,180,.4);cursor:pointer}
.brand{display:flex;flex-direction:column;gap:10px}
.credit{font-family:var(--terminal);font-size:15px;letter-spacing:3px;text-transform:uppercase;color:var(--muted,rgba(226,200,236,0.86))}
/* intro under the wordmark, in the home page's project-description voice */
.intro{margin-top:14px}
.intro .status{margin-bottom:12px}
.intro-p{font-family:var(--terminal);font-size:20px;line-height:1.45;letter-spacing:1px;color:var(--muted);max-width:600px}
.top .rp{margin-top:12px}   /* a little extra air between the intro and the player */
.wrap{max-width:987px;margin:0 auto;padding:50px 48px 90px}

/* player, from the home page hero: track name over play / waveform / time. Sits under the wordmark at every width. */
.rp{font-family:var(--terminal);display:flex;flex-direction:column;gap:7px;width:min(600px,100%)}
.rp-name{font-size:20px;letter-spacing:3px;text-transform:uppercase;color:var(--text);text-shadow:0 0 10px rgba(226,111,141,.35);line-height:1.2}
.rp-row{display:flex;align-items:center;gap:14px}
.rp-play{background:none;border:1px solid rgba(226,111,141,.5);border-radius:2px;color:var(--rosy-lt);font-family:var(--terminal);font-size:17px;line-height:1;width:34px;height:30px;flex:none;cursor:pointer;transition:border-color .2s,box-shadow .2s,color .2s}
.rp-play:hover,.rp-play:focus-visible{border-color:var(--rosy);color:#fff;box-shadow:0 0 16px rgba(226,111,141,.3);outline:none}
.rp-wave{flex:1 1 0%;width:0;min-width:0;height:34px;display:block;cursor:crosshair}
.rp-wave:focus-visible{outline:1px solid var(--glow);outline-offset:3px}
.rp-time{font-size:18px;letter-spacing:2px;color:var(--dim);flex:none;min-width:11ch;text-align:right}
.rp-ost{display:flex;align-items:baseline;gap:20px;margin-top:2px;padding-left:2px}
.rp-ost-label{font-size:15px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}   /* same voice as the credit line */

/* identical to .section-title on the main page, including the browser-default heading weight */
h1{font-family:var(--terminal);font-size:clamp(36px,5vw,56px);color:var(--text);margin-bottom:52px;text-shadow:0 0 30px rgba(155,92,229,0.25);letter-spacing:2px;text-transform:uppercase}

/* status label, from .project-status on the main page, a step brighter here because these labels carry information. The rose dot is warmth, not a status. */
.status{font-family:var(--terminal);font-size:20px;letter-spacing:4px;text-transform:uppercase;color:rgba(155,92,229,0.78);margin-bottom:14px;display:flex;align-items:baseline;gap:10px;line-height:1.35}
.status::before{content:'';flex:none;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rosy);box-shadow:0 0 9px var(--rosy);position:relative;top:-2px}
/* a link inside a label, in the main page's inline-link style */
.inline-link{color:var(--glow);text-decoration:none;border-bottom:1px solid var(--purple2);text-shadow:0 0 8px rgba(155,92,229,0.45);transition:border-color .2s,text-shadow .2s}
.inline-link:hover,.inline-link:focus-visible{border-bottom-color:var(--rosy-lt);text-shadow:0 0 14px var(--rosy);outline:none}
.status.lead{margin-top:76px;margin-bottom:22px}
.status.data{margin-top:64px;margin-bottom:22px}
/* a second line under a status label: same voice, brighter, no dot, aligned with the label text */
.status.note{margin-top:-19px;margin-bottom:22px;padding-left:17px;color:var(--dim)}
.status.note::before{display:none}

/* stats card, built from the same layers as the wishlist card inside its panel */
.stat{display:inline-flex;flex-direction:column;align-items:flex-start;padding:12px 24px 16px;border:1px solid rgba(226,111,141,0.45);border-radius:2px;background:linear-gradient(rgba(226,111,141,0.07),rgba(226,111,141,0.07)),rgba(20,14,34,0.92);box-shadow:0 0 14px rgba(226,111,141,0.12);max-width:100%}
.stat-row{display:flex;align-items:baseline;gap:12px;line-height:1.12}
.stat-num{font-size:clamp(30px,8vw,42px);color:var(--rosy-lt);text-shadow:0 0 20px rgba(226,111,141,.55),0 0 46px rgba(226,111,141,.22);letter-spacing:3px}
.stat-label{font-size:26px;color:rgba(155,92,229,0.68);letter-spacing:4px;text-transform:uppercase}
.stat-row.sub{margin-top:5px}
.stat-row.sub .stat-num{font-size:26px;color:rgba(187,136,255,.78);text-shadow:none;letter-spacing:2px}
.stat-row.sub .stat-label{font-size:19px;letter-spacing:3px}

/* captures */
.quotes{display:flex;flex-direction:column;gap:58px}
.q{width:var(--w);max-width:100%}
.cap{display:block;position:relative;width:100%;border-radius:2px;overflow:hidden;line-height:0;container-type:inline-size;
  box-shadow:0 0 0 1px rgba(155,92,229,.55),0 0 0 4px var(--bg),0 0 0 6px rgba(155,92,229,.3);transition:box-shadow .3s}
.cap.tap{cursor:pointer}
.cap.tap:hover{box-shadow:0 0 0 1px rgba(155,92,229,.8),0 0 0 4px var(--bg),0 0 0 6px rgba(155,92,229,.5)}
.cap img{display:block;width:100%;height:auto}
/* a video clip */
.cap video{display:block;width:100%;height:auto;background:#000}
.play{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:104%;background:none;border:0;cursor:pointer}
.play[hidden]{display:none}
.play span{font-family:var(--terminal);font-size:22px;letter-spacing:3px;text-transform:uppercase;color:#fff;text-shadow:0 0 10px var(--purple1);padding:6px 16px 8px;background:rgba(10,7,20,.78);border-radius:2px;box-shadow:0 0 0 1px rgba(155,92,229,.7),0 0 18px rgba(155,92,229,.35);transition:box-shadow .2s,text-shadow .2s}
.play span::before{content:'[';color:var(--glow);margin-right:.3em}.play span::after{content:']';color:var(--glow);margin-left:.3em}
.play:hover span,.play:focus-visible span{text-shadow:0 0 18px var(--rosy);box-shadow:0 0 0 1px rgba(226,111,141,.8),0 0 22px rgba(226,111,141,.4)}
.play:focus-visible{outline:none}
/* Steam emphasis: dim what is not the music passage. Never lifted on hover. */
.dim{position:absolute;pointer-events:none}
/* rose bookends at the exact start and end of the passage: deep core, wide halo that scales with the capture */
.bar{position:absolute;width:max(2px,.34%);transform:translateX(-50%);background:#C2517F;pointer-events:none;
  box-shadow:0 0 5px rgba(226,80,130,.9),0 0 14px rgba(226,80,130,.75),0 0 28px rgba(226,80,130,.45);
  box-shadow:0 0 .56cqw rgba(226,80,130,.9),0 0 1.57cqw rgba(226,80,130,.75),0 0 3.14cqw rgba(226,80,130,.45)}

.facts{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:6px 22px;margin-top:16px;padding:0 2px}
.facts+.facts{margin-top:4px}
.facts.end{justify-content:flex-end}
.fact{display:flex;align-items:baseline;gap:10px;font-size:18px;letter-spacing:1px;color:var(--dim)}
.fact::before{content:'//';color:var(--purple2);font-size:14px;flex:none}
.acts{display:flex;gap:20px;align-items:baseline;flex:none}
.btn{font-family:var(--terminal);font-size:15px;letter-spacing:3px;text-transform:uppercase;color:var(--glow);text-shadow:0 0 8px var(--purple1);background:none;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .2s,text-shadow .2s}
.btn.br::before{content:'[';color:var(--purple2);margin-right:.22em}
.btn.br::after{content:']';color:var(--purple2);margin-left:.22em}
.btn.go::after{content:' >>'}
.btn:hover,.btn:focus-visible{color:#fff;text-shadow:0 0 18px var(--rosy);outline:none}

/* way back, in the main page's contact-link style */
.site-foot{display:flex;justify-content:flex-start;gap:34px;flex-wrap:wrap;padding:96px 2px 0}   /* on the page's left spine on desktop; centered on phones, where content runs edge to edge */
.back{font-family:var(--terminal);font-size:22px;letter-spacing:3px;text-transform:uppercase;text-decoration:none;color:var(--glow);text-shadow:0 0 8px var(--purple1);transition:text-shadow .2s,color .2s;white-space:nowrap;cursor:pointer}
.back::before{content:'[';color:var(--purple2);margin-right:.22em}
.back::after{content:']';color:var(--purple2);margin-left:.22em;margin-right:-3px}
.back:hover,.back:focus-visible{color:#fff;text-shadow:0 0 18px var(--rosy);outline:none}

/* excerpt view */
.ov{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:28px 22px;background:rgba(10,7,20,.99);overflow:auto}
.ov.open{display:flex}
.ov-in{width:100%;max-width:640px}
.ov .fact{margin-bottom:20px}
.ov blockquote{font-family:var(--reader);font-size:clamp(21px,2.6vw,25px);line-height:1.55;color:#fff;letter-spacing:0}
.ov .who{margin-top:26px;margin-bottom:0}
.ov .acts{margin-top:22px;justify-content:flex-start}

noscript p{font-size:20px;letter-spacing:1px;color:var(--dim);line-height:1.6}
noscript a{color:var(--glow)}

@media (max-width:760px){
  .top{padding:20px 20px 0}.wrap{padding:44px 20px 72px}
  .top .rp{width:100%}
  .site-foot{justify-content:center;gap:26px;padding:96px 24px 0}
  .credit,.rp-ost-label{font-size:16px}
  .intro-p{font-size:22px}.top .rp{margin-top:14px}
  h1{margin-bottom:36px}
  .q{width:100%}
  .stat-label{font-size:clamp(17px,5.6vw,26px)}
  .fact{font-size:20px}.btn{font-size:16px}
  .quotes{gap:46px}.status.lead{margin-top:56px}.status.data{margin-top:48px}
  /* rule: on narrow screens the actions always drop to a second line, right-aligned */
  .facts{flex-direction:column;align-items:stretch;gap:8px}.facts .acts{justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}