@layer reset, base, layout, components, motion, responsive;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, p, dl, dd { margin: 0; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; }
  [hidden] { display: none !important; }
}
@layer base {
  :root { color-scheme: light; --paper:#fdfcfb; --rail:#f6f5f3; --ink:#28272b; --muted:#727077; --line:#e6e3e3; --accent:#932838; --tint:#9328380c; --hover:#ece9e7; --rail-width:16rem; }
  :root[data-theme="dark"] { color-scheme:dark; --paper:#18181b; --rail:#141417; --ink:#eeecee; --muted:#aaa5ae; --line:#303036; --accent:#e590a0; --tint:#e590a00c; --hover:#252429; }
  html { scroll-behavior:smooth; scroll-padding-top:3rem; }
  body { background:var(--paper); color:var(--ink); font:400 1rem/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; transition:background-color .35s,color .35s; }
  ::selection { background:var(--accent); color:var(--paper); }
  :focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:4px; }
  .icon-library { position:absolute; width:0; height:0; overflow:hidden; }
  .icon { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
  .spotify-lines { color:var(--rail); stroke:currentColor; stroke-width:1.5; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .skip-link { position:fixed; top:1rem; left:1rem; z-index:10; padding:.5rem 1rem; background:var(--paper); transform:translateY(-200%); }
  .skip-link:focus { transform:translateY(0); }
}
@layer layout {
  .sidebar { position:fixed; inset:0 auto 0 0; width:var(--rail-width); display:flex; flex-direction:column; padding:2.5rem 1.5rem 1.25rem; background:var(--rail); border-right:1px solid var(--line); overflow-y:auto; transition:background-color .35s,border-color .35s; }
  main { margin-left:var(--rail-width); padding:6.5rem clamp(2rem,7vw,7rem) 2rem; max-width:85rem; }
  main > * { max-width:45rem; }
  .intro { padding-bottom:5.5rem; }
  .interests { scroll-margin-top:2rem; }
  footer { display:flex; justify-content:space-between; gap:1rem; padding-top:2rem; margin-top:3.5rem; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; }
}
@layer components {
  .identity { display:flex; align-items:center; gap:.85rem; margin-bottom:3rem; width:fit-content; }
  .identity strong { font-size:1rem; font-weight:600; letter-spacing:-.025em; }
  .identity-note { display:block; color:var(--muted); font-size:.75rem; }
  .monogram { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:13px; color:var(--accent); background:var(--paper); box-shadow:0 3px 10px #00000004; transition:transform .4s,border-color .4s; }
  .monogram svg { width:35px; height:35px; overflow:visible; }
  .monogram path { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .monogram circle { fill:currentColor; }
  .identity:hover .monogram { transform:rotate(-6deg); border-color:var(--accent); }
  .identity:hover .mark-arms { animation:mark-draw .7s ease both; }
  .page-nav, .social-nav { display:grid; gap:4px; }
  .page-nav a, .social-nav a { position:relative; display:flex; align-items:center; gap:.8rem; padding:.65rem .8rem; min-height:44px; border-radius:8px; color:var(--muted); font-size:.875rem; transition:background .22s,color .22s,transform .22s; }
  .page-nav a[aria-current] { color:var(--ink); background:var(--hover); }
  .page-nav a[aria-current]::before { content:""; position:absolute; width:3px; height:16px; left:-1.5rem; border-radius:0 3px 3px 0; background:var(--accent); }
  .page-nav a:hover, .social-nav a:hover { color:var(--ink); background:var(--hover); transform:translateX(3px); }
  .page-nav a[aria-current] .icon { color:var(--accent); }
  .nav-index { margin-left:auto; font: .625rem/1.4 ui-monospace,monospace; color:var(--muted); }
  .social-section { margin-top:2.4rem; }
  .nav-label { padding:0 .8rem; margin-bottom:.65rem; color:var(--muted); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }
  .external { margin-left:auto; font-size:1rem; opacity:0; transform:translate(-3px,3px); transition:opacity .2s,transform .2s; }
  .social-nav a:hover .external, .social-nav a:focus-visible .external { opacity:1; transform:translate(0,0); }
  .social-nav a:hover .icon { color:var(--accent); }
  .sidebar-bottom { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto; padding:.9rem .7rem 0; }
  .sidebar-domain { font:.625rem/1.6 ui-monospace,monospace; color:var(--muted); letter-spacing:.03em; }
  .theme-toggle { position:relative; display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid transparent; border-radius:50%; background:none; color:var(--muted); cursor:pointer; transition:color .2s,background .2s; }
  .theme-toggle:hover { color:var(--accent); background:var(--hover); }
  .theme-toggle .icon { position:absolute; transition:transform .4s,opacity .3s; }
  .theme-sun { opacity:1; transform:rotate(0) scale(1); }
  .theme-moon { opacity:0; transform:rotate(-60deg) scale(.5); }
  [data-theme="dark"] .theme-sun { opacity:0; transform:rotate(90deg) scale(.5); }
  [data-theme="dark"] .theme-moon { opacity:1; transform:rotate(0) scale(1); }
  .eyebrow { display:flex; align-items:center; gap:.65rem; color:var(--muted); font: .625rem/1.6 ui-monospace,monospace; letter-spacing:.09em; margin-bottom:1.7rem; }
  .eyebrow-line { width:24px; height:1px; background:var(--accent); transform-origin:left; }
  h1 { font-size:clamp(2.75rem,4.5vw,4.15rem); line-height:1.12; letter-spacing:-.06em; font-weight:550; margin-bottom:1.65rem; }
  .accent { color:var(--accent); display:inline-block; }
  .lead { font-size:clamp(1.125rem,1.6vw,1.375rem); line-height:1.65; letter-spacing:-.025em; margin-bottom:1.75rem; }
  .intro-copy { max-width:36rem; color:var(--muted); font-size:.9375rem; }
  .intro-copy p + p { margin-top:1rem; }
  .explore-link { display:inline-flex; align-items:center; gap:1rem; margin-top:2rem; font-size:.75rem; color:var(--accent); padding:.5rem 0; }
  .explore-link span { transition:transform .25s; }
  .explore-link:hover span { transform:translateY(4px); }
  .section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
  h2 { font-weight:550; font-size:1.2rem; letter-spacing:-.025em; }
  .section-index { font:.5625rem/1.5 ui-monospace,monospace; color:var(--muted); letter-spacing:.08em; }
  .interest-list > div { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(13rem,1fr) 1.35fr; gap:2rem; border-top:1px solid var(--line); padding:1.4rem 0; transition:border-color .3s; }
  .interest-list > div::before { content:""; position:absolute; inset:0 -1rem; z-index:-1; border-radius:10px; background:var(--tint); opacity:0; transform:scale(.97); transition:opacity .25s,transform .25s; }
  .interest-list > div:hover::before { opacity:1; transform:scale(1); }
  .interest-list dt { display:flex; align-items:center; gap:.8rem; font-size:.8125rem; font-weight:550; letter-spacing:-.01em; }
  .interest-icon { display:grid; place-items:center; flex:none; width:34px; height:34px; border:1px solid var(--line); border-radius:9px; color:var(--muted); transition:color .3s,transform .3s,border-color .3s; }
  .interest-icon .icon { width:17px; height:17px; }
  .interest-list > div:hover .interest-icon { color:var(--accent); transform:translateY(-2px) rotate(-4deg); border-color:var(--accent); }
  .interest-list dd { color:var(--muted); font-size:.8125rem; line-height:1.75; }
}
@layer motion {
  @keyframes arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
  @keyframes mark-draw { from { stroke-dasharray:42; stroke-dashoffset:42; } to { stroke-dasharray:42; stroke-dashoffset:0; } }
  @keyframes grow-line { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  .intro > * { animation:arrive .7s cubic-bezier(.2,.65,.3,1) both; }
  .intro > :nth-child(2) { animation-delay:.07s; }
  .intro > :nth-child(3) { animation-delay:.14s; }
  .intro > :nth-child(4) { animation-delay:.21s; }
  .intro > :nth-child(5) { animation-delay:.28s; }
  .eyebrow-line { animation:grow-line .8s ease both; }
  .interest-list > div.is-revealed { animation:arrive .6s ease both; animation-delay:var(--reveal-delay,0ms); }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation:none !important; transition:none !important; } }
}
@layer responsive {
  @media (max-width:1050px) { :root { --rail-width:13.5rem; } main { padding:4.5rem 2.5rem 2rem; } .desktop-break, .section-index { display:none; } .interest-list > div { grid-template-columns:1fr; gap:.65rem; } }
  @media (max-width:720px) {
    .sidebar { position:relative; inset:auto; width:auto; padding:1.5rem 1.25rem 1.2rem; border-right:0; border-bottom:1px solid var(--line); overflow:visible; }
    .identity { margin-bottom:1.5rem; } .page-nav { display:flex; gap:.5rem; } .page-nav a { flex:1; } .page-nav a[aria-current]::before { display:none; }
    .social-section { margin-top:1.1rem; } .social-nav { display:flex; flex-wrap:wrap; gap:.25rem; } .social-nav a { padding:.45rem .55rem; gap:.45rem; font-size:.75rem; } .social-nav .icon { width:16px; height:16px; } .social-nav .external { display:none; } .nav-label { padding-left:.55rem; }
    .sidebar-bottom { position:absolute; top:1.5rem; right:1.25rem; margin:0; padding:0; } .sidebar-domain { display:none; }
    main { margin:0; padding:3.25rem 1.5rem 1.5rem; } .intro { padding-bottom:3.5rem; } h1 { font-size:clamp(2.6rem,10vw,3.6rem); } .eyebrow { font-size:.5625rem; letter-spacing:.06em; }
    .lead { font-size:1.125rem; } .intro-copy { font-size:.875rem; } footer { margin-top:2rem; font-size:.6875rem; }
  }
}