:root{color-scheme:dark;--ink:#0b0c0d;--white:#f2eee8;--muted:#b4b1ad;--accent:#d4c3ab}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;color:var(--white);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:#d4c3ab;color:#151515}
.page{padding:22px;min-height:100svh;display:grid;align-items:center;background:radial-gradient(ellipse at 30% 0,#222425 0,transparent 55%),#0b0c0d}
.stage{isolation:isolate;position:relative;width:100%;max-width:1680px;min-height: min(900px,calc(100svh - 44px));margin:auto;overflow:hidden;border:1px solid #ffffff18;border-radius:24px;background:#101112;box-shadow:0 20px 80px #0005}
.stage::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 1px 0 #ffffff1c;pointer-events:none}
.portrait{position:absolute;z-index:-2;inset:0 0 0 auto;width:65%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 26%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 26%)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 53%;filter:saturate(.54) brightness(.77);display:block}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#101112a6 0,transparent 48%),linear-gradient(0deg,#101112 0,transparent 35%,transparent 70%,#10111270 100%)}
.light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 14% 44%,#bfa88c0a 0,transparent 50%)}
.header{position:absolute;inset:34px 48px auto;display:flex;align-items:center;justify-content:space-between;z-index:2}
.monogram{font:400 42px/.9 'Cormorant Garamond',Georgia,serif;letter-spacing:-4px;padding-right:6px}
.monogram-dot{color:var(--accent)}
.profession{display:flex;align-items:center;gap:11px;padding:11px 18px;border-radius:50px;border:1px solid #ffffff2a;background:#15161740;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:10px;letter-spacing:2.2px;text-transform:uppercase;box-shadow:inset 0 1px 0 #ffffff12}
.piano-icon{display:flex;gap:2px;height:15px;align-items:stretch}
.piano-icon i{display:block;width:3px;border-radius:0 0 1px 1px;background:#e4ded4;position:relative}
.piano-icon i:not(:last-child)::after{content:"";position:absolute;left:2px;top:0;height:9px;width:2px;background:#313233;z-index:1}
.intro{position:relative;z-index:1;width:58%;padding:154px 0 150px clamp(48px,6.1vw,104px)}
.eyebrow{display:flex;align-items:center;gap:13px;margin:0 0 31px;color:#c0b8ac;text-transform:uppercase;font-size:10px;letter-spacing:2.6px;line-height:1.6}
.eyebrow>span{display:block;width:28px;height:1px;background:#b7a58b}
h1{font:400 clamp(94px,9.25vw,155px)/.87 'Cormorant Garamond',Georgia,serif;letter-spacing:-.045em;margin:0 0 30px;text-wrap:nowrap}
h1>span:not(.name-dot){display:inline-block;margin-left:34px}
.name-dot{color:var(--accent)}
.description{margin:0 0 35px 4px;font-size:15px;line-height:1.85;letter-spacing:.2px;color:var(--muted)}
.glass{border:1px solid #ffffff30;background:linear-gradient(120deg,#ffffff16,#ffffff04 55%,#ffffff0b);-webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%);box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #ffffff05,0 10px 30px #0002}
.instagram{position:relative;display:flex;align-items:center;gap:17px;width:310px;max-width:100%;min-height:83px;padding:16px 21px 16px 17px;border-radius:23px;color:var(--white);text-decoration:none;overflow:hidden;transition:transform .25s,border-color .25s,background-color .25s,box-shadow .25s}
.instagram::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 0,#ffffff0a 35%,#ffffff16 48%,transparent 65%);transform:translateX(-110%);transition:transform .7s;pointer-events:none}
.instagram-icon{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid #ffffff1b;border-radius:14px;background:linear-gradient(145deg,#ffffff0e,#ffffff02);box-shadow:inset 0 1px 0 #ffffff0f}
.instagram-icon svg{width:24px;height:24px}
.instagram-copy{display:grid;gap:5px;font-size:13px;font-weight:500}
.handle{font-weight:400;font-size:11px;color:#bdb8b1;letter-spacing:.3px}
.arrow{margin-left:auto;width:19px;height:19px;transition:transform .25s}
.instagram:focus-visible{outline:2px solid #e0c9a7;outline-offset:6px}
.instagram:active{transform:scale(.98)}
.music-seal{position:absolute;right:45px;bottom:135px;display:flex;align-items:center;flex-direction:column;justify-content:center;width:128px;height:152px;border-radius:70px;color:#e3dbce;transform:rotate(8deg);z-index:1}
.music-seal svg{width:77px;height:33px;margin-bottom:6px}
.music-seal>span:not(.seal-translation){font:400 24px/1.2 'Cormorant Garamond',Georgia,serif;font-style:italic}
.seal-translation{font-size:8px;text-transform:uppercase;letter-spacing:2.2px;margin-top:9px;color:#c3bcb2}
.footer{position:absolute;inset:auto 48px 29px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:21px;border-top:1px solid #ffffff16;color:#9c9993}
.signature{font-size:10px;text-transform:uppercase;letter-spacing:2.5px}
.footer-note{font:400 18px 'Cormorant Garamond',Georgia,serif;font-style:italic;color:#b8b3aa;margin-left:auto;margin-right:36px}
.footer-year{font-size:9px;letter-spacing:1px}
@media(hover:hover){.instagram:hover{transform:translateY(-3px);border-color:#ffffff60;background-color:#ffffff08;box-shadow:inset 0 1px 0 #ffffff36,0 12px 35px #0004}.instagram:hover::before{transform:translateX(110%)}.instagram:hover .arrow{transform:translate(2px,-2px)}}
@media(min-width:1700px){.intro{padding-top:190px;padding-bottom:160px}}
@media(min-width:761px) and (max-height:800px){.intro{padding-top:128px;padding-bottom:123px}.eyebrow{margin-bottom:24px}h1{font-size:clamp(90px,8.3vw,132px);margin-bottom:24px}.description{margin-bottom:24px}.music-seal{bottom:115px}}
@media(max-width:1050px) and (min-width:761px){.header{left:34px;right:34px}.intro{padding-left:45px;width:65%}h1{font-size:100px}.portrait{width:70%;right:-7%}.footer{left:34px;right:34px}.music-seal{right:28px;width:105px;height:130px}.eyebrow{font-size:9px;letter-spacing:2px}}
@media(max-width:760px){
  .page{padding:0;display:block;background:var(--ink)}
  .stage{min-height:100svh;border:0;border-radius:0;max-width:none;background:var(--ink)}
  .stage::after{display:none}
  .header{inset:25px 26px auto}
  .monogram{font-size:37px}
  .profession{padding:10px 13px;font-size:8px;letter-spacing:1.8px;gap:9px}
  .piano-icon{height:13px}
  .portrait{inset:0 0 auto;width:100%;height:630px;mask-image:none;-webkit-mask-image:none}
  .portrait img{object-fit:cover;object-position:50% 34%;filter:saturate(.55) brightness(.81)}
  .portrait::after{background:linear-gradient(0deg,#0b0c0d 0,#0b0c0df5 9%,#0b0c0d80 28%,transparent 63%,#0b0c0d40 100%),linear-gradient(90deg,#0b0c0d30,transparent 65%)}
  .light{display:none}
  .intro{width:100%;padding:365px 30px 112px}
  .eyebrow{font-size:8px;letter-spacing:2.1px;margin-bottom:23px;gap:10px;color:#d1c5b6}
  .eyebrow>span{width:22px}
  h1{font-size:clamp(74px,20.3vw,128px);line-height:.87;margin-bottom:24px;letter-spacing:-.04em}
  h1>span:not(.name-dot){margin-left:28px}
  .description{font-size:13px;line-height:1.75;margin:0 0 27px 3px;color:#c0bbb3}
  .instagram{width:100%;min-height:79px;border-radius:22px;padding-right:22px}
  .instagram-copy{font-size:13px}
  .handle{font-size:11px}
  .music-seal{top:255px;right:27px;bottom:auto;width:84px;height:104px;border-radius:50px;background:linear-gradient(120deg,#ffffff14,#ffffff04);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:rotate(9deg)}
  .music-seal svg{width:55px;height:25px;margin-bottom:2px}
  .music-seal>span:not(.seal-translation){font-size:19px}
  .seal-translation{font-size:6px;margin-top:6px;letter-spacing:1.6px}
  .footer{left:30px;right:30px;bottom:26px;padding-top:20px;gap:10px}
  .signature{font-size:8px;letter-spacing:1.9px}
  .footer-note{font-size:15px;margin:0 0 0 auto}
  .footer-year{display:none}
}
@media(min-width:500px) and (max-width:760px){.portrait{height:780px}.portrait img{object-position:50% 49%}.intro{padding-top:450px;max-width:580px;margin:auto}.music-seal{top:345px;right:40px}}
@media(max-width:360px){.intro{padding:333px 23px 105px}.header{left:23px;right:23px}h1{font-size:73px}.eyebrow{letter-spacing:1.5px}.portrait{height:580px}.music-seal{top:230px}.footer{left:23px;right:23px}.footer-note{font-size:14px}}
@media(prefers-reduced-motion:no-preference){.intro{animation:arrive .85s ease-out both}.music-seal{animation:seal-arrive 1.1s ease-out both}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes seal-arrive{from{opacity:0;transform:translateY(10px) rotate(5deg)}to{opacity:1;transform:translateY(0) rotate(8deg)}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}