/* Orange Robot Labs — labs.orangerobot.com
   Visual source of truth: labs-landing/mockup.html (2026-07-17). */

/* self-hosted fonts (latin subsets). Fraunces files are variable (opsz+wght),
   one file covers 300 and 600. */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#0A0A0B;
  --ink:#EDEAE4;
  --ink-dim:#8B877F;
  --ink-faint:#3A3835;
  --orange:#FF5C00;
  --indigo:#161329;
  --panel:#0F0E10;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--orange);color:var(--bg)}

.mono{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* film grain */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:50;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-2%,3%)}
  40%{transform:translate(3%,-2%)}
  60%{transform:translate(-3%,-3%)}
  80%{transform:translate(2%,2%)}
}

/* nav */
nav{padding:28px 0}
nav .wrap{display:flex;justify-content:space-between;align-items:baseline}
nav a{color:var(--ink-dim);text-decoration:none;transition:color .3s}
nav a:hover,nav a:focus-visible{color:var(--orange)}
nav a:focus-visible{outline:none;text-decoration:underline;text-underline-offset:4px}
.mark{color:var(--ink)}
.mark::before{content:"● ";color:var(--orange);font-size:9px;vertical-align:2px}

/* hero */
.hero{padding:clamp(80px,14vh,160px) 0 clamp(70px,12vh,140px)}
.kicker{margin-bottom:36px;display:block}
h1{
  font-family:'Fraunces',serif;
  font-optical-sizing:auto;
  font-weight:300;
  /* the 13.2vw term keeps "worn at the edges." on one line below ~530px
     (two-line break is intentional at all sizes); above that it's inert */
  font-size:min(clamp(3rem,9vw,7.5rem),13.2vw - 5px);
  line-height:.98;
  letter-spacing:-.02em;
}
h1 em{font-style:italic;font-weight:400}
.hero p{
  margin-top:44px;max-width:55ch;color:var(--ink-dim);font-size:18px;
}

/* works header */
.works-head{padding:24px 0;border-top:1px solid var(--ink-faint)}
.works-head .wrap{display:flex;justify-content:space-between}
.works-head .num{color:var(--orange)}

/* bebop panel */
.piece{margin:32px 0 0}
.piece .wrap{padding:0} /* panel bleeds slightly wider */
.canvas{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  background:
    linear-gradient(180deg,var(--indigo) 0%,#0B0A14 45%,#0A0A0B 72%);
  padding:clamp(48px,8vw,110px) clamp(24px,6vw,90px) clamp(56px,9vw,120px);
  isolation:isolate;
}
.horizon{
  position:absolute;left:0;right:0;bottom:0;height:38%;
  background:radial-gradient(120% 100% at 50% 108%,rgba(255,92,0,.32) 0%,rgba(255,92,0,.08) 42%,transparent 70%);
  transition:opacity .8s ease;
  opacity:.75;pointer-events:none;
}
.canvas:hover .horizon{opacity:1}
.horizon::after{
  content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,92,0,.5),transparent);
}
/* shuttle traffic */
.shuttle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--ink);opacity:0;pointer-events:none;
}
.s1{top:14%;left:22%;animation:blink 7s ease-in-out infinite .5s}
.s2{top:9%;left:64%;animation:blink 9s ease-in-out infinite 3s}
.s3{top:20%;left:81%;width:2px;height:2px;animation:blink 11s ease-in-out infinite 6s}
@keyframes blink{0%,100%{opacity:0}12%{opacity:.7}24%{opacity:.15}36%{opacity:.6}50%{opacity:0}}

.piece-meta-line{display:flex;gap:16px;margin-bottom:40px}
.piece-meta-line .num{color:var(--orange)}
h2{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(3.5rem,11vw,9rem);
  line-height:.95;
  letter-spacing:-.02em;
}
.wt{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-dim);
  vertical-align:super;margin-left:12px;font-weight:400;
  border:1px solid var(--ink-faint);border-radius:99px;padding:4px 10px;
  white-space:nowrap;
}
.piece-body{
  display:grid;grid-template-columns:minmax(0,62ch) 1fr;gap:clamp(32px,6vw,96px);
  margin-top:56px;position:relative;z-index:1;
}
.prose p{color:var(--ink);opacity:.92}
.prose p+p{margin-top:1.4em}
.prose .ledger{color:var(--ink-dim)}
dl{align-self:start;display:grid;grid-template-columns:auto 1fr;gap:14px 24px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
dt{color:var(--ink-faint)}
dd{color:var(--ink-dim)}
dd.coord{color:var(--ink)}

/* ghost frames */
.ghost-row{margin-top:24px}
.ghosts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0 0}
.ghost{
  border:1px dashed var(--ink-faint);border-radius:4px;
  padding:56px 32px;display:flex;flex-direction:column;gap:10px;
  min-height:180px;justify-content:flex-end;
}
.ghost .sub{color:var(--ink-faint);letter-spacing:.15em;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase}

/* footer */
footer{margin-top:clamp(80px,14vh,160px);border-top:1px solid var(--ink-faint);padding:40px 0 56px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline}
footer p{color:var(--ink-dim);font-size:14px;max-width:44ch}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-faint);transition:border-color .3s,color .3s}
footer a:hover,footer a:focus-visible{color:var(--orange);border-color:var(--orange);outline:none}
.copyright{font-size:11px;letter-spacing:.12em}

/* scroll-in */
.fade{opacity:0;transform:translateY(14px);transition:opacity .6s ease-out,transform .6s ease-out}
.fade.in{opacity:1;transform:none}

@media (max-width:700px){
  .piece-body{grid-template-columns:1fr}
  .ghosts{grid-template-columns:1fr}
  dl{gap:10px 18px}
  .wt{margin-left:6px;padding:3px 8px}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .shuttle{animation:none;opacity:0}
  .fade{opacity:1;transform:none;transition:none}
  .horizon{transition:none}
}