:root { --ink:#080a09; --paper:#f2f1e9; --lime:#b8ef00; --muted:rgba(242,241,233,.62); --line:rgba(242,241,233,.18); --mono:"Cascadia Mono","SFMono-Regular",Consolas,monospace; --sans:"Avenir Next","Segoe UI",Arial,sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--paper); background:var(--ink); font-family:var(--sans); line-height:1.55; overflow-x:hidden; }
body::before { position:fixed; inset:0; z-index:20; pointer-events:none; content:""; opacity:.04; 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='.9' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
a { color:inherit; }
.skip-link { position:fixed; top:1rem; left:1rem; z-index:100; padding:.7rem 1rem; color:var(--ink); background:var(--lime); transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:fixed; inset:0 0 auto; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:1.25rem clamp(1.25rem,4vw,4rem); transition:background 180ms ease,backdrop-filter 180ms ease; }
.site-header.is-scrolled { background:rgba(8,10,9,.82); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; gap:.75rem; font:500 .76rem var(--mono); letter-spacing:.07em; text-decoration:none; text-transform:uppercase; }
.brand img { width:42px; height:42px; object-fit:cover; border-radius:50%; }
nav { display:flex; align-items:center; gap:clamp(1rem,3vw,2.4rem); }
nav a { font:400 .72rem var(--mono); letter-spacing:.04em; text-decoration:none; text-transform:uppercase; }
.nav-contact { padding:.62rem 1rem; color:var(--ink); background:var(--lime); border-radius:2rem; }
.eyebrow, .story-index, .studio-facts dt, footer { font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.eyebrow { color:var(--muted); }
.signal { display:inline-block; width:.52rem; height:.52rem; margin-right:.55rem; background:var(--lime); border-radius:50%; box-shadow:0 0 0 6px rgba(184,239,0,.1); }
.about-hero { position:relative; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; min-height:100svh; padding:9rem clamp(1.25rem,7vw,8rem) 5rem; overflow:hidden; }
.about-hero::before { position:absolute; inset:0; content:""; background:radial-gradient(circle at 75% 45%,rgba(184,239,0,.12),transparent 26%); }
.about-copy { position:relative; z-index:2; }
h1,h2,p { margin-top:0; }
h1,h2 { margin-bottom:1.6rem; font-weight:500; line-height:.92; letter-spacing:-.065em; }
h1 { max-width:11ch; font-size:clamp(3.8rem,8vw,8.3rem); }
h2 { font-size:clamp(3.8rem,8vw,8rem); }
em { color:var(--lime); font-family:Georgia,serif; font-weight:400; }
.about-intro { max-width:37rem; color:var(--muted); font-size:clamp(1.05rem,1.5vw,1.35rem); }
.about-orbit { position:relative; display:grid; place-items:center; width:min(39vw,560px); aspect-ratio:1; justify-self:end; }
.about-orbit img { position:relative; z-index:2; width:44%; border-radius:50%; filter:drop-shadow(0 0 60px rgba(184,239,0,.18)); }
.orbit-ring { position:absolute; border:1px solid rgba(184,239,0,.35); border-radius:50%; transform:rotate(-24deg); }
.orbit-ring::after { position:absolute; top:48%; left:-.3rem; width:.6rem; height:.6rem; content:""; background:var(--lime); border-radius:50%; box-shadow:0 0 20px var(--lime); }
.orbit-ring-one { inset:9% 0; }
.orbit-ring-two { inset:0 -11%; opacity:.45; }
.about-story { display:grid; grid-template-columns:.55fr 1.25fr .8fr; gap:clamp(2rem,6vw,7rem); padding:clamp(5rem,10vw,9rem) clamp(1.25rem,7vw,8rem); color:var(--ink); background:var(--paper); }
.story-founder { align-self:start; }
.story-founder img { display:block; width:100%; aspect-ratio:1; margin-bottom:1.35rem; object-fit:cover; object-position:center; border-radius:50%; }
.story-index { align-self:start; padding-top:.5rem; border-top:1px solid currentColor; }
.story-copy p { margin-bottom:2rem; font-size:clamp(1.35rem,2.5vw,2.35rem); line-height:1.3; letter-spacing:-.025em; }
.studio-facts { margin:0; }
.studio-facts div { padding:1rem 0 1.2rem; border-top:1px solid rgba(8,10,9,.3); }
.studio-facts dt { margin-bottom:.45rem; color:rgba(8,10,9,.55); }
.studio-facts dd { margin:0; font-size:.95rem; }
.about-contact { padding:clamp(6rem,12vw,11rem) clamp(1.25rem,7vw,8rem); text-align:center; }
.about-contact h2 { max-width:11ch; margin:2rem auto 3rem; }
.about-contact > a { display:inline-block; padding:1rem 1.2rem; font:.8rem var(--mono); letter-spacing:.05em; text-decoration:none; text-transform:uppercase; border:1px solid var(--lime); }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem 1.5rem; padding:2rem clamp(1.25rem,4vw,4rem); color:var(--muted); border-top:1px solid var(--line); }
footer p { margin:0; }
footer a { text-decoration:none; }
@media (max-width:850px) {
  nav a:not(.nav-contact) { display:none; }
  .about-hero { grid-template-columns:1fr; padding-top:9rem; }
  .about-orbit { position:absolute; right:-18%; bottom:-4%; width:70vw; opacity:.32; }
  .about-story { grid-template-columns:1fr; }
  .story-founder { width:min(70vw,19rem); }
  .story-index { margin-bottom:1rem; }
}
@media (max-width:520px) {
  .brand span { display:none; }
  h1 { font-size:clamp(3.35rem,16vw,5.4rem); }
  .about-intro { max-width:88%; }
  footer { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }