/* Lemma Labs */

:root{
  --bg:#08090B;
  --fg:#DAD8D3;
  --bright:#F0EEE9;
  --dim:#878B92;
  --rule:#1D2025;
  --rule-soft:#14171A;
  --accent:#6FCBA4;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --col:700px;
  --gut:22px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:17px;font-weight:350;line-height:1.66;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
.col{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- top bar ---------- */
.bar{border-bottom:1px solid var(--rule-soft);position:relative;z-index:3}
.bar-in{display:flex;align-items:center;gap:1.2rem;height:58px}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--bright);font-size:.95rem;font-weight:500;letter-spacing:-.005em}
svg.mark{width:.8em;height:.8em;color:var(--accent);flex:none}
.bar nav{margin-left:auto;display:flex;gap:1.35rem;font-size:.84rem}
.bar a{border-bottom:0}
.bar nav a{color:var(--dim);text-decoration:none;transition:color .2s}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--bright)}

/* ---------- hero with the lattice behind it ---------- */
.hero{position:relative;padding:clamp(48px,8vw,86px) 0 clamp(20px,3vw,32px)}
#lattice{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.35) 66%,transparent 95%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.35) 66%,transparent 95%);
}
.hero > .col{position:relative;z-index:2}
.kicker{
  margin:0 0 1.05rem;font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.6vw,44px);line-height:1.13;letter-spacing:-.015em;
  margin:0;color:var(--bright);max-width:24ch;
}

/* ---------- prose ---------- */
main{position:relative;z-index:2;padding-bottom:1rem}
main > .col > h1:first-child{margin-top:clamp(42px,7vw,72px)}
.soon{padding-bottom:clamp(60px,14vh,150px)}
.soon .lede{
  font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);
  color:var(--accent);margin:0 0 1.9rem;letter-spacing:-.008em;
}
.soon .note{max-width:52ch}
h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,40px);
  line-height:1.16;letter-spacing:-.015em;color:var(--bright);margin:0 0 .5rem;
}
h2{
  font-family:var(--serif);font-weight:400;font-size:1.32rem;letter-spacing:-.008em;
  color:var(--bright);margin:2.9rem 0 .85rem;
}
h2::before{
  content:"";display:block;width:26px;border-top:1px solid var(--accent);
  opacity:.5;margin-bottom:.85rem;
}
h3{font-family:var(--sans);font-size:.95rem;font-weight:600;margin:1.9rem 0 .5rem;color:var(--bright)}
p{margin:0 0 1.2rem}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(111,203,164,.32);transition:border-color .2s}
a:hover{border-bottom-color:var(--accent)}
a.plain{color:inherit;border:0}
a.plain:hover{color:var(--bright)}
strong{font-weight:600;color:var(--bright)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;color:var(--bright)}
hr{border:0;border-top:1px solid var(--rule);margin:2.8rem 0}

.meta{color:var(--dim);font-size:.85rem;font-family:var(--sans);letter-spacing:.02em;margin:0 0 2rem}
.note{color:var(--dim);font-size:.9rem}

/* ---------- essay list ---------- */
ul{margin:0 0 1.2rem;padding-left:1.15rem}
li{margin:0 0 .45rem}
ul.bare{list-style:none;padding:0}
ul.bare li{margin:0 0 1.15rem}
ul.bare a{font-family:var(--serif);font-size:1.16rem;letter-spacing:-.008em;border:0;color:var(--bright)}
ul.bare a:hover{color:var(--accent)}
ul.bare .note{display:block;margin-top:.15rem}

/* ---------- table ---------- */
table{border-collapse:collapse;width:100%;margin:0 0 1.35rem;font-size:.9rem}
th,td{text-align:left;padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--rule)}
th{font-weight:500;color:var(--dim);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
tr:last-child td{border-bottom:0}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:2;
  margin-top:4.2rem;padding:1.2rem 0 2.6rem;border-top:1px solid var(--rule-soft);
  color:var(--dim);font-size:.84rem;
}
footer a{border-bottom:0}
footer .col{overflow-wrap:anywhere}
footer .sep{padding:0 .5rem;opacity:.5}
footer .line2{display:block;margin-top:.3rem}

:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}