:root { --ink:#142528; --paper:#f4f0e8; --lime:#ccff3c; --orange:#ff6c3b; --muted:#617171; --line:rgba(20,37,40,.18); }
.eyebrow, .index { margin:0 0 1.25rem; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; } main { overflow:hidden; } nav, .hero, .section, .statement, footer { max-width:1280px; margin:auto; padding-left:clamp(24px,5vw,72px); padding-right:clamp(24px,5vw,72px); } nav { height:88px; display:flex; align-items:center; justify-content:space-between; } .brand { color:var(--ink); text-decoration:none; font:700 2rem/1 "Fraunces",serif; letter-spacing:-.12em; } .brand span { color:var(--orange); } .nav-links { display:flex; gap:1.7rem; } .nav-links a, footer a { color:var(--ink); font-size:.88rem; text-decoration:none; } .nav-links a:hover, footer a:hover { text-decoration:underline; text-underline-offset:4px; } .hero { min-height:650px; display:grid; grid-template-columns:1.45fr .55fr; align-items:center; gap:5vw; padding-top:4rem; padding-bottom:6rem; } .eyebrow, .index { margin:0 0 1.25rem; color:var(--muted); font:500 .69rem/1.3 "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { max-width:850px; margin-bottom:1.7rem; font:600 clamp(3.25rem,7vw,6.65rem)/.95 "Fraunces",serif; letter-spacing:-.065em; } h1 em, h3 em { color:var(--orange); font-style:normal; } .intro { max-width:570px; color:#3b5052; font-size:clamp(1.08rem,1.55vw,1.35rem); line-height:1.55; } .actions { margin-top:2.4rem; display:flex; align-items:center; gap:2rem; } .button { display:inline-flex; align-items:center; gap:.8rem; border:1px solid var(--ink); background:var(--ink); color:#fff; padding:.9rem 1.1rem; font-size:.92rem; font-weight:600; text-decoration:none; transition:transform .2s, background .2s; } .button:hover { transform:translate(-3px,-3px); background:var(--orange); border-color:var(--orange); } .text-link, .arrow-link { color:var(--ink); font-size:.93rem; font-weight:600; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:.28rem; } .portrait-wrap { align-self:center; text-align:right; } .portrait-fallback { width:min(25vw,265px); aspect-ratio:1; margin-left:auto; display:flex; justify-content:center; align-items:center; color:var(--paper); background:var(--ink); border-radius:50% 50% 5% 50%; font:700 clamp(3.5rem,7vw,6rem)/1 "Fraunces",serif; letter-spacing:-.13em; transform:rotate(7deg); } .portrait-fallback span:nth-child(2) { color:var(--lime); margin-left:-.22em; margin-top:.45em; } .portrait-wrap p { margin:.8rem 0 0; color:var(--muted); font:500 .68rem "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; } .statement { padding-top:5.5rem; padding-bottom:5.5rem; border-top:1px solid var(--line); } .statement p { max-width:1000px; margin:0; font:600 clamp(1.7rem,3.4vw,3.25rem)/1.12 "Fraunces",serif; letter-spacing:-.045em; } .section { padding-top:7rem; padding-bottom:7rem; } .section-heading h2, .connect h2 { margin:0; font:600 clamp(2.45rem,5vw,4.75rem)/.98 "Fraunces",serif; letter-spacing:-.06em; } .work { background:#dce7df; max-width:none; padding-left:max(calc((100vw - 1280px)/2 + clamp(24px,5vw,72px)),clamp(24px,5vw,72px)); padding-right:max(calc((100vw - 1280px)/2 + clamp(24px,5vw,72px)),clamp(24px,5vw,72px)); } .feature { display:grid; grid-template-columns:1fr 1fr; gap:5vw; padding:5rem 0; border-bottom:1px solid var(--line); } .feature:first-of-type { padding-top:5rem; } .feature h3, .highlight-card h3 { margin:.1rem 0 1.5rem; font:600 clamp(2.3rem,4.4vw,4rem)/.95 "Fraunces",serif; letter-spacing:-.06em; } .feature-text, .highlight-card p:not(.index) { color:#3a4d50; font-size:1.08rem; line-height:1.65; } .feature-text a { color:inherit; text-decoration-color:var(--orange); text-decoration-thickness:2px; text-underline-offset:3px; } .small-note { margin:2.25rem 0 0; color:var(--muted); font:500 .72rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; } .route-card { min-height:285px; padding:1.3rem; display:flex; flex-direction:column; justify-content:space-between; background:var(--ink); color:var(--lime); transform:rotate(2.3deg); box-shadow:10px 12px 0 rgba(20,37,40,.15); } .route-card-top, .route-legend { display:flex; justify-content:space-between; gap:1rem; color:#dce7df; font:500 .62rem "DM Mono",monospace; letter-spacing:.08em; } .route-card svg { width:100%; } .route-legend i { width:7px; height:7px; display:inline-block; border-radius:50%; background:var(--lime); margin-right:.3rem; } .open-source { border-bottom:0; }.open-source h3 { margin:0; }.highlights { border-bottom:1px solid var(--line); }.highlight-grid { margin-top:4rem; display:grid; grid-template-columns:1.15fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }.highlight-card { min-height:340px; padding:2rem; background:var(--paper); display:flex; flex-direction:column; }.highlight-card .arrow-link { width:max-content; margin-top:auto; }.featured-card { color:#fff; background:var(--ink); }.featured-card p:not(.index) { color:#c9d2cc; }.featured-card .index { color:var(--lime); }.credentials { padding-top:4rem; padding-bottom:4rem; display:grid; grid-template-columns:1fr 1.3fr; gap:2rem; }.credentials ul { list-style:none; padding:0; margin:0; }.credentials li { display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:1rem; }.credentials span { color:var(--muted); font:500 .73rem "DM Mono",monospace; }.cred-main { display:inline-flex; align-items:center; gap:.7rem; }.cred-logo { width:20px; height:20px; object-fit:contain; border-radius:3px; filter:grayscale(1); opacity:.78; }.patents-list li { padding:.85rem 0; border-bottom:1px solid var(--line); }.patent-title { margin:0 0 .35rem; font-size:.97rem; font-weight:600; }.patent-meta { margin:0 0 .4rem; color:var(--muted); font:500 .68rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.patent-desc { margin:0; color:#3a4d50; font-size:.93rem; line-height:1.5; }.connect { max-width:none; padding:7rem max(calc((100vw - 1280px)/2 + clamp(24px,5vw,72px)),clamp(24px,5vw,72px)); color:#fff; background:var(--orange); }.connect .eyebrow { color:#642713; }.connect h2 { max-width:850px; margin-bottom:2.5rem; }.button.light { color:var(--ink); border-color:var(--paper); background:var(--paper); } footer { min-height:70px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font:500 .71rem "DM Mono",monospace; letter-spacing:.02em; } @media(max-width:720px) { nav { height:72px; }.nav-links { gap:1rem; }.hero { min-height:auto; grid-template-columns:1fr; padding-top:3rem; padding-bottom:4.5rem; }.portrait-wrap { display:none; }.feature,.highlight-grid,.credentials { grid-template-columns:1fr; }.feature { gap:2rem; padding:3.7rem 0; }.route-card { min-height:225px; margin:1rem 0; }.section { padding-top:4.5rem; padding-bottom:4.5rem; }.highlight-card { min-height:285px; }.actions { align-items:flex-start; flex-direction:column; gap:1.2rem; }.connect { padding-top:5rem; padding-bottom:5rem; } }