:root { --paper:#f5f2eb; --ink:#171918; --muted:#686862; --line:#d9d6ce; --blue:#5f8cf3; --orange:#d97036; --mint:#cfe9dc; --lilac:#e6d7f5; --radius:10px; --page:max(24px, calc((100vw - 1180px) / 2)); }
* { box-sizing:border-box } html { scroll-behavior:smooth } body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial, Helvetica, sans-serif; -webkit-font-smoothing:antialiased } a { color:inherit; text-decoration:none } button,input { font:inherit } button { color:inherit } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap } .skip-link { position:fixed; z-index:10; top:-50px; left:16px; background:var(--ink); color:var(--paper); padding:10px 14px; border-radius:6px } .skip-link:focus { top:16px } :focus-visible { outline:3px solid #396be0; outline-offset:3px }
.site-header { height:64px; position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:38px; padding:0 var(--page); background:color-mix(in srgb,var(--paper) 94%,transparent); transition:border-color .25s, background .25s; border-bottom:1px solid transparent; backdrop-filter:blur(12px) } .is-scrolled .site-header { border-color:var(--line); background:color-mix(in srgb,var(--paper) 90%,transparent) } .wordmark { font-weight:1000; font-size:21px; letter-spacing:-1.6px; line-height:1 } .desktop-nav { display:flex; gap:28px; margin:auto; font-size:12px; font-weight:700 } .header-actions { display:flex; align-items:center; gap:20px; font-size:12px; font-weight:700 } .icon-button,.menu-button { border:0; background:none; cursor:pointer; padding:8px 0; font-weight:700 } .icon-button { font-size:13px }.join { padding:8px 16px; background:var(--ink); color:white; border-radius:99px }.menu-button,.mobile-menu { display:none }
.section-grid { padding-left:var(--page); padding-right:var(--page) }.hero { min-height:535px; display:grid; grid-template-columns:8fr 4fr; padding-top:40px; padding-bottom:66px; position:relative; overflow:hidden; border-bottom:1px solid #eeeae2 }.hero::after { content:""; position:absolute; inset:auto -10% -43% 43%; height:420px; background:radial-gradient(ellipse,rgba(215,206,190,.23),transparent 62%); pointer-events:none }.hero-copy { position:relative; z-index:1 }.eyebrow,.card-category { margin:0; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase }.hero h1 { margin:10px 0 0; font-size:clamp(88px,15.3vw,210px); font-weight:1000; letter-spacing:-.105em; line-height:.72 }.hero h2 { margin:14px 0 0; font-size:clamp(36px,4.3vw,64px); line-height:.94; letter-spacing:-.07em }.hero-description { margin:13px 0 20px; font-size:18px; line-height:1.18; letter-spacing:-.035em }.button { display:inline-flex; gap:15px; align-items:center; border-radius:999px; padding:13px 18px; font-size:12px; font-weight:800; transition:transform .2s }.button:hover { transform:translateX(4px) }.button-dark { color:white; background:var(--ink) }.hero-note { align-self:center; justify-self:center; margin-top:80px; transform:rotate(-12deg); color:#55534e; font-family:cursive; font-size:18px; line-height:1.15 }.hero-note span { display:block; font-family:Arial; transform:rotate(-12deg); font-size:58px; margin:2px 10px }
.explore,.featured,.directory,.next { padding-top:54px; padding-bottom:50px; border-bottom:1px solid var(--line) }.section-heading h2,.next h2 { margin:6px 0 1px; font-size:28px; letter-spacing:-.075em; line-height:1; font-weight:1000 }.section-heading p:not(.eyebrow),.next-intro>p:last-child { margin:4px 0 0; font-size:13px; font-weight:600 }.search-wrap { position:relative; margin:18px 0 14px }.search-wrap input { width:100%; padding:14px 42px; border:1px solid #c7c3ba; border-radius:99px; color:var(--ink); background:#faf8f3; outline:none; font-size:13px }.search-wrap input:focus { border-color:var(--ink); box-shadow:0 0 0 3px rgba(23,25,24,.08) }.search-wrap span { position:absolute; left:16px; top:12px; font-size:19px }.category-nav { display:flex; flex-wrap:wrap; gap:8px 34px }.category-nav a { display:flex; gap:9px; align-items:center; font-size:13px; padding:5px 0; border-bottom:1px solid transparent }.category-nav a:hover { border-color:var(--ink) }.search-message { min-height:0; margin:9px 0 0; font-size:12px; color:var(--muted) }
.featured-grid { margin-top:13px; display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:repeat(2, 124px); gap:10px }.project-card { isolation:isolate; position:relative; overflow:hidden; display:flex; flex-direction:column; padding:16px; border-radius:var(--radius); color:white; min-width:0; transition:transform .25s,box-shadow .25s }.project-card:hover { transform:translateY(-5px); box-shadow:0 12px 24px rgba(20,22,20,.16) }.project-card:first-child { grid-row:span 2; padding:22px }.card-top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1 }.project-card .status { color:inherit }.card-content { margin-top:auto; position:relative; z-index:1; max-width:60% }.card-content h3 { margin:0; font-size:clamp(28px,3.6vw,55px); line-height:.9; letter-spacing:-.09em }.card-content p { margin:9px 0 0; font-size:13px; line-height:1.18; font-weight:600 }.card-link { margin-top:14px; position:relative; z-index:1; align-self:flex-end; font-size:12px; font-weight:700 }.card-link b { font-size:17px; margin-left:5px }.card-art { position:absolute; z-index:0; border-radius:50%; opacity:.85 }.variant-conversation { background:linear-gradient(135deg,#6399f6,#3c65c3) }.variant-conversation .card-art { width:190px;height:190px;right:4%;bottom:8%;background:radial-gradient(circle at 33% 31%,#c5b96e 0 17%,transparent 18%),radial-gradient(circle at 66% 60%,#a677dc 0 19%,transparent 20%),radial-gradient(circle at 36% 68%,#253f90 0 25%,transparent 26%); filter:drop-shadow(5px 9px 11px rgba(0,0,0,.2)); transform:rotate(-20deg) }.variant-editorial { background:linear-gradient(115deg,#575047,#92877b) }.variant-editorial .card-art { right:-25px;bottom:-42px;width:210px;height:190px;background:linear-gradient(165deg,transparent 48%,#24211d 49% 55%,transparent 56%),linear-gradient(95deg,transparent 54%,#e2d4cb 55% 69%,#a51d1c 70% 76%,#285b94 77% 83%,transparent 84%); opacity:.7 }.variant-stories { background:linear-gradient(110deg,#8e5f40,#dd9b70 49%,#3a2c29) }.variant-stories .card-art { width:300px;height:120px;bottom:-50px;right:-10px;background:radial-gradient(ellipse at 50% 0,#253128 0 19%,transparent 20%),radial-gradient(ellipse at 15% 58%,#1e2925 0 40%,transparent 41%),radial-gradient(ellipse at 85% 70%,#14201f 0 38%,transparent 39%) }.status { display:inline-flex; gap:5px; align-items:center; font-size:9px; font-weight:800; text-transform:uppercase; white-space:nowrap }.status-live span:first-child { color:#36d66f }.status-beta span:first-child { color:#deb950 }.status-building span:first-child { color:#ffad48 }.status-idea span:first-child { color:#6e6c67 }.project-card .status-building span:first-child,.project-card .status-idea span:first-child { color:#fff }
.directory-top { display:flex; align-items:end; justify-content:space-between; gap:20px }.filters { display:flex; gap:7px; flex-wrap:wrap; justify-content:end }.filters button { padding:6px 13px; border:1px solid var(--line); border-radius:99px; background:transparent; cursor:pointer; font-size:10px; font-weight:800 }.filters .is-active { background:var(--ink); color:white; border-color:var(--ink) }.project-directory { margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); column-gap:38px }.directory-row { display:grid; grid-template-columns:1fr auto 16px; align-items:center; gap:7px; min-height:48px; border-top:1px solid var(--line); font-size:11px; transition:padding .2s,background .2s }.directory-row:hover { padding-inline:7px; background:#eeeae1 }.directory-name { display:grid; gap:2px }.directory-name b { font-size:11px }.directory-name small { font-size:9px; color:var(--muted) }.empty-state { grid-column:1/-1; padding:18px 0; font-size:13px }
.next { display:grid; grid-template-columns:3fr 7fr; gap:28px; align-items:start }.next-projects { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }.next-card { min-height:96px; padding:15px; border-radius:8px; display:flex; flex-direction:column; gap:3px; transition:transform .2s }.next-card:hover { transform:translateY(-4px) }.next-card b { font-size:15px; letter-spacing:-.05em }.next-card small { font-size:10px }.next-card .status { margin-top:auto }.variant-money { background:var(--mint); color:#196b50 }.variant-work { background:var(--lilac); color:#603a9e }.variant-letters { background:#f8dcca; color:#a04a22 }
.build { padding:30px var(--page) }.build-backdrop { min-height:150px; display:grid; grid-template-columns:1fr 1.6fr auto; align-items:center; gap:25px; padding:25px; color:white; background:linear-gradient(90deg,rgba(12,14,13,.92),rgba(24,27,23,.7)),radial-gradient(ellipse at 10% 50%,#5e6253,transparent 35%),#1a1c1a; border-radius:10px }.build h2 { margin:4px 0; font-size:27px; letter-spacing:-.07em }.build p:not(.eyebrow) { margin:0; font-size:12px }.build-actions { display:flex; justify-content:space-around; gap:12px; font-size:12px; font-weight:700 }.button-light { white-space:nowrap; background:var(--paper); color:var(--ink) }.closing { min-height:310px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center }.closing h2 { margin:0; font-size:clamp(37px,6vw,78px); letter-spacing:.15em; line-height:1 }.closing p { margin:15px 0 0; font-size:16px; line-height:1.18; font-weight:600 }.footer { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:28px; padding-top:25px; padding-bottom:25px; border-top:1px solid var(--line); font-size:10px }.footer>div p { margin:6px 0 }.footer nav { display:grid; align-content:start; gap:5px; color:#595852 }.footer strong { color:var(--ink); margin-bottom:3px }.footer small { grid-column:1/-1; text-align:right; color:#8a8881; font-size:9px }
@media (max-width:700px) { :root { --page:16px } .site-header { height:55px; gap:15px }.desktop-nav,.login,.join,.search-toggle span { display:none }.header-actions { margin-left:auto; gap:14px }.menu-button { display:block }.mobile-menu { position:absolute; left:0; right:0; top:54px; padding:12px var(--page) 18px; border-bottom:1px solid var(--line); background:var(--paper); grid-template-columns:repeat(2,1fr); gap:8px; transform:translateY(-130%); visibility:hidden; transition:transform .2s,visibility .2s }.mobile-menu.is-open { display:grid; transform:translateY(0); visibility:visible }.mobile-menu a { padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; font-weight:700 }.hero { min-height:430px; display:block; padding-top:29px; padding-bottom:24px }.hero h1 { font-size:clamp(76px,25vw,120px); line-height:.75 }.hero h2 { margin-top:16px; font-size:39px }.hero-description { font-size:16px; margin-block:10px 17px }.hero-note { position:absolute; right:18px; bottom:55px; font-size:13px; margin:0 }.hero-note span { font-size:38px }.explore,.featured,.directory,.next { padding-top:34px; padding-bottom:32px }.section-heading h2,.next h2 { font-size:23px }.category-nav { display:grid; grid-template-columns:repeat(2,1fr); gap:2px 25px }.category-nav a { justify-content:space-between; font-size:12px; border-bottom:1px solid var(--line) }.featured-grid { grid-template-columns:1fr; grid-template-rows:190px repeat(2,130px) }.project-card:first-child { grid-row:auto; padding:17px }.card-content { max-width:72% }.card-content h3 { font-size:35px }.variant-conversation .card-art { width:155px;height:155px;right:-4%;bottom:-5% }.directory-top { display:block }.filters { margin-top:17px; justify-content:start }.project-directory { display:block }.directory-row { min-height:45px }.next { display:block }.next-projects { margin-top:16px; grid-template-columns:repeat(3,1fr); gap:7px }.next-card { min-height:86px; padding:10px }.next-card b { font-size:12px }.next-card .status { font-size:7px }.build { padding-top:20px; padding-bottom:20px }.build-backdrop { min-height:246px; display:flex; flex-direction:column; align-items:flex-start; padding:20px }.build-actions { width:100%; justify-content:space-between; font-size:10px }.build h2 { font-size:25px }.button-light { margin-top:auto }.closing { min-height:235px }.footer { grid-template-columns:1.5fr 1fr 1fr; gap:24px 15px }.footer nav:last-of-type { display:none }.footer small { text-align:left } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important } }