@font-face {
  font-family: Sora;
  src: url(fonts/sora.woff2) format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root { --bg:#070b16; --fg:#eef1f7; --dim:#a3abbe; --line:#ffffff1a; --warm:#f0b878; color-scheme:dark; }
* { box-sizing:border-box; margin:0; }
body { min-height:100vh; background:var(--bg); color:var(--fg); font:16px/1.7 Sora,system-ui,sans-serif; overflow-x:hidden; }
a { color:inherit; }
a:focus-visible { outline:2px solid var(--warm); outline-offset:3px; border-radius:4px; }

/* Slow pulsing light: a nod to brainLight's light and sound sessions */
.glow { position:fixed; inset:-20%; z-index:-1; pointer-events:none; filter:blur(40px);
  background:
    radial-gradient(35% 30% at 70% 40%, #f0a85a55, transparent 70%),
    radial-gradient(40% 35% at 30% 60%, #4b6bff40, transparent 70%);
  animation:pulse 10s ease-in-out infinite alternate; }
@keyframes pulse { to { transform:translate(-4%,3%) scale(1.08); opacity:.75 } }
@media (prefers-reduced-motion:reduce) { .glow { animation:none } }

.wrap { max-width:1080px; margin:0 auto; padding:24px 24px 32px; min-height:100vh; display:flex; flex-direction:column; }
nav { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--dim); }
nav a { text-decoration:none; color:var(--dim); }
nav .home { color:var(--fg); }
.lang a { margin-left:14px; padding:4px 0; }
.lang a[aria-current] { color:var(--fg); border-bottom:1px solid var(--warm); }

.hero { flex:1; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:24px; }
.photo { display:block; width:100%; max-width:440px; height:auto; margin:0 auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 10%;
  -webkit-mask-image:radial-gradient(60% 60% at 50% 40%, #000 55%, transparent 100%);
  mask-image:radial-gradient(60% 60% at 50% 40%, #000 55%, transparent 100%); }
h1 { font-weight:300; font-size:clamp(38px,5.4vw,68px); line-height:1.05; letter-spacing:-.03em; }
h1 b { font-weight:600; }
.role { margin-top:14px; color:var(--warm); font-size:15px; }
.bio { margin-top:24px; color:var(--dim); font-weight:300; max-width:42ch; font-size:17px; }
.links { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.links a { text-decoration:none; padding:11px 20px; border:1px solid var(--line); border-radius:999px; font-size:14px; background:#ffffff0a; transition:border-color .2s; }
.links a:hover { border-color:#f0b87888; }

.prose { flex:1; max-width:720px; padding:56px 0 64px; color:#d3d8e3; font-weight:300; }
.prose h1 { font-size:clamp(32px,4.5vw,48px); color:var(--fg); }
.prose .updated { color:var(--dim); font-size:14px; margin:10px 0 36px; }
.prose h2 { font-size:19px; font-weight:600; color:var(--fg); margin:36px 0 10px; letter-spacing:-.01em; }
.prose p, .prose ul { margin-bottom:14px; }
.prose ul { padding-left:20px; }
.prose li { margin-bottom:6px; }
.prose strong { font-weight:600; color:var(--fg); }

footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; font-size:13px; color:var(--dim); border-top:1px solid var(--line); padding-top:16px; }
footer a { margin-left:16px; }
footer a:first-child { margin-left:0; }

@media (max-width:760px) {
  .hero { grid-template-columns:1fr; padding:12px 0 40px; }
  .photo { max-width:300px; }
  picture { order:-1; }
}