/* ════════════════════════════════════════════════════════════ Hi-Ai blog — V2 aesthetic, editorial typography ════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Fraunces:opsz,wght,SOFT@9..144,300;9..144,400;9..144,500&display=swap'); :root { --paper: #EBE6DA; --paper-2: #F2EEE3; --paper-3: #E2DDCE; --ink: #0F0F0F; --ink-soft: #1A1A1A; --muted: rgba(15,15,15,.55); --muted-2: rgba(15,15,15,.42); --rule: rgba(15,15,15,.14); --rule-strong: rgba(15,15,15,.32); --accent: #7A1F12; --ok: #1F4D2C; --pad-x: clamp(1.75rem, 5vw, 5rem); --shell-max: 1080px; --hairline: 1px solid var(--rule); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* iOS Safari note: overflow-x:hidden on breaks vertical scroll. Use `clip`. */ html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; } body { font-family: 'Inter','Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01","cv11","cv02"; } ::selection { background: var(--ink); color: var(--paper); } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; } a:hover { color: var(--accent); text-decoration-color: var(--accent); } .shell { max-width: var(--shell-max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .shell.wide { max-width: 1280px; } /* Typography */ h1, h2, h3, h4 { font-family: 'Inter Tight', sans-serif; letter-spacing: -0.025em; line-height: 1.05; font-weight: 700; color: var(--ink); } h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); letter-spacing: -0.035em; line-height: .98; margin: 0 0 1rem; } h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; line-height: 1.1; margin: 2.5rem 0 1rem; } h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin: 2rem 0 .75rem; font-weight: 600; } h4 { font-size: 1rem; letter-spacing: -0.015em; margin: 1.5rem 0 .5rem; font-weight: 600; } .eyebrow, .small-mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .serif-em, em.serif { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 300; letter-spacing: -0.015em; } /* Top bar */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: var(--hairline); } .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-x); gap: 1rem; } .logo { display: inline-flex; align-items: center; gap: .6rem; font-family: 'Inter Tight', sans-serif; font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; color: var(--ink); text-decoration: none; } .logo:hover { color: var(--ink); } .logo svg { height: 1.4em; width: auto; color: var(--ink); } .crumbs { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); } .crumbs .sep { color: var(--rule-strong); padding: 0 .5rem; } .crumbs strong { color: var(--ink); font-weight: 500; } .cta-pill { display: inline-flex; align-items: center; gap: .55rem; background: var(--ink); color: var(--paper); padding: .55rem .95rem; border-radius: 999px; font-size: .875rem; font-weight: 500; text-decoration: none; transition: background .15s; white-space: nowrap; } .cta-pill:hover { background: var(--accent); color: var(--paper); text-decoration: none; } .cta-pill::after { content: "→"; font-family: 'Inter Tight'; font-weight: 600; } @media (max-width: 600px) { .cta-pill { font-size: .8rem; padding: .5rem .7rem; } } /* ───── Page nav (cross-subpage strip) ───── */ .page-nav { border-bottom: 1px solid var(--rule-strong); background: var(--paper-2); position: sticky; top: 0; z-index: 40; } .page-nav-inner { max-width: var(--shell-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: stretch; padding: 0 var(--pad-x); overflow-x: auto; -webkit-overflow-scrolling: touch; } .page-nav-inner::-webkit-scrollbar { display: none; } .page-nav-inner { scrollbar-width: none; } .page-nav a { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: .85rem 1rem; border-right: 1px solid var(--rule); white-space: nowrap; transition: background .12s, color .12s; } .page-nav a:first-child { border-left: 1px solid var(--rule); } .page-nav a:hover { background: var(--ink); color: var(--paper); text-decoration: none; } .page-nav a[aria-current="page"] { color: var(--ink); background: var(--paper-3); box-shadow: inset 0 -2px 0 var(--accent); } @media (max-width: 720px) { .page-nav a { padding: .7rem .8rem; font-size: 10px; letter-spacing: .12em; } } /* Article header */ .post-head { border-bottom: 1px solid var(--ink); padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); background: var(--paper-2); } .post-head .eyebrow { display: inline-block; margin-bottom: 1rem; } .post-head h1 { max-width: 22ch; } .post-head .lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--ink); max-width: 52ch; margin: 1rem 0 1.5rem; } .post-head .lede em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; } .post-meta { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin-top: 2rem; } .post-meta > * { padding: .85rem 1.25rem .85rem 0; border-right: var(--hairline); font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; } .post-meta > *:first-child { padding-left: 0; } .post-meta > *:last-child { border-right: 0; padding-right: 0; } .post-meta .label { color: var(--muted); margin-right: .55rem; } /* Body prose */ /* Defensive: re-assert horizontal padding here so it survives any later rule that might reset `.shell`'s padding-left/right. Use longhand top/bottom plus padding-inline so vertical and horizontal stay independent. */ .post-body { padding-top: clamp(2.5rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); padding-inline: var(--pad-x); } .post-body p { font-size: 1.05rem; line-height: 1.65; color: var(--ink); max-width: 64ch; margin: 0 0 1.25rem; } .post-body p strong { font-weight: 600; } .post-body p em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; letter-spacing: -0.005em; } .post-body h2 .num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .35rem; font-weight: 400; } .post-body ul, .post-body ol { margin: 1.25rem 0; padding-left: 0; list-style: none; max-width: 64ch; } .post-body ul li { position: relative; padding: .5rem 0 .5rem 1.5rem; font-size: 1rem; line-height: 1.55; border-bottom: var(--hairline); } .post-body ul li:last-child { border-bottom: 0; } .post-body ul li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 12px; height: 1px; background: var(--ink); } .post-body ol { counter-reset: ol-counter; } .post-body ol li { counter-increment: ol-counter; position: relative; padding: .65rem 0 .65rem 2.25rem; font-size: 1rem; line-height: 1.55; border-bottom: var(--hairline); } .post-body ol li:last-child { border-bottom: 0; } .post-body ol li::before { content: counter(ol-counter, decimal-leading-zero); position: absolute; left: 0; top: .85rem; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; color: var(--accent); font-weight: 500; } .callout { border: 1px solid var(--ink); background: var(--paper); padding: 1.25rem 1.4rem; margin: 1.75rem 0; max-width: 64ch; } .callout .label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .4rem; display: block; } .callout p { margin: 0; font-size: .95rem; line-height: 1.55; } .pullquote { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); margin: 2rem 0; padding-left: 1.5rem; border-left: 3px solid var(--accent); max-width: 60ch; } code, pre { font-family: 'IBM Plex Mono', monospace; font-size: .9em; } code { background: var(--paper-3); padding: .15em .4em; border-radius: 2px; } pre { background: var(--ink); color: var(--paper); padding: 1.25rem 1.5rem; margin: 1.5rem 0; overflow-x: auto; border-radius: 0; font-size: .85rem; line-height: 1.55; max-width: 64ch; } pre code { background: transparent; padding: 0; color: inherit; } /* Article footer */ .post-foot { border-top: 1px solid var(--ink); padding: clamp(2rem, 3vw, 2.5rem) 0 clamp(2.5rem, 4vw, 3.5rem); background: var(--paper-2); } .post-author { display: grid; grid-template-columns: max-content 1fr; gap: 1.25rem; align-items: center; max-width: 64ch; } .post-author-photo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 1px solid var(--ink); background: var(--paper-3); } .post-author-photo img { width: 100%; height: 100%; object-fit: cover; } .post-author-name { font-family: 'Inter Tight', sans-serif; font-weight: 600; letter-spacing: -0.01em; font-size: 1rem; margin: 0; } .post-author-bio { font-size: .875rem; color: var(--muted); margin: .15rem 0 0; } /* Newsletter / brief CTA */ .brief-cta { margin: clamp(2.5rem, 4vw, 3rem) 0 0; padding: 1.75rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); } .brief-cta h3 { margin: 0 0 .65rem; color: var(--paper); font-size: 1.25rem; font-weight: 600; } .brief-cta h3 em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; } .brief-cta p { margin: 0 0 1.25rem; color: rgba(245,239,228,.78); font-size: .95rem; line-height: 1.55; max-width: 56ch; } .brief-cta form { display: flex; gap: 0; border: 1px solid var(--paper); background: var(--paper); } .brief-cta input { flex: 1; min-width: 0; border: 0; background: transparent; padding: .85rem 1rem; font: inherit; color: var(--ink); outline: none; font-size: .95rem; } .brief-cta button { background: var(--ink); color: var(--paper); border: 0; padding: .85rem 1.25rem; font: inherit; font-family: 'IBM Plex Mono', monospace; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .15s; } .brief-cta button:hover { background: var(--accent); } .brief-cta .fine { margin-top: .85rem; font-size: .75rem; color: rgba(245,239,228,.6); } /* Footer */ .site-foot { background: var(--ink); color: rgba(245,239,228,.7); padding: clamp(2.5rem, 4vw, 3.5rem) 0 1.25rem; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .site-foot a { color: rgba(245,239,228,.85); text-decoration: none; } .site-foot a:hover { color: var(--paper); } .site-foot .inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-x); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center; } /* Blog index */ .blog-hero { background: var(--paper-2); border-bottom: 1px solid var(--ink); padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3.5rem); } .blog-hero h1 { max-width: 24ch; } .blog-hero p { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink); max-width: 60ch; line-height: 1.5; margin: 1rem 0 0; } .post-list { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin: clamp(2rem, 4vw, 3.5rem) 0; } .post-link { display: grid; grid-template-columns: 1fr max-content; gap: 1.5rem; padding: 1.5rem 0; border-bottom: var(--hairline); text-decoration: none; color: var(--ink); align-items: start; transition: background .15s; } .post-link:hover { background: var(--paper-2); text-decoration: none; margin: 0 calc(var(--pad-x) * -.5); padding-left: calc(var(--pad-x) * .5); padding-right: calc(var(--pad-x) * .5); } .post-link:last-child { border-bottom: 0; } .post-link .info { display: grid; gap: .5rem; min-width: 0; } .post-link .meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; gap: 1rem; } .post-link h2 { font-family: 'Inter Tight', sans-serif; font-size: 1.3rem; letter-spacing: -0.02em; font-weight: 600; margin: 0; line-height: 1.25; } .post-link .excerpt { font-size: .95rem; line-height: 1.5; color: var(--muted); margin: 0; max-width: 64ch; } .post-link .arrow { font-family: 'IBM Plex Mono', monospace; font-size: 1.05rem; color: var(--ink); align-self: center; transition: transform .15s; } .post-link:hover .arrow { transform: translateX(4px); } @media (max-width: 600px) { .post-link { grid-template-columns: 1fr; gap: .75rem; } .post-link .arrow { display: none; } } /* Mobile safety */ @media (max-width: 680px) { h1, h2, h3 { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; max-width: 100%; } body { overflow-wrap: break-word; } .post-head h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); } .post-meta > * { padding-left: 0 !important; padding-right: .75rem; } .post-meta > *:first-child { padding-left: 0; } .pullquote { padding-left: 1rem; } .callout { padding: 1rem 1.15rem; } pre { padding: 1rem; } /* Bleed safety v3 — the shell padding can lose to long words on narrow viewports and `body { overflow-x: clip }` will eat the right margin. Force-break long tokens and cap inline media to viewport width. */ .post-body, .post-body p, .post-body li, .post-body dd, .layer-list .layer-row dt, .layer-list .layer-row dd, .layer-list .layer-row dd p { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; max-width: 100%; } .post-body img, .post-body svg, .post-body table, .post-body pre { max-width: 100%; } } /* Tiny phones — give content slightly more room */ @media (max-width: 380px) { :root { --pad-x: 1.25rem; } } /* ───── Diagrams (inline SVG figures) ───── */ .post-body .diagram { margin: 2rem 0; padding: 1.25rem; background: var(--paper-2); border: 1px solid var(--rule-strong); max-width: 720px; } .post-body .diagram svg { display: block; width: 100%; height: auto; max-width: 100%; } .post-body .diagram figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .85rem; line-height: 1.5; } /* ───── Data tables ───── */ .post-body .data-table { width: 100%; max-width: 64ch; margin: 1.5rem 0; border-collapse: collapse; font-size: .95rem; } .post-body .data-table th, .post-body .data-table td { text-align: left; padding: .75rem .9rem; border-bottom: var(--hairline); } .post-body .data-table thead th { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); } .post-body .data-table tbody tr:last-child td { border-bottom: 1px solid var(--ink); } /* ───── Related-reading nav ───── */ .post-body .related { margin: 2.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--ink); max-width: 64ch; } .post-body .related .eyebrow { display: block; margin-bottom: .85rem; } .post-body .related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .post-body .related li { padding: 0; border: 0; } .post-body .related li::before { display: none; } .post-body .related a { font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1rem; text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; } .post-body .related a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ═══════════════════════ Sales footer ═══════════════════════ */ .sales-footer { background: var(--ink); color: var(--paper-2); padding: 5rem 0 5rem; margin-top: 4rem; border-top: 1px solid var(--ink); position: relative; } .sales-footer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 12%, rgba(122,31,18,.18), transparent 55%); pointer-events: none; } .sales-footer .sf-inner { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.75rem, 5vw, 2.5rem); position: relative; } .sales-footer .sf-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; display: block; } .sales-footer .sf-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(245,239,228,.16); } .sales-footer .sf-head h2 { font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.022em; line-height: 1.02; margin: 0; color: var(--paper-2); } .sales-footer .sf-head h2 .serif { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: rgba(245,239,228,.72); } .sales-footer .sf-stats { display: flex; gap: 2.25rem; flex-wrap: wrap; justify-content: flex-end; } .sales-footer .sf-stats .sf-stat { display: flex; flex-direction: column; gap: .25rem; text-align: right; min-width: 0; } .sales-footer .sf-stats .sf-stat .num { font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1.4rem; letter-spacing: -0.012em; line-height: 1; color: var(--paper-2); } .sales-footer .sf-stats .sf-stat .lab { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(245,239,228,.55); line-height: 1.3; white-space: nowrap; } .sales-footer .sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .sales-footer .sf-stefan { display: grid; grid-template-columns: 132px 1fr; gap: 1.5rem; align-items: start; } .sales-footer .sf-stefan .portrait { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(245,239,228,.22); box-shadow: 0 12px 32px rgba(0,0,0,.4); background: var(--ink-soft); flex-shrink: 0; } .sales-footer .sf-stefan .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; } .sales-footer .sf-stefan .name { font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--paper-2); margin: 0 0 .15rem; line-height: 1.2; } .sales-footer .sf-stefan .role { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 .9rem; display: block; } .sales-footer .sf-stefan .bio { font-size: .98rem; line-height: 1.55; color: rgba(245,239,228,.85); margin: 0 0 1.25rem; } .sales-footer .sf-stefan .quick { display: flex; flex-wrap: wrap; gap: .55rem; } .sales-footer .sf-stefan .quick a { display: inline-flex; align-items: center; gap: .4rem; font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: .85rem; letter-spacing: -0.005em; padding: .55rem .9rem; background: rgba(245,239,228,.08); border: 1px solid rgba(245,239,228,.2); color: var(--paper-2); text-decoration: none; border-radius: 999px; transition: background .18s ease, border-color .18s ease, color .18s ease; } .sales-footer .sf-stefan .quick a:hover { background: rgba(245,239,228,.16); border-color: rgba(245,239,228,.4); } .sales-footer .sf-stefan .quick a .ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; } .sales-footer .sf-stefan .quick a.discovery { background: var(--accent); border-color: var(--accent); color: #FBF6E9; } .sales-footer .sf-stefan .quick a.discovery:hover { background: #8A2818; border-color: #8A2818; } .sales-footer .sf-form { background: rgba(245,239,228,.04); border: 1px solid rgba(245,239,228,.18); border-radius: 4px; padding: 1.75rem 1.75rem 1.6rem; } .sales-footer .sf-form .head { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; display: block; } .sales-footer .sf-form h3 { font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: 1.4rem; letter-spacing: -0.012em; line-height: 1.18; margin: 0 0 1.1rem; color: var(--paper-2); } .sales-footer .sf-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; } .sales-footer .sf-form .field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; } .sales-footer .sf-form .row .field { margin-bottom: 0; } .sales-footer .sf-form label { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(245,239,228,.62); } .sales-footer .sf-form input, .sales-footer .sf-form textarea { font-family: 'Inter Tight', sans-serif; font-size: .95rem; line-height: 1.4; color: var(--paper-2); background: rgba(0,0,0,.25); border: 1px solid rgba(245,239,228,.2); border-radius: 3px; padding: .65rem .8rem; transition: border-color .18s ease, background .18s ease; width: 100%; box-sizing: border-box; } .sales-footer .sf-form input::placeholder, .sales-footer .sf-form textarea::placeholder { color: rgba(245,239,228,.35); } .sales-footer .sf-form input:focus, .sales-footer .sf-form textarea:focus { outline: none; border-color: var(--accent); background: rgba(0,0,0,.4); } .sales-footer .sf-form textarea { min-height: 96px; resize: vertical; font-family: inherit; } .sales-footer .sf-form .submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: 'Inter Tight', sans-serif; font-weight: 500; font-size: .98rem; letter-spacing: -0.005em; padding: .85rem 1.25rem; background: var(--accent); color: #FBF6E9; border: 1px solid var(--accent); border-radius: 3px; cursor: pointer; width: 100%; margin-top: .35rem; transition: background .18s ease, transform .18s ease; } .sales-footer .sf-form .submit:hover { background: #8A2818; } .sales-footer .sf-form .submit:active { transform: translateY(1px); } .sales-footer .sf-form .fine { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.04em; color: rgba(245,239,228,.45); margin: .85rem 0 0; text-align: center; } .sales-footer .sf-form.sent { text-align: center; padding: 2.4rem 1.5rem; } .sales-footer .sf-form.sent .check { font-family: 'Fraunces', serif; font-style: italic; font-size: 2.2rem; color: var(--accent); display: block; margin-bottom: .6rem; } .sales-footer .sf-form.sent h3 { color: var(--paper-2); } .sales-footer .sf-form.sent p { font-size: .95rem; color: rgba(245,239,228,.78); margin: 0; line-height: 1.5; } .sales-footer .sf-foot { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(245,239,228,.16); display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; justify-content: space-between; align-items: center; } .sales-footer .sf-foot .browse { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.05em; color: rgba(245,239,228,.65); } .sales-footer .sf-foot .browse a { color: var(--paper-2); text-decoration: none; border-bottom: 1px solid rgba(245,239,228,.3); padding-bottom: 1px; margin: 0 .35rem; transition: border-color .18s ease, color .18s ease; } .sales-footer .sf-foot .browse a:hover { border-color: var(--accent); color: var(--accent); } .sales-footer .sf-foot .lang { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,239,228,.55); } @media (max-width: 980px) { .sales-footer { padding: 3.5rem 0 3.5rem; } .sales-footer .sf-head { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } .sales-footer .sf-stats { justify-content: flex-start; gap: 1.5rem; } .sales-footer .sf-stats .sf-stat { text-align: left; } .sales-footer .sf-grid { grid-template-columns: 1fr; gap: 2.25rem; } } @media (max-width: 600px) { .sales-footer .sf-stefan { grid-template-columns: 96px 1fr; gap: 1.1rem; } .sales-footer .sf-stefan .portrait { width: 96px; height: 96px; } .sales-footer .sf-form .row { grid-template-columns: 1fr; } .sales-footer .sf-foot { flex-direction: column; align-items: flex-start; } } /* ═══════════════════════ Article enhancements ═══════════════════════ */ .post-body .takeaways { background: var(--paper-2); border-left: 4px solid var(--accent); padding: 1.5rem 1.75rem 1.4rem; margin: 2rem 0 2.5rem; border-radius: 2px; max-width: 64ch; } .post-body .takeaways .label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 500; display: block; margin: 0 0 .85rem; } .post-body .takeaways h3 { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: -.015em; margin: 0 0 .85rem; color: var(--ink); } .post-body .takeaways ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; max-width: none; } .post-body .takeaways ul li { padding-left: 1.5rem; position: relative; font-size: 1rem; line-height: 1.55; color: var(--ink); border: 0; } .post-body .takeaways ul li::before { content: "▸"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; background: none; width: auto; height: auto; border-radius: 0; } .post-body .takeaways ul li strong { font-weight: 600; color: var(--ink); } .post-body .pullquote { margin: 2.5rem 0; padding: .25rem 0 .25rem 1.75rem; border-left: 3px solid var(--ink); font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.32; letter-spacing: -0.018em; color: var(--ink); max-width: 60ch; } .post-body .pullquote p { font-family: inherit; font-style: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; max-width: none; margin: 0; } .post-body .pullquote .attribution { display: block; margin-top: .9rem; font-family: 'IBM Plex Mono', monospace; font-style: normal; font-weight: 400; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } @media (max-width: 700px) { .post-body .pullquote { padding-left: 1.1rem; } .post-body .takeaways { padding: 1.25rem 1.25rem 1.15rem; } } /* ═══════════════════════ Agent stack diagram ═══════════════════════ */ .agent-stack { background: var(--paper-2); border: 1px solid var(--ink); margin: 2rem 0 3rem; padding: 0; border-radius: 2px; overflow: hidden; } .agent-stack .as-head { padding: 1.6rem 1.75rem 1.4rem; background: var(--ink); color: var(--paper-2); border-bottom: 1px solid var(--ink); } .agent-stack .as-head .as-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 500; display: block; margin-bottom: .55rem; } .agent-stack .as-head h3 { margin: 0; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.7rem); letter-spacing: -.02em; line-height: 1.15; color: var(--paper-2); } .agent-stack .as-head p { margin: .65rem 0 0; font-size: .95rem; line-height: 1.5; color: rgba(245,239,228,.78); max-width: 60ch; } .agent-stack .as-layers { display: grid; gap: 0; } .agent-stack .as-layer { display: grid; grid-template-columns: 64px minmax(180px, 200px) 1fr auto; gap: 1.25rem; padding: 1.25rem 1.5rem 1.25rem 0; border-bottom: 1px solid var(--rule); align-items: start; position: relative; background: var(--paper-2); transition: background .15s ease; } .agent-stack .as-layer:hover { background: var(--paper); } .agent-stack .as-layer:last-child { border-bottom: 0; } .agent-stack .as-layer::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); opacity: var(--as-op, 0.4); } .agent-stack .as-layer:nth-of-type(1) { --as-op: 0.25; } .agent-stack .as-layer:nth-of-type(2) { --as-op: 0.4; } .agent-stack .as-layer:nth-of-type(3) { --as-op: 0.55; } .agent-stack .as-layer:nth-of-type(4) { --as-op: 0.7; } .agent-stack .as-layer:nth-of-type(5) { --as-op: 0.85; } .agent-stack .as-layer:nth-of-type(6) { --as-op: 1.0; } .agent-stack .as-layer .as-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--accent); font-weight: 600; padding-top: .25rem; padding-left: 1.25rem; } .agent-stack .as-layer .as-name { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: -.012em; color: var(--ink); line-height: 1.25; } .agent-stack .as-layer .as-name .as-sub { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--muted); font-weight: 400; text-transform: uppercase; margin-top: .35rem; line-height: 1.3; } .agent-stack .as-layer .as-desc { font-size: .95rem; line-height: 1.55; color: var(--ink); margin: 0; max-width: 54ch; } .agent-stack .as-layer .as-desc strong { font-weight: 600; } .agent-stack .as-layer .as-pills { display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-start; justify-content: flex-end; max-width: 18ch; } .agent-stack .as-layer .as-pill { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: .3rem .6rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--muted); background: var(--paper); white-space: nowrap; } .agent-stack .as-foot { padding: 1.1rem 1.75rem 1.25rem 1.75rem; background: var(--paper-3); border-top: 1px solid var(--rule); } .agent-stack .as-foot p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink); max-width: none; } .agent-stack .as-foot p strong { font-weight: 600; color: var(--ink); } @media (max-width: 880px) { .agent-stack .as-layer { grid-template-columns: 1fr; gap: .5rem; padding: 1.1rem 1.25rem 1.1rem 1.5rem; } .agent-stack .as-layer .as-num { padding-left: 0; padding-top: 0; } .agent-stack .as-layer .as-pills { justify-content: flex-start; margin-top: .35rem; max-width: none; } .agent-stack .as-head { padding: 1.3rem 1.25rem 1.15rem; } .agent-stack .as-foot { padding: 1rem 1.25rem 1.1rem; } } /* ═══════════════════════ Agent cosmos ═══════════════════════ */ .agent-cosmos { background: var(--ink); color: var(--paper-2); border: 1px solid var(--ink); border-radius: 2px; margin: 2rem 0 3rem; padding: 1.75rem; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.75rem; align-items: stretch; position: relative; overflow: hidden; } .agent-cosmos::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 22% 18%, rgba(245,239,228,.045), transparent 35%), radial-gradient(circle at 78% 82%, rgba(122,31,18,.18), transparent 45%); pointer-events: none; } @media (max-width: 880px) { .agent-cosmos { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; } } .agent-cosmos .cosmos-stage { position: relative; display: block; min-height: 0; } .agent-cosmos .cosmos-svg { width: 100%; height: auto; display: block; overflow: visible; } /* Background subtle starfield dots */ .agent-cosmos .cosmos-svg .star { fill: rgba(245,239,228,.18); } /* Outer orbit ring (Eval harness) */ .agent-cosmos .cosmos-svg .orbit-ring { fill: none; stroke: rgba(245,239,228,.32); stroke-width: 1.2; stroke-dasharray: 4 6; cursor: pointer; transition: stroke .2s ease, stroke-width .2s ease; } .agent-cosmos .cosmos-svg .orbit-ring:hover, .agent-cosmos .cosmos-svg .orbit-ring.active { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; } .agent-cosmos .cosmos-svg .orbit-label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; fill: rgba(245,239,228,.55); cursor: pointer; transition: fill .2s ease; } .agent-cosmos .cosmos-svg .orbit-ring.active + .orbit-label, .agent-cosmos .cosmos-svg .orbit-label:hover { fill: var(--accent); } /* Spokes from core to planets */ .agent-cosmos .cosmos-svg .spoke { stroke: rgba(245,239,228,.18); stroke-width: 1; stroke-dasharray: 2 4; transition: stroke .2s ease; } .agent-cosmos .cosmos-svg .spoke.lit { stroke: rgba(122,31,18,.85); stroke-dasharray: 0; stroke-width: 1.5; } /* Peer-to-peer relationship lines */ .agent-cosmos .cosmos-svg .link { stroke: rgba(245,239,228,.22); stroke-width: 1; fill: none; transition: stroke .2s ease, stroke-width .2s ease; } .agent-cosmos .cosmos-svg .link.lit { stroke: var(--accent); stroke-width: 1.5; } /* Core node */ .agent-cosmos .cosmos-svg .core { cursor: pointer; } .agent-cosmos .cosmos-svg .core .core-circle { fill: var(--accent); stroke: rgba(245,239,228,.4); stroke-width: 2; transition: stroke .2s ease, transform .25s ease; transform-box: fill-box; transform-origin: center; } .agent-cosmos .cosmos-svg .core:hover .core-circle, .agent-cosmos .cosmos-svg .core.active .core-circle { stroke: var(--paper-2); stroke-width: 3; } .agent-cosmos .cosmos-svg .core-label { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; fill: var(--paper-2); text-anchor: middle; pointer-events: none; } .agent-cosmos .cosmos-svg .core-sublabel { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; fill: rgba(245,239,228,.7); text-anchor: middle; pointer-events: none; } /* Planets */ .agent-cosmos .cosmos-svg .planet { cursor: pointer; } .agent-cosmos .cosmos-svg .planet .planet-bg { fill: var(--paper-2); stroke: rgba(15,15,15,.4); stroke-width: 1; transition: fill .2s ease, stroke .2s ease, r .2s ease, filter .2s ease; } .agent-cosmos .cosmos-svg .planet:hover .planet-bg, .agent-cosmos .cosmos-svg .planet.active .planet-bg { fill: var(--paper); stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 12px rgba(122,31,18,.5)); } .agent-cosmos .cosmos-svg .planet .planet-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; fill: var(--accent); text-anchor: middle; pointer-events: none; font-weight: 600; } .agent-cosmos .cosmos-svg .planet .planet-name { font-family: 'Inter Tight', sans-serif; font-size: 11.5px; letter-spacing: -.01em; fill: var(--ink); text-anchor: middle; pointer-events: none; font-weight: 600; } /* Info panel */ .agent-cosmos .cosmos-info { background: rgba(245,239,228,.06); border: 1px solid rgba(245,239,228,.16); border-radius: 2px; padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .75rem; align-self: stretch; } .agent-cosmos .cosmos-info .info-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); display: block; } .agent-cosmos .cosmos-info h4 { margin: 0; font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.4rem; letter-spacing: -.018em; line-height: 1.2; color: var(--paper-2); } .agent-cosmos .cosmos-info p { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(245,239,228,.85); max-width: none; } .agent-cosmos .cosmos-info p strong { color: var(--paper-2); font-weight: 600; } .agent-cosmos .cosmos-info .info-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; } .agent-cosmos .cosmos-info .info-pills .pill { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: .3rem .6rem; border: 1px solid rgba(245,239,228,.28); border-radius: 999px; color: rgba(245,239,228,.78); background: transparent; white-space: nowrap; } .agent-cosmos .cosmos-info .info-hint { margin-top: auto; padding-top: 1rem; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; color: rgba(245,239,228,.45); } .agent-cosmos .cosmos-info.fade { animation: cosmosFade .35s ease; } @keyframes cosmosFade { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (max-width: 880px) { .agent-cosmos .cosmos-info { padding: 1.1rem 1.15rem 1.15rem; } .agent-cosmos .cosmos-info h4 { font-size: 1.2rem; } } /* ═══════════════════════ Layer grid (replaces cosmos) ═══════════════════════ */ .layer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); margin: 1.75rem 0 1.5rem; } .layer-grid .layer-card { background: var(--paper-2); padding: 1.5rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; position: relative; transition: background .2s ease; } .layer-grid .layer-card:hover { background: var(--paper); } .layer-grid .lc-icon { width: 48px; height: 48px; color: var(--accent); margin-bottom: .25rem; } .layer-grid .lc-icon svg { width: 100%; height: 100%; display: block; } .layer-grid .lc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .layer-grid .lc-title { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.25rem; letter-spacing: -.018em; margin: 0; line-height: 1.15; color: var(--ink); } .layer-grid .lc-tagline { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 300; font-size: 1rem; color: var(--accent); margin: -.2rem 0 .15rem; line-height: 1.3; } .layer-grid .lc-desc { font-size: .95rem; line-height: 1.5; color: var(--ink); margin: 0; max-width: none; } .layer-grid .lc-desc strong { font-weight: 600; } .layer-grid .lc-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; padding-top: .85rem; } .layer-grid .lc-pills span { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: .3rem .6rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--muted); background: var(--paper); white-space: nowrap; } .layer-grid-foot { font-size: .95rem !important; color: var(--muted) !important; margin: 0 0 2rem !important; max-width: 64ch; line-height: 1.55; } .layer-grid-foot strong { color: var(--ink); font-weight: 600; } @media (max-width: 920px) { .layer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .layer-grid { grid-template-columns: 1fr; } .layer-grid .layer-card { padding: 1.25rem 1.15rem 1.2rem; } } /* ═══════════════════════ Layer list (text-only) ═══════════════════════ */ .layer-list { margin: 1.75rem 0 1.5rem; padding: 0; border-top: 1px solid var(--ink); } .layer-list .layer-row { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); padding: 1.5rem 0; border-bottom: 1px solid var(--rule); } .layer-list .layer-row dt { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; } .layer-list .layer-row dt .ll-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .layer-list .layer-row dt .ll-name { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); } .layer-list .layer-row dt .ll-tag { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 300; font-size: 1rem; color: var(--muted); line-height: 1.3; } .layer-list .layer-row dd { margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; } .layer-list .layer-row dd p { font-size: 1rem; line-height: 1.55; color: var(--ink); margin: 0; max-width: 60ch; } .layer-list .layer-row dd p strong { font-weight: 600; } .layer-list .layer-row .ll-pills { display: flex; flex-wrap: wrap; gap: .35rem; } .layer-list .layer-row .ll-pills span { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: .3rem .6rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--muted); background: var(--paper-2); white-space: nowrap; } .layer-list-foot { font-size: .95rem !important; color: var(--muted) !important; margin: 0 0 2rem !important; max-width: 64ch; line-height: 1.55; } .layer-list-foot strong { color: var(--ink); font-weight: 600; } @media (max-width: 720px) { .layer-list .layer-row { grid-template-columns: 1fr; gap: .75rem; padding: 1.25rem 0; } }