* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--text-primary); }
p, h1, h2, h3 { margin: 0; }
.page { max-width: 1800px; min-height: 100svh; margin-inline: auto; padding: 0 var(--space-8); display: flex; flex-direction: column; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-6); border-bottom: 1px solid var(--border); }
.wordmark { display: flex; align-items: center; gap: var(--space-4); }
.wordmark-name { font: 800 3.5rem/.9 var(--font-display); letter-spacing: -.035em; }
.wordmark-period { color: var(--text-secondary); }
.wordmark-descriptor { font: 500 .75rem/1.4 var(--font-mono); letter-spacing: .14em; padding-top: var(--space-2); }
.masthead-note { font: 400 .75rem/1.65 var(--font-mono); letter-spacing: .06em; color: var(--text-secondary); text-align: right; }
main { flex: 1; display: flex; align-items: center; }
.splash { width: 100%; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-9); }
.eyebrow { font: 400 .875rem/1.6 var(--font-mono); letter-spacing: .055em; color: var(--text-secondary); }
.story > .eyebrow { display: flex; align-items: center; gap: var(--space-4); }
.accent-rule { display: block; width: 40px; height: 3px; flex-shrink: 0; background: var(--accent); }
h1 { font: 700 clamp(4.5rem, 8.4vw, 9rem)/.95 var(--font-display); letter-spacing: -.018em; margin-top: var(--space-6); }
h1 span { color: var(--text-secondary); }
.intro { font-size: 1.25rem; line-height: 1.5; font-weight: 500; margin-top: var(--space-7); }
.description { max-width: 510px; margin-top: var(--space-4); color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.8; }
.expertise { align-self: stretch; border-left: 1px solid var(--border); padding-left: var(--space-7); }
h2 { font: 500 2.375rem/1.1 var(--font-display); margin-top: var(--space-5); }
.focus-list { list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.focus-list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--border); }
.focus-list li:last-child { padding-bottom: 0; }
.index { font: 400 .75rem/1.6 var(--font-mono); color: var(--text-secondary); padding-top: var(--space-1); }
h3 { font: 500 1rem/1.6 var(--font-body); }
.focus-list p { font-size: 1rem; line-height: 1.65; color: var(--text-secondary); margin-top: var(--space-2); max-width: 370px; }
footer { display: flex; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); border-top: 1px solid var(--border); color: var(--text-secondary); font: 400 .75rem/1.6 var(--font-mono); letter-spacing: .045em; }
.contact { display: inline-flex; align-items: center; gap: var(--space-5); border-bottom: 1px solid var(--text-secondary); margin-top: var(--space-6); padding-bottom: var(--space-2); color: var(--text-primary); text-decoration: none; font-size: 1rem; line-height: 1.5; transition: border-color .2s, color .2s; }
.contact:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.contact:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 8px; }
@media (min-width: 1600px) { .splash { gap: var(--space-9); } }
@media (max-width: 1100px) { .page { padding-inline: var(--space-7); } .splash { gap: var(--space-7); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding-block: var(--space-8); } .expertise { padding-left: var(--space-6); } h1 { font-size: clamp(4rem, 8.25vw, 6rem); } }
@media (max-width: 800px) { .page { padding-inline: var(--space-6); } .splash { grid-template-columns: 1fr; gap: var(--space-8); } h1 { font-size: clamp(4rem, 12.7vw, 7rem); } .expertise { border-left: 0; padding-left: 0; } .description { max-width: 580px; } .focus-list p { max-width: none; } .intro { margin-top: var(--space-6); } .masthead-note { font-size: .75rem; } footer { flex-wrap: wrap; gap: var(--space-2); } }
@media (max-width: 480px) { .page { padding-inline: var(--space-5); } .masthead { padding-block: var(--space-5); } .wordmark { gap: var(--space-2); } .wordmark-name { font-size: 2.75rem; } .wordmark-descriptor { font-size: .75rem; letter-spacing: .04em; } .masthead-note { display: none; } .splash { padding-top: var(--space-7); padding-bottom: var(--space-7); gap: var(--space-7); } .eyebrow { font-size: .75rem; letter-spacing: .025em; } .accent-rule { width: 24px; } h1 { font-size: clamp(3rem, 12.5vw, 4rem); } h2 { font-size: 2.125rem; } footer { font-size: .75rem; letter-spacing: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }