:root { --ink: #f4f2f7; --ink-dim: #b9b4c6; --accent: #18f4d4; /* echoes the neon palette's teal */ --panel-bg: rgba(10, 10, 16, 0.42); --panel-edge: rgba(255, 255, 255, 0.10); } /* ---- type modes (switched via [data-type] on ) ---- */ :root { --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --head-weight: 600; --head-tracking: -0.01em; } /* Editorial — serif display headline over a clean sans body */ [data-type="editorial"] { --font-head: "Fraunces", ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --head-weight: 500; --head-tracking: -0.005em; } /* All-serif — warm, literary */ [data-type="serif"] { --font-head: "Fraunces", ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif; --font-body: ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif; --head-weight: 500; --head-tracking: 0; } /* Grotesk — modern geometric sans */ [data-type="grotesk"] { --font-head: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --head-weight: 600; --head-tracking: -0.02em; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: #05050a; color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Full-bleed suffuse shader behind everything */ #bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } /* Two columns: shader stage on the left, glass panel on the right */ .layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(360px, 38%); min-height: 100vh; min-height: 100dvh; } .stage { /* left column — lets the shader breathe */ } .panel { display: flex; align-items: center; background: var(--panel-bg); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); border-left: 1px solid var(--panel-edge); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.35); } /* Liquid glass — refracts the suffuse behind the panel via the SVG filter, with a beveled rim sheen for the Apple-style "thick glass" read. */ .panel[data-glass="liquid"] { background: rgba(6, 6, 11, 0.58); -webkit-backdrop-filter: url(#liquidGlass) blur(16px) saturate(1.5) brightness(0.82); backdrop-filter: url(#liquidGlass) blur(16px) saturate(1.5) brightness(0.82); border-left: 1px solid rgba(255, 255, 255, 0.20); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.40), inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.28), /* top/left specular bevel */ inset -1px -1px 0 rgba(255, 255, 255, 0.06), inset 0 0 60px rgba(255, 255, 255, 0.05); /* faint internal glow */ } .panel__inner { padding: clamp(2rem, 5vw, 4.5rem); max-width: 30rem; } .name { margin: 0 0 0.5rem; font-family: var(--font-head); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: var(--head-weight); letter-spacing: var(--head-tracking); line-height: 1.05; } .title { margin: 0 0 1.9rem; font-family: var(--font-body); font-size: clamp(0.82rem, 1vw, 0.95rem); font-weight: 400; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); opacity: 0.85; text-wrap: balance; } .bio { margin: 0 0 1.8rem; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.65; color: var(--ink-dim); } .lately { margin: 0 0 2.2rem; font-size: clamp(0.9rem, 1.2vw, 1.02rem); line-height: 1.6; color: var(--ink-dim); } .lately__label { display: block; margin-bottom: 0.35rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); } .links { display: flex; align-items: center; gap: 1.3rem; } .links a { display: inline-flex; color: var(--ink-dim); transition: color 0.2s ease, transform 0.2s ease; } .links a:hover, .links a:focus-visible { color: var(--accent); transform: translateY(-1px); } .links svg { width: 24px; height: 24px; display: block; } /* Stack on narrow screens — glass panel sits over the shader at the bottom */ @media (max-width: 720px) { .layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .panel { border-left: none; border-top: 1px solid var(--panel-edge); box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.35); } } @media (prefers-reduced-motion: reduce) { /* renderer still paints a static frame; nothing extra needed */ }