*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --dark:#0e0e0e;--cream:#f0ede8;--amber:#f09a1a;--ink:#1a1a1a;
  --mid:#3b3b3b;--soft:#666;--meta:#888;--surface:#fff;
  --rule:rgba(10,10,10,.08);--rule-strong:rgba(10,10,10,.16);
  --dark-rule:rgba(255,255,255,.12);--serif:'DM Serif Display',Georgia,serif;
  --mono:'Geist Mono','Courier New',monospace;--ease:cubic-bezier(.16,1,.3,1)
}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--mono);font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.masthead{border-bottom:.5px solid var(--rule);color:var(--meta);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.masthead-inner{align-items:center;display:grid;gap:24px;grid-template-columns:1fr auto 1fr;margin:0 auto;max-width:1440px;padding:10px 48px}
.masthead-c{align-items:center;color:var(--amber);display:flex;gap:10px;justify-self:center;letter-spacing:.22em}
.masthead-r{text-align:right}
.dot{background:var(--amber);border-radius:50%;display:inline-block;height:7px;width:7px}
.pulse{animation:pulse 4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,154,26,.4)}70%{box-shadow:0 0 0 7px rgba(240,154,26,0)}100%{box-shadow:0 0 0 0 rgba(240,154,26,0)}}
.nav{align-items:center;border-bottom:.5px solid var(--rule);display:flex;justify-content:space-between;padding:24px 48px}
.nav-l{font-family:var(--serif);font-size:30px;letter-spacing:-.025em;line-height:1}
.nav-l .f{opacity:.22}
.nav-r{color:var(--soft);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav-r a{margin-left:24px}
.nav-r a:hover,.nav-r a.active{color:var(--amber)}
.shell{margin:0 auto;max-width:1200px;padding-left:48px;padding-right:48px}
.eyebrow{align-items:center;color:var(--amber);display:flex;font-size:11px;gap:10px;letter-spacing:.24em;margin-bottom:34px;text-transform:uppercase}
.hero{padding-bottom:64px;padding-top:88px}
.display{font-family:var(--serif);font-size:clamp(56px,11vw,150px);letter-spacing:-.04em;line-height:.88;margin-bottom:36px;max-width:9ch}
.display .it{color:var(--amber);font-style:italic}
.lede{color:var(--mid);font-size:clamp(15px,1.5vw,18px);line-height:1.72;max-width:62ch}
.lede strong{color:var(--ink);font-weight:500}
.hero-meta{border-top:.5px solid var(--rule);display:flex;flex-wrap:wrap;font-size:11px;gap:14px 30px;letter-spacing:.16em;margin-top:46px;padding-top:24px;text-transform:uppercase;color:var(--soft)}
.catalog{padding-bottom:100px;padding-top:44px}
.section-label{align-items:center;color:var(--amber);display:flex;font-size:11px;gap:10px;letter-spacing:.24em;margin-bottom:28px;text-transform:uppercase}
.project-card{background:var(--dark);color:#fff;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);min-height:600px;overflow:hidden;position:relative}
.project-copy{display:flex;flex-direction:column;padding:56px}
.project-no{color:rgba(255,255,255,.35);font-size:11px;letter-spacing:.22em;margin-bottom:70px;text-transform:uppercase}
.project-title{font-family:var(--serif);font-size:clamp(54px,8vw,104px);letter-spacing:-.04em;line-height:.88;margin-bottom:30px}
.project-title em{color:var(--amber);font-style:italic}
.project-desc{color:rgba(255,255,255,.68);font-size:14px;line-height:1.8;max-width:48ch}
.project-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.project-tags span{border:.5px solid rgba(255,255,255,.18);color:rgba(255,255,255,.55);font-size:10px;letter-spacing:.14em;padding:8px 10px;text-transform:uppercase}
.project-cta{align-items:center;background:var(--amber);color:var(--dark);display:flex;font-size:11px;font-weight:500;justify-content:space-between;letter-spacing:.16em;margin-top:auto;padding:17px 20px;text-transform:uppercase;width:260px}
.project-cta:hover{background:#ffae36}
.project-media{align-items:center;background:#171717;display:flex;justify-content:center;min-height:100%;overflow:hidden;padding:30px;position:relative}
.project-media::before{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;content:'';inset:0;position:absolute}
.project-media img{border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px rgba(0,0,0,.48);position:relative;width:min(100%,620px)}
.project-media-label{bottom:20px;color:rgba(255,255,255,.36);font-size:9px;left:30px;letter-spacing:.18em;position:absolute;text-transform:uppercase}
.principles{border-bottom:.5px solid var(--rule);border-top:.5px solid var(--rule);display:grid;grid-template-columns:repeat(4,1fr)}
.principle{border-left:.5px solid var(--rule);padding:32px}
.principle:first-child{border-left:0}
.principle b{display:block;font-family:var(--serif);font-size:27px;font-weight:400;margin-bottom:8px}
.principle span{color:var(--soft);font-size:10px;letter-spacing:.16em;text-transform:uppercase}

/* OddlyAlive detail */
.oa-hero{padding-bottom:54px;padding-top:82px}
.oa-title{font-family:var(--serif);font-size:clamp(60px,11vw,154px);letter-spacing:-.045em;line-height:.86;margin-bottom:36px;max-width:9.4ch}
.oa-title em{color:var(--amber);font-style:italic}
.oa-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.button{border:.5px solid var(--rule-strong);font-size:11px;font-weight:500;letter-spacing:.16em;padding:15px 20px;text-transform:uppercase}
.button.primary{background:var(--ink);color:var(--cream)}
.button.primary:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.button.secondary:hover{border-color:var(--amber);color:var(--amber)}
.proof{border-bottom:.5px solid var(--rule);border-top:.5px solid var(--rule);display:grid;grid-template-columns:repeat(5,1fr);margin-top:58px}
.proof-item{border-left:.5px solid var(--rule);padding:24px 22px}
.proof-item:first-child{border-left:0}
.proof-value{font-family:var(--serif);font-size:30px;line-height:1;margin-bottom:8px}
.proof-key{color:var(--soft);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.motion-wrap{background:var(--dark);color:#fff;padding:90px 0}
.motion-head{align-items:end;display:flex;gap:32px;justify-content:space-between;margin-bottom:34px}
.motion-head h2{font-family:var(--serif);font-size:clamp(36px,6vw,68px);font-weight:400;letter-spacing:-.03em;line-height:.96;max-width:13ch}
.motion-head h2 em{color:var(--amber);font-style:italic}
.motion-head p{color:rgba(255,255,255,.54);font-size:11px;letter-spacing:.14em;line-height:1.7;max-width:32ch;text-align:right;text-transform:uppercase}
.motion-stage{background:#151515;border:.5px solid rgba(255,255,255,.14);padding:24px;position:relative}
.motion-stage::before{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;content:'';inset:0;position:absolute}
.motion-stage img{margin:0 auto;position:relative;width:100%}
.motion-caption{align-items:center;color:rgba(255,255,255,.45);display:flex;font-size:10px;justify-content:space-between;letter-spacing:.17em;padding-top:18px;text-transform:uppercase}
.story{padding-bottom:96px;padding-top:96px}
.story-grid{display:grid;gap:56px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.story h2,.recipes h2,.quickstart h2{font-family:var(--serif);font-size:clamp(38px,5.5vw,64px);font-weight:400;letter-spacing:-.03em;line-height:.98}
.story h2 em,.recipes h2 em,.quickstart h2 em{color:var(--amber);font-style:italic}
.story-copy{color:var(--mid);font-size:14px;line-height:1.9}
.story-copy p+p{margin-top:18px}
.flow{background:var(--surface);border:.5px solid var(--rule);margin-top:42px;padding:30px}
.flow-line{align-items:center;display:grid;gap:12px;grid-template-columns:repeat(5,1fr);text-align:center}
.flow-node{border:.5px solid var(--rule-strong);font-size:10px;letter-spacing:.12em;padding:13px 8px;text-transform:uppercase}
.flow-node.signal{background:var(--amber);border-color:var(--amber)}
.flow-arrow{display:none}
.recipes{background:#e7e2dc;padding:90px 0}
.recipes-head{align-items:end;display:flex;gap:32px;justify-content:space-between;margin-bottom:46px}
.recipes-head p{color:var(--soft);font-size:12px;line-height:1.8;max-width:42ch;text-align:right}
.recipe-grid{display:grid;gap:3px;grid-template-columns:repeat(2,1fr)}
.recipe{background:var(--surface);display:grid;grid-template-columns:42% 58%;min-height:320px;overflow:hidden}
.recipe:last-child{grid-column:1/-1;grid-template-columns:30% 70%}
.recipe-art{align-items:center;background:#111;display:flex;justify-content:center;overflow:hidden;padding:22px;position:relative}
.recipe-art::before{border:1px solid rgba(255,255,255,.08);content:'';inset:14px;position:absolute}
.recipe-art img{max-height:240px;object-fit:contain;position:relative;width:100%}
.recipe-copy{display:flex;flex-direction:column;padding:32px}
.recipe-no{color:var(--amber);font-size:10px;letter-spacing:.18em;margin-bottom:24px;text-transform:uppercase}
.recipe h3{font-family:var(--serif);font-size:31px;font-weight:400;letter-spacing:-.02em;margin-bottom:12px}
.recipe p{color:var(--mid);font-size:12.5px;line-height:1.75}
.recipe-model{border-top:.5px solid var(--rule);color:var(--meta);font-size:9px;letter-spacing:.14em;margin-top:auto;padding-top:18px;text-transform:uppercase}
.quickstart{padding-bottom:96px;padding-top:96px}
.quick-grid{display:grid;gap:56px;grid-template-columns:1fr 1fr;margin-top:48px}
.code{background:var(--dark);color:rgba(255,255,255,.88);font-size:13px;line-height:1.95;overflow:auto;padding:30px}
.code .prompt{color:var(--amber)}
.code .comment{color:rgba(255,255,255,.34)}
.quick-copy{color:var(--mid);font-size:13px;line-height:1.85}
.quick-copy h3{color:var(--ink);font-family:var(--serif);font-size:28px;font-weight:400;margin-bottom:16px}
.quick-copy p+p{margin-top:16px}
.quick-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.provenance{background:var(--amber);color:var(--ink);padding:24px 0}
.provenance .shell{align-items:center;display:flex;font-size:11px;gap:24px;justify-content:space-between;letter-spacing:.08em;line-height:1.6}
.provenance a{border-bottom:1px solid rgba(10,10,10,.35);white-space:nowrap}
.foot{border-top:.5px solid var(--rule);color:var(--soft);display:flex;font-size:11px;justify-content:space-between;letter-spacing:.14em;padding:40px 48px;text-transform:uppercase}
.foot a:hover{color:var(--amber)}

@media(max-width:900px){
  .masthead-inner{grid-template-columns:1fr auto;padding:10px 24px}.masthead-r{display:none}
  .project-card{grid-template-columns:1fr}.project-copy{min-height:540px}.project-media{min-height:480px}
  .proof{grid-template-columns:repeat(3,1fr)}.proof-item:nth-child(4){border-left:0}
  .story-grid{grid-template-columns:1fr}.recipe-grid{grid-template-columns:1fr}.recipe:last-child{grid-column:auto;grid-template-columns:42% 58%}
  .quick-grid{grid-template-columns:1fr}.principles{grid-template-columns:repeat(2,1fr)}.principle:nth-child(3){border-left:0;border-top:.5px solid var(--rule)}.principle:nth-child(4){border-top:.5px solid var(--rule)}
}
@media(max-width:720px){
  .nav{align-items:flex-start;flex-direction:column;gap:14px;padding:18px 20px}.nav-l{font-size:25px}.nav-r{display:flex;flex-wrap:wrap;font-size:9px;gap:10px 16px}.nav-r a{margin-left:0}
  .shell{padding-left:20px;padding-right:20px}.hero,.oa-hero{padding-top:58px}.catalog{padding-bottom:64px}
  .project-copy{min-height:500px;padding:34px 26px}.project-no{margin-bottom:48px}.project-cta{width:100%}.project-media{min-height:330px;padding:18px}
  .proof{grid-template-columns:1fr 1fr}.proof-item{border-top:.5px solid var(--rule)}.proof-item:nth-child(odd){border-left:0}
  .motion-wrap,.recipes{padding:64px 0}.motion-head,.recipes-head{align-items:flex-start;flex-direction:column}.motion-head p,.recipes-head p{text-align:left}.motion-stage{padding:10px}
  .story,.quickstart{padding-bottom:64px;padding-top:64px}.flow-line{grid-template-columns:1fr}.recipe,.recipe:last-child{grid-template-columns:1fr}.recipe-art{min-height:260px}
  .provenance .shell,.foot{align-items:flex-start;flex-direction:column}.foot{gap:14px;padding:30px 20px}.principles{grid-template-columns:1fr}.principle{border-left:0;border-top:.5px solid var(--rule)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.pulse{animation:none}}