@font-face{font-family:"Inter";src:url("fonts/inter-latin-var.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}

:root{
  --ink:#1c2430;
  --ink-soft:#3d4854;
  --bg:#f7f8f7;
  --jl-foot-mark:#6f8b99;
  --jl-foot-mark-opacity:.72;
}

@media(prefers-color-scheme:dark){
  :root{
    --ink:#e9ecea;
    --ink-soft:#c3c9c7;
    --bg:#14171c;
    --jl-foot-mark:#8890a0;
    --jl-foot-mark-opacity:.72;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--ink-soft);
  font:400 1.15rem/1.7 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

main{
  flex:1;
  width:100%;
  max-width:38rem;
  margin:0 auto;
  padding:clamp(56px,12vh,120px) 24px 48px;
}

h1{
  color:var(--ink);
  font-size:clamp(1.7rem,4.5vw,2.1rem);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 32px;
}

p{margin:0 0 24px}
p:last-child{margin-bottom:0}

.jl-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:22px 24px clamp(24px,4vh,42px);
}
.jl-foot .jl-mark{
  --jw-mark-h:1.2em;
  display:block;height:var(--jw-mark-h);width:calc(var(--jw-mark-h) * 1.9811);
  background:currentColor;
  -webkit-mask:url('brand/joshworks-capsule.svg') center/contain no-repeat;
  mask:url('brand/joshworks-capsule.svg') center/contain no-repeat;
  color:var(--jl-foot-mark);
  opacity:var(--jl-foot-mark-opacity);
}