* { box-sizing: border-box; }
body { margin: 0; color: #263c37; background: #fff; font: 1rem/1.7 "Open Sans", Arial, sans-serif; }
.wrap { max-width: 72rem; margin: auto; padding-inline: clamp(1.25rem,5vw,4rem); }
header { background: #006747; border-bottom: 4px solid #baa665; color: white; }
header .wrap { padding-block: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 2rem; }
a { color: #006747; text-underline-offset: .22em; }
header a { color: inherit; }
header a:first-child { font-weight: 700; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.hero { background: #f9f9f1; border-bottom: 1px solid #d8dfd7; }
.hero .wrap { padding-block: clamp(3rem,7vw,6rem); }
.label { margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .14em; font-weight: 700; text-transform: uppercase; color: #45615a; }
h1,h2 { font-family: "Barlow Condensed","Arial Narrow",Arial,sans-serif; color: #005432; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.6rem,6vw,5.3rem); max-width: 17ch; }
h2 { font-size: 2.4rem; margin-bottom: 1.2rem; }
.about { padding-block: clamp(2.5rem,6vw,5rem); display: grid; grid-template-columns: minmax(10rem,16rem) 1fr; align-items: start; gap: clamp(2rem,6vw,5rem); }
img { width: 100%; height: auto; display: block; }
article p { max-width: 66ch; margin: 0 0 1em; }
footer { border-top: 1px solid #d8dfd7; padding-block: 1.3rem; font-size: .9rem; }
@media(max-width: 42rem) { .about { grid-template-columns: 1fr; } img { max-width: 10rem; } }

.site-nav { border-bottom: 1px solid #d8dfd7; }
.site-nav .wrap { display:flex; gap:.2rem 1.5rem; flex-wrap:wrap; }
.site-nav a { padding:.55rem 0; font-weight:600; }
.site-nav [aria-current] { color:#263c37; text-decoration-thickness:3px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap:1rem; margin:1.25rem 0 3rem; }
.cards a { display:grid; grid-template-rows:9rem auto; background:#f9f9f1; padding:1rem; gap:.8rem; font-weight:700; }
.cards img { width:100%; height:100%; object-fit:contain; max-width:none; }
.feature { max-width:35rem; margin-block:1.5rem; }
.brand { padding-block:2.5rem 1rem; }
.brand h1 { max-width:none; }
.brand img { width:min(100%,36rem); max-width:none; }
.content { padding-block:2.5rem 4rem; }
.content p { max-width:68ch; }
.content h2:not(:first-child), .content section { margin-top:2.5rem; }
.directory { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:1rem; margin:1.5rem 0; }
.directory a { background:#f9f9f1; border-top:3px solid #baa665; padding:1.2rem; text-decoration:none; }
.directory strong { display:block; text-decoration:underline; }
.directory span { color:#263c37; display:block; margin-top:.4rem; }
.project-mark { width:12rem; margin-bottom:2rem; }

.iceweb-example figure { margin: 2rem 0; max-width: 40rem; }
.iceweb-example img { width: auto; max-width: 100%; height: auto; }
.iceweb-example figcaption { margin-top: .75rem; }