:root { --paper:#e8dcc5; --ink:#1d1d1b; --green:#8b8b84; --muted:#74746d; --line:rgba(29,29,27,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.notebook-stage { position:relative; z-index:1; height:275svh; display:grid; grid-template-rows:100svh; grid-template-columns:100%; align-items:start; background:var(--paper); }.notebook-stage > .hero, .notebook-stage > .manifesto, .notebook-stage > .dna { grid-area:1 / 1; position:sticky; top:0; width:100%; height:100svh; min-height:100svh; }.notebook-stage > .hero { z-index:3; }.notebook-stage > .manifesto { z-index:2; overflow:hidden; background:var(--paper); transform:translate3d(var(--philosophy-left,0),0,0); box-shadow:22px 0 48px rgba(29,29,27,var(--philosophy-shadow,0)); will-change:transform; }.notebook-stage > .dna { z-index:1; }
.hero { --turn-left:0px; min-height:100svh; position:relative; z-index:2; overflow:hidden; padding:30px clamp(24px,5vw,78px) 34px; display:flex; flex-direction:column; background:var(--paper); transform:translate3d(var(--turn-left),0,0); box-shadow:22px 0 48px rgba(29,29,27,var(--turn-shadow,0)); will-change:transform; }
.hero::before, .hero::after { display:none; }
.grain { position:absolute; inset:0; opacity:.13; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.hero-copy, .drawing-stage, .scroll-cue { position:relative; z-index:1; }
.site-header { position:fixed; z-index:30; top:30px; left:clamp(24px,5vw,78px); right:clamp(24px,5vw,78px); display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; mix-blend-mode:multiply; }
.site-header a { pointer-events:auto; filter:url(#graphite); text-shadow:.45px 0 0 rgba(29,29,27,.42), -.3px .2px 0 rgba(107,107,99,.38); }
.wordmark { font-size:25px; line-height:.8; letter-spacing:0; font-weight:500; }
.wordmark span { display:block; margin:8px 0 0 2px; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.1em; }
.nav-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 29px; font-family:"DM Mono",monospace; font-size:11px; text-transform:uppercase; }
.nav-links a { position:relative; padding:2px 0 6px; transition:color .2s; }.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1.4px; background:rgba(29,29,27,.68); filter:url(#graphite); transform:scaleX(.28); transform-origin:left; transition:transform .25s ease; }.nav-links a:hover { color:var(--green); }.nav-links a:hover::after { transform:scaleX(1); }
.hero-composition { position:absolute; z-index:1; inset:0; display:flex; justify-content:center; align-items:center; gap:clamp(24px,4vw,56px); padding:90px clamp(24px,5vw,78px) 55px; }.hero-copy { order:2; flex:0 0 0; width:0; margin:0; overflow:hidden; }.hero.is-expanded .hero-copy { position:relative; left:auto; top:auto; flex-basis:min(47vw,650px); width:min(47vw,650px); margin:0; overflow:visible; }
.hero-copy, .scroll-cue { opacity:0; transform:translateY(12px); transition:opacity .55s ease .65s, transform .55s ease .65s; }.hero-copy { transition:flex-basis 1.2s cubic-bezier(.21,.77,.27,1), width 1.2s cubic-bezier(.21,.77,.27,1), opacity .55s ease .65s, transform .55s ease .65s; }.hero.is-expanded .hero-copy, .hero.is-expanded .scroll-cue { opacity:1; transform:translateY(0); }
.eyebrow { margin:0 0 20px; font-family:"DM Mono",monospace; text-transform:uppercase; font-size:11px; letter-spacing:.09em; display:flex; align-items:center; gap:9px; }
.eyebrow span { background:var(--green); width:8px; height:8px; border-radius:50%; display:inline-block; }
h1,h2,p { margin-top:0; } h1,h2 { font-weight:400; letter-spacing:0; }
h1 { margin-bottom:25px; max-width:650px; font-size:clamp(48px,6vw,86px); line-height:.96; text-transform:uppercase; }
h1 em { font-family:inherit; font-weight:inherit; color:inherit; filter:none; text-shadow:none; }
.writing-heading { clip-path:inset(0 100% 0 0); }.hero.is-expanded .writing-heading { animation:writeSentence 1.85s cubic-bezier(.21,.77,.27,1) forwards .72s; }.writing-heading span, .pencil-heading span { position:relative; display:table; filter:url(#graphite); text-shadow:.55px 0 0 rgba(30,30,27,.38), -.3px .2px 0 rgba(107,107,99,.32); }.writing-heading span::before, .writing-heading span::after, .pencil-heading span::before, .pencil-heading span::after { content:""; position:absolute; z-index:0; height:2.2px; left:-.02em; right:-.13em; background:rgba(29,29,27,.78); filter:url(#graphite); box-shadow:0 .55px 0 rgba(29,29,27,.26); transform:scaleX(0); transform-origin:left; }.writing-heading span::after, .pencil-heading span::after { bottom:-.09em; }.writing-heading span::before, .pencil-heading span::before { top:-.1em; }.hero.is-expanded .writing-heading span::before, .hero.is-expanded .writing-heading span::after { animation:drawRule .85s cubic-bezier(.21,.77,.27,1) forwards; }.hero.is-expanded .writing-heading span:nth-child(1)::before { animation-delay:1.38s; }.hero.is-expanded .writing-heading span:nth-child(1)::after { animation-delay:1.62s; }.hero.is-expanded .writing-heading span:nth-child(2)::before { animation-delay:1.68s; }.hero.is-expanded .writing-heading span:nth-child(2)::after { animation-delay:1.85s; }.hero.is-expanded .writing-heading span:nth-child(3)::before { animation-delay:1.91s; }.hero.is-expanded .writing-heading span:nth-child(3)::after { animation-delay:2.08s; }.hero.is-expanded .writing-heading span:nth-child(4)::before { animation-delay:2.14s; }.hero.is-expanded .writing-heading span:nth-child(4)::after { animation-delay:2.31s; }
em { font-family:"Caveat",cursive; font-style:normal; font-weight:600; color:var(--ink); filter:url(#graphite); text-shadow:.35px 0 0 rgba(20,20,18,.48), -.25px .2px 0 rgba(93,93,86,.45); }
.intro { max-width:560px; color:var(--muted); font-size:16px; line-height:1.5; }
.intro, .manifesto-copy p, .principles h3, .principles p, .venture-copy p { position:relative; }.principles h3, .ruled-line { display:table; max-width:100%; }.ruled-line { position:relative; }.ruled-line::before, .ruled-line::after, .principles h3::before, .principles h3::after { content:""; position:absolute; left:0; right:0; height:1.6px; background:rgba(29,29,27,.62); filter:url(#graphite); box-shadow:0 .4px 0 rgba(29,29,27,.18); }.ruled-line::before, .principles h3::before { top:.04em; }.ruled-line::after, .principles h3::after { bottom:.02em; }
.text-link { display:inline-flex; gap:20px; align-items:center; margin-top:24px; font-family:"DM Mono",monospace; font-size:12px; border-bottom:1px solid var(--ink); padding-bottom:7px; }.text-link b { font-size:18px; font-weight:400; }
.drawing-stage { position:relative; order:1; flex:0 0 min(52vw,720px); width:min(52vw,720px); aspect-ratio:1.65; left:auto; top:auto; right:auto; transform:rotate(-4deg); transform-origin:center; transition:flex-basis 1.2s cubic-bezier(.21,.77,.27,1), width 1.2s cubic-bezier(.21,.77,.27,1), transform 1.2s cubic-bezier(.21,.77,.27,1); }.hero.is-expanded .drawing-stage { flex-basis:min(38vw,520px); width:min(38vw,520px); left:auto; top:auto; transform:rotate(-4deg); }
.logo-sketch { width:100%; overflow:visible; }.logo-float { transform-box:fill-box; transform-origin:center; }.hero.is-expanded .float-brow { animation:floatBrow 5.8s ease-in-out 1.2s infinite; }.hero.is-expanded .float-bowl { animation:floatBowl 6.7s ease-in-out 1.35s infinite; }.hero.is-expanded .float-dot { animation:floatDot 7.4s ease-in-out 1.1s infinite; }.hero.is-expanded .float-wordmark { animation:floatWordmark 6.2s ease-in-out 1.4s infinite; }.wordmark-sketch { fill:var(--ink); font-family:"DM Sans",Arial,sans-serif; font-size:62px; font-weight:400; letter-spacing:0; opacity:0; clip-path:inset(0 100% 0 0); filter:url(#graphite); animation:revealWordmark .95s cubic-bezier(.21,.77,.27,1) forwards 4.55s; }.wordmark-rule { fill:var(--ink); stroke:none; opacity:.66; clip-path:inset(0 100% 0 0); filter:url(#graphite); animation:revealRect .78s ease forwards 4.35s; }.wordmark-rule.rule-bottom { animation-delay:4.85s; }.pencil-line { stroke:#797970; stroke-width:1.65; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }.brow-rect { fill:#30302d; stroke:none; clip-path:inset(0 100% 0 0); filter:url(#graphite); animation:revealRect .95s ease forwards .35s; }.brow-rect-final { fill:var(--ink); stroke:none; clip-path:inset(0 100% 0 0); filter:url(#graphite); animation:revealRect .83s cubic-bezier(.16,.78,.29,1) forwards 2.65s; }
.construction { animation:draw .95s ease forwards .35s; }.second { animation-delay:1.1s; }.third { animation-delay:1.85s; }
.graphite-ghost { stroke:#4d4d47; stroke-width:5.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; filter:url(#graphite); animation:drawGhost 1.08s ease forwards 2.56s; }.ghost-bowl { animation-delay:3.07s; }.ghost-dot { animation-delay:3.62s; }
.final-mark { stroke:var(--ink); stroke-width:7.3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; filter:url(#graphite); animation:drawBold .83s cubic-bezier(.16,.78,.29,1) forwards 2.65s; }.final-mark.top { stroke-width:12; }.final-mark.brow-rect-final { opacity:1; stroke:none; animation:revealRect .83s cubic-bezier(.16,.78,.29,1) forwards 2.65s; }
.bowl { animation-delay:3.15s; }.dot { animation-delay:3.7s; }.scribble { stroke:var(--ink); stroke-width:3.8; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:.68; filter:url(#graphite); animation:draw .8s ease forwards 4.25s; }
.graphite-detail { stroke:#151513; stroke-width:1.9; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; filter:url(#graphite); animation:drawDetail .68s ease forwards 3s; }.detail-bowl { animation-delay:3.49s; }.detail-dot { animation-delay:4.02s; }
@keyframes draw { to { stroke-dashoffset:0; } } @keyframes drawBold { to { stroke-dashoffset:0; opacity:.92; } } @keyframes drawGhost { to { stroke-dashoffset:0; opacity:.38; } } @keyframes drawDetail { to { stroke-dashoffset:0; opacity:.8; } } @keyframes revealRect { to { clip-path:inset(0 0 0 0); } } @keyframes revealWordmark { to { opacity:.9; clip-path:inset(0 0 0 0); } } @keyframes writeSentence { to { clip-path:inset(0 0 0 0); } } @keyframes drawRule { to { transform:scaleX(1); } } @keyframes floatBrow { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(-3px,-7px,0) rotate(-.35deg); } } @keyframes floatBowl { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(4px,6px,0) rotate(.45deg); } } @keyframes floatDot { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(6px,-5px,0) rotate(.3deg); } } @keyframes floatWordmark { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(-2px,4px,0) rotate(-.2deg); } }
.stage-note { position:absolute; font:10px "DM Mono",monospace; text-transform:uppercase; color:var(--muted); letter-spacing:.06em; transition:opacity .35s ease .9s; }.note-one { top:21%; left:-8%; }.note-two { right:5%; bottom:-17%; }
.drawing-caption { position:absolute; bottom:-2px; left:20%; display:flex; align-items:center; gap:8px; font:10px "DM Mono",monospace; text-transform:uppercase; color:var(--muted); transition:opacity .35s ease .9s; }.hero:not(.is-expanded) .stage-note, .hero:not(.is-expanded) .drawing-caption { opacity:0; }.pulse { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }@keyframes pulse { 50% { opacity:.25; transform:scale(.65); } }
.scroll-cue { margin-top:auto; display:flex; gap:10px; align-items:center; font:10px "DM Mono",monospace; text-transform:uppercase; }.scroll-cue i { width:44px; height:1px; background:var(--ink); display:block; }
.manifesto { padding:120px clamp(24px,9vw,145px) 80px; border-top:1px solid var(--line); }.section-number { font:11px "DM Mono",monospace; color:var(--muted); }
@media (min-width:981px) {
  .manifesto { display:flex; flex-direction:column; justify-content:center; padding-block:clamp(28px,5vh,64px); }
  .manifesto > * { width:100%; max-width:1500px; margin-left:auto; margin-right:auto; }
}
.manifesto-grid { display:grid; grid-template-columns:1fr 1.7fr 1fr; column-gap:35px; align-items:start; margin-top:64px; }.manifesto-grid h2 { font-size:clamp(42px,5vw,72px); line-height:.98; margin:0; }.pencil-heading { text-transform:uppercase; clip-path:inset(0 100% 0 0); }.pencil-heading.is-visible { animation:writeSentence 1.55s cubic-bezier(.21,.77,.27,1) forwards; }.pencil-heading.is-visible span::before, .pencil-heading.is-visible span::after { animation:drawRule .75s cubic-bezier(.21,.77,.27,1) forwards .82s; }.pencil-heading.is-visible span + span::before, .pencil-heading.is-visible span + span::after { animation-delay:1.08s; }.manifesto-copy { padding-top:8px; font-size:16px; line-height:1.55; color:var(--muted); }.manifesto-copy p + p { margin-top:18px; }
.philosophy-aside { min-width:0; overflow:visible; }
.hatching-scene { display:block; width:135%; max-width:390px; height:auto; margin:28px 0 0 -18%; overflow:visible; }
.hatching-scene path, .hatching-scene circle { fill:none; stroke:var(--ink); stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; filter:url(#graphite); stroke-dasharray:1; stroke-dashoffset:1; }
.hatching-scene .sketch-echo { stroke-width:1.25; opacity:.48; }
.egg-shell, .egg-top, .egg-bottom, .chick-runner, .chick-body, .chick-legs { transform-box:fill-box; transform-origin:center; }
.egg-top, .egg-bottom, .egg-crack { opacity:0; }
.chick-facing { transform:translate(500px,0) scale(-1,1); }
.chick-runner, .speed-line { opacity:0; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .hatching-scene path,
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .hatching-scene circle { animation:sceneDraw .65s ease forwards; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .egg-shell { animation:eggShake 1.15s ease-in-out .7s both; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .egg-intact { animation:intactFade .2s ease 1.67s forwards; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .egg-crack { animation:crackSequence .8s ease 1.05s forwards; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .egg-top { animation:hatchTop 1s cubic-bezier(.2,.8,.3,1) 1.65s forwards; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .egg-bottom { animation:hatchBottom .7s ease 1.75s forwards; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .chick-runner { animation:chickEscape 4.2s cubic-bezier(.25,.7,.35,1) 1.55s forwards; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .chick-body { animation:chickBob .28s ease-in-out 2.35s infinite alternate; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .chick-legs { animation:chickLegs .18s ease-in-out 2.35s infinite alternate; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .speed-one { animation:sceneDraw .2s ease 2.65s forwards, speedMark .45s ease 2.7s 5 alternate; }
:is(.manifesto.is-scene-active, .manifesto:has(.pencil-heading.is-visible)) .speed-two { animation:sceneDraw .2s ease 2.8s forwards, speedMark .45s ease 2.85s 5 alternate; }
@keyframes sceneDraw { to { stroke-dashoffset:0; } }
@keyframes crackSequence { 0% { opacity:0; } 35%,72% { opacity:1; } 100% { opacity:0; } }
@keyframes intactFade { to { opacity:0; } }
@keyframes eggShake { 0%,100% { transform:rotate(0); } 20% { transform:rotate(-5deg); } 40% { transform:rotate(5deg); } 60% { transform:rotate(-7deg); } 80% { transform:rotate(4deg); } }
@keyframes hatchTop { 0% { opacity:1; transform:translate(0,0) rotate(0); } 38% { opacity:1; transform:translate(-10px,-28px) rotate(-14deg); } 70% { opacity:1; transform:translate(-84px,39px) rotate(-96deg); } 84% { opacity:1; transform:translate(-91px,27px) rotate(-108deg); } 100% { opacity:1; transform:translate(-98px,39px) rotate(-102deg); } }
@keyframes hatchBottom { from { opacity:1; transform:translateX(0) rotate(0); } to { opacity:1; transform:translateX(8px) rotate(5deg); } }
@keyframes chickEscape { 0%,12% { opacity:0; transform:translate(0,16px) scale(.72); } 22% { opacity:1; transform:translate(0,-30px) scale(.9); } 36% { opacity:1; transform:translate(-28px,-10px) scale(.92); } 100% { opacity:1; transform:translate(-120vw,-8px) scale(.92); } }
@keyframes chickBob { to { transform:translateY(-5px) rotate(-2deg); } }
@keyframes chickLegs { from { transform:skewX(-13deg); } to { transform:skewX(15deg); } }
@keyframes speedMark { 0% { opacity:0; transform:translateX(12px); } 100% { opacity:.55; transform:translateX(-16px); } }
.pencil-heading span::before { display:none; }.pencil-heading span:first-child::before { display:block; }.pencil-heading span:first-child::before, .pencil-heading span::after { height:4px; background:rgba(29,29,27,.9); }
.pencil-heading.is-measuring { clip-path:none; }.pencil-heading.is-measuring span { display:inline; filter:none; text-shadow:none; }.pencil-heading.is-measuring span::before, .pencil-heading.is-measuring span::after { display:none; }
.principles { margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.principles article { display:grid; grid-template-columns:minmax(92px,120px) minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:18px; align-items:start; padding:20px 30px 0 0; min-height:255px; }.principles article + article { padding-left:30px; border-left:1px solid var(--line); }.principles span { grid-column:1 / -1; color:var(--green); font:12px "DM Mono",monospace; }.pillar-illustration { grid-column:1; grid-row:2 / 4; width:100%; aspect-ratio:4/3; margin-top:20px; overflow:visible; }.pillar-illustration path, .pillar-illustration circle, .pillar-illustration ellipse { fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; filter:url(#graphite); }.pillar-illustration .sketch-echo { stroke-width:1.25; opacity:.55; }.principles article.is-visible .pillar-illustration path, .principles article.is-visible .pillar-illustration circle, .principles article.is-visible .pillar-illustration ellipse { animation:draw 1.15s cubic-bezier(.21,.77,.27,1) forwards; }.principles article.is-visible .pillar-illustration .sketch-echo { animation-delay:.35s; }.principles h3 { grid-column:2; grid-row:2; margin:22px 0 18px; font-size:clamp(38px,3vw,48px); font-weight:400; line-height:1.02; filter:url(#graphite); text-shadow:.6px 0 0 rgba(30,30,27,.48), -.45px .3px 0 rgba(107,107,99,.42), .2px -.35px 0 rgba(29,29,27,.3); }.principles p { grid-column:2; grid-row:3; max-width:400px; color:#676760; font-size:30px; line-height:1.32; }
.brain-body, .thought-question, .rocket-body, .rocket-smoke, .atom-orbits { transform-box:fill-box; transform-origin:center; }
.principles article.is-visible .brain-body { animation:brainPulse 2.15s ease-in-out 1.2s infinite; }
.principles article.is-visible .thought-question { animation:questionFloat 2.7s ease-in-out 1.2s infinite; }
.principles article.is-visible .rocket-body { animation:rocketHover 1.8s ease-in-out 1.2s infinite; }
.principles article.is-visible .rocket-smoke { animation:smokeDrift 1.35s ease-out 1.2s infinite; }
.atom-illustration .atom-nucleus { fill:rgba(29,29,27,.78); }
.atom-illustration .electron { fill:var(--ink); }
.principles article.is-visible .atom-orbits { animation:atomBreathe 3s ease-in-out 1.2s infinite; }
@keyframes brainPulse { 0%,100% { transform:scale(1); } 45% { transform:scale(1.045); } 58% { transform:scale(1.018); } 70% { transform:scale(1.05); } }
@keyframes questionFloat { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-5px) rotate(2deg); } }
@keyframes rocketHover { 0%,100% { transform:translateY(1px) rotate(-.5deg); } 50% { transform:translateY(-7px) rotate(.7deg); } }
@keyframes smokeDrift { 0% { transform:translateY(-4px) scale(.72); opacity:0; } 25% { opacity:.75; } 100% { transform:translateY(12px) scale(1.25); opacity:0; } }
@keyframes atomBreathe { 0%,100% { transform:scale(1) rotate(-1deg); } 50% { transform:scale(1.035) rotate(1deg); } }

@media (min-width:981px) and (max-height:820px) {
  .manifesto { padding-top:28px; padding-bottom:28px; }
  .manifesto-grid { margin-top:26px; }
  .manifesto-grid h2 { font-size:clamp(42px,4.4vw,62px); }
  .principles { margin-top:24px; }
  .principles article { min-height:210px; padding-top:14px; }
  .pillar-illustration { margin-top:12px; }
  .principles h3 { margin-top:14px; margin-bottom:10px; }
}
.venture { background:#050505; position:relative; overflow:visible; }.venture-visual { position:sticky; z-index:0; top:0; display:block; width:100%; height:72svh; overflow:hidden; background:#050505; }.venture-image { display:block; width:100%; height:118%; object-fit:cover; object-position:center top; transform:translate3d(0,calc(var(--venture-shift,0px) - 70px),0); will-change:transform; }.venture-content { position:relative; z-index:1; width:100%; display:grid; grid-template-columns:.7fr 1fr 1fr; gap:clamp(30px,6vw,100px); align-items:end; padding:48px clamp(24px,9vw,145px) 56px; background:rgba(242,240,232,.96); border-top:1px solid rgba(29,29,27,.25); box-shadow:0 -24px 60px rgba(0,0,0,.12); }.venture-label { align-self:start; }.venture .eyebrow { margin-top:38px; }.venture .eyebrow span { background:var(--ink); }.venture h2 { margin:0; font-size:clamp(65px,8vw,118px); line-height:.78; filter:url(#graphite); text-shadow:.55px 0 0 rgba(30,30,27,.38), -.3px .2px 0 rgba(107,107,99,.32); }.venture h2 em { color:var(--ink); }.venture-copy p { max-width:380px; font-size:17px; line-height:1.5; }.outline-link { display:inline-flex; gap:28px; margin-top:28px; padding:13px 0; border-bottom:1px solid var(--ink); font:12px "DM Mono",monospace; text-transform:uppercase; }.outline-link b { font-size:17px; font-weight:400; }
.dna { min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:clamp(42px,7vh,90px) clamp(24px,6vw,96px); border-top:1px solid var(--line); background:var(--paper); }
.dna-inner { width:min(1480px,100%); margin:auto; display:grid; grid-template-columns:minmax(130px,.55fr) minmax(320px,1.05fr) minmax(380px,1.25fr); gap:clamp(30px,5vw,82px); align-items:center; }
.dna-label { align-self:start; padding-top:8px; }
.notebook-stage > .dna .dna-label { transform:translateX(48px); }
.dna-label .eyebrow { margin-top:44px; }
.dna-portrait { position:relative; margin:0; overflow:hidden; aspect-ratio:4/5; background:#42473c; clip-path:inset(0 0 100% 0); transition:clip-path 1.15s cubic-bezier(.2,.75,.25,1); }
.dna.is-visible .dna-portrait { clip-path:inset(0); }
.dna-portrait img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 23%; transform:scale(1.06); filter:saturate(.76) contrast(1.03); transition:transform 1.8s cubic-bezier(.2,.75,.25,1); }
.dna.is-visible .dna-portrait img { transform:scale(1); }
.dna-portrait figcaption { position:absolute; inset:auto 0 0; padding:14px 16px; color:#f2f0e8; background:rgba(18,20,17,.76); font:11px "DM Mono",monospace; text-transform:uppercase; }
.dna-portrait figcaption span { float:right; color:#c4c5bc; }
.dna-copy { max-width:620px; }
.dna-copy h2 { margin:0 0 42px; font-size:clamp(72px,8vw,126px); line-height:.76; text-transform:uppercase; filter:url(#graphite); text-shadow:.6px 0 0 rgba(30,30,27,.45), -.4px .3px 0 rgba(107,107,99,.4); }
.dna-copy h2 span { display:block; position:relative; }
.dna-copy h2 span::after { content:""; display:block; height:3px; margin-top:10px; background:rgba(29,29,27,.78); filter:url(#graphite); transform:scaleX(0); transform-origin:left; transition:transform .9s ease .55s; }
.dna.is-visible .dna-copy h2 span::after { transform:scaleX(1); }
.dna-role { font:13px "DM Mono",monospace; text-transform:uppercase; color:var(--muted); }
.dna-bio { max-width:590px; margin-top:26px; color:var(--muted); font-size:clamp(20px,1.7vw,27px); line-height:1.38; }
.dna-projects { display:grid; grid-template-columns:repeat(3,1fr); margin-top:42px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.dna-projects span { padding:14px 12px 14px 0; font:11px "DM Mono",monospace; text-transform:uppercase; filter:none; text-shadow:none; }
.dna-projects span + span { padding-left:12px; border-left:1px solid var(--line); }
.contact { min-height:100svh; display:flex; align-items:center; padding:clamp(90px,12vh,150px) clamp(24px,9vw,145px); border-top:1px solid var(--line); background:var(--paper); }
.contact-inner { width:min(1320px,100%); margin:auto; display:grid; grid-template-columns:minmax(300px,.85fr) minmax(440px,1.15fr); gap:clamp(70px,10vw,160px); align-items:start; }
.contact-heading h2 { margin:clamp(80px,13vh,130px) 0 0; font-size:clamp(68px,7vw,112px); line-height:.84; text-transform:uppercase; filter:url(#graphite); text-shadow:.55px 0 0 rgba(29,29,27,.45), -.35px .25px 0 rgba(107,107,99,.38); }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:34px 28px; padding-top:35px; }
.contact-field { position:relative; }
.contact-field label { display:block; margin-bottom:12px; color:var(--muted); font:11px "DM Mono",monospace; text-transform:uppercase; }
.contact-field input, .contact-field textarea { display:block; width:100%; border:0; border-radius:0; padding:8px 2px 13px; color:var(--ink); background:transparent; font:20px "DM Sans",sans-serif; outline:none; border-bottom:2px solid rgba(29,29,27,.55); filter:url(#graphite); }
.contact-field input:focus, .contact-field textarea:focus { border-bottom-color:var(--ink); }
.contact-comments { grid-column:1 / -1; }
.contact-field textarea { min-height:150px; resize:vertical; line-height:1.4; }
.contact-honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.contact-actions { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.contact-status { min-height:22px; margin:0; color:var(--muted); font:11px "DM Mono",monospace; text-transform:uppercase; }
.contact-form button { display:inline-flex; align-items:center; gap:28px; border:0; border-bottom:2px solid var(--ink); padding:12px 2px; color:var(--ink); background:transparent; font:12px "DM Mono",monospace; text-transform:uppercase; cursor:pointer; filter:url(#graphite); }
.contact-form button span { font-size:21px; transition:transform .2s ease; }
.contact-form button:hover span { transform:translateX(5px); }
.contact-confirmation { position:fixed; z-index:60; inset:0; display:grid; place-items:center; padding:32px; background:var(--paper); opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s ease; }
.contact-confirmation.is-visible { opacity:1; visibility:visible; }
.contact-confirmation[hidden] { display:none; }
.contact-confirmation::before { content:""; position:absolute; inset:0; opacity:.13; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.contact-confirmation-inner { position:relative; width:min(940px,100%); }
.contact-confirmation h2 { position:relative; display:table; margin:clamp(70px,12vh,120px) 0 30px; font-size:clamp(72px,10vw,150px); line-height:.82; text-transform:uppercase; filter:url(#graphite); text-shadow:.55px 0 0 rgba(29,29,27,.45), -.35px .25px 0 rgba(107,107,99,.38); }
.contact-confirmation h2::before, .contact-confirmation h2::after { content:""; position:absolute; left:0; right:0; height:3px; background:rgba(29,29,27,.72); filter:url(#graphite); }
.contact-confirmation h2::before { top:-14px; }.contact-confirmation h2::after { bottom:-14px; }
.contact-confirmation-inner > p:not(.eyebrow) { max-width:620px; color:var(--muted); font-size:clamp(24px,3vw,42px); line-height:1.2; }
.confirmation-close { display:inline-flex; align-items:center; gap:28px; margin-top:50px; border:0; border-bottom:2px solid var(--ink); padding:12px 2px; color:var(--ink); background:transparent; font:12px "DM Mono",monospace; text-transform:uppercase; cursor:pointer; filter:url(#graphite); }
.confirmation-close span { font-size:21px; transition:transform .2s ease; }.confirmation-close:hover span { transform:translateX(5px); }
footer { padding:25px clamp(24px,5vw,78px); display:flex; justify-content:space-between; align-items:center; background:var(--ink); color:var(--paper); font:12px "DM Mono",monospace; } footer p { margin:0; font:20px "DM Sans",sans-serif; } footer p span { display:block; font:8px "DM Mono",monospace; text-transform:uppercase; margin:2px 0 0 2px; } footer a { border-bottom:1px solid var(--green); padding-bottom:4px; } footer small { font-size:10px; color:#b5b5ab; }
@media (max-width: 760px) { .hero { min-height:810px; padding-top:23px; }.nav-links { gap:15px; font-size:9px; }.hero-copy, .hero.is-expanded .hero-copy { position:relative; left:auto; top:auto; width:auto; margin:96px 0 0; }.intro { font-size:14px; }.drawing-stage { width:108vw; left:50%; right:auto; top:50%; transform:translate(-50%,-50%) rotate(-4deg); }.hero.is-expanded .drawing-stage { width:min(108vw,520px); left:50%; right:auto; top:475px; transform:translateX(-50%) scale(.78) rotate(-4deg); transform-origin:center top; }.stage-note { display:none; }.drawing-caption { bottom:-5px; left:27%; }.scroll-cue { margin-bottom:0; }.manifesto { padding-top:74px; }.manifesto-grid { display:block; margin-top:43px; }.manifesto-grid .eyebrow { margin-bottom:34px; }.manifesto-copy { margin-top:32px; font-size:15px; }.principles { display:block; margin-top:65px; }.principles article { min-height:auto; padding:20px 0 25px; border-bottom:1px solid var(--line); }.principles article + article { border-left:0; padding-left:0; }.principles h3 { margin:18px 0 10px; }.venture-visual { height:66svh; }.venture-image { height:116%; object-position:center top; transform:translate3d(0,calc(var(--venture-shift,0px) - 45px),0); }.venture-content { display:block; padding:36px 24px 44px; }.venture .eyebrow { margin-top:22px; }.venture h2 { margin:35px 0 26px; font-size:72px; }.venture-copy p { max-width:320px; font-size:15px; } footer { gap:20px; flex-wrap:wrap; } footer small { width:100%; } }
@media (max-width:520px) { .site-header { top:22px; }.wordmark { font-size:21px; }.nav-links { max-width:235px; gap:4px 12px; font-size:8px; } }
@media (max-width: 980px) { .hero { min-height:max(100svh,810px); }.hero-composition { flex-direction:column; gap:12px; padding:82px 24px 44px; }.drawing-stage, .hero.is-expanded .drawing-stage { position:relative; order:1; flex:0 0 auto; left:auto; right:auto; top:auto; width:min(72vw,470px); transform:rotate(-4deg); transform-origin:center; }.hero-copy { order:2; flex:0 0 auto; width:0; height:0; margin:0; overflow:hidden; text-align:left; }.hero.is-expanded .hero-copy { position:relative; flex:0 0 auto; width:min(88vw,650px); height:auto; margin:0; overflow:visible; }.stage-note { display:none; }.drawing-caption { left:50%; bottom:-4px; transform:translateX(-50%); white-space:nowrap; } }
@media (max-width: 980px) { .notebook-stage { height:auto; display:block; }.notebook-stage > .hero, .notebook-stage > .manifesto, .notebook-stage > .dna { position:relative; top:auto; height:auto; min-height:100svh; transform:none; }.notebook-stage > .manifesto { overflow:visible; box-shadow:none; } }
@media (max-width:980px) {
  .dna { min-height:auto; padding:72px 24px; }
  .dna-inner { grid-template-columns:1fr; gap:38px; }
  .dna-label { display:flex; justify-content:space-between; align-items:flex-start; }
  .notebook-stage > .dna .dna-label { transform:none; }
  .dna-label .eyebrow { margin-top:0; }
  .dna-portrait { width:min(100%,560px); margin-inline:auto; }
  .dna-copy { width:min(100%,680px); margin-inline:auto; }
  .dna-copy h2 { font-size:clamp(68px,17vw,112px); }
  .contact { min-height:auto; padding:100px 24px 72px; }
  .contact-inner { grid-template-columns:1fr; gap:55px; }
  .contact-heading h2 { margin-top:55px; }
}
@media (max-width:560px) {
  .dna-projects { grid-template-columns:1fr; }
  .dna-projects span + span { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .dna-portrait figcaption span { float:none; display:block; margin-top:5px; }
  .contact-form { grid-template-columns:1fr; }
  .contact-field, .contact-comments { grid-column:1; }
  .contact-actions { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } .hero { transform:none !important; box-shadow:none !important; }.hero::before, .hero::after { display:none; }.final-mark { opacity:1; stroke-dashoffset:0; } .venture-image { transform:none !important; } }