Merge nucleic/dusky-north-quail-hesw into main

Mirrored from corpo 71479be.
This commit is contained in:
2026-08-09 15:28:43 -07:00
commit 8ff18f1a67
14 changed files with 7895 additions and 0 deletions
+120
View File
@@ -0,0 +1,120 @@
---
const title = 'Page not found — Blakeslee Research';
const description = 'The page you requested does not exist.';
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="theme-color" content="#0a100c" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<meta name="description" content={description} />
<meta name="robots" content="noindex" />
<link rel="icon" href="/blakeslee-icon.svg" type="image/svg+xml" sizes="any" />
<link
rel="preload"
href="/fonts/archivo.woff2"
as="font"
type="font/woff2"
crossorigin
/>
</head>
<body>
<div class="page-shell">
<main class="not-found">
<p class="code">404</p>
<p class="copy">This page doesn't exist yet.</p>
<a class="home-link" href="/">Back home <span aria-hidden="true">↗</span></a>
</main>
</div>
</body>
</html>
<style is:global>
@font-face {
font-family: 'Archivo';
src: url('/fonts/archivo.woff2') format('woff2');
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
}
:root {
color-scheme: dark;
--ink: #eef3ee;
--secondary: #aebdae;
--sage: #c6d8c6;
--paper: #0a100c;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-width: 320px;
background: var(--paper);
}
body {
margin: 0;
min-width: 320px;
min-height: 100svh;
color: var(--ink);
background: var(--paper);
font-family: 'Archivo', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
}
a:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 5px;
}
.page-shell {
display: grid;
width: min(100%, 1600px);
min-height: 100svh;
margin: 0 auto;
padding: clamp(1rem, 2.2vw, 2rem);
}
.not-found {
display: grid;
justify-items: center;
align-content: center;
gap: 1rem;
text-align: center;
}
.code {
margin: 0;
font-size: clamp(4rem, 18vw, 10rem);
font-weight: 700;
font-stretch: 115%;
letter-spacing: -0.02em;
line-height: 1;
}
.copy {
margin: 0;
color: var(--secondary);
font-size: clamp(1rem, 2vw, 1.15rem);
}
.home-link {
margin-top: 0.5rem;
text-decoration-thickness: 1px;
text-underline-offset: 0.35rem;
}
</style>
+681
View File
@@ -0,0 +1,681 @@
---
const title = 'Blakeslee Research — research that runs';
const description =
'Blakeslee Research engineers infrastructure that keeps AI agents—and the digital intelligence to come—forever online and forever active, including Nucleic, the home for persistent, orchestrated, observable coding agents.';
const canonical = new URL('/', Astro.site);
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<!-- Not --paper. Safari paints its toolbar and overscroll regions with this flat
colour, but the page underneath is the ambient field, which lifts the edges to
roughly #0e1813 — against paper that reads as a grey bar sitting behind the
browser chrome. Measured off rendered pixels at the top and bottom edges. -->
<meta name="theme-color" content="#0f1813" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonical} />
<link rel="icon" href="/blakeslee-icon.svg" type="image/svg+xml" sizes="any" />
<link
rel="preload"
href="/fonts/archivo.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/jetbrains-mono.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Blakeslee Research" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonical} />
<meta property="og:image" content={new URL('/og.png', Astro.site)} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Blakeslee Research wordmark and wolf-and-pine mark" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL('/og.png', Astro.site)} />
</head>
<body>
<div class="ambient" aria-hidden="true">
<span class="ambient-haze"></span>
<span class="ambient-drift"></span>
<span class="ambient-grain"></span>
</div>
<div class="page-shell">
<header class="masthead" aria-label="Blakeslee Research">
<div class="brand-lockup">
<img
class="mark"
src="/blakeslee-icon.svg"
width="378"
height="392"
alt="Blakeslee Research wolf and pine mark"
/>
<span class="brand-name">Blakeslee<br />Research</span>
</div>
</header>
<main>
<section class="hero" aria-labelledby="hero-heading">
<!-- Headline and card share one wrapper so they sit on a single flex line
that can break. Grid alone cannot: a headline too wide for its columns
keeps its area and simply prints over whatever occupies the next one. -->
<div class="hero-lead">
<h1 id="hero-heading" class="statement" aria-label="Research that runs.">
<span class="line line-research"><span class="word">Research</span></span>
<span class="line line-runs"><span class="word"><span class="that">that</span> <span class="runs">runs.</span></span></span>
</h1>
<a class="product-card" href="https://nucleic.blakeslee.xyz">
<span class="card-index">01 / Flagship system</span>
<span class="product-name">Nucleic <span aria-hidden="true">↗</span></span>
<span class="product-description">
Where agents live — persisted, orchestrated, observed.
</span>
<span class="card-rule" aria-hidden="true"></span>
</a>
</div>
<p class="mission">
We engineer infrastructure that keeps intelligence forever online and forever
active — immortal by design.
</p>
</section>
</main>
<footer class="footer">
<p>© 2026 Blakeslee Research</p>
<div class="footer-links">
<a href="mailto:[email protected]">Contact</a>
<a href="https://version.blakeslee.xyz" target="_blank" rel="noopener noreferrer">Code <span aria-hidden="true">↗</span></a>
</div>
</footer>
</div>
</body>
</html>
<style is:global>
@font-face {
font-family: 'Archivo';
src: url('/fonts/archivo.woff2') format('woff2');
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('/fonts/jetbrains-mono.woff2') format('woff2');
font-style: normal;
font-weight: 400 700;
font-display: swap;
}
:root {
color-scheme: dark;
--ink: #eef3ee;
--secondary: #aebdae;
--muted: #93a494;
--pine: #3fae74;
--sage: #c6d8c6;
--forest: #144b35;
--paper: #0a100c;
--line: rgb(238 243 238 / 16%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-width: 320px;
background: var(--paper);
}
body {
margin: 0;
min-width: 320px;
min-height: 100svh;
overflow-x: hidden;
color: var(--ink);
/* No background here: html paints the canvas, so the fixed ambient layer below
(negative z-index) is not covered by body's own background box. */
font-family: 'Archivo', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Ambient field: two soft bands of light crossing at different angles, and a fine
grain that dithers away the banding flat gradients show on near-black. */
.ambient {
position: fixed;
z-index: -2;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* Oversized so the bands can travel a long way without an edge ever entering the
frame — what should be visible is the light moving, never the thing carrying it. */
.ambient-haze,
.ambient-drift {
position: absolute;
top: -60%;
left: -60%;
width: 220%;
height: 220%;
will-change: transform;
}
.ambient-haze {
background: linear-gradient(
106deg,
transparent 31%,
rgb(63 174 116 / 6%) 45%,
rgb(96 186 137 / 2.5%) 53%,
transparent 63%
);
transform: translate3d(-9%, 3%, 0);
animation: haze-drift 46s -7s ease-in-out infinite alternate;
}
/* The second band is wider, crosses the first at a shallow angle, and runs on a
period that shares no factor with it. Where the two overlap the field lifts a
little; because 46s and 67s only realign every 51 minutes, that bright seam
wanders instead of pulsing on a beat you can count. */
.ambient-drift {
background: linear-gradient(
-24deg,
transparent 20%,
rgb(120 196 152 / 3%) 43%,
rgb(63 174 116 / 4.5%) 59%,
transparent 79%
);
transform: translate3d(7%, -5%, 0);
animation: drift-across 67s -21s ease-in-out infinite alternate;
}
.ambient-grain {
position: absolute;
inset: -50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.022;
}
a {
color: inherit;
}
a:focus-visible {
outline: 2px solid var(--sage);
outline-offset: 5px;
}
.page-shell {
/* One inset for everything. It is deliberately generous: at mid widths a tighter
margin puts the copy and the window edge in each other's way. */
--edge: clamp(1.35rem, 4.8vw, 5rem);
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
width: min(100%, 1600px);
min-height: 100svh;
margin: 0 auto;
padding: clamp(1.25rem, 2.6vh, 2.5rem) var(--edge);
}
.masthead,
.footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.masthead {
padding-bottom: clamp(1rem, 2vw, 1.75rem);
border-bottom: 1px solid var(--line);
}
.brand-lockup {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mark {
display: block;
width: 2.65rem;
height: auto;
flex-shrink: 0;
}
.brand-name {
color: var(--ink);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.05;
}
.card-index,
.footer {
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.12em;
line-height: 1.45;
text-transform: uppercase;
}
.card-index,
.footer p {
color: var(--muted);
}
main {
display: grid;
}
.hero {
--hero-gap: clamp(1rem, 2vw, 2rem);
/* One column of the 12-column grid, and the spans the hero composition uses.
The flex line below is sized off these so it lands on the same lines. */
--hero-col: calc((100% - 11 * var(--hero-gap)) / 12);
--hero-span-8: calc(var(--hero-col) * 8 + 7 * var(--hero-gap));
--hero-span-4: calc(var(--hero-col) * 4 + 3 * var(--hero-gap));
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--hero-gap);
row-gap: clamp(1.9rem, 4.4vh, 4rem);
min-height: 0;
align-content: center;
padding: clamp(1.75rem, 4.5vh, 4.5rem) 0 clamp(1.5rem, 3vh, 3rem);
}
/* Row one of the hero, as a flex line rather than two grid areas. The two bases
add up to exactly the grid width, so at normal text size this renders where the
8/4 column split always put it — but when text alone is scaled up (Firefox's
text-only zoom, Safari's minimum font size, a large browser default) the
headline's minimum width outgrows its share, the line breaks, and the card
steps down instead of being printed over. */
.hero-lead {
grid-column: 1 / -1;
grid-row: 1;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
column-gap: var(--hero-gap);
row-gap: clamp(1.5rem, 3vh, 2.5rem);
}
.statement {
/* Optical, not metric: the R carries a left side bearing, so a box that starts on
the grid line prints ~0.078em to the right of it. The mission copy below opens
on a W, whose diagonal reaches the origin with no bearing at all, so the two
only look aligned once the headline is pulled back by that much. Measured off
rendered pixels, not the font metrics, and kept in em so it holds across the
whole font-size clamp. */
--optical-inset: 0.078em;
display: grid;
/* Flex sizes the border box, so the basis has to give back what the negative
margin takes or the card lands inside the eight columns. The half-pixel keeps
sub-pixel rounding in the two calc()s from ever summing past the hero width and
breaking the line at normal size; flex-grow hands it straight back. */
flex: 1 1 calc(var(--hero-span-8) + var(--optical-inset) - 0.5px);
/* Fills the row the way a stretched grid item did, so on the narrow desktop
widths where the card is the taller of the two, the headline's own rows keep
the extra height instead of collapsing to the card's baseline. */
align-self: stretch;
justify-items: start;
margin: 0 0 0 calc(-1 * var(--optical-inset));
font-size: clamp(3.2rem, min(9vw, 18vh), 8.25rem);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 0.98;
}
.line {
display: block;
/* Clips the word's drift exactly as overflow: hidden did, without making the line
a scroll container. A scroll container reports an automatic minimum size of
zero, which told the flex line above that the headline could always be squeezed
into its columns — so it never broke, and the type printed over the card. */
clip-path: inset(0);
padding: 0 0.08em 0.1em 0;
opacity: 0;
animation: rise-in 900ms cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}
.line-research {
animation-delay: 320ms;
}
.line-runs {
margin-left: 2.2em;
animation-delay: 480ms;
}
.word {
display: block;
padding-right: 0.06em;
color: inherit;
}
/* Rests at zero so the headline's left edge is the one the copy below aligns to.
The drift now arrives at that edge instead of parking 0.045em to the right of
it, which was what pushed "Research" off the mission line. */
.line-research .word {
transform: translate3d(0, 0, 0);
animation: drift-right 12s 1.35s ease-in-out backwards;
}
/* Deliberately wrappable. There is ~5% of slack between "that runs." and the card
at every width, so the pair only ever separates when the type has been scaled
past what the column can hold — at which point two short lines inside the
column beat one long line across the card. */
.line-runs .word {
transform: translate3d(0, -0.035em, 0);
animation: drift-up 11s 1.5s ease-in-out backwards;
}
.line-runs .that {
color: var(--secondary);
}
.line-runs .runs {
color: transparent;
background: linear-gradient(100deg, #cdead9 8%, #2f8f5c 82%);
background-clip: text;
-webkit-background-clip: text;
}
.mission {
grid-column: 1 / span 4;
grid-row: 2;
max-width: 29rem;
margin: 0;
color: var(--secondary);
font-size: clamp(0.95rem, 1.25vw, 1.14rem);
line-height: 1.5;
opacity: 0;
animation: fade-up 700ms 850ms ease-out forwards;
}
.product-card {
position: relative;
display: grid;
/* Never grows, so the half-pixel the headline gives up comes back to the headline
alone and the card starts exactly on the ninth column line. */
flex: 0 1 var(--hero-span-4);
grid-template-columns: 1fr;
gap: 0.55rem;
padding: 1.15rem 0 1.05rem;
border-top: 1px solid var(--line);
text-decoration: none;
opacity: 0;
animation: fade-up 700ms 980ms ease-out forwards;
}
.product-card::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background: var(--pine);
content: '';
transform: scaleX(0);
transform-origin: left;
transition: transform 350ms ease;
}
.product-card:hover::after,
.product-card:focus-visible::after {
transform: scaleX(1);
}
.card-index {
color: var(--pine);
}
.product-name {
font-size: clamp(1.75rem, 3vw, 2.8rem);
font-weight: 600;
letter-spacing: -0.04em;
line-height: 1;
}
.product-description {
max-width: 18rem;
color: var(--secondary);
font-size: 0.95rem;
line-height: 1.45;
}
.footer {
padding-top: 1rem;
border-top: 1px solid var(--line);
opacity: 0;
animation: fade-in 700ms 1.1s ease-out forwards;
}
.footer p {
margin: 0;
}
/* Uppercase mono at 0.12em tracking is wide enough that a phone will break both
the copyright and the arrow off its label. Neither is allowed to wrap; the
mobile query below stacks them instead when the row no longer fits. */
.footer p,
.footer a {
white-space: nowrap;
}
.footer-links {
display: flex;
align-items: center;
gap: 1.25rem;
}
.footer a {
color: var(--muted);
text-decoration-thickness: 1px;
text-underline-offset: 0.35rem;
}
@keyframes rise-in {
from {
transform: translate3d(0, 72%, 0) rotate(1.5deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0) rotate(0);
opacity: 1;
}
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-up {
from {
transform: translate3d(0, 1rem, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes drift-right {
from { transform: translate3d(-0.045em, 0, 0); }
}
@keyframes drift-up {
from { transform: translate3d(0, 0, 0); }
}
@keyframes haze-drift {
from { transform: translate3d(-9%, 3%, 0) rotate(-0.8deg); }
to { transform: translate3d(10%, -4%, 0) rotate(0.8deg); }
}
/* Travels further and slower than the haze, and scales as it goes, so the two
bands never hold the same relative position for long. */
@keyframes drift-across {
from { transform: translate3d(7%, -5%, 0) scale(1.04); }
to { transform: translate3d(-9%, 7%, 0) scale(1.13); }
}
@media (max-width: 720px) {
/* A phone has no width to spare, so the inset falls back to what it takes to keep
the text off the bezel rather than what the desktop composition wants. */
.page-shell {
--edge: clamp(1.15rem, 5vw, 1.85rem);
/* The footer is parked past the fold: on a phone its rule is a third horizontal
line competing with the masthead's and the card's, and the page reads calmer
without it. The drop has to pay for the footer's own height and the shell's
bottom padding before it buys any clearance, hence a value this large. */
--footer-drop: clamp(6.5rem, 16vh, 9rem);
min-height: calc(100svh + var(--footer-drop));
}
.hero {
grid-template-columns: 1fr;
row-gap: clamp(1.75rem, 5vh, 3rem);
padding-top: clamp(2.5rem, 8vh, 5rem);
}
.statement {
font-size: clamp(2.9rem, 14vw, 5.5rem);
}
.line-runs {
margin-left: 1.2em;
}
/* One column, so there is nothing for the headline to collide with and no need
for the flex line. Dissolving the wrapper puts all three back on the hero grid,
where explicit rows keep the phone order the design has always had — the DOM
carries the card first because that is where it reads on the desktop layout. */
.hero-lead {
display: contents;
}
.statement,
.mission,
.product-card {
grid-column: 1;
}
.statement {
grid-row: 1;
}
.mission {
grid-row: 2;
max-width: 25rem;
}
/* Stacked, the card is a separate thought from the hero copy rather than the
column beside it, so it wants more air above than the hero's row rhythm gives. */
.product-card {
grid-row: 3;
margin-top: clamp(0.75rem, 3.5vh, 2.25rem);
}
/* One line each: side by side these two need ~360px of tracking-heavy mono, which
is more than a 390px screen has once the edge inset is paid. */
.footer {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
margin-top: var(--footer-drop);
}
}
@media (max-width: 440px) {
.mark {
width: 2.35rem;
}
.statement {
font-size: clamp(2.5rem, 13.5vw, 4.2rem);
letter-spacing: -0.025em;
}
.footer {
font-size: 0.72rem;
}
}
/* Short viewports: compress the vertical rhythm so the composition still lands
on one screen. Declared after the width queries so it wins where they overlap. */
@media (max-height: 780px) and (min-width: 721px) {
.hero {
row-gap: clamp(1.1rem, 2.8vh, 2.25rem);
padding: clamp(0.75rem, 2.2vh, 2rem) 0 clamp(0.5rem, 1.8vh, 1.5rem);
}
.statement {
font-size: clamp(2.25rem, min(9vw, 15vh), 8.25rem);
}
}
/* Short phones can't fit the whole composition at a headline size worth reading,
so tighten the spacing but leave the type alone and let the page scroll. */
@media (max-height: 700px) and (max-width: 720px) {
.hero {
row-gap: clamp(1.1rem, 2.9vh, 2rem);
padding: clamp(0.75rem, 2.2vh, 1.75rem) 0 clamp(0.5rem, 1.4vh, 1.25rem);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation: none !important;
transition: none !important;
}
/* The ambient bands are deliberately absent from this list. Each one's base
transform is an endpoint of its own keyframes, so with the animation off they
hold a frame of it — clearing them would snap both back to the origin and
stack the two washes on top of each other. */
.masthead,
.line,
.mission,
.product-card,
.footer {
opacity: 1;
transform: none;
}
}
</style>