:root{
  --ink:#0c0f0a;
  --ink-2:#12160f;
  --paper:#f4f6f0;
  --line:rgba(244,246,240,.14);
  --moss:#9ec48b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.split{display:flex;height:100%;width:100%}
.half{
  flex:1 1 50%;
  position:relative;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-decoration:none;color:inherit;
  padding:40px 28px calc(48px + env(safe-area-inset-bottom));
  background:var(--ink);
  transition:background .5s cubic-bezier(.2,.7,.3,1),flex-basis .6s cubic-bezier(.2,.7,.3,1);
  isolation:isolate;
}
.half + .half{border-left:1px solid var(--line)}
.half:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 50% 100%,rgba(158,196,139,.16),transparent 62%);
  opacity:0;transition:opacity .5s ease;
}
.half:hover:before,.half:focus-visible:before{opacity:1}
.half:hover{background:var(--ink-2)}
.half-inner{text-align:center;width:100%}
.half h1{
  font-family:Anybody,system-ui,sans-serif;font-weight:900;
  font-size:clamp(52px,8.5vw,132px);line-height:.9;letter-spacing:-.035em;
  margin:0 0 .22em;padding-right:.035em;color:var(--paper);
}
.motto{
  margin:0 auto;max-width:30ch;
  font-size:clamp(14px,1.5vw,18px);line-height:1.5;
  color:rgba(244,246,240,.56);
}
.more{
  position:absolute;left:50%;bottom:clamp(28px,6vh,64px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.half:hover .more,.half:focus-visible .more{transform:translateX(-50%) translateY(-6px)}
.chev{width:30px;height:19px;color:var(--moss);opacity:.9}
.words{
  position:relative;
  font-family:"Fragment Mono",monospace;font-size:13px;letter-spacing:.08em;
  line-height:1.35;text-align:center;
}
.line{display:block;color:rgba(244,246,240,.46)}
.line s{text-decoration-thickness:1.5px;text-decoration-color:var(--moss)}
.rd{position:relative;display:inline-block}
.see{
  position:absolute;left:-.15em;right:-.15em;top:100%;
  text-align:center;color:var(--paper);
}
.back{
  position:fixed;left:50%;top:calc(20px + env(safe-area-inset-top));transform:translateX(-50%);
  font-family:"Fragment Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,246,240,.34);text-decoration:none;padding:6px 12px;border-radius:999px;
  transition:color .25s,background .25s;
}
.back:hover{color:var(--paper);background:rgba(244,246,240,.08)}

@media (max-width:760px){
  .split{flex-direction:column}
  .half{padding:34px 22px 84px}
  .half + .half{border-left:0;border-top:1px solid var(--line)}
  .more{bottom:24px}
  .back{top:auto;bottom:calc(10px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
}