:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --panel: #121215;
  --panel-2: #17171b;
  --line: rgba(255,255,255,.085);
  --text: #f3f1ed;
  --muted: #96949a;
  --soft: #c7c4c8;
  --accent: #c7a77a;
  --radius: 22px;
  font-family: "DM Sans", sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 50% -12%, rgba(191,157,111,.12), transparent 38%), var(--bg); color: var(--text); }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.grain { pointer-events: none; position: fixed; inset: 0; z-index: 0; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.site-wrap { width: min(100% - 40px, 720px); margin: 0 auto; position: relative; z-index: 1; }
.home-wrap { padding: 70px 0 26px; }
.profile-block { text-align: center; display: flex; flex-direction: column; align-items: center; }
.portrait-frame { width: 112px; height: 112px; padding: 4px; border-radius: 50%; border: 1px solid rgba(199,167,122,.48); background: linear-gradient(145deg, rgba(199,167,122,.22), rgba(255,255,255,.025)); margin-bottom: 22px; box-shadow: 0 12px 48px rgba(0,0,0,.35); }
.portrait-frame img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 10px; letter-spacing: .22em; font-weight: 700; }
h1,h2,p { margin-top: 0; }
.profile-block h1,.gallery-header h1 { font-family: Manrope, sans-serif; font-size: clamp(40px, 8vw, 56px); line-height: 1.05; letter-spacing: -.055em; margin: 0; font-weight: 700; }
.profile-block h1 span,.gallery-header h1 span { color: var(--accent); }
.intro { margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.social-section,.interests-section { margin-top: 58px; }
.section-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.section-topline h2 { font: 600 15px Manrope, sans-serif; letter-spacing: -.02em; margin: 0; }
.section-count { color: #77747a; font-size: 9px; letter-spacing: .14em; font-weight: 700; }
.social-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.social-tile { min-width: 0; min-height: 88px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.social-tile:hover { transform: translateY(-3px); border-color: rgba(199,167,122,.38); background: rgba(199,167,122,.07); }
.social-icon { width: 23px; height: 23px; display: grid; place-items: center; }
.social-icon img { width: 22px; height: 22px; object-fit: contain; }
.social-label { font-size: 10px; color: var(--soft); text-align: center; line-height: 1.2; }
.interest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.interest-card { min-height: 182px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); overflow: hidden; display: flex; flex-direction: column; transition: transform .22s ease, border-color .22s ease; }
.interest-card:hover { transform: translateY(-4px); border-color: rgba(199,167,122,.35); }
.interest-art { position: relative; height: 104px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 100%, rgba(199,167,122,.18), transparent 65%), linear-gradient(125deg,#1c1b1c,#111114); }
.interest-art:before,.interest-art:after { content: ""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; }
.interest-art:after { width: 125px; height: 125px; }
.piano-art > span { position: relative; z-index: 1; font: 72px Georgia,serif; color: rgba(220,194,158,.8); transform: translateY(-3px); }
.piano-art i { position: absolute; bottom: -1px; width: 100%; height: 25px; background: repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.09) 28px 29px),linear-gradient(#242326,#101012); border-top: 1px solid rgba(255,255,255,.1); }
.photo-art { background: radial-gradient(ellipse at 50% 45%, rgba(143,161,157,.18), transparent 50%),linear-gradient(125deg,#1b2020,#111315); }
.lens { width: 57px; height: 57px; border: 1px solid rgba(220,220,210,.55); border-radius: 50%; position: relative; z-index: 1; box-shadow: 0 0 0 8px rgba(255,255,255,.025), inset 0 0 0 8px rgba(255,255,255,.035); }
.lens:after { content:""; position:absolute; inset:15px; border:1px solid rgba(220,220,210,.5); border-radius:50%; }
.photo-art i { position:absolute; width:90px; height:90px; border:1px solid rgba(255,255,255,.09); transform:rotate(45deg); }
.interest-copy { display: flex; flex-direction: column; padding: 15px 16px 17px; gap: 5px; }
.interest-kicker { font-size: 8px; letter-spacing: .17em; color: var(--accent); font-weight: 700; }
.interest-copy strong { font: 600 17px Manrope,sans-serif; letter-spacing: -.03em; }
.interest-copy > span:last-child { font-size: 11px; color: var(--muted); display:flex; justify-content:space-between; gap:6px; }
.interest-copy b { color: var(--accent); font-size: 14px; font-weight: 500; }
.site-footer { margin-top: 62px; padding-top: 17px; border-top: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#77747a; font-size:10px; letter-spacing:.06em; }
.site-footer a { color:var(--soft); }
.gallery-page { padding: 30px 0 28px; }
.page-nav { height: 42px; display:flex; align-items:center; justify-content:space-between; }
.back-link { color:var(--soft); font-size:12px; display:flex; gap:8px; align-items:center; }
.back-link:hover { color:var(--accent); }
.nav-mark { font:700 19px Manrope,sans-serif; color:var(--accent); }
.gallery-header { padding: 65px 0 45px; }
.gallery-header h1 { font-size: clamp(38px,7vw,54px); }
.gallery-header > p:last-child { color:var(--muted); font-size:14px; margin:14px 0 0; }
.gallery-section { min-height: 260px; }
.media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.media-card { border:0; padding:0; text-align:left; color:inherit; background:transparent; cursor:pointer; min-width:0; }
.media-thumb { display:block; width:100%; aspect-ratio:16/10; overflow:hidden; position:relative; border-radius:15px; background:#17171b; border:1px solid var(--line); }
.media-thumb img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .35s ease; }
.media-card:hover .media-thumb img { transform:scale(1.045); }
.photo-card .media-thumb { aspect-ratio:4/5; border-radius:12px; }
.play-mark { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(10,10,12,.75); border:1px solid rgba(255,255,255,.35); font-size:13px; padding-left:2px; backdrop-filter:blur(8px); }
.video-placeholder { width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(circle,rgba(199,167,122,.15),transparent 55%),#17171b; }
.piano-glyph { font:72px Georgia,serif; color:rgba(199,167,122,.7); }
.media-title { display:block; margin:10px 2px 3px; font:600 13px Manrope,sans-serif; text-transform:capitalize; }
.media-meta { color:var(--muted); font-size:10px; margin-left:2px; }
.empty-state { margin: 12px 0 0; padding:50px 22px; text-align:center; border:1px dashed rgba(255,255,255,.13); border-radius:20px; background:rgba(255,255,255,.015); }
.empty-state[hidden] { display:none; }
.empty-symbol { font:45px Georgia,serif; color:var(--accent); }
.empty-state h2 { font:600 17px Manrope,sans-serif; margin:14px 0 7px; }
.empty-state p { max-width:360px; margin:0 auto; color:var(--muted); font-size:12px; line-height:1.7; }
.empty-state code { color:var(--soft); font-size:11px; }
.media-modal { position:fixed; inset:0; z-index:10; background:rgba(0,0,0,.91); display:grid; place-items:center; padding:60px 18px 28px; backdrop-filter:blur(12px); }
.media-modal[hidden] { display:none; }
.modal-close { position:absolute; top:17px; right:20px; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:#17171b; color:white; font-size:27px; cursor:pointer; }
.modal-content { width:min(100%,1000px); display:flex; flex-direction:column; align-items:center; gap:12px; }
.modal-content video { width:100%; max-height:75vh; background:#000; border-radius:12px; }
.modal-content img { max-width:100%; max-height:76vh; object-fit:contain; border-radius:10px; }
.modal-content p { color:var(--soft); font-size:12px; margin:0; }
@media (max-width:560px) {
  .site-wrap { width:min(100% - 34px,720px); }
  .home-wrap { padding-top:48px; }
  .portrait-frame { width:98px; height:98px; margin-bottom:19px; }
  .social-section,.interests-section { margin-top:46px; }
  .social-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .social-tile { min-height:78px; border-radius:14px; }
  .interest-grid { grid-template-columns:1fr; gap:11px; }
  .interest-card { min-height:155px; display:grid; grid-template-columns:40% 60%; }
  .interest-art { height:100%; min-height:155px; }
  .interest-copy { justify-content:center; padding:12px; }
  .interest-copy strong { font-size:16px; }
  .interest-copy > span:last-child { font-size:10px; }
  .site-footer { margin-top:48px; }
  .gallery-header { padding:54px 0 36px; }
  .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .media-grid { gap:12px; }
  .media-title { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }