:root{

  --night:#26292c;
  --paper:#26292c;
  --light:#686c70;
  --soft:transparent;
  --card:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.1);

  --ink:#f1f1ef;
  --ink-2:#e6e7e5;
  --muted:#dfe1de;

  --sun:#ffc700;
  --sun-2:#ffad00;
  --blue:#00aeef;
  --green:#4caf7a;

  --ease:cubic-bezier(.22,.8,.24,1);
  --f-title:'Outfit',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{

  background:linear-gradient(180deg,var(--night) 0,var(--night) 100vh,#34383b calc(100vh + 250px),#4b4f53 calc(100vh + 600px),var(--light) calc(100vh + 1000px),var(--light) 100%) var(--light);
  color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-user-select:none;user-select:none;
}
img,video{display:block;max-width:100%;-webkit-user-drag:none}
a{color:inherit;text-decoration:none}
a,button{-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}

.wrap{width:min(1160px,100% - 48px);margin-inline:auto}
.section{padding:clamp(90px,13vw,170px) 0}
.section--soft{background:var(--soft)}

h1,h2,h3{font-family:var(--f-title);font-weight:300;letter-spacing:-.025em;line-height:1.05}
h2{font-size:clamp(36px,5vw,60px);margin-bottom:24px}
h3{font-size:21px;font-weight:400;margin-bottom:8px}
.muted{color:var(--muted)}
.small{font-size:14px}
.tiny{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.5}
.todo{color:#d8ab3c!important;font-style:italic}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:999px;border:0;cursor:pointer;
  font-weight:600;font-size:15px;
  transition:transform .45s var(--ease),box-shadow .45s,background .45s;
}
.btn:hover{transform:translateY(-2px)}
.btn--sun{background:var(--sun);color:#1a1300;box-shadow:0 12px 30px -12px rgba(255,173,0,.8)}
.btn--sun:hover{background:var(--sun-2)}
.btn--dark{background:#fff;color:var(--night)}
.btn--dark:hover{background:var(--sun)}
.link{font-weight:600;border-bottom:2px solid var(--sun);padding-bottom:2px;transition:color .2s}
.link:hover{color:var(--sun)}

.reveal{
  opacity:0;transform:translateY(28px);filter:blur(4px);
  transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s),filter 1.1s var(--ease) var(--d,0s);
}
.reveal.is-in{opacity:1;transform:none;filter:none}
.reveal.is-done{transition:none;will-change:auto}
.d1{--d:.1s}.d2{--d:.2s}.d3{--d:.3s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none;filter:none}
}

@media (max-width:560px){
  .wrap{width:calc(100% - 32px)}
}