/* The page backdrop, header bar and footer every craggy.io site shares, linked before each site's own stylesheet:
   a teal and an amber glow over a faint grid, fixed behind the page, a sticky translucent header bar that
   spans the whole window even when the page content is capped in width, and the footer's row of links. */
html{background:#0c1419}
body{background:transparent;position:relative;isolation:isolate;overflow-x:clip}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:
 radial-gradient(ellipse 55% 75% at 0% 20%,rgba(94,214,197,.24),rgba(94,214,197,.06) 55%,transparent 75%),
 radial-gradient(ellipse 55% 70% at 100% 90%,rgba(255,181,71,.14),rgba(255,181,71,.03) 55%,transparent 75%),
 linear-gradient(rgba(228,236,231,.04) 1px,transparent 1px) 0 0/44px 44px,
 linear-gradient(90deg,rgba(228,236,231,.04) 1px,transparent 1px) 0 0/44px 44px,
 #0c1419}
.header{position:sticky;top:0;z-index:10}
.header:before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:rgba(10,16,20,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(228,236,231,.06)}

/* The header bar's layout: the wordmark on the left and the main navigation on the right. On a narrow window the
   bar has two rows: the wordmark, "Get in touch" and the account bubble above the page links, which wrap rather
   than squeeze. A site's own stylesheet adds only what differs, such as which links it hides. */
.header{height:96px;margin:0 var(--gutter);display:flex;align-items:center;justify-content:space-between}
.brand img{width:142px;display:block}
.header nav{display:flex;align-items:center;gap:42px;font-size:13px;font-weight:600}
.header nav a{transition:color .2s;white-space:nowrap}.header nav a:hover{color:var(--amber)}.header nav span{color:var(--amber);margin-left:5px}
.nav-contact{border:1px solid #5b6258;padding:14px 18px}
footer{margin:0 var(--gutter);min-height:140px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#82918a}
footer img{width:105px;display:block}
.footer-links{display:flex;gap:25px;font-size:12px;color:#c5d0c8}footer a:hover{color:var(--amber)}
.footer-note{font-size:11px}
@media(max-width:1100px){.header nav{gap:24px}}
@media(max-width:900px){
.header{height:auto;flex-wrap:wrap;justify-content:flex-start;column-gap:18px;padding:14px 0 4px}
.brand{margin-right:auto}.brand img{width:110px}
.header nav{display:contents}
.header nav a{order:4;padding:12px 0}
.header nav .nav-contact{order:1;padding:10px 14px}
.craggy-account{order:2}
.header:after{content:'';order:3;flex-basis:100%}}
@media(max-width:800px){footer{flex-wrap:wrap;padding:35px 0}.footer-links{flex-wrap:wrap;row-gap:12px}.footer-note{width:100%}}
@media(max-width:420px){.header{column-gap:14px}.header nav{font-size:12px}.brand img{width:92px}.header nav .nav-contact{padding:9px 12px}}
@media(max-width:360px){.header nav .nav-contact span{display:none}}