header.nav, nav.menu, .nav-spacer, footer.ft, a.sr-only, .to-top{
  --body-dk:#B7B3A8;
  --font-display:"Archivo", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
  --ink:#17191D;
  --line-dk:#33383F;
  --logo-h:100px;
  --logo-h-ft:56px;
  --logo-top:4px;
  --muted-dk:#8A8578;
  --nav-h:var(--nav-h-max);
  --nav-h-max:108px;
  --nav-h-min:60px;
  --paper:#F2EFE8;
  --paper-2:#EAE6DC;
  --tungsten:#E26336;
  --wrap-max:1120px;
  --wrap-pad:34px;
  --wt-head:300;
}

@media (max-width:560px){
  header.nav, nav.menu, .nav-spacer, footer.ft, a.sr-only, .to-top{--wrap-pad:22px;--nav-h-max:76px;--nav-h-min:52px;--logo-h:70px;--logo-top:3px;}
}
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding-right:var(--sbw, 0px);
  background:rgba(23,25,29,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-dk);color:var(--paper);
}
header.nav.compact{--nav-h:var(--nav-h-min);}
html.is-settling .nav .wrap,
html.is-settling .brand-logo,
html.is-settling .reveal{transition:none !important;}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);transition:height .3s ease;
}
.nav-spacer{height:var(--nav-h-max);background:var(--ink);}
.brand-logo{
  display:flex;align-items:flex-start;flex-shrink:0;
  height:var(--nav-h);overflow:hidden;
  transition:height .3s ease;
}
.brand-logo img{
  height:var(--logo-h);width:auto;display:block;
  margin-top:var(--logo-top);
}
.burger{
  --bar-w:42px; --bar-h:2px; --bar-gap:16px;
  position:relative;flex-shrink:0;
  width:60px;height:60px;padding:0;
  background:none;border:0;cursor:pointer;
}
.burger span{
  position:absolute;left:calc(50% - var(--bar-w) / 2);
  width:var(--bar-w);height:var(--bar-h);
  background:var(--paper);border-radius:1px;
  transform:rotate(0deg);
  transition:top .2s .2s, transform .2s;
}
.burger span:nth-child(1){top:calc(50% - var(--bar-gap) / 2 - var(--bar-h));}
.burger span:nth-child(2){top:calc(50% + var(--bar-gap) / 2);}
.burger.is-active span{
  top:calc(50% - var(--bar-h) / 2);
  transition:top .2s .4s, transform .2s .6s;
}
.burger.is-active span:nth-child(1){transform:rotate(45deg);}
.burger.is-active span:nth-child(2){transform:rotate(-45deg);}
.burger:hover span{background:var(--tungsten);}
.menu{
  position:fixed;inset:0;z-index:45;
  padding-right:var(--sbw, 0px);
  background:var(--ink);
  display:flex;align-items:center;
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-100%);
  transition:transform .4s ease, visibility 0s linear .4s;
  visibility:hidden;
}
.menu.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform .4s ease, visibility 0s;
}
.menu__inner{width:100%;padding-top:var(--nav-h-max);padding-bottom:40px;}
.menu__list{list-style:none;text-align:right;}
.menu__list li + li{margin-top:6px;}
.menu__list a{
  display:inline-block;
  font-family:var(--font-display);font-weight:var(--wt-head);
  font-size:clamp(38px,7vw,78px);line-height:1.08;letter-spacing:-.025em;
  color:var(--paper);transition:color .2s ease;
}
.menu__list a:hover,
.menu__list a[aria-current="page"]{color:var(--tungsten);}
.menu__list li{
  opacity:0;transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease;
}
.menu.is-open .menu__list li{opacity:1;transform:none;}
.menu.is-open .menu__list li:nth-child(1){transition-delay:.22s;}
.menu.is-open .menu__list li:nth-child(2){transition-delay:.28s;}
.menu.is-open .menu__list li:nth-child(3){transition-delay:.34s;}
.menu.is-open .menu__list li:nth-child(4){transition-delay:.40s;}

footer.ft{background:var(--ink);color:var(--body-dk);border-top:1px solid var(--line-dk);padding:40px 0;}
.ft .row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.ft .brand-logo{height:auto;overflow:visible;transition:none;}
.ft .brand-logo img{height:var(--logo-h-ft);margin-top:0;}
.ft .links{display:flex;gap:22px;font-size:13px;flex-wrap:wrap;}
.ft .links a:hover{color:var(--tungsten);}
.ft-right{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.social{display:flex;align-items:center;gap:15px;}
.social a{
  display:inline-flex;color:var(--paper-2);
  transition:color .2s, transform .15s;
}
.social a:hover{color:var(--tungsten);transform:translateY(-1px);}
.social svg{width:18px;height:18px;fill:currentColor;display:block;}
.ft .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;margin-top:16px;color:var(--muted-dk);}
html:not(.ready) .menu,
html:not(.ready) .burger span,
html:not(.ready) .nav .wrap,
html:not(.ready) .brand-logo{transition:none !important;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
a.sr-only:focus{
  position:fixed;top:12px;left:12px;
  width:auto;height:auto;margin:0;padding:11px 18px;
  clip:auto;clip-path:none;overflow:visible;
  z-index:61;
  background:var(--ink);color:var(--paper);
  outline:2px solid var(--tungsten);outline-offset:2px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;
}
@media (prefers-reduced-motion: reduce){
  .btn:hover,.case:hover,.social a:hover{transform:none;}
  .nav .wrap,.brand-logo{transition:none;}
  .burger span,.burger.is-active span{transition:none;}
  .menu{transition:visibility 0s linear .001s;}
  .menu.is-open{transition:visibility 0s;}
  .menu__list li{transition:none;opacity:1;transform:none;}
}
.ft .meta a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.ft .meta a:hover{color:var(--tungsten);}

.to-top{
  position:fixed;
  right:0;
  bottom:0;
  z-index:44;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  cursor:pointer;
  display:grid;
  place-items:center;

  background:rgba(204,84,47,.9);
  clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .35s ease, transform .35s ease, background-color .25s ease,
             visibility 0s linear .35s;
}
.to-top__mark{
  position:relative;
  width:26px;
  height:26px;
  display:block;
  transition:transform .3s ease;
}
.to-top__mark path{
  fill:none;
  stroke:#EAE6DC;
  stroke-width:2.6;
  stroke-linecap:square;
  stroke-linejoin:miter;
}
.to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .35s ease, transform .35s ease, background-color .25s ease;
}
.to-top:hover{background:rgba(204,84,47,1);}
.to-top:hover .to-top__mark,
.to-top:focus-visible .to-top__mark{transform:translateY(-3px);}
.to-top:active .to-top__mark{transform:translateY(-1px);}
.to-top:focus-visible{
  outline:none;
  background:var(--ink);
}
.to-top:focus-visible::before{
  content:"";
  position:absolute;
  inset:3px;
  background:rgba(204,84,47,1);
  clip-path:polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}
body:has(.menu.is-open) .to-top{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
@media (max-width:560px){
  .to-top{
    width:42px;
    height:42px;
    clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  }
  .to-top:focus-visible::before{
    clip-path:polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  }
  .to-top__mark{width:23px;height:23px;}
}
@media (prefers-reduced-motion:reduce){
  .to-top,
  .to-top.is-visible{transform:none;transition:opacity .01s linear, visibility 0s;}
  .to-top__mark{transition:none;}
  .to-top:hover .to-top__mark,
  .to-top:focus-visible .to-top__mark{transform:none;}
}
.nav .wrap, .menu .menu__inner.wrap, .ft .wrap{
  width:auto;max-width:var(--wrap-max);margin-left:auto;margin-right:auto;
  padding-left:var(--wrap-pad);padding-right:var(--wrap-pad);
}
footer.ft .wrap{display:block;}
header.nav .brand-logo, footer.ft .brand-logo{width:auto;object-fit:initial;}
footer.ft .meta a{font-size:inherit;}