@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  --bg: #04050c;
  --panel: #0a0d1c;
  --ink: #eaf0ff;
  --dim: #8a97b8;
  --gold: #ffd27a;
  --cyan: #7ad0ff;
  --line: rgba(150, 170, 220, .18);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--mono); font-weight: 300; line-height: 1.7; }
a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(122, 208, 255, .3); }
a:hover { color: var(--gold); border-color: var(--gold); }
img { max-width: 100%; display: block; }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(18px, 4vw, 40px); font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  background: rgba(4, 5, 12, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav a { color: var(--dim); border: 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .brand { color: var(--ink); font-weight: 500; }
.nav ul { list-style: none; display: flex; gap: clamp(12px, 3vw, 28px); flex-wrap: wrap; justify-content: flex-end; }

/* hero */
.hero { position: relative; height: 100vh; min-height: 520px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 47%, #0a0d1c 0%, #06070f 55%, #020309 100%); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 47%, transparent 45%, rgba(0, 0, 0, .65) 100%); }
.hero-text { position: absolute; left: clamp(18px, 6vw, 80px); right: clamp(18px, 6vw, 80px); bottom: 14vh; z-index: 2; max-width: 760px; }
.eyebrow { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 7vw, 84px); line-height: 1; letter-spacing: -.01em; }
.hero p { margin-top: 18px; color: var(--dim); font-size: clamp(13px, 1.6vw, 16px); max-width: 52ch; }
.hero p.tagline { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.8vw, 30px); line-height: 1.25; color: #d6def5; max-width: 30ch; }
.hero p.tagline + p { margin-top: 12px; }
.hero .cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  border: 1px solid var(--line); padding: 10px 18px; border-radius: 999px; transition: all .3s ease; }
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn.primary { border-color: rgba(255, 210, 122, .5); }

/* content */
main.page { max-width: 860px; margin: 0 auto; padding: 120px clamp(18px, 5vw, 40px) 80px; }
section.band { max-width: 1040px; margin: 0 auto; padding: 90px clamp(18px, 5vw, 40px); }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; margin-bottom: 22px; }
h3 { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 44px 0 14px; font-weight: 500; }
h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; margin-top: 18px; }
.meta { color: var(--dim); font-size: 13px; }
p + p { margin-top: 12px; }
ul.list { list-style: none; }
ul.list li { position: relative; padding-left: 18px; margin: 6px 0; font-size: 14px; }
ul.list li::before { content: "·"; position: absolute; left: 4px; color: var(--gold); }
ol.refs { padding-left: 22px; font-size: 14px; }
ol.refs li { margin: 10px 0; }
ol.refs li::marker { color: var(--dim); }
.lede { font-family: var(--serif); font-size: clamp(18px, 2.4vw, 24px); line-height: 1.5; color: #d6def5; }

/* cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 30px; }
.card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; color: var(--ink); transition: border-color .3s ease, transform .3s ease; }
.card:hover { border-color: rgba(255, 210, 122, .45); transform: translateY(-2px); color: var(--ink); }
.card .k { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }
.card h4 { margin: 8px 0 8px; }
.card p { font-size: 13px; color: var(--dim); }

.photo { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.photo figcaption { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); padding: 10px 14px; }
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* who am I */
#about { scroll-margin-top: 40px; }
.subhead { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.4vw, 24px); line-height: 1.35; color: var(--gold); margin: -8px 0 20px; }
.about { max-width: 70ch; margin-top: 44px; }
.about p { font-size: 15px; }
.about p + p { margin-top: 14px; }
.duo { margin-top: 40px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); }
.duo-head, .duo-row { display: grid; grid-template-columns: 1fr 1fr; }
.duo-head span { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.duo-head span:first-child { color: var(--cyan); }
.duo-head span:last-child { color: var(--gold); }
.duo-row span { padding: 14px 20px; font-size: 14px; }
.duo-row + .duo-row span { border-top: 1px solid var(--line); }
.duo-row span:last-child, .duo-head span:last-child { border-left: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: 16px; color: #d6def5; }
.duo-head span:last-child { font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--gold); }
@media (max-width: 560px) { .duo-row span { font-size: 13px; padding: 12px 14px; } .duo-row span:last-child { font-size: 14px; } }

/* approach */
.approach { margin-top: 90px; scroll-margin-top: 40px; }
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
@media (min-width: 1000px) { .principles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .principles { grid-template-columns: 1fr; } }
.principles .card:hover { transform: none; border-color: var(--line); }
.principles .k { color: var(--gold); }
.closing { margin-top: 34px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.4vw, 25px); line-height: 1.4; color: #d6def5; max-width: 40ch; }
.approach + .grid { margin-top: 70px; }

footer { border-top: 1px solid var(--line); padding: 30px clamp(18px, 5vw, 40px); font-size: 12px; color: var(--dim);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--dim); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card, .btn { transition: none; } }