@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');

:root { --bg: #090909; --ink: #f1efe9; --muted: #999791; --line: #292929; --acid: #d6ff4d; }
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'DM Sans', Arial, sans-serif; }
main { width: min(100%, 1440px); margin: 0 auto; padding: 0 42px; }
a { color: inherit; }
.topbar { height: 94px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-family: 'DM Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.wordmark { text-decoration: none; font-size: 16px; text-transform: none; letter-spacing: -.04em; font-weight: 500; }
.wordmark span { color: var(--acid); }
.top-links { display: flex; gap: 24px; }
.top-links a { color: var(--muted); text-decoration: none; transition: color .2s ease; }
.top-links a:hover { color: var(--acid); }
.hero-layout { min-height: calc(100svh - 94px); display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr); gap: clamp(36px, 5vw, 92px); align-items: center; padding: clamp(50px, 7vw, 108px) 0 clamp(44px, 6vw, 84px); }
.hero-copy { max-width: 670px; }
.eyebrow, .portrait-meta, .caption, footer, .section-number { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; }
.hero-copy h1 { margin: 26px 0 32px; max-width: 670px; font-size: clamp(52px, 5.55vw, 88px); line-height: .98; letter-spacing: -.045em; font-weight: 500; }
.intro { margin: 0; max-width: 525px; color: #c4c2bc; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.4; letter-spacing: -.018em; }
.portrait-section { min-width: 0; border: 1px solid var(--line); background: #0c0c0c; padding: 0 clamp(8px, 1.1vw, 16px) clamp(10px, 1.1vw, 15px); }
.portrait-meta { display: flex; justify-content: space-between; gap: 14px; padding: 15px 0; font-size: 9px; }
#portrait { margin: 0; overflow: hidden; color: #deddd7; font-family: 'DM Mono', ui-monospace, monospace; font-size: clamp(5.4px, .70vw, 10.3px); line-height: 1.02; letter-spacing: 0; white-space: pre; text-align: center; background: radial-gradient(circle at center, #202020 0%, #0e0e0e 70%); border: 1px solid #202020; padding: clamp(8px, 1vw, 14px) 0; min-height: 0; aspect-ratio: 1 / 1.02; display: flex; align-items: center; justify-content: center; }
.caption { margin: 12px 0 0; text-align: right; text-transform: uppercase; font-size: 9px; }
.caption a { color: var(--ink); text-decoration-color: #505050; text-underline-offset: 3px; }
.caption span { padding: 0 6px; color: var(--acid); }
.currently, .paths { display: grid; grid-template-columns: 110px minmax(0, 1fr); border-top: 1px solid var(--line); padding: 42px 0 112px; }
.section-number { color: var(--acid); }
.section-content { max-width: 970px; }
h2 { font-size: clamp(34px, 5vw, 68px); margin: 20px 0 56px; letter-spacing: -.065em; font-weight: 500; line-height: .96; }
.now-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.now-list li { min-height: 116px; display: grid; grid-template-columns: 80px minmax(130px, .65fr) minmax(240px, 1.3fr); align-items: center; border-bottom: 1px solid var(--line); gap: 20px; }
.now-list span { color: var(--acid); font-family: 'DM Mono', monospace; font-size: 12px; }
.now-list strong { font-size: 19px; letter-spacing: -.04em; font-weight: 500; }
.now-list p { margin: 0; max-width: 390px; color: var(--muted); line-height: 1.35; font-size: 15px; }
.path-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.path-grid a { position: relative; min-height: 174px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; transition: background .25s ease, color .25s ease; }
.path-grid a:not(.coming-soon):hover { background: var(--acid); color: var(--bg); }
.path-grid span { font-family: 'DM Mono', monospace; font-size: 15px; }
.path-grid small { color: var(--muted); font-size: 14px; }
.path-grid a:hover small { color: #343b16; }
.path-grid b { position: absolute; top: 22px; right: 24px; font-family: 'DM Mono', monospace; font-weight: 400; color: var(--acid); }
.path-grid a:hover b { color: var(--bg); }
.coming-soon { cursor: default; opacity: .55; }
.coming-soon b { font-size: 10px; text-transform: uppercase; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 25px 0 36px; border-top: 1px solid var(--line); font-size: 10px; }
@media (max-width: 900px) { .hero-layout { grid-template-columns: 1fr; min-height: 0; padding: 82px 0 68px; gap: 56px; } .hero-copy { max-width: 760px; } .hero-copy h1 { max-width: 760px; font-size: clamp(50px, 9.4vw, 78px); } .portrait-section { max-width: 680px; width: 100%; } #portrait { font-size: clamp(4.2px, 1.15vw, 8px); } }
@media (max-width: 680px) { main { padding: 0 18px; } .topbar { height: 70px; } .top-links { gap: 16px; font-size: 10px; } .hero-layout { min-height: 0; padding: 74px 0 58px; gap: 46px; } .hero-copy h1 { margin: 22px 0 25px; letter-spacing: -.05em; line-height: .99; } .portrait-meta { font-size: 7px; letter-spacing: .04em; } #portrait { font-size: 4.25px; min-height: 200px; padding: 8px 1px; } .currently, .paths { grid-template-columns: 1fr; gap: 38px; padding: 34px 0 76px; } .now-list li { grid-template-columns: 34px 1fr; gap: 10px; padding: 24px 0; } .now-list p { grid-column: 2; font-size: 14px; } .path-grid { grid-template-columns: 1fr; } .path-grid a { min-height: 135px; } footer { flex-direction: column; line-height: 1.5; } }