/* plain black and white, one narrow column. Colors and fonts come from the control panel (theme). */
:root{
  --bg:#000; --text:#dcdcdc; --dim:#8d8d8d; --faint:#575757;
  --glass-edge:rgba(255,255,255,.14);
  --body:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --grain:.07;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{font-family:var(--body);font-size:15px;line-height:1.75;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:1px solid #fff;outline-offset:4px}

/* film grain */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient::before{content:"";position:absolute;inset:-50%;opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.4s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* sections */
.sec{padding:56px 0}
.wrap{width:min(36rem,88vw);margin-inline:auto}
.wrap.wide{width:min(46rem,92vw)}
.wrap.full{width:92vw}
.wrap.a-center{text-align:center}
.wrap.a-right{text-align:right}
.is-hidden{opacity:.35}

/* free layout: widgets are placed by x (%), y (px) and width (%) */
.wrap.free{position:relative}
.wrap.free .w{position:absolute}

/* widgets */
.w p{color:var(--dim);max-width:62ch}
.w.a-center p,.w.a-center .entry p{margin-inline:auto}
.w.a-right p{margin-left:auto}
.title{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,7vw,3.2rem);line-height:1;letter-spacing:-.01em}
.title .cur{display:inline-block;margin-left:.08em;color:var(--dim);animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.label{font-family:var(--body);font-weight:400;font-size:.8rem;letter-spacing:.06em;color:var(--faint);
  padding-top:1.2rem;margin-bottom:1.5rem;border-top:1px solid rgba(255,255,255,.1)}
.text p+p{margin-top:1rem}
.text.tone-text p{color:var(--text)}
.text.tone-dim p{color:var(--dim)}
.text.tone-faint p{color:var(--faint)}
.text p{color:inherit}
.text.tone-text{color:var(--text)}.text.tone-dim{color:var(--dim)}.text.tone-faint{color:var(--faint)}
.entry h3{font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--text);margin-bottom:.2rem}
.entry p{font-size:.95rem}
.skills{list-style:none}
.skills li{display:flex;align-items:baseline}
.skills li b{font-weight:400;color:var(--text)}
.skills li i{flex:1;margin:0 .7rem;border-bottom:1px dotted rgba(255,255,255,.22);transform:translateY(-.3em)}
.skills li span{color:var(--dim)}
.contact{list-style:none}
.contact li{display:flex;gap:1rem}
.contact li span{width:6.5rem;color:var(--faint);flex:none}
.contact a,.textlink{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .2s}
.contact a:hover,.textlink:hover{border-color:#fff}
.textlink{font:inherit;background:none;border-width:0 0 1px;border-style:solid;cursor:pointer;padding:0}
.contact em{font-style:normal;color:var(--faint);font-size:.85rem;margin-left:.2rem}
.divider{border:0;border-top:1px solid rgba(255,255,255,.12)}
.image img{display:block;max-width:100%;width:100%;height:auto}
.image figcaption{margin-top:.5rem;font-size:.85rem;color:var(--faint)}
.video video{display:block;width:100%;height:auto;background:#050505}
.mbtn{font:inherit;font-size:.9rem;color:var(--text);cursor:pointer;background:none;
  border:1px solid rgba(255,255,255,.3);border-radius:2px;padding:.3rem .9rem;margin-top:.6rem;transition:border-color .2s}
.audio .mbtn{margin-top:0}
.mbtn:hover{border-color:#fff}
.audio .cover{display:block;max-width:100%;height:auto;margin-bottom:.7rem}
.ph{border:1px dashed rgba(255,255,255,.25);color:var(--faint);padding:2rem 1rem;text-align:center;font-size:.85rem}
.mlabel{display:block;color:var(--faint);font-size:.85rem;margin-bottom:.4rem}

/* the song + lyrics */
.lyric-stack{max-width:760px;margin-inline:auto;text-align:center}
.group{display:grid;gap:.45rem}
.lyric{font-family:var(--display);font-style:italic;font-weight:300;color:var(--text);
  font-size:clamp(1.35rem,4vw,2.2rem);line-height:1.4;max-width:none;min-height:1.4em;
  opacity:0;filter:blur(8px);transition:opacity 1.2s ease,filter 1.2s ease}
.lyric.on{opacity:1;filter:none}
.lyric-stack.pausing .lyric.on{animation:glow 3.6s ease-in-out infinite}
@keyframes glow{0%,100%{text-shadow:0 0 0 rgba(255,255,255,0)}50%{text-shadow:0 0 26px rgba(255,255,255,.6)}}
.glowline{position:relative;height:1px;width:min(340px,70%);margin:clamp(1.4rem,4vw,2.4rem) auto;
  overflow:hidden;background:rgba(255,255,255,.1);opacity:0;transition:opacity 1.4s ease}
.lyric-stack.pausing .glowline{opacity:1}
.glowline i{position:absolute;top:0;bottom:0;left:-40%;width:40%;
  background:linear-gradient(90deg,transparent,#fff,transparent);animation:sweep 4.2s ease-in-out infinite}
@keyframes sweep{to{left:100%}}

/* a plain fade for sections that ask for it */
.js .reveal{opacity:0;transition:opacity 1s ease}
.js .reveal.in{opacity:1}

@media (max-width:640px){
  .contact li span{width:5.5rem}
  /* free layouts stack into a normal column on small screens, ordered by their y position */
  .wrap.free{height:auto!important;display:flex;flex-direction:column;gap:1rem}
  .wrap.free .w{position:static;width:auto!important;order:var(--o,0)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1}
}