/* ══════════════════════════════════════════════════════════════════════════ SKELETON — structure · type · motion. ZERO HEX CODES, on purpose. Every colour is a var() defined in world-a|b|c.css. If you find yourself typing a # in this file, the three-variant claim has just become a lie. ══════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:Besley;src:url(../fonts/besley-var.woff2) format('woff2'); font-weight:400 900;font-display:block} @font-face{font-family:PublicSans;src:url(../fonts/public-sans-var.woff2) format('woff2'); font-weight:100 900;font-display:block} @font-face{font-family:Martian;src:url(../fonts/martian-mono-var.woff2) format('woff2'); font-weight:100 800;font-display:block} :root{ --pad:clamp(20px,4.4vw,56px); --measure:34rem; --rig:250svh; /* pin travel — 2.5 screens drive one pinned screen */ } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--ground);color:var(--t1); font-family:PublicSans,system-ui,-apple-system,sans-serif; font-weight:330;-webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ── TYPE ─────────────────────────────────────────────────────────────── */ .mono{font-family:Martian,ui-monospace,SFMono-Regular,monospace;font-weight:300; font-size:10.5px;letter-spacing:.02em;color:var(--t3);line-height:1.45} .claim{ font-family:Besley,Georgia,serif;font-weight:400; font-size:clamp(2.05rem,4.05vw,3.5rem);line-height:.97;letter-spacing:-.021em; text-wrap:balance;max-width:20ch; } .claim em{font-style:normal;color:var(--t2)} .claim--wide{max-width:26ch} .body{margin-top:14px;max-width:var(--measure);font-size:15px;line-height:1.52; color:var(--t2)} .body strong{color:var(--t1);font-weight:520} .body + .body{margin-top:11px} .lede{font-size:17px;line-height:1.45;color:var(--t2);max-width:30rem} /* every slot the founder still has to write. visible in dev, invisible in prod by flipping ONE class on . never ships silently as finished copy. */ .ph::before{ content:"PLACEHOLDER · ";font-family:Martian,monospace;font-size:9px; letter-spacing:.08em;color:var(--accent);opacity:.85; } body.final .ph::before{content:none} /* ── AMBIENT FIELD ──────────────────────────────────────────────────────── Fixed behind everything, running on its own clock, never stops. This is the "connecting dots just going on in the background" reference. It persists across every screen, which is a large part of why the page reads as ONE object rather than a stack of sections. */ #ambient{ position:fixed;inset:0;width:100%;height:100%; z-index:-1;pointer-events:none;display:block; } /* ── NAV ────────────────────────────────────────────────────────────────── Deliberately not a pill bar. Sub-pages live at their own links; this is a directory line, not navigation chrome. */ .nav{ position:fixed;top:0;left:0;right:0;z-index:40; display:flex;align-items:baseline;gap:22px; padding:16px var(--pad);pointer-events:none; } /* NOT mix-blend-mode:difference. It garbles the wordmark wherever the nav crosses body text, which on a page of pinned full-screen scenes is most of the scroll. A soft top scrim keeps the nav legible over anything without drawing a bar. */ .nav::before{ content:"";position:absolute;inset:0 0 auto;height:190%;z-index:-1; background:linear-gradient(to bottom, color-mix(in srgb,var(--ground) 88%,transparent) 0%, color-mix(in srgb,var(--ground) 55%,transparent) 42%, transparent 100%); } /* The page has exactly one light screen, and a fixed nav has to survive crossing it. Toggled from motion.js when the paper section is behind the nav band — colours flip, scrim flips, nothing else moves. */ .nav--onpaper .wordmark{color:var(--ink)} .nav--onpaper .links a{color:color-mix(in srgb,var(--ink) 68%,transparent)} .nav--onpaper::before{ background:linear-gradient(to bottom, color-mix(in srgb,var(--paper) 92%,transparent) 0%, color-mix(in srgb,var(--paper) 58%,transparent) 42%, transparent 100%); } .nav a{pointer-events:auto;color:inherit;text-decoration:none} .nav .wordmark{font-family:Besley,serif;font-weight:600;font-size:15px; letter-spacing:-.01em;margin-right:auto;color:var(--t1)} .nav .links{display:flex;gap:18px} .nav .links a{font-family:Martian,monospace;font-size:10px;letter-spacing:.06em; text-transform:uppercase;color:var(--t2);padding-bottom:2px; border-bottom:1px solid transparent} .nav .links a:hover,.nav .links a:focus-visible{border-bottom-color:currentColor} @media (max-width:700px){ .nav .links{display:none} } /* ── PIN RIG (the two motion screens) ───────────────────────────────────── Contract, do not vary: 250svh parent, 100svh sticky child. Progress is -top/(height-vh); the driver lerps toward it at 0.11 so the scrub reads as a camera rather than a slider. */ .rig{height:var(--rig);position:relative;pointer-events:none} .pin{position:sticky;top:0;height:100svh;overflow:hidden} .pin canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* copy revealed BY the scrub, never by a timer */ .over{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 46px; opacity:0;transform:translateY(14px);will-change:opacity,transform} .reg{position:absolute;right:var(--pad);bottom:46px;text-align:right; display:flex;flex-direction:column;gap:5px;opacity:0} @media (max-width:820px){ .reg{right:auto;left:var(--pad);bottom:auto;top:76px;text-align:left} .over{padding-bottom:34px} } /* ── STATIC SCREENS ───────────────────────────────────────────────────── */ .screen{position:relative;padding:clamp(80px,13vh,150px) var(--pad)} .screen--tall{min-height:100svh;display:flex;flex-direction:column;justify-content:center} /* ── OVERLAP ────────────────────────────────────────────────────────────── Founder directive 2026-08-05: "I want the text to overlap on the images." Text and art share ONE grid cell and are stacked with z-index, so the words sit on the picture rather than in a column beside it. The scrim is a local wash under the text only — never a full-width band, which would rebuild the stack we just tore down. */ .lay{display:grid;grid-template-columns:1fr;align-items:end} .lay > *{grid-area:1/1} .lay__art{position:relative;width:100%} .lay__art canvas,.lay__art .plate{display:block;width:100%} .lay__txt{position:relative;z-index:2;padding:0 0 clamp(14px,3vw,40px); max-width:min(46rem,86%);isolation:isolate} .lay__txt::before{ content:"";position:absolute;inset:-24px -40px -18px -34px;z-index:-1; background:radial-gradient(120% 110% at 8% 90%, color-mix(in srgb,var(--ground) 92%,transparent) 0%, color-mix(in srgb,var(--ground) 74%,transparent) 46%, transparent 78%); } .lay--top{align-items:start} .lay--top .lay__txt{padding:clamp(14px,3vw,40px) 0 0} /* PHONE: the overlap is kept but relaxed. At 390px a five-line headline is taller than the whole plate, so stacking them in one cell puts type on type and neither survives. Text leads, art follows and rides up under it — the layers still touch, but nothing is printed over a fact. */ @media (max-width:820px){ .lay{grid-template-rows:auto auto} .lay__txt{grid-area:1/1;max-width:none;padding-bottom:0} .lay__art{grid-area:2/1;margin-top:-26px} .lay__txt::before{inset:-18px -20px -10px -20px} .lay--top .lay__txt{padding-top:0} } /* ── PAPER ──────────────────────────────────────────────────────────────── Used EXACTLY ONCE on the page. One inversion is punctuation; alternating grounds is the band stack that got rejected five times. Ink = the artifact, paper = the argument — so the honest-limits screen is the one that earns it. */ .paper{background:var(--paper);color:var(--ink)} .paper .claim{color:var(--ink)} .paper .claim em{color:var(--ink);opacity:.62} .paper .body{color:var(--ink);opacity:.82} .paper .mono{color:var(--ink);opacity:.55} /* ── LISTS THAT CARRY DATA ────────────────────────────────────────────── */ /* 5 surfaces must fit on one row at desktop — 4+1 reads as an accident. minmax floor and max-width are tuned together: 72rem / 5 ≈ 230px per column. */ .cols{display:grid;gap:clamp(22px,2.6vw,38px);margin-top:34px; grid-template-columns:repeat(auto-fit,minmax(192px,1fr));max-width:74rem} .cols h3{font-family:Besley,serif;font-weight:400;font-size:20px; letter-spacing:-.01em;margin-bottom:6px} .cols p{font-size:13.5px;line-height:1.5;color:var(--t2)} .cols .mono{display:block;margin-bottom:9px} .ledger{margin-top:30px;max-width:52rem;border-top:1px solid currentColor} .ledger div{display:flex;gap:16px;padding:11px 0; border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)} .ledger dt{flex:0 0 8.5rem;font-family:Martian,monospace;font-size:10px; letter-spacing:.06em;text-transform:uppercase;padding-top:3px;opacity:.7} .ledger dd{font-size:14.5px;line-height:1.5} /* ── THE ASK ────────────────────────────────────────────────────────────── Swappable. Founder: "Make this editable because I'm gonna change this later." Everything about the ask is inside
and this block. */ .ask{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;max-width:30rem} .ask input{ flex:1 1 13rem;min-width:0;background:transparent;color:var(--t1); border:1px solid var(--t3);border-right:none; border-radius:2px 0 0 2px;padding:13px 15px; font-family:inherit;font-size:14.5px; } .ask input::placeholder{color:var(--t3)} .ask input:focus-visible{outline:2px solid var(--t1);outline-offset:1px} .ask button{ flex:0 0 auto;background:var(--accent);color:var(--accent-ink); border:1px solid var(--accent);border-radius:0 2px 2px 0; padding:13px 20px;cursor:pointer; font-family:Martian,monospace;font-size:11px;letter-spacing:.06em; text-transform:uppercase; } .ask button:hover{filter:brightness(1.14)} .ask button:focus-visible{outline:2px solid var(--t1);outline-offset:2px} .ask__note{margin-top:10px} .ask__said{margin-top:10px;color:var(--t1)} /* ── FOOT ─────────────────────────────────────────────────────────────── */ .foot{padding:44px var(--pad) 40px;border-top:1px solid var(--hairline); display:flex;flex-wrap:wrap;gap:18px 30px;align-items:baseline} .foot a{color:var(--t2);text-decoration:none;border-bottom:1px solid transparent} .foot a:hover,.foot a:focus-visible{border-bottom-color:currentColor} .foot .spacer{margin-left:auto} /* ── REVEAL (static screens) ──────────────────────────────────────────── */ .rv{opacity:0;transform:translateY(15px); transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms), transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms)} .rv.in{opacity:1;transform:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ── REDUCED MOTION ─────────────────────────────────────────────────────── Settled state with ALL information present. Never removes content — the pin travel collapses to one screen and everything is simply already revealed. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rig{height:100svh} .over,.reg{opacity:1!important;transform:none!important} .rv{opacity:1!important;transform:none!important;transition:none} }