@font-face{font-family:General;src:url("./fonts/general-sans-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:General;src:url("./fonts/general-sans-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Signifier;src:url("./fonts/test-signifier-vf-roman.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{--bg:#e8e6df;--text:#26231e;--muted:#736f65;--line:#aaa69b;--accent:#2d5139;--display:Signifier,Georgia,serif;--display-weight:200;--body:General,Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden}
a{color:inherit;text-decoration:none}
.shell{width:calc(100% - 40px);margin-inline:auto}

.site-nav{height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:.78rem}
.site-nav>span{text-align:center;color:var(--muted)}
.site-nav nav{justify-self:end;display:flex;gap:24px}
.site-nav nav a{text-decoration:underline;text-underline-offset:.25em;text-decoration-color:transparent;transition:text-decoration-color .25s ease}
.site-nav nav a:hover,.site-nav nav a:focus-visible{text-decoration-color:currentColor}

main{flex:1;display:flex}
.hero{flex:1;min-height:0;display:grid;grid-template-columns:repeat(12,1fr);align-content:center;gap:20px;padding-block:80px}
.hero h1{grid-column:3/13;margin:0;font:var(--display-weight) clamp(5rem,11.5vw,11.5rem)/.82 var(--display);font-kerning:normal;font-feature-settings:"kern" 1;letter-spacing:-.018em}
.hero-copy{grid-column:8/12;margin:3rem 0 0;max-width:33ch;font-size:1.05rem;line-height:1.4}

.footer{height:120px;display:grid;grid-template-columns:1fr auto;align-items:center;font-size:.78rem}
.footer-note{color:var(--muted)}
.footer-year{text-align:right}

@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes riseBig{from{opacity:0;transform:translateY(14%)}to{opacity:1;transform:none}}
.hero h1{animation:riseBig 1.25s cubic-bezier(.16,1,.3,1) both}
.hero-copy{animation:rise .85s cubic-bezier(.22,1,.36,1) .2s both}
.site-nav>*{animation:rise .85s cubic-bezier(.22,1,.36,1) .1s both}
.footer>*{animation:rise .85s cubic-bezier(.22,1,.36,1) .35s both}

@media(max-width:800px){
  .shell{width:calc(100% - 28px)}
  .site-nav{grid-template-columns:1fr auto;height:62px}
  .site-nav>span{display:none}
  .hero{display:block;align-content:start;padding:90px 0 60px}
  .hero h1{font-size:20vw;line-height:.86}
  .hero-copy{margin:36px 0 0;max-width:28ch;font-size:1rem}
  .footer{height:auto;padding-block:36px;grid-template-columns:1fr;gap:10px;text-align:left}
  .footer-year{text-align:left}
}

@media(prefers-reduced-motion:reduce){
  .hero h1,.hero-copy,.site-nav>*,.footer>*{animation:none}
}
