/* Lemma Labs — single viewport, black, one sentence. */

:root{
  --void:#000000;
  --ink:#EDEBE6;
  --dim:#7A7872;
  --faint:#2A2A28;
  --verify:#5FD3A6;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gut:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
@media (max-height:520px){body{overflow-y:auto}}

/* ambient lattice */
#lattice{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;display:block;pointer-events:none;
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(135% 105% at 66% 48%, transparent 30%, rgba(0,0,0,.22) 68%, rgba(0,0,0,.66) 100%),
    linear-gradient(100deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.88) 32%, rgba(0,0,0,.56) 49%, rgba(0,0,0,.16) 64%, transparent 78%);
}

/* frame */
.shell{
  position:relative;z-index:2;
  min-height:100svh;min-height:100dvh;
  display:flex;flex-direction:column;
  max-width:1180px;margin-inline:auto;
  padding-inline:var(--gut);
}

/* header */
.head{padding:clamp(20px,3.2vh,32px) 0}
.logo{
  display:inline-flex;align-items:center;gap:.58rem;
  text-decoration:none;color:var(--ink);
  opacity:0;animation:rise 1.1s .15s cubic-bezier(.16,.8,.3,1) forwards;
}
.turnstile{
  width:15px;height:15px;flex:none;
  color:var(--ink);opacity:.8;
  align-self:center;
  transition:color .5s ease,opacity .5s ease;
}
.wordmark{
  font-size:.96rem;font-weight:300;letter-spacing:.02em;
}
.logo:hover .turnstile{color:var(--verify);opacity:1}

/* the one sentence */
.stage{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(24px,6vh,72px);
  max-width:min(100%,20ch);
}
@media (min-width:700px){.stage{max-width:min(100%,640px)}}
@media (min-width:1060px){.stage{max-width:min(100%,960px)}}

.kicker{
  margin:0 0 clamp(14px,2.2vh,22px);
  font-size:clamp(.6rem,1.7vw,.66rem);font-weight:400;
  letter-spacing:clamp(.15em,.6vw,.24em);text-transform:uppercase;
  white-space:nowrap;
  color:var(--dim);
  opacity:0;animation:rise 1.3s .5s cubic-bezier(.16,.8,.3,1) forwards;
}
.mission{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,5.3vw,54px);
  line-height:1.14;letter-spacing:-.014em;
  hyphens:none;-webkit-hyphens:none;text-wrap:balance;
  opacity:0;animation:rise 1.6s .78s cubic-bezier(.16,.8,.3,1) forwards;
}
.mission .l1,.mission .l2{display:block}
.mission .l2{color:var(--dim)}

/* footer */
.foot{
  padding:clamp(18px,3vh,30px) 0;
  display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;
  align-items:center;justify-content:space-between;
  border-top:1px solid var(--faint);
  opacity:0;animation:rise 1.4s 1.15s cubic-bezier(.16,.8,.3,1) forwards;
}
.mark{margin:0;font-size:.72rem;color:var(--dim);letter-spacing:.03em}
.links{display:flex;gap:1.5rem}
.links a{
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;
  transition:color .35s ease;
}
.links a:hover,.links a:focus-visible{color:var(--ink)}

:focus-visible{outline:1px solid var(--verify);outline-offset:4px}

@keyframes rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .logo,.kicker,.mission,.foot{animation:none;opacity:1;transform:none}
}