:root {
  color-scheme: dark;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #f7f6f3;
  background: #0c0b09;
  -webkit-font-smoothing: antialiased;
  --amber: #e7aa42;
  --blue: #81b6db;
  --sage: #98ad68;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #f7f6f3; outline-offset: 5px; }
.skip-link { position: fixed; top: 12px; left: 24px; z-index: 20; padding: 14px; background: white; color: black; transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.workbench { min-height: 660px; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) clamp(112px, 13.65svh, 160px); }
.hero-scene { position: relative; overflow: hidden; isolation: isolate; background: #0c0b09; }
.scene-plane { position: absolute; inset: 0; transform-origin: center; will-change: transform; }
.scene-photo, .scene-effects, .scene-spotlight { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-photo { object-fit: cover; object-position: 50% 40%; }
.scene-effects { pointer-events: none; }
.scene-spotlight { opacity: 0; pointer-events: none; background: radial-gradient(ellipse var(--spot-w, 500px) var(--spot-h, 600px) at var(--spot-x, 65%) var(--spot-y, 45%), transparent 12%, #00000005 42%, #00000075 100%); }
.site-header { position: absolute; z-index: 4; top: clamp(24px, 3.7vh, 42px); left: clamp(24px, 2.9vw, 56px); right: clamp(24px, 2.9vw, 56px); display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 18px; font-size: clamp(12px, 1.2vw, 20px); font-weight: 400; letter-spacing: .17em; text-transform: uppercase; }
.brand-mark { width: clamp(42px, 4vw, 62px); aspect-ratio: 1; border: 1.5px solid #f7f6f3; border-radius: 50%; display: grid; place-items: center; font-size: clamp(24px, 2.1vw, 32px); font-weight: 300; letter-spacing: -.04em; }
.hero-copy { position: absolute; z-index: 3; top: 21.3%; left: 6.15%; width: 36%; pointer-events: none; }
h1 { font-size: clamp(66px, 6.05vw, 120px); line-height: 1.035; font-weight: 500; letter-spacing: -.025em; margin: 0; }
.hero-copy p { font-size: clamp(18px, 1.6vw, 28px); font-weight: 400; line-height: 1.48; margin: 30px 0 0; letter-spacing: .005em; }
.interest-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #92908b; background: #101010; position: relative; z-index: 5; }
.interest { --accent: var(--amber); display: flex; flex-direction: column; justify-content: center; padding: 24px clamp(28px, 4vw, 70px); border-right: 1px solid #ffffff35; transition: background-color .3s; }
.interest:last-child { border-right: none; }
.interest[data-interest="music"] { --accent: var(--blue); }
.interest[data-interest="coding"] { --accent: var(--sage); }
.interest-accent { display: block; width: 64px; height: 4px; background: var(--accent); margin-bottom: 16px; transform-origin: left; transition: transform .4s; }
.interest-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: clamp(22px, 2.25vw, 39px); font-weight: 400; letter-spacing: -.02em; line-height: 1.18; }
.interest-row svg { width: clamp(26px, 2.3vw, 38px); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .4s, color .3s; }
.interest:hover, .interest:focus-visible { background: #ffffff06; }
.interest:hover .interest-accent, .interest:focus-visible .interest-accent { transform: scaleX(1.35); }
.interest:hover svg, .interest:focus-visible svg { transform: translateX(7px); color: var(--accent); }
.site-footer { padding: 66px 6.15% 30px; color: #a29d93; border-top: 1px solid #ffffff16; }
.site-footer p { max-width: 770px; margin: 0 0 42px; font-size: 16px; line-height: 1.8; }
.site-footer span { font-size: 12px; }
@media (min-width: 1850px) { .hero-copy { top: 18%; } }
@media (max-width: 950px) and (min-width: 701px) {
  .hero-copy { width: 45%; left: 5%; top: 24%; }
  h1 { font-size: 7vw; }
  .hero-copy p { font-size: 17px; max-width: 325px; }
  .desktop-break { display: none; }
  .interest { padding-inline: 28px; }
  .interest-row { font-size: 23px; }
}
@media (max-width: 700px) {
  .workbench { height: auto; min-height: 100svh; grid-template-rows: minmax(545px, calc(100svh - 202px)) auto; }
  .hero-scene { overflow: hidden; }
  .scene-plane { top: 235px; mask-image: linear-gradient(to bottom, transparent, black 19%, black); }
  .scene-photo { object-position: 73% 0%; }
  .site-header { top: 23px; left: 24px; right: 24px; }
  .brand { font-size: 10px; gap: 13px; letter-spacing: .16em; }
  .brand-mark { width: 36px; font-size: 20px; }
  .hero-copy { top: 99px; left: 24px; right: 24px; width: auto; }
  h1 { font-size: clamp(49px, 13vw, 80px); line-height: 1.01; letter-spacing: -.03em; }
  .hero-copy p { margin-top: 20px; font-size: 16px; line-height: 1.45; max-width: 345px; }
  .desktop-break { display: none; }
  .interest-nav { display: flex; flex-direction: column; padding: 0 24px; }
  .interest { min-height: 67px; padding: 17px 0; border-right: none; border-bottom: 1px solid #ffffff25; flex-direction: row; align-items: center; gap: 17px; }
  .interest:last-child { border-bottom: none; }
  .interest-accent { width: 25px; height: 3px; margin: 0; flex-shrink: 0; }
  .interest-row { flex: 1; font-size: 21px; line-height: 1.3; }
  .interest-row svg { width: 26px; }
  .site-footer { padding: 42px 24px 26px; }
  .site-footer p { font-size: 14px; }
}
@media (max-width: 700px) and (max-height: 750px) {
  .workbench { grid-template-rows: minmax(459px, calc(100svh - 202px)) auto; }
  .hero-copy { top: 86px; }
  h1 { font-size: 46px; }
  .hero-copy p { font-size: 15px; margin-top: 14px; }
  .scene-plane { top: 216px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }