/* SuperCapable */

:root{
  --paper:#FCFBF8;
  --ink:#20201E;
  --ink-soft:#4A4A44;
  --ink-mute:#6A6A63;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:20px;
  line-height:1.68;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 700 − 60 of padding = a 640px column, roughly 68 characters */
main{
  max-width:700px;
  margin:0 auto;
  padding:clamp(56px,10vh,104px) 30px clamp(72px,12vh,120px);
}

h1{
  margin:0 0 1.15em;         /* em: relative to the 20px body, not the 16px root */
  font-size:1.9em;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.016em;
}

.lede{
  font-size:1.06em;
  line-height:1.6;
  margin-bottom:2.3em;
}

.example-intro{
  margin-bottom:.9em;
  font-size:.88em;
  color:var(--ink-mute);
}

p{margin:0 0 1.35em;text-wrap:pretty}

ol{
  margin:0 0 2.1em;
  padding-left:1.75em;
}
li{
  margin-bottom:1.7em;
  padding-left:.15em;
  text-wrap:pretty;
}
li:last-child{margin-bottom:0}
li::marker{font-variant-numeric:tabular-nums}
li b{font-weight:600}

.reassure{
  font-size:.93em;
  line-height:1.62;
  color:var(--ink-soft);
}

.close{
  margin-top:1.9em;
  font-size:1.3em;
  font-weight:600;
  line-height:1.45;
  letter-spacing:-.008em;
}

.founder{
  margin-top:2.8em;
  max-width:34em;
  font-size:.9em;
  line-height:1.6;
  color:var(--ink-mute);
}

main > :last-child{margin-bottom:0}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(32,32,30,.28)}
a:hover{border-bottom-color:var(--ink)}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:600px){
  body{font-size:18.5px;line-height:1.62}
  main{padding-inline:24px}
  ol{padding-left:1.5em}
}