/* Bamboo Labs LLC - studio index. Editorial art direction. Legal pages keep legal.css. */
@font-face { font-family:'Share Tech Mono'; src:url('../fonts/f1.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --bg:#08090b; --bg2:#0d0f12; --panel:#101317; --panel2:#14181d;
  --ink:#f3f1ea; --ink2:#b1b3a9; --faint:#73766c; --line:rgba(243,241,234,.11); --line2:rgba(243,241,234,.22);
  --acid:#00ff88; --acid2:#8affc4; --acid-deep:#0f7a3f;
  --disp:'Space Grotesk',system-ui,sans-serif; --sans:'Space Grotesk',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif; --mono:'Share Tech Mono',ui-monospace,monospace;
  --maxw:1240px; --gut:clamp(1.1rem,4vw,2.5rem);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; letter-spacing:.1px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:var(--acid); color:#04120a;}

/* texture + ambient */
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.glowfield{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(760px 520px at 82% -6%, rgba(0,255,136,.08), transparent 62%),
             radial-gradient(680px 520px at 8% 8%, rgba(0,255,136,.05), transparent 60%);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); position:relative; z-index:2;}
.mono{font-family:var(--mono); letter-spacing:1px;}

/* header */
.top{position:sticky; top:0; z-index:40; background:#08090b; background:rgba(8,9,11,.97); backdrop-filter:blur(13px) saturate(1.2);
  border-bottom:1px solid var(--line);}
.top-in{display:flex; align-items:center; gap:1.4rem; height:64px;}
.wordmark{display:flex; align-items:center; gap:.55rem; margin-right:auto; font-family:var(--disp); font-weight:700;
  letter-spacing:-.2px; font-size:1.05rem;}
.wordmark .mk{width:26px; height:26px; filter:drop-shadow(0 0 7px rgba(0,255,136,.5));}
.wordmark em{font-style:normal; color:var(--acid);}
.top nav a{font-family:var(--mono); font-size:.76rem; letter-spacing:1px; color:var(--ink2); text-transform:uppercase; transition:color .2s;}
.top nav a:hover{color:var(--acid);}
.top .loc{font-family:var(--mono); font-size:.72rem; letter-spacing:1px; color:var(--faint); text-transform:uppercase; display:flex; align-items:center; gap:.4rem;}
.top .loc .d{width:6px; height:6px; border-radius:50%; background:var(--acid); box-shadow:0 0 8px var(--acid); animation:bl 2.6s infinite;}
@keyframes bl{0%,100%{opacity:1} 50%{opacity:.3}}
@media (max-width:760px){ .top nav, .top .loc{display:none;} }

/* hero */
.hero{padding:clamp(3.4rem,8vw,7rem) 0 clamp(2.4rem,5vw,4rem);}
.metarow{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--mono);
  font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--faint);
  padding-bottom:1.4rem; border-bottom:1px solid var(--line); margin-bottom:clamp(1.8rem,4vw,3rem);}
.metarow b{color:var(--ink2); font-weight:400;}
.hero h1{font-family:var(--disp); font-weight:700; letter-spacing:-1.5px; line-height:.98;
  font-size:clamp(2.5rem,8vw,6rem); margin:0; max-width:17ch; color:var(--ink);}
.hero h1 .amp{color:var(--faint); font-weight:400;}
.hero h1 .cx{font-family:var(--serif); font-style:italic; font-weight:400; color:var(--acid);
  letter-spacing:-1px; text-shadow:0 0 40px rgba(0,255,136,.35);}
.hero .sub{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.2rem,4vw,3rem); align-items:end; margin-top:clamp(1.6rem,4vw,2.6rem);}
@media (max-width:720px){ .hero .sub{grid-template-columns:1fr;} }
.hero .sub p{color:var(--ink2); font-size:clamp(1rem,1.5vw,1.14rem); margin:0; max-width:52ch;}
.hero .jump{display:flex; align-items:center; justify-content:flex-end; gap:1rem; flex-wrap:wrap;}
@media (max-width:720px){ .hero .jump{justify-content:flex-start;} }
.hero .jump .n{font-family:var(--serif); font-style:italic; font-size:2.6rem; color:var(--ink); line-height:1;}
.hero .jump a{font-family:var(--mono); font-size:.8rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink2);
  border:1px solid var(--line2); padding:.6rem 1rem; border-radius:999px; transition:.2s;}
.hero .jump a:hover{color:var(--acid); border-color:var(--acid); transform:translateY(-2px);}

/* marquee */
.marquee{margin-top:clamp(2rem,5vw,3.4rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:.7rem 0;}
.marquee .run{display:inline-block; white-space:nowrap; animation:scroll 34s linear infinite; font-family:var(--disp); font-weight:500;
  font-size:1rem; color:var(--faint); letter-spacing:.3px;}
.marquee .run span{display:inline-block; margin:0 1.1rem;}
@media (max-width:640px){ .marquee{display:none;} }
.marquee .run .s{color:var(--acid-deep);}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* section head */
.sec{padding:clamp(2.6rem,6vw,4.6rem) 0;}
.label{font-family:var(--mono); font-size:.74rem; letter-spacing:2px; text-transform:uppercase; color:var(--acid); display:flex; align-items:center; gap:.6rem;}
.label::before{content:""; width:26px; height:1px; background:var(--acid); display:inline-block;}
.work-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1.6rem,4vw,2.6rem);}
.filters{display:flex; gap:.2rem .4rem; flex-wrap:wrap;}
.chip{font-family:var(--mono); font-size:.74rem; letter-spacing:.5px; text-transform:lowercase; color:var(--faint);
  background:none; border:0; padding:.3rem .55rem; cursor:pointer; transition:.18s; border-bottom:1px solid transparent;}
.chip:hover{color:var(--ink);}
.chip.active{color:var(--ink); border-bottom-color:var(--acid);}

/* featured */
.feat{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.2rem,3vw,2.4rem); align-items:center;
  border-top:1px solid var(--line2); padding-top:clamp(1.2rem,3vw,2rem);}
@media (max-width:840px){ .feat{grid-template-columns:1fr;} }
.feat .frame{display:block; position:relative; width:100%; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel);}
.feat .frame::before{content:""; display:block; padding-top:62.5%;}
.feat .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.feat:hover .frame img{transform:scale(1.04);}
.feat .frame::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); pointer-events:none;}
.feat .meta{display:flex; flex-direction:column; justify-content:center;}
.feat .idx{font-family:var(--serif); font-style:italic; font-size:clamp(2.4rem,6vw,4rem); line-height:.8; color:var(--ink); margin-bottom:.8rem;}
.feat .idx b{color:var(--acid); font-weight:400;}
.feat h3{font-family:var(--disp); font-weight:700; letter-spacing:-.5px; font-size:clamp(1.6rem,3vw,2.3rem); margin:0 0 .2rem;}
.feat .u{font-family:var(--mono); font-size:.78rem; color:var(--acid); letter-spacing:.5px; margin-bottom:.9rem;}
.feat p{color:var(--ink2); font-size:.96rem; margin:0 0 1.1rem; max-width:46ch;}
.feat .tags{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.2rem;}
.go{font-family:var(--mono); font-size:.82rem; letter-spacing:1px; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:.5rem; width:max-content;}
.go .ar{color:var(--acid); transition:transform .25s;}
.feat:hover .go .ar, .card:hover .go .ar{transform:translateX(5px);}
.tag{font-family:var(--mono); font-size:.66rem; letter-spacing:.5px; text-transform:uppercase; color:var(--ink2); border:1px solid var(--line2); padding:.16rem .5rem; border-radius:4px;}
.statustag{font-family:var(--mono); font-size:.66rem; letter-spacing:1px; text-transform:uppercase; padding:.18rem .5rem; border-radius:999px;}
.statustag.live{color:var(--acid); border:1px solid rgba(0,255,136,.4);}
.statustag.soon{color:#ffcf4d; border:1px solid rgba(255,204,0,.4);}
.statustag.store{color:var(--ink2); border:1px solid var(--line2);}

/* grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,1.7rem); margin-top:clamp(1.6rem,4vw,2.6rem);}
@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid{grid-template-columns:1fr;} }
.card{position:relative; display:flex; flex-direction:column; border-top:1px solid var(--line2); padding-top:1rem;}
.card .chead{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.7rem;}
.card .num{font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--faint);}
.card:hover .num{color:var(--acid);}
.card .frame{display:block; position:relative; width:100%; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel);}
.card .frame::before{content:""; display:block; padding-top:62.5%;}
.card .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s cubic-bezier(.2,.7,.2,1); filter:saturate(1.02);}
.card:hover .frame img{transform:scale(1.05);}
.card.ph .frame{background:radial-gradient(circle at 60% 35%, rgba(0,255,136,.1), transparent 55%), var(--panel);}
.card.ph .frame .mk{position:absolute; inset:0; margin:auto; width:40px; height:40px; opacity:.55;}
.card .cbody{padding:.9rem 0 .2rem;}
.card .ct{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;}
.card h3{font-family:var(--disp); font-weight:700; letter-spacing:-.3px; font-size:1.08rem; margin:0; transition:color .2s;}
.card:hover h3{color:var(--acid);}
.card .u{font-family:var(--mono); font-size:.68rem; color:var(--faint); letter-spacing:.3px; white-space:nowrap;}
.card .d{color:var(--ink2); font-size:.86rem; line-height:1.5; margin:.5rem 0 .8rem;}
.card .tags{display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.85rem;}
.card .go{font-size:.74rem;}
.card a.cover{position:absolute; inset:0; z-index:3;}
.card.hide, .feat.hide{display:none;}

/* reveal (no pop-in: content is visible on load; the class is a no-op kept for markup stability) */
.rv{opacity:1; transform:none;}

/* about */
.about{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(1.4rem,4vw,3.4rem); border-top:1px solid var(--line2); padding-top:clamp(1.6rem,4vw,2.6rem);}
@media (max-width:760px){ .about{grid-template-columns:1fr;} }
.about .big{font-family:var(--disp); font-weight:500; letter-spacing:-.6px; font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.25; margin:0 0 1.2rem;}
.about .big .i{font-family:var(--serif); font-style:italic; color:var(--acid);}
.about p{color:var(--ink2); font-size:.94rem; max-width:58ch;}
.about .facts{font-family:var(--mono); font-size:.8rem;}
.about .facts .f{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line);}
.about .facts .f .k{color:var(--faint); letter-spacing:1px; text-transform:uppercase; font-size:.7rem;}
.about .facts .f .v{color:var(--ink);}
.about .facts .f .v a:hover{color:var(--acid);}
.about .facts .btn{display:inline-flex; align-items:center; gap:.5rem; margin-top:1.3rem; font-family:var(--mono);
  font-size:.82rem; letter-spacing:1px; text-transform:uppercase; color:#04120a; background:var(--acid);
  padding:.7rem 1.2rem; border-radius:8px; transition:.2s;}
.about .facts .btn:hover{transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(0,255,136,.6);}

/* footer */
footer{margin-top:clamp(3rem,7vw,5rem); border-top:1px solid var(--line); padding:clamp(2rem,5vw,3.4rem) 0 2.4rem;}
footer .huge{font-family:var(--disp); font-weight:700; letter-spacing:-2px; font-size:clamp(2.4rem,11vw,7.5rem);
  line-height:.9; color:transparent; -webkit-text-stroke:1px var(--line2); margin:0 0 1.6rem;}
footer .huge em{font-style:normal; -webkit-text-stroke:1px var(--acid-deep);}
footer .fin{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.74rem; color:var(--faint); letter-spacing:.5px;}
footer .flinks a{color:var(--ink2); margin-right:1.1rem;}
footer .flinks a:hover{color:var(--acid);}
footer .fin .prompt{color:var(--acid);}

@media (prefers-reduced-motion:reduce){
  .marquee .run{animation:none;} .rv{opacity:1; transform:none; transition:none;}
  .top .loc .d{animation:none;}
}