:root{
  --maxw: 820px;
}
*{box-sizing:border-box}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  margin:0;
  line-height:1.6;
  color:#222;
}
header{
  border-bottom:1px solid #eee;
  position:sticky; top:0; background:#fff; z-index:5;
}
nav{
  max-width:var(--maxw); margin:0 auto; padding:14px 16px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
nav .brand{font-weight:700}
nav a{color:#222; text-decoration:none}
nav a:hover{text-decoration:underline}
main{max-width:var(--maxw); margin:0 auto; padding:28px 16px 80px}
.hero{
  display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start;
}
.hero img{width:280px; height:auto; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.12)}
.hero .text{flex:1; min-width:280px}
h1{font-size:2.1rem; line-height:1.25; margin:0 0 10px}
h2{margin-top:36px}
.button-row{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0}
.button{
  display:inline-block; padding:10px 14px; border:1px solid #222; border-radius:6px; text-decoration:none; color:#222;
}
.button.primary{background:#222; color:#fff; border-color:#222}
ul.meta{list-style:none; padding:0; margin:0}
ul.meta li{margin:4px 0}
footer{border-top:1px solid #eee; padding:24px 16px; text-align:center; color:#666}
.section{scroll-margin-top:80px}
blockquote{margin:10px 0; padding-left:14px; border-left:3px solid #ddd; color:#444}
small.muted{color:#666}
form.news{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
input[type="email"]{padding:10px; border:1px solid #ccc; border-radius:6px; flex:1; min-width:220px}
input[type="submit"]{padding:10px 14px; border:1px solid #222; background:#222; color:#fff; border-radius:6px}
hr{border:none; border-top:1px solid #eee; margin:28px 0}