@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,600;9..40,700&family=Instrument+Serif:ital@0;1&display=swap');

:root { --ink: #1c231b; --soft-ink: #5f655d; --paper: #f7f4ec; --sage: #dbe5cf; --green: #3f5943; --line: #d9d7cd; --accent: #e96845; --pad: clamp(20px, 5vw, 72px); --max: 1320px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 10; top: -60px; left: 16px; padding: 9px 12px; background: var(--ink); color: white; }.skip-link:focus { top: 16px; }
.page-width { width: min(100%, var(--max)); margin: auto; padding-inline: var(--pad); }
.site-header { width: min(100%, var(--max)); min-height: 76px; margin: auto; padding: 22px var(--pad); display: flex; justify-content: space-between; align-items: center; }.brand { font: 600 18px/1 "DM Mono", monospace; letter-spacing: -.07em; text-decoration: none; }.brand span { color: var(--accent); }.site-header nav { display: flex; gap: clamp(15px, 3vw, 34px); }.site-header nav a { color: var(--soft-ink); font-size: 12px; text-decoration: none; }.site-header nav a:hover { color: var(--ink); }

.hero { width: min(100%, var(--max)); min-height: min(720px, calc(100vh - 76px)); margin: auto; padding: 0 var(--pad) clamp(55px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr); gap: clamp(30px, 6vw, 95px); align-items: center; }.hero-copy { padding-top: clamp(70px, 13vh, 145px); display: flex; flex-direction: column; align-items: flex-start; }.kicker, .section-label { margin: 0; color: var(--soft-ink); font: 500 10px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }.hero h1 { margin: 22px 0; font-size: clamp(4.3rem, 9.5vw, 9rem); font-weight: 600; letter-spacing: -.1em; line-height: .72; }.hero h1 em { color: var(--green); font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }.hero-intro { max-width: 410px; margin: 12px 0 29px; font-size: clamp(1rem, 1.6vw, 1.24rem); line-height: 1.45; }.hero-visual { width: min(100%, 575px); aspect-ratio: 1; justify-self: end; position: relative; }.hero-visual::before { content: ""; position: absolute; inset: -20px; border: 1px solid var(--line); border-radius: 50%; }.hero-photo { width: 100%; height: 100%; position: relative; overflow: hidden; margin: 0; border-radius: 50%; background: var(--sage); box-shadow: 12px 14px 0 var(--green); }.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,35,27,.03), rgba(28,35,27,.32)); pointer-events: none; }.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; filter: brightness(.83) contrast(1.08) saturate(.84); }.portrait-social a { position: absolute; z-index: 2; display: grid; place-items: center; width: 45px; aspect-ratio: 1; border-radius: 50%; color: var(--paper); background: var(--ink); box-shadow: 2px 3px 0 rgba(28,35,27,.22); text-decoration: none; transition: scale .2s, rotate .2s, background .2s; }.portrait-social a svg { width: 19px; height: 19px; fill: currentColor; }.portrait-social .x svg { width: 16px; height: 16px; }.portrait-social a:hover { background: var(--accent); scale: 1.12; rotate: -8deg; animation-play-state: paused; }.portrait-social .linkedin { top: 7%; left: -5%; }.portrait-social .x { right: -5%; top: 28%; }.portrait-social .github { left: 6%; bottom: 7%; }.portrait-products a { position: absolute; z-index: 2; display: grid; place-items: center; width: 70px; aspect-ratio: 1; border-radius: 50%; color: white; text-decoration: none; box-shadow: 3px 4px 0 rgba(28,35,27,.18); transition: scale .2s, rotate .2s; }.portrait-products a:hover { scale: 1.08; rotate: 7deg; animation-play-state: paused; }.portrait-products span { font: 400 30px "Instrument Serif", Georgia, serif; line-height: .7; }.portrait-products small { position: absolute; top: calc(100% + 6px); width: max-content; color: var(--ink); font: 10px "DM Mono", monospace; }.nationcraft-bubble { top: -6%; right: 19%; background: #345178; }.manzil-bubble { right: 5%; bottom: 8%; background: #e76745; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.intro-section { padding-top: clamp(60px, 8vw, 120px); padding-bottom: clamp(74px, 10vw, 145px); display: grid; grid-template-columns: .65fr 1.35fr; gap: 34px; border-top: 1px solid var(--line); }.intro-copy h2, .follow-section h2 { max-width: 720px; margin: -9px 0 18px; font-size: clamp(2.5rem, 5.2vw, 5.7rem); letter-spacing: -.09em; line-height: .86; }.intro-copy p { max-width: 510px; margin: 0; color: var(--soft-ink); font-size: 17px; line-height: 1.5; }

.venture-section { padding-bottom: clamp(80px, 10vw, 140px); }.venture { border-top: 1px solid var(--line); }.venture:last-child { border-bottom: 1px solid var(--line); }.venture summary { display: grid; grid-template-columns: 75px 1fr auto; gap: 18px; align-items: center; padding: clamp(24px, 4vw, 42px) 0; cursor: pointer; list-style: none; }.venture summary::-webkit-details-marker { display: none; }.venture-number { color: var(--soft-ink); font: 10px "DM Mono", monospace; }.venture summary small { display: block; margin-bottom: 7px; color: var(--soft-ink); font: 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.venture summary strong { display: block; font-size: clamp(2.4rem, 5.2vw, 5.5rem); letter-spacing: -.1em; line-height: .75; }.venture-toggle { display: grid; place-items: center; width: 33px; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; font-size: 20px; transition: transform .25s; }.venture[open] .venture-toggle { transform: rotate(45deg); }.venture-content { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(35px, 8vw, 125px); padding: 5px 0 50px 93px; animation: reveal .35s ease both; }.venture-lede { max-width: 350px; margin: 0; font-size: 17px; line-height: 1.5; }.studio .venture-lede { color: var(--green); }.product-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }.product-list a { min-height: 92px; padding: 15px 17px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 14px; background: var(--paper); text-decoration: none; transition: background .2s, transform .2s; }.product-list a:hover { background: #fffdf7; transform: translateX(6px); }.product-mark { display: grid; width: 42px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: white; font: 500 17px "Instrument Serif", Georgia, serif; }.nationcraft-mark { background: #345178; }.manzil-mark { background: #e76745; }.stick-mark { background: #39714f; font-family: "DM Mono", monospace; }.product-list b { display: block; font-size: 16px; letter-spacing: -.03em; }.product-list small { display: block; margin-top: 3px; color: var(--soft-ink); font-size: 12px; }.product-list i { font-style: normal; }.services .venture-content { grid-template-columns: .75fr .7fr .55fr; }.service-list { margin: 0; padding: 0; list-style: none; }.service-list li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }.client-list p { margin: 0 0 12px; color: var(--soft-ink); font: 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.client-list ul { margin: 0; padding: 0; list-style: none; }.client-list li { margin: 0; border-top: 1px solid var(--line); }.client-list a { display: block; padding: 11px 0; font-size: 14px; text-underline-offset: 3px; }.venture-link { grid-column: 2 / -1; justify-self: start; margin-top: 4px; padding-bottom: 5px; border-bottom: 1px solid currentColor; font: 11px "DM Mono", monospace; text-decoration: none; }.venture-link:hover { color: var(--accent); }

.follow-section { padding-bottom: clamp(80px, 10vw, 130px); display: grid; grid-template-columns: .65fr 1.35fr; gap: 34px; }.follow-section h2 { margin-top: -9px; }.follow-section > div > p { max-width: 450px; margin: 0 0 32px; color: var(--soft-ink); font-size: 16px; line-height: 1.5; }.follow-links { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }.follow-links a { min-height: 142px; padding: 17px 16px 16px 0; display: grid; gap: 9px; border-bottom: 1px solid var(--line); text-decoration: none; transition: color .2s, padding .2s; }.follow-links a + a { padding-left: 16px; border-left: 1px solid var(--line); }.follow-links a:hover { padding-top: 10px; color: var(--accent); }.follow-links span { color: var(--soft-ink); font: 10px "DM Mono", monospace; }.follow-links b { font-size: 16px; letter-spacing: -.04em; }.follow-links i { align-self: end; color: var(--soft-ink); font: 11px/1.35 "DM Mono", monospace; font-style: normal; }.site-footer { width: min(100%, var(--max)); margin: auto; padding: 23px var(--pad) 31px; display: flex; align-items: center; gap: 22px; border-top: 1px solid var(--line); color: var(--soft-ink); font: 10px "DM Mono", monospace; text-transform: uppercase; }.site-footer .brand { margin-right: auto; color: var(--ink); text-transform: none; }.site-footer p { margin: 0; }.site-footer div { display: flex; gap: 12px; }.site-footer a { text-decoration: none; }.site-footer div a:hover { color: var(--ink); }

/* Legal pages share the calm, text-first identity. */
.legal { width: min(100%, 780px); margin: auto; padding: clamp(55px, 8vw, 105px) var(--pad); }.legal h1 { margin: 12px 0 8px; font-size: clamp(2.7rem, 6vw, 5rem); letter-spacing: -.08em; line-height: .9; }.legal h2 { margin: 48px 0 13px; font-size: 17px; }.legal p, .legal li { font-size: 16px; line-height: 1.6; }.legal li { margin: 6px 0; }.legal a { text-underline-offset: 3px; }.legal-meta { color: var(--soft-ink); font: 11px "DM Mono", monospace; }.legal-back { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); font: 12px "DM Mono", monospace; }
.studio-note { grid-column: 2; margin: 18px 0 0; padding: 13px 0 0; border-top: 1px solid var(--line); color: var(--ink); font: 11px/1.5 "DM Mono", monospace; }.studio-note b { color: var(--accent); font-weight: 500; }.services .venture-link { grid-column: 1 / -1; margin-left: 0; }.venture summary strong + small { margin: 9px 0 0; }.venture-title { white-space: nowrap; }.venture-title-word { display: inline-block; margin-left: .18em; }.portrait-products a { background: transparent; overflow: visible; }.portrait-products img { display: block; width: 100%; height: 100%; border-radius: 50%; }.nationcraft-bubble, .manzil-bubble { background: transparent; }
.product-list .product-row { background: var(--paper); }.product-list .product-main { min-height: 92px; padding: 15px 17px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 14px; background: var(--paper); text-decoration: none; }.product-list .product-main:hover { background: #fffdf7; transform: translateX(6px); }.product-mark img { display: block; width: 100%; height: 100%; border-radius: 50%; }.stick-mark svg, .saas-mark svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }.saas-mark { background: #6b4b8d; }.stealth-product .product-main i { color: var(--soft-ink); font: 10px "DM Mono", monospace; white-space: nowrap; }.product-list b.product-name { display: flex; align-items: center; gap: 9px; }.store-links { display: inline-flex; align-items: center; gap: 7px; }.product-list .store-links .store-badge { display: block; }.store-badge svg { display: block; width: 13px; height: 13px; fill: var(--soft-ink); opacity: .75; }
.kicker strong { color: var(--ink); font-weight: 500; }.hero-copy .kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }.location-pin { display: inline-block; margin: 0; color: var(--accent); font-size: 8px; }
/* One restrained type system for the personal site. */
.brand, .kicker, .section-label, .hero-photo figcaption, .venture-number, .venture summary small, .client-list p, .studio-note, .venture-link, .follow-links span, .follow-links i, .site-footer { font-family: inherit; letter-spacing: .01em; }.hero h1, .hero h1 em, .intro-copy h2, .follow-section h2, .venture summary strong, .portrait-products span { font-family: inherit; font-style: normal; }.hero h1 { font-weight: 650; letter-spacing: -.055em; line-height: .83; }.intro-copy h2, .follow-section h2 { letter-spacing: -.06em; line-height: .92; }.venture summary strong { font-weight: 650; letter-spacing: -.065em; line-height: .84; }.hero-intro, .intro-copy p, .venture-lede, .follow-section > div > p { letter-spacing: -.01em; }
@keyframes reveal { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) { .site-header { min-height: 65px; padding-top: 18px; padding-bottom: 18px; }.site-header nav { gap: 14px; }.site-header nav a { font-size: 10px; }.hero { min-height: 0; grid-template-columns: 1fr; gap: 30px; padding-bottom: 48px; }.hero-copy { padding-top: 28px; }.hero h1 { margin: 13px 0; font-size: clamp(2.9rem, 13.5vw, 4.9rem); }.hero-visual { width: min(78vw, 460px); justify-self: center; }.hero-visual::before { inset: -13px; }.portrait-social .linkedin { left: -7%; }.portrait-social .x { right: -7%; }.intro-section, .follow-section { grid-template-columns: 1fr; gap: 22px; }.intro-copy h2, .follow-section h2 { margin-top: 0; }.venture summary { grid-template-columns: 37px 1fr auto; gap: 11px; }.venture summary strong { font-size: clamp(2.35rem, 12vw, 4.2rem); }.venture-content, .services .venture-content { grid-template-columns: 1fr; gap: 29px; padding: 0 0 36px 48px; }.venture-link { grid-column: auto; }.follow-links { grid-column: auto; grid-template-columns: 1fr; }.follow-links a, .follow-links a + a { min-height: 98px; padding: 16px 0; border-left: 0; }.site-footer { flex-wrap: wrap; gap: 11px 20px; }.site-footer .brand { width: 100%; }.site-footer p:first-of-type { margin-right: auto; } }
@media (max-width: 760px) { .studio-note { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.venture-content { animation: none; }.portrait-social a, .portrait-products a { animation: none; } }
@keyframes bubble-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--float, -7px); } }.portrait-social a, .portrait-products a { animation: bubble-float var(--dur, 6s) ease-in-out var(--delay, 0s) infinite; will-change: translate; }.portrait-social .linkedin { --dur: 5.4s; --delay: -0.3s; --float: -7px; }.portrait-social .x { --dur: 6.3s; --delay: -2.1s; --float: -6px; }.portrait-social .github { --dur: 4.9s; --delay: -3.4s; --float: -8px; }.nationcraft-bubble { --dur: 7.1s; --delay: -1.4s; --float: -9px; }.manzil-bubble { --dur: 6.6s; --delay: -4.2s; --float: -8px; }