/* Classic */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;line-height:1.6;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0 0 1em}
ul{padding-left:1.2em}
main :last-child{margin-bottom:0}
.wrap{max-width:880px;margin:0 auto;padding:24px 16px 48px}
.inner{max-width:880px;margin:0 auto;padding:0 16px}
.mastinner{display:block}
.brand{display:block;text-decoration:none;line-height:0}
.logo{width:min(300px,66vw);height:auto}
.tagline{margin:12px 0 0;font-size:14px;letter-spacing:.04em}
.skills{margin:10px 0 0;font-size:13px;line-height:1.9}
.skills .sep{padding:0 .55em;opacity:.55}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 4px}
.nav a{display:block;text-decoration:none;padding:8px 12px;font-size:15px}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:none;align-items:center;gap:11px;cursor:pointer;padding:11px 14px;
  font-size:14px;font-weight:600;letter-spacing:.02em;-webkit-user-select:none;user-select:none}
.bars{flex:none;width:20px;height:2px;margin:6px 0;background:currentColor;
  box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.navtoggle:checked ~ .burger .bars{box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  padding:2px 5px;border-radius:3px;background:rgba(0,0,0,.055);
  overflow-wrap:anywhere}
.breadcrumb{font-size:13px;margin-bottom:.5em;opacity:.75}
.breadcrumb span{padding:0 .5em}
.bullets li,.linklist li,.downloads li{margin-bottom:.45em}
.linklist,.downloads{list-style:none;padding:0}
.downloads .meta{font-size:.85em;opacity:.7;white-space:nowrap}
.downloads .dl{opacity:.65;font-size:.9em}
.logo-grid{list-style:none;padding:0;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}
.logo-grid li{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.logo-grid img{max-height:110px;width:auto}
.address{font-style:normal}
.map{margin-top:20px;max-width:560px}
.map iframe{width:100%;aspect-ratio:5/3;border:0;display:block}
.foot{margin-top:28px;font-size:12.5px;line-height:1.6}
.foot p{margin:0}
@media (max-width:640px){
  .skills{display:none}
  .burger{display:flex}
  .nav{display:none}
  .navtoggle:checked ~ .nav{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{padding:11px 14px}
  .logo{width:min(180px,52vw)}
}
@media (prefers-reduced-motion:no-preference){a{transition:color .15s,background-color .15s}}

/* The gradient is sized to the body box, so on short pages it would otherwise
   stop early and tile. min-height pins it to the viewport, no-repeat stops the
   tiling, and html carries the end colour for overscroll. */
html{background-color:#2e2e2e}
body{font-family:Arial,Helvetica,sans-serif;color:#555;min-height:100vh;
  background-color:#343434;
  background-image:linear-gradient(#3a3a3a,#2e2e2e);
  background-repeat:no-repeat}
.masthead{background:#e5e8dc;border:1px solid #fafafa;padding:18px 24px}
.mastinner{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.logo{width:min(230px,60vw)}
.brandmeta{flex:1 1 280px;min-width:0}
.tagline{color:#92af19;font-weight:bold;font-size:13px;margin-top:0}
.skills{color:#7c8a5e}
.skills .sep{color:#b3c07f;opacity:1}
.nav{background:#f0f5cf;border:1px solid #fff;border-top:0}
.nav a{color:#666}
.nav a:hover,.nav a:focus{background:#e3ecb4;color:#4d6109}
.nav a.current{color:#4d6109;font-weight:bold;background:#e3ecb4}
.burger{background:#f0f5cf;border:1px solid #fff;border-top:0;color:#666}
.card{background:#f4f8e6;border:1px solid #fff;border-top:0;padding:26px 28px 30px}
.card h1{font-size:22px;color:#799215}
a{color:#5f7a0d}
.foot{color:#9a9a9a;text-align:center}
.foot a{color:#c3ce9b}
@media(max-width:640px){.masthead,.card{padding:16px}.mastinner{gap:12px}
  .logo{width:min(180px,52vw)}.brandmeta{flex-basis:100%}}