:root{
  --plaster:#FAFAF9; --wash:#F2F1EC; --card:#FFFFFF; --edge:#E4E2DB;
  --ink:#1B1D22; --faint:#8A8880; --thread:#C9C7C0; --accent:#2B4BC7;
  --bloc:#4A4741; --visit:#2B4BC7; --dwell:#C7860F; --read:#2E7A4F;
  --listen:#C74E2B; --watch:#0F6E6B; --encounter:#B0326E; --performance:#5B2BC7;
  --disp:Futura,"Avenir Next","Century Gothic",sans-serif;
  --body:Charter,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--plaster);color:var(--ink);
  font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* nav */
nav{display:flex;align-items:baseline;gap:1.6rem;flex-wrap:wrap;
  max-width:60rem;margin:0 auto;padding:1.5rem 1.4rem}
nav .mark{font:700 1rem var(--disp);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);text-decoration:none}
nav .mark span{color:var(--accent)}
nav a.item{font:500 .78rem var(--disp);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);text-decoration:none;margin-left:auto}
nav a.item ~ a.item{margin-left:0}
nav a.item:hover,nav a.item[aria-current]{color:var(--accent)}

main{max-width:60rem;margin:0 auto;padding:1rem 1.4rem 6rem}

/* hero */
.hero h1{font:600 clamp(2.1rem,6vw,3.6rem)/1.12 var(--disp);
  letter-spacing:.015em;margin:2.2rem 0 1rem;max-width:34rem}
.hero .lede{max-width:36rem;font-size:1.08rem}
.hero .lede b{color:var(--accent)}

/* the string: signature element */
.string-hero{margin:2.6rem 0 1rem;overflow-x:auto}
.string-hero svg{display:block;min-width:640px;width:100%;height:auto}
.string-hero text{font:600 11px var(--disp);letter-spacing:.14em;
  text-transform:uppercase;fill:var(--faint)}
@media (prefers-reduced-motion:no-preference){
  .string-hero circle,.string-hero rect{animation:drop .5s ease-out backwards}
  .string-hero circle:nth-of-type(2){animation-delay:.06s}
  .string-hero circle:nth-of-type(3){animation-delay:.12s}
  .string-hero circle:nth-of-type(4){animation-delay:.18s}
  .string-hero circle:nth-of-type(5){animation-delay:.24s}
  .string-hero circle:nth-of-type(6){animation-delay:.3s}
  .string-hero rect{animation-delay:.36s}
  .string-hero circle:nth-of-type(7){animation-delay:.42s}
  @keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}
}

/* principles */
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:1.6rem;margin:3rem 0}
.principles h2{font:600 .8rem var(--disp);letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 .4rem;color:var(--ink)}
.principles p{margin:0;font-size:.95rem}

/* generic sections */
section{margin:3.2rem 0}
h2.sec{font:600 .95rem var(--disp);letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 1.2rem;padding-bottom:.5rem;border-bottom:1px solid var(--edge)}
.pipeline{font:.85rem var(--mono);color:var(--faint);background:var(--wash);
  border:1px solid var(--edge);border-radius:8px;padding:1rem 1.2rem;
  overflow-x:auto;white-space:pre}

/* cards (apps, lexicons) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.1rem}
.card{background:var(--card);border:1px solid var(--edge);border-left:3px solid var(--ink);
  border-radius:8px;padding:1.1rem 1.2rem;box-shadow:0 1px 2px rgba(27,29,34,.05)}
.card h3{font:600 1rem var(--disp);letter-spacing:.04em;margin:0 0 .35rem}
.card p{margin:.2rem 0 0;font-size:.92rem}
.card .links{margin-top:.7rem;font:.78rem var(--mono)}
.status{font:600 9.5px var(--disp);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--edge);border-radius:10px;padding:.15rem .55rem;
  color:var(--faint);margin-left:.5rem;vertical-align:middle}
.status.working{color:#0F6E6B;border-color:#0F6E6B}
.status.prototype{color:#C7860F;border-color:#C7860F}
.status.planned{color:var(--faint)}

/* lexicon reference */
.lex{background:var(--card);border:1px solid var(--edge);border-left:3px solid var(--ink);
  border-radius:8px;padding:1.3rem 1.5rem;margin:0 0 1.6rem;
  box-shadow:0 1px 2px rgba(27,29,34,.05)}
.lex h3{font:600 1.05rem var(--mono);margin:0 0 .2rem}
.lex .desc{color:var(--faint);font-size:.95rem;margin:0 0 1rem}
.lex h4{font:600 .78rem var(--disp);letter-spacing:.14em;text-transform:uppercase;
  margin:1.2rem 0 .5rem}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th{font:600 .7rem var(--disp);letter-spacing:.12em;text-transform:uppercase;
  text-align:left;color:var(--faint);padding:.35rem .7rem .35rem 0;
  border-bottom:1px solid var(--edge)}
td{padding:.42rem .7rem .42rem 0;border-bottom:1px solid var(--wash);vertical-align:top}
td.n{font-family:var(--mono);font-size:.82rem;white-space:nowrap}
td.t{font-family:var(--mono);font-size:.78rem;color:var(--faint);white-space:nowrap}
.req{color:var(--listen);font-family:var(--mono)}

/* meetup */
.meetup-meta{font:.85rem var(--mono);color:var(--faint);margin:.2rem 0 1.4rem}
.agenda{list-style:none;margin:1rem 0;padding:0;position:relative}
.agenda::before{content:"";position:absolute;left:6px;top:.4rem;bottom:.4rem;
  width:2px;background:var(--thread)}
.agenda li{position:relative;padding:0 0 1rem 1.6rem}
.agenda li::before{content:"";position:absolute;left:0;top:.42rem;width:14px;height:14px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--plaster)}
.agenda li:nth-child(2)::before{background:var(--dwell)}
.agenda li:nth-child(3)::before{background:var(--encounter)}
.agenda li:nth-child(4)::before{background:var(--read)}
.agenda li:nth-child(5)::before{background:var(--watch)}
.agenda li:nth-child(6)::before{background:var(--bloc)}
.agenda b{font-family:var(--disp);font-size:.92rem;letter-spacing:.03em}
.cta{display:inline-block;font:600 .85rem var(--disp);letter-spacing:.12em;
  text-transform:uppercase;background:var(--accent);color:#fff;text-decoration:none;
  border-radius:8px;padding:.75rem 1.3rem}
.cta:hover{background:#3A5BD9}

footer{border-top:1px solid var(--edge);margin-top:2rem}
footer .inner{max-width:60rem;margin:0 auto;padding:1.6rem 1.4rem;
  font:.8rem var(--mono);color:var(--faint)}
footer a{color:var(--faint)}