:root{--white:#fff;--black:#000;--yellow:#ffc500}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--white);color:var(--black);font-display:swap;margin:0;font-family:linotype-didot,Georgia,Times New Roman,Times,serif;font-size:1.5rem;font-style:normal;font-weight:400}h1{margin:0;font-size:1.5rem;font-weight:400}.subhead{margin-top:10px;font-size:1.2rem}h2{text-underline-offset:4px;margin:0;font-size:1.3rem;font-style:italic;font-weight:400}a{color:var(--black);text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--yellow);white-space:auto;transition:text-decoration-color .35s ease-in-out}a:hover{text-decoration-color:var(--black)}.skip-link:not(:focus){clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link:focus{z-index:2;background:var(--yellow);text-decoration-color:var(--black);padding:.35rem .8rem;position:fixed;top:1rem;left:1rem}.menu-toggle,.mobile-nav{display:none}.header-wrapper{height:20dvh}.logo-wrapper{flex-direction:column;justify-content:end;align-items:center;height:35dvh;display:flex}.nav-wrapper{flex-direction:column;justify-content:center;align-items:center;height:45dvh;display:flex}.header{text-align:center;pointer-events:none;position:fixed;top:0;left:0}.logo svg{width:auto;height:220px;fill:var(--black);pointer-events:none;margin:0 auto;display:block}.logo-fill{stroke:var(--black);stroke-linejoin:round}.logo-fill a{cursor:pointer;pointer-events:auto;outline:none}.logo-outline{pointer-events:none}.logo-fill path{opacity:0}.logo-fill a.active path,.logo-fill a:is(:hover,:focus-visible) path{opacity:1}body:has(nav a:hover) .logo-fill a.active path{opacity:0}body:has(nav a[data-section=contact]:hover) .logo-fill a[data-section=contact] path,body:has(nav a[data-section=pricing]:hover) .logo-fill a[data-section=pricing] path,body:has(nav a[data-section=guidelines]:hover) .logo-fill a[data-section=guidelines] path,body:has(nav a[data-section=about]:hover) .logo-fill a[data-section=about] path{opacity:1}body.scrolled{background-color:var(--yellow)}body.scrolled a{text-decoration-color:var(--black);transition:text-decoration-color .35s ease-in-out}body.scrolled a:hover{text-decoration-color:#0000}nav ul{pointer-events:all;margin:0;padding:0;list-style:none;display:inline-block}nav ul li{margin-bottom:6px;font-size:1.3rem;display:block}nav a{white-space:nowrap}nav a.active{text-decoration-color:var(--black)}body:has(nav a:hover) a:hover{text-decoration-color:#0000}nav:has(a.active):not(:hover):not(:has(:focus-visible)) li:not(:has(a.active)),body:has(.logo-fill a:is(:hover,:focus-visible)) nav li{opacity:0}body:has(.logo-fill a[data-section=contact]:is(:hover,:focus-visible)) nav li:has(a[data-section=contact]),body:has(.logo-fill a[data-section=pricing]:is(:hover,:focus-visible)) nav li:has(a[data-section=pricing]),body:has(.logo-fill a[data-section=guidelines]:is(:hover,:focus-visible)) nav li:has(a[data-section=guidelines]),body:has(.logo-fill a[data-section=about]:is(:hover,:focus-visible)) nav li:has(a[data-section=about]){opacity:1}.container{flex-direction:column;width:100%;display:flex}#content{margin-top:100dvh}#content:focus{outline:none}section{min-height:100dvh;padding:2rem}.content-col{width:30%;min-width:200px;max-width:600px;font-size:1.2rem}@media (width>=769px) and (width<=1080px){.content-col{width:calc(40vw - 2rem);min-width:0;max-width:none}body.header-aside .header{width:60%;left:40%}}@media (width<=768px){main{border-left:5px solid #0000;border-right:5px solid #0000;transition:border .35s ease-in-out}body.scrolled a{text-decoration-color:var(--yellow);transition:text-decoration-color .35s ease-in-out}body.scrolled a:hover{text-decoration-color:var(--black)}body.scrolled main{border-left:5px solid var(--yellow);border-right:5px solid var(--yellow)}.header{width:100%;padding:0;position:static;left:0}.menu-toggle{z-index:1;appearance:none;cursor:pointer;pointer-events:auto;background:0 0;border:none;margin:0;padding:0;display:block;position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.menu-toggle:focus-visible{outline:2px solid var(--black);outline-offset:3px}.header-wrapper{background-color:var(--white);border-bottom:1px solid var(--black);z-index:3;width:100%;height:auto;padding:1rem 1rem 1rem 2.2rem;position:fixed;top:0;left:0}.mobile-nav{z-index:2;width:min(18rem,85vw);height:100%;padding:calc(var(--bar-height,4rem) + 1.5rem) 1.5rem 2rem;background:var(--white);border-right:1px solid var(--black);visibility:hidden;display:block;position:fixed;top:0;left:0;transform:translate(-100%)}.mobile-nav.is-open{visibility:visible;transform:none}.mobile-nav a{white-space:nowrap;padding:.35rem 0;display:inline-block}.header-wrapper h1{font-size:1.3rem}.header-wrapper p{margin:5px 0 0;font-size:.95rem;display:none}.logo-wrapper{height:55dvh}.logo svg{height:170px}.nav-wrapper{height:45dvh}section{padding:1rem;padding-top:calc(var(--bar-height,0px) + 1rem)}#content{margin-top:0}nav ul li{font-size:1.2rem}.content-col{width:100%;min-width:0;max-width:none;font-size:1.1rem}}@media (height<=500px){.logo svg{height:120px}.logo-wrapper{height:30dvh}}@media (width<=768px) and (height<=500px){.logo-wrapper{height:50dvh}}@media (prefers-reduced-motion:no-preference){body{transition:background-color .5s ease-in-out}body:has(nav a:hover),body:has(.logo-fill a:is(:hover,:focus-visible)){background-color:var(--yellow)}body:has(nav a:hover) a,body:has(.logo-fill a:is(:hover,:focus-visible)) a{text-decoration-color:var(--black)}.logo-fill path{transition:opacity .4s ease-in-out}nav ul li{transition:opacity .35s ease-in-out}.mobile-nav{transition:transform .35s ease-in-out,visibility 0s linear .35s}.mobile-nav.is-open{transition:transform .35s ease-in-out,visibility}@media (width>=769px) and (width<=1080px){.header{transition:left .5s ease-in-out,width .5s ease-in-out}}}@media (width<=768px){body,body.scrolled,body:has(nav a:hover),body:has(.logo-fill a:is(:hover,:focus-visible)){background-color:var(--white)}body:has(nav a:hover) a{text-decoration-color:var(--yellow)}body:has(nav a:hover) nav a:hover{text-decoration-color:var(--black)}}
