@font-face { font-family: "Instrument Serif"; src: url("/instrument-serif.woff2") format("woff2"); font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --glass: rgba(16, 15, 22, .42);
  --glass-2: rgba(16, 15, 22, .5);
  --edge: rgba(255, 255, 255, .14);
  --rim: rgba(255, 255, 255, .22);
  --ink: rgba(250, 248, 245, .95);
  --ink-2: rgba(240, 236, 230, .68);
  --ink-3: rgba(235, 230, 222, .46);
  --chip: rgba(255, 255, 255, .07);
  --chip-edge: rgba(255, 255, 255, .13);
  --btn: rgba(250, 248, 245, .92);
  --btn-ink: #17151c;
  --gold: #f4c27a;
  --rx: 5deg;
  --ry: -7deg;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --glass: rgba(255, 252, 247, .5);
  --glass-2: rgba(255, 252, 247, .58);
  --edge: rgba(255, 255, 255, .6);
  --rim: rgba(255, 255, 255, .8);
  --ink: #1d1a20;
  --ink-2: rgba(35, 30, 38, .7);
  --ink-3: rgba(40, 34, 44, .52);
  --chip: rgba(0, 0, 0, .05);
  --chip-edge: rgba(0, 0, 0, .1);
  --btn: rgba(24, 21, 28, .9);
  --btn-ink: #fff;
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #1c2a27;
  color: var(--ink);
  font: 400 14px/1.5 "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------- the storm ---------- */
.sky { position: fixed; inset: -5%; }
.photo {
  position: absolute; inset: 0;
  background: #1c2a27 url("/bg/1.jpg") 50% 50% / cover no-repeat;
  animation: drift 60s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.2%, -.8%); } }
#particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* lightning lights the clouds from inside */
.flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(26% 30% at var(--fx, 50%) var(--fy, 35%), rgba(225, 232, 255, .8), rgba(190, 205, 255, .2) 50%, transparent 75%);
  mix-blend-mode: screen;
}
.flash.go { animation: bolt .9s ease-out; }
@keyframes bolt {
  0% { opacity: 0; } 4% { opacity: .9; } 10% { opacity: .15; } 16% { opacity: .75; } 30% { opacity: .1; } 38% { opacity: .35; } 100% { opacity: 0; }
}
.veil {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(8, 6, 10, .6) 100%),
    linear-gradient(180deg, rgba(6, 12, 24, .3), transparent 35%, transparent 70%, rgba(4, 10, 20, .5));
}

/* ---------- the way in: you, over the room out of focus; a click brings it into focus ---------- */
.intro {
  position: fixed; inset: 0; z-index: 20; cursor: pointer;
  display: grid; place-items: center; text-align: center;
  background: rgba(10, 20, 18, .34);
  -webkit-backdrop-filter: blur(20px) saturate(.8);
  backdrop-filter: blur(20px) saturate(.8);
  transition: opacity 1.3s cubic-bezier(.4, 0, .2, 1), -webkit-backdrop-filter 1.3s ease, backdrop-filter 1.3s ease;
}
.intro:focus-visible { outline: none; }
.intro.open { opacity: 0; pointer-events: none; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
.intro.gone { display: none; }
.intro-in { display: grid; justify-items: center; animation: in 1.2s cubic-bezier(.2, .7, .2, 1) both; transition: transform .9s cubic-bezier(.4, 0, .2, 1), opacity .6s ease; }
.intro.open .intro-in { transform: scale(.94); opacity: 0; }
@keyframes in { from { opacity: 0; transform: translateY(10px); } }
.intro-av {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 18px 40px -12px rgba(0, 0, 0, .6);
}
.intro-name { margin-top: 16px; font: 400 40px/1 "Instrument Serif", Georgia, serif; color: rgba(255, 255, 255, .95); }
.intro-hint {
  margin-top: 14px; font: 500 11px/1 "Geist Mono", monospace; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(235, 245, 242, .55); animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* the room comes toward you as it focuses */
.sky { transition: transform 2.6s cubic-bezier(.2, .7, .2, 1); }
.closed .sky { transform: scale(1.12); }

/* ---------- stage, tilt ---------- */
.stage {
  position: relative; z-index: 2; height: 100%;
  display: grid; place-items: center; padding: 28px 16px 52px;
  perspective: 1400px; overflow: hidden;
}
.tilt {
  width: min(540px, 100%);
  display: grid; gap: 14px;
  transform: scale(var(--fit, 1)) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.tilt.follow { transition: transform .3s ease-out; }
.closed .tilt > * { opacity: 0; translate: 0 34px; }
.tilt > * { transition: opacity 1.4s ease .45s, translate 1.6s cubic-bezier(.2, .7, .2, 1) .45s; }
.tilt > .player { transition-delay: .75s; }

.card, .player {
  background: var(--glass);
  border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: inset 0 1px 0 var(--rim), 0 40px 80px -30px rgba(0, 0, 0, .65), 0 12px 30px -12px rgba(0, 0, 0, .45);
}

/* ---------- card ---------- */
.card { position: relative; overflow: hidden; border-radius: 40px; padding: 40px 44px 26px; text-align: center; }
.card > :not(.caustics):not(.sheen) { position: relative; }
/* light thrown up by the water, drifting across the glass */
.caustics {
  position: absolute; inset: 0; pointer-events: none;
  background: url("/caustics.png") 0 0 / 300px 300px, url("/caustics.png") 0 0 / 470px 470px;
  mix-blend-mode: overlay; opacity: .42;
  -webkit-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .1));
  mask: linear-gradient(180deg, #000, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .1));
  animation: caustic 48s linear infinite;
}
@keyframes caustic { to { background-position: 300px 600px, -470px 470px; } }
.sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 20%), rgba(255, 255, 255, .13), transparent 60%);
}
.card:hover .sheen { opacity: 1; }
.avatar { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 3px var(--rim), 0 18px 40px -14px rgba(0, 0, 0, .7);
}
.avatar .rip { position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); animation: rip 4.2s cubic-bezier(.2, .6, .3, 1) infinite; pointer-events: none; }
.avatar .r2 { animation-delay: 2.1s; }
@keyframes rip { from { transform: scale(.96); opacity: .85; } to { transform: scale(1.5); opacity: 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }
.status {
  position: absolute; right: 8px; bottom: 10px; width: 16px; height: 16px; border-radius: 50%;
  background: #6fe3a1; box-shadow: 0 0 0 3px var(--glass-2), 0 0 12px rgba(111, 227, 161, .7);
}

h1 {
  margin-top: 18px; min-height: 1.05em;
  font: 400 52px/1.05 "Instrument Serif", Georgia, serif; letter-spacing: -.01em;
}
.caret { display: inline-block; width: 2px; height: .78em; margin-left: 4px; vertical-align: -.04em; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.tags { list-style: none; display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.tags li {
  padding: 5px 13px; border-radius: 999px;
  font: 500 11.5px/1.4 "Geist", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  background: var(--chip); border: 1px solid var(--chip-edge);
}

.quote { margin: 26px auto 0; max-width: 34ch; position: relative; padding-top: 18px; border-top: 1px solid var(--chip-edge); }
.quote blockquote { font: italic 400 22px/1.35 "Instrument Serif", Georgia, serif; color: var(--ink); text-wrap: balance; }
.quote blockquote::before { content: "“"; } .quote blockquote::after { content: "”"; }
.quote figcaption { margin-top: 10px; font: 500 11px/1 "Geist", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.quote figcaption::before { content: "— "; }

.links { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.links a {
  position: relative;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--btn); color: var(--btn-ink);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.links a:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .7), 0 0 0 4px var(--chip-edge); }
.links a::after {
  content: attr(aria-label); position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 4px;
  padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  font: 500 11.5px/1 "Geist", sans-serif; background: var(--btn); color: var(--btn-ink);
  opacity: 0; transition: opacity .2s ease, translate .2s ease;
}
.links a:hover::after, .links a:focus-visible::after { opacity: 1; translate: -50% 0; }
.links a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.links svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
svg .fill { fill: currentColor; stroke: none; }

.meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 26px;
  font: 400 12.5px/1 "Geist", sans-serif; color: var(--ink-3);
}
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.meta b { font: 500 12.5px/1 "Geist Mono", monospace; color: var(--ink-2); }
.meta [hidden] { display: none; }
.meta .sep { width: 1px; height: 12px; background: var(--chip-edge); }
#time { font-family: "Geist Mono", monospace; font-size: 12px; }
.wx { margin-left: auto; font-family: "Geist Mono", monospace; font-size: 12px; }

/* ---------- player ---------- */
.player {
  position: relative; overflow: hidden;
  border-radius: 22px; padding: 12px 12px 14px;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 38px; align-items: center; gap: 12px;
}
.art {
  width: 46px; height: 46px; border-radius: 12px;
  background: #223 url("/bg/1-sm.jpg") 60% 50% / cover no-repeat;
  box-shadow: 0 0 0 1px var(--rim), 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.pinfo { min-width: 0; }
.ptitle { font-weight: 500; font-size: 14px; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psub { margin-top: 2px; font-size: 12px; line-height: 1.25; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptime { font: 400 12px/1 "Geist Mono", monospace; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pbtn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--btn); color: var(--btn-ink);
  transition: transform .25s;
}
.pbtn:hover { transform: scale(1.07); }
.pbtn svg { width: 16px; height: 16px; }
.pbtn .playi { display: none; }
body:not(.playing) .pbtn .playi { display: inline; }
body:not(.playing) .pbtn .pause { display: none; }
/* the sound itself: one thin line along the bottom edge */
.wave { position: absolute; left: 14px; right: 14px; bottom: 4px; width: calc(100% - 28px); height: 12px; pointer-events: none; opacity: .75; }

/* ---------- corners ---------- */
.corner {
  position: fixed; z-index: 10; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--glass); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--rim);
  transition: opacity 1s ease 1.2s, transform .25s;
}
.corner:hover { transform: scale(1.06); }
.closed .corner { opacity: 0; pointer-events: none; }
.tl { top: 16px; left: 16px; } .br { right: 16px; bottom: 16px; }
.corner svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#sound .off, #sound.muted .on { display: none; } #sound.muted .off { display: inline; }
#theme .sun { display: none; } :root[data-theme="light"] #theme .sun { display: inline; } :root[data-theme="light"] #theme .moon { display: none; }


/* ---------- cursor (fine pointers only) ---------- */
#cur { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.cursor, html.cursor * { cursor: none !important; }
  html.cursor #cur { display: block; }
  #cur { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
  #cur i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
  #cur .dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .8); }
  #cur .ring {
    width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(255, 255, 255, .55);
    transition: width .25s, height .25s, margin .25s, background .25s, border-color .25s;
  }
  #cur.hover .ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .85); }
  #cur.down .ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  #cur .spark { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 1px solid rgba(220, 230, 255, .9); border-radius: 50%; animation: spark .6s ease-out forwards; }
  @keyframes spark { to { transform: scale(7); opacity: 0; } }
}

@media (max-width: 560px) {
  :root { --rx: 2deg; --ry: 0deg; }
  .card { padding: 32px 22px 22px; border-radius: 32px; }
  .avatar { width: 112px; height: 112px; }
  h1 { font-size: 44px; }
  .quote blockquote { font-size: 20px; }
  .meta { justify-content: center; }
  .wx { margin-left: 0; }
}
@media (max-height: 760px) and (min-width: 561px) { .card { padding-top: 28px; } .quote { margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .photo, .art, .caustics, .avatar .rip, .intro-hint { animation: none; }
  .intro-in, .intro-hint { animation: none; }
  .sky { transition: none; }
  .flash.go { animation: none; }
}