*,*::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-page{background-color:var(--cream);overflow-x:hidden}
.oa-page a:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.oa-page .masthead,.oa-page .nav{position:relative;z-index:5}
.oa-hero{column-gap:72px;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);isolation:isolate;padding-bottom:0;padding-top:82px;position:relative}
.oa-hero::before{background-image:linear-gradient(rgba(10,10,10,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,10,.035) 1px,transparent 1px);background-size:44px 44px;content:'';inset:0 calc(50% - 50vw);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);pointer-events:none;position:absolute;z-index:-2}
.oa-hero::after{background:radial-gradient(circle,rgba(240,154,26,.22) 0 8%,rgba(240,154,26,.08) 8% 32%,transparent 68%);content:'';filter:blur(2px);height:520px;pointer-events:none;position:absolute;right:-250px;top:-100px;width:520px;z-index:-1}
.oa-hero .eyebrow{grid-column:1/-1}
.oa-title{font-family:var(--serif);font-size:clamp(70px,9.5vw,142px);grid-column:1;grid-row:2/4;letter-spacing:-.05em;line-height:.84;margin:0;max-width:8.2ch;text-wrap:balance}
.oa-title em{color:var(--amber);font-style:italic}
.oa-hero .lede{align-self:end;grid-column:2;grid-row:2;padding-bottom:24px}
.oa-actions{align-self:start;display:flex;flex-wrap:wrap;gap:12px;grid-column:2;grid-row:3;margin-top:0}
.button{border:.5px solid var(--rule-strong);font-size:11px;font-weight:500;letter-spacing:.16em;padding:15px 20px;text-transform:uppercase;transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.button:hover{transform:translateY(-2px)}
.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{background:var(--dark);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 70px rgba(20,16,10,.16);color:#fff;display:grid;grid-column:1/-1;grid-template-columns:repeat(5,1fr);margin-top:72px;position:relative;transform:translateY(34px);z-index:2}
.proof::before{background:var(--amber);content:'';height:3px;left:-1px;position:absolute;right:-1px;top:-1px}
.proof-item{border-left:.5px solid rgba(255,255,255,.12);padding:26px 22px;position:relative}
.proof-item:first-child{border-left:0}
.proof-value{font-family:var(--serif);font-size:32px;line-height:1;margin-bottom:9px}
.proof-value::before{background:var(--amber);border-radius:50%;content:'';display:inline-block;height:5px;margin:0 10px 5px 0;width:5px}
.proof-key{color:rgba(255,255,255,.46);font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.motion-wrap{background:var(--dark);color:#fff;padding:124px 0 92px;position:relative}
.motion-wrap::before{background:linear-gradient(90deg,transparent 0 49.9%,rgba(255,255,255,.035) 50%,transparent 50.1%);content:'';inset:0;pointer-events:none;position:absolute}
.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,.18);box-shadow:0 36px 90px rgba(0,0,0,.42);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::after{border:1px solid var(--amber);border-bottom:0;border-right:0;content:'';height:28px;left:10px;position:absolute;top:10px;width:28px}
.motion-stage img{border:.5px solid rgba(255,255,255,.12);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:110px;padding-top:110px;position:relative}
.story::before{background:var(--amber);content:'';height:1px;left:48px;position:absolute;top:0;width:72px}
.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:rgba(255,255,255,.7);border:.5px solid var(--rule-strong);box-shadow:12px 12px 0 rgba(240,154,26,.12);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;position:relative;text-transform:uppercase}
.flow-node:not(:last-child)::after{color:var(--amber);content:'\2192';position:absolute;right:-11px;top:50%;transform:translate(50%,-50%);z-index:2}
.flow-node.signal{background:var(--amber);border-color:var(--amber)}
.flow-arrow{display:none}
.recipes{background:#e7e2dc;border-bottom:.5px solid var(--rule-strong);border-top:.5px solid var(--rule-strong);padding:100px 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{border:1px solid rgba(10,10,10,.12);display:grid;gap:1px;grid-template-columns:repeat(2,1fr)}
.recipe{background:var(--surface);display:grid;grid-template-columns:42% 58%;min-height:320px;overflow:hidden;position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.recipe:hover{box-shadow:0 24px 60px rgba(30,24,16,.12);transform:translateY(-4px);z-index:2}
.recipe::after{background:var(--amber);content:'';height:2px;left:0;position:absolute;right:100%;top:0;transition:right .4s var(--ease)}
.recipe:hover::after{right:0}
.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{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:24px 24px;border:1px solid rgba(255,255,255,.08);content:'';inset:14px;position:absolute}
.recipe-art img{filter:drop-shadow(0 18px 24px rgba(0,0,0,.4));max-height:240px;object-fit:contain;position:relative;transition:transform .55s var(--ease);width:100%}
.recipe:hover .recipe-art img{transform:scale(1.04) rotate(-1deg)}
.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:110px;padding-top:110px}
.quick-grid{border:1px solid var(--rule-strong);display:grid;gap:0;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;min-height:290px;overflow:auto;padding:52px 38px 38px;position:relative}
.code::before{border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.35);content:'LOCAL SESSION / 01';font-size:9px;left:0;letter-spacing:.18em;padding:12px 18px;position:absolute;right:0;top:0}
.code .prompt{color:var(--amber)}
.code .comment{color:rgba(255,255,255,.34)}
.quick-copy{background:rgba(255,255,255,.65);color:var(--mid);font-size:13px;line-height:1.85;padding:38px}
.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}
  .oa-hero{display:block;padding-bottom:0}.oa-title{margin-bottom:36px;max-width:9.4ch}.oa-hero .lede{padding-bottom:0}.oa-actions{margin-top:34px}
  .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 rgba(255,255,255,.12)}.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}.story::before{left:20px}.flow-line{grid-template-columns:1fr}.flow-node:not(:last-child)::after{bottom:-13px;content:'\2193';left:50%;right:auto;top:auto;transform:translate(-50%,50%)}.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}.button,.recipe,.recipe-art img{transition:none}}