:root { --black: #000; --white: #f5f5f5; --grey: #8a8a8a; --line: #292929; }
body.light { --black: #f5f5f5; --white: #070707; --grey: #656565; --line: #cfcfcf; }
* { box-sizing: border-box; }
html { background: var(--black); }
body { min-width: 320px; margin: 0; background: var(--black); color: var(--white); font-family: Inter, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.page { width: min(100% - 48px, 1180px); min-height: 100svh; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.nav { height: 77px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 22px; font: 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .02em; }.nav-links { display: flex; gap: 24px; }.nav a { color: var(--white); }.theme-toggle { appearance: none; border: 0; padding: 0; color: var(--grey); background: none; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }.theme-toggle:hover { color: var(--white); }
.hero { flex: 1; min-height: 510px; display: grid; grid-template-rows: 1fr auto; position: relative; }
.bottom-line { padding: 17px 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: end; font: 10px "DM Mono", monospace; text-transform: uppercase; color: var(--grey); letter-spacing: .015em; }.bottom-line p { margin: 0; color: var(--white); font-size: 13px; line-height: 1.55; }.bottom-line p:last-child { text-align: right; }
.name-lockup { align-self: center; position: relative; padding: 54px 5.7vw; }
h1 { margin: 0; position: relative; z-index: 1; font-size: clamp(58px, 10.5vw, 170px); line-height: .78; letter-spacing: -.1em; font-weight: 500; }.hero h1 span { color: var(--grey); }
.three-object { position: absolute; z-index: 0; width: clamp(150px, 21vw, 280px); aspect-ratio: 1; right: 2%; top: 50%; transform: translateY(-50%); opacity: .6; pointer-events: none; }.three-object canvas { width: 100%; height: 100%; display: block; }
footer { min-height: 62px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 0 22px; font: 10px "DM Mono", monospace; color: var(--grey); text-transform: uppercase; letter-spacing: .015em; } footer span:nth-child(2) { text-align: center; } footer a { text-align: right; color: var(--white); }
@media (max-width: 600px) { .page { width: 100%; border: 0; }.nav { height: 65px; padding: 0 16px; }.hero { min-height: calc(100svh - 123px); }.bottom-line { padding: 14px 16px; gap: 15px; }.name-lockup { padding: min(60vw, 300px) 16px 38px; } h1 { font-size: clamp(54px, 17vw, 88px); line-height: .8; }.three-object { width: 60vw; right: 5%; top: 0; transform: none; opacity: .6; }.bottom-line p { font-size: 11px; }.bottom-line p:last-child { max-width: 155px; } footer { min-height: 58px; grid-template-columns: 1fr auto; padding: 0 16px; } footer span:nth-child(2) { display: none; } }