/* laurencohn.me: shared styles (index + company pages). Dark microscope field. */
:root{
  --field:#05070a; --paper:rgba(12,17,22,.78); --paper-solid:#0c1116; --ink:#eef2f4; --ink2:#9aa7b1; --rule:rgba(255,255,255,.1);
  --gfp:#5dff9d; --gfp-ink:#8affba; --mag:#ff5fa2; --mag-ink:#ff8fbf; --iss:#e2b454; --iss-ink:#f0c86e;
  --tint:rgba(93,255,157,.1); --dark:#000;
  --serif:Fraunces,Georgia,"Times New Roman",serif; --sans:Manrope,"Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --nav-h:60px; --gut:16px; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--field);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0;letter-spacing:-.01em}
a{color:var(--gfp-ink)}
em{font-style:italic}
img,video{max-width:100%}
:focus-visible{outline:2px solid var(--gfp);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(var(--gut),4vw,40px)}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gfp);color:#04140b;padding:.5rem .8rem;border-radius:6px}
.skip:focus{left:8px}

/* ---------- 3D canvas + fallback field ---------- */
#helix{position:fixed;inset:0;width:100%;height:100%;height:100lvh;z-index:0;display:block;
  background:radial-gradient(60% 50% at 70% 40%,rgba(93,255,157,.10),transparent 70%),radial-gradient(40% 40% at 20% 80%,rgba(255,95,162,.08),transparent 70%),var(--field)}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,7,10,.82) 0%,rgba(5,7,10,.35) 42%,transparent 62%)}
@media (max-width:820px){.vignette{background:linear-gradient(180deg,transparent 0%,transparent 34%,rgba(5,7,10,.55) 58%,rgba(5,7,10,.88) 100%)}}
main,footer{position:relative;z-index:2}

/* ---------- sticky top bar ---------- */
.topbar{position:sticky;top:0;z-index:70;height:var(--nav-h);display:flex;align-items:center;gap:1rem;padding:0 clamp(var(--gut),3vw,32px);
  background:rgba(5,7,10,.55);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--rule)}
body.has-canvas .topbar{position:fixed;left:0;right:0}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:1.2rem;white-space:nowrap}
.brand svg{width:22px;height:22px}
.topbar .links{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.topbar .links a{color:var(--ink2);text-decoration:none;font-size:.92rem;font-weight:500}
.topbar .links a:hover,.topbar .links a[aria-current]{color:var(--ink)}
.hud{font-family:var(--mono);font-size:.72rem;color:var(--ink2);letter-spacing:.05em;display:flex;gap:.9rem;align-items:center;margin-left:1rem}
.hud b{color:var(--gfp);font-weight:500}
.hud .s-science{color:var(--gfp)}
.hud .s-people{color:var(--mag)}
.hud .s-both{color:var(--ink)}
.hud [data-hud="yr"]:not(:empty)::after{content:" ·";color:var(--ink2)}
.hud span:empty{display:none}
.cta{display:inline-flex;align-items:center;gap:.45rem;background:var(--gfp);color:#04140b !important;font-weight:700;font-size:.9rem;padding:.5rem .95rem;border-radius:999px;text-decoration:none;white-space:nowrap}
.cta.ghost{background:transparent;color:var(--ink) !important;border:1px solid var(--rule)}
.cta svg{width:16px;height:16px}
.burst-btn{appearance:none;border:1px solid var(--rule);background:rgba(255,255,255,.04);color:var(--ink);width:44px;height:44px;border-radius:50%;display:none;place-items:center;cursor:pointer;margin-left:auto;position:relative;z-index:61}
.burst-btn svg{width:22px;height:22px;transition:transform .45s cubic-bezier(.2,.9,.2,1.2)}
.burst-btn[aria-expanded="true"] svg{transform:rotate(135deg)}
.burst-btn[aria-expanded="true"]{background:var(--gfp);color:#04140b;border-color:var(--gfp)}
@media (max-width:900px){
  .topbar .links,.hud{display:none}
  .burst-btn{display:grid}
}

/* ---------- explodable menu ---------- */
.burst{position:fixed;inset:0;z-index:60;pointer-events:none;visibility:hidden}
.burst.open{pointer-events:auto;visibility:visible}
.burst .veil{position:absolute;inset:0;background:rgba(3,5,7,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .35s}
.burst.open .veil{opacity:1}
.burst .sheet{position:absolute;inset:var(--nav-h) 0 0 0;overflow-y:auto;padding:1.2rem var(--gut) calc(2rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:1.4rem}
.burst h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);margin:0 0 .6rem}
.burst .contacts{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.burst .contacts a{display:flex;align-items:center;gap:.6rem;padding:.85rem .9rem;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--rule);color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;min-height:52px}
.burst .contacts a.primary{grid-column:1/-1;background:var(--gfp);color:#04140b;border-color:var(--gfp)}
.burst .contacts svg{width:20px;height:20px;flex:none}
.burst .ask{font-size:.95rem;color:var(--ink);background:var(--tint);border:1px solid rgba(93,255,157,.25);border-radius:14px;padding:.8rem .95rem;margin:0}
.burst .ask b{color:var(--gfp)}
.burst ol{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.burst ol::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--gfp),var(--mag),var(--gfp),var(--mag),#fff)}
.burst li a{display:flex;align-items:baseline;gap:.7rem;padding:.55rem 0 .55rem 1rem;color:var(--ink);text-decoration:none;position:relative;min-height:44px}
.burst li a::before{content:"";position:absolute;left:-17px;top:1.05rem;width:10px;height:10px;border-radius:50%;background:var(--c,var(--gfp));box-shadow:0 0 12px var(--c,var(--gfp))}
.burst li .y{font-family:var(--mono);font-size:.72rem;color:var(--ink2);flex:none;width:6.4rem}
.burst li .t{font-weight:600}
/* the "explosion": every item flies out from the button with a staggered spring */
.burst [data-pop]{opacity:0;transform:translate(var(--dx,40vw),var(--dy,-40px)) scale(.3) rotate(var(--rot,8deg));transition:transform .55s cubic-bezier(.2,1.25,.3,1),opacity .3s;transition-delay:calc(var(--i,0) * 28ms)}
.burst.open [data-pop]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.burst [data-pop]{transform:none;transition:opacity .2s}}
@media (min-width:901px){.burst .sheet{max-width:440px;margin-left:auto;inset:var(--nav-h) 0 0 auto;background:rgba(8,11,14,.92);border-left:1px solid var(--rule)}}

/* ---------- glass cards over the scene ---------- */
.card{background:var(--paper);backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);border:1px solid var(--rule);border-radius:18px;padding:clamp(1.1rem,2.4vw,1.8rem)}
.tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--gfp));margin-bottom:.7rem}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.btn{display:inline-flex;align-items:center;gap:.5rem;appearance:none;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--rule);border-radius:999px;padding:.6rem 1rem;cursor:pointer;text-decoration:none;min-height:44px}
.btn:hover{border-color:var(--c,var(--gfp))}
.btn svg{width:16px;height:16px}

/* ---------- deep-dive content (shared with panels) ---------- */
.did{margin:1.1rem 0 0;padding:0;list-style:none}
.did li{position:relative;padding-left:1.3rem;margin:.4rem 0}
.did li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--c,var(--gfp))}
.result{display:inline-block;background:var(--tint);color:var(--gfp-ink);font-weight:600;padding:.25rem .6rem;border-radius:6px;font-size:.9rem;margin:.2rem 0 1rem}
.result.iss{color:var(--iss-ink);background:rgba(226,180,84,.12)}
.people{font-size:.9rem;color:var(--ink2);margin-top:1rem;line-height:1.5}
figure{margin:0;background:rgba(255,255,255,.03);border:1px solid var(--rule);border-radius:12px;padding:1rem 1rem .8rem}
figcaption{font-size:.85rem;color:var(--ink2);margin-top:.5rem;line-height:1.4}
figure svg{width:100%;height:auto;display:block}
figure img,figure video{width:100%;height:auto;display:block;border-radius:6px}
figure.flush{padding:0;overflow:hidden;background:var(--dark);border-color:transparent}
figure.flush figcaption{padding:.6rem .9rem .7rem}
.svgtxt{font-family:var(--sans);font-size:11px;fill:var(--ink2)}
.svgtxt.b{fill:var(--ink);font-weight:600}
.axis{stroke:rgba(255,255,255,.18)}
.grid{stroke:rgba(255,255,255,.1);stroke-dasharray:2 3}
.micro{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--dark);border-radius:10px;overflow:hidden}
.micro div{position:relative;aspect-ratio:1}
.micro img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.micro span{position:absolute;left:.6rem;top:.5rem;font-size:.75rem;font-weight:600;color:#eef2f4;background:rgba(0,0,0,.6);padding:.15rem .5rem;border-radius:4px}
.micro-wrap{padding:0;overflow:hidden;background:var(--dark);border-color:transparent}
.micro-wrap figcaption{padding:.6rem .9rem .7rem}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.strip figure{padding:0;overflow:hidden;background:var(--dark);border-color:transparent}
.strip figure img,.strip figure video{aspect-ratio:4/3;object-fit:cover;border-radius:0}
.strip figcaption{padding:.5rem .7rem .6rem;font-size:.8rem}
.yt{position:relative;aspect-ratio:16/9;background:var(--dark);border-radius:8px;overflow:hidden}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- footer ---------- */
footer{padding:3rem 0 calc(3rem + env(safe-area-inset-bottom));color:var(--ink2);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;border-top:1px solid var(--rule);padding-top:1.5rem}
footer a{color:var(--ink2)}
.topbar .links a{white-space:nowrap}
body[data-company] .hud{display:none}
@media (max-width:1100px){body[data-company] .topbar .links a:not(.cta){display:none}}

/* ---------- deep-dive flyout (assets/panels.js), every page ---------- */
.panel{padding:0;border:0;background:transparent;color:var(--ink);max-width:none;max-height:none;width:100%;height:100%;margin:0}
.panel::backdrop{background:rgba(2,3,5,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.panel-inner{position:absolute;top:0;right:0;bottom:0;width:min(760px,100%);background:#090d11;border-left:1px solid var(--rule);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(1.4rem + env(safe-area-inset-top)) clamp(var(--gut),4vw,44px) calc(3rem + env(safe-area-inset-bottom));animation:slidein .45s cubic-bezier(.2,.9,.2,1)}
@keyframes slidein{from{transform:translateX(40px);opacity:0}}
@media (max-width:820px){.panel-inner{top:auto;left:0;width:100%;height:92svh;border-left:0;border-top:1px solid var(--rule);border-radius:20px 20px 0 0;animation-name:slideup}}
@keyframes slideup{from{transform:translateY(60px);opacity:0}}
@media (prefers-reduced-motion:reduce){.panel-inner{animation:none}}
.panel-x{position:sticky;top:0;float:right;margin:-.4rem -.4rem 0 1rem;z-index:2;appearance:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:#111820;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.panel-x svg{width:20px;height:20px}
.panel h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:.5rem 0 1rem}
.panel .when{margin-bottom:.2rem}
.panel p{color:#d7dde2}
.panel .figs{display:grid;gap:1rem;margin:1.6rem 0}
.panel .sub{font-size:1.5rem;margin:2rem 0 .4rem}
.panel .btn{margin-top:1rem}

/* ---------- Lauren's portrait: nav avatar (every page) ---------- */
.brand .av{flex:none;width:34px;height:34px;border-radius:50%;padding:2px;background:conic-gradient(from 200deg,var(--gfp),var(--mag),var(--gfp))}
.brand .av img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--field)}

/* ---------- affiliation logos: soft white silhouettes; .native keeps brand colour ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin:0 0 .9rem}
.logos img{display:block;height:26px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1);opacity:.78}
.logos img.tall{height:36px}
.logos img.native{filter:none;opacity:1;height:28px}
.logos img.tall{height:46px}
.panel figure.shot img{max-height:min(70vh,640px);width:100%;object-fit:cover;object-position:50% 28%}