:root {
  --brand: #0000FF;
  --text: #0000FF;
  --bg: #F5F5F5;
  --max: 1200px;
  --header-h: 72px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
}

/* Header + logo + About button */
.site-header.centered{background:var(--bg);position:sticky;top:0;z-index:20}
.site-header .inner{
  max-width:var(--max);
  margin:0 auto;
  padding:.6rem 1rem;
  display:flex;
  align-items:center;
}
.logo{height:48px;display:block}
.logo-text{font-weight:800;letter-spacing:-.02em;color:var(--text)}
.top-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
}
.about-btn{
  font-family:ui-sans-serif,system-ui;
  text-decoration:none;
  padding:.55rem 1rem;
  border-radius:6px;
  border:2px solid var(--text);
  color:var(--text);
  font-weight:600;
  transition:.2s ease;
}
.about-btn:hover{
  background:var(--text);
  color:#fff;
}

/* Hero */
.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:1.5rem 1rem 1rem;
}
.hero.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:center;
}
.hero-left{max-width:640px;justify-self:flex-start}
.hero-right{display:flex;justify-content:center;align-items:center}
.hero-illustration{
  width:100%;
  max-width:640px;
  height:auto;
  object-fit:contain;
}

/* Headline + subheadline (like v21) */
h1,h2,h3,h4,h5,h6,
.hero-title{
  font-family:'Instrument Serif',Georgia,ui-serif,serif;
  font-weight:400;
  color:var(--text);
}
.hero-title{
  font-size:clamp(3rem,2rem + 4vw,6rem);
  line-height:0.92;
  margin:.2rem 0 .7rem;
}
.hero-sub{
  margin:0;
  max-width:60ch;
  font-size:1.05rem;
}

/* Signup */
.signup{
  display:flex;
  align-items:stretch;
  margin-top:1.4rem;
  max-width:520px;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #0000FF;
}
.signup input[type="email"]{
  flex:1;
  min-width:240px;
  padding:1rem 1.2rem;
  border:none;
  font-size:1rem;
  color:#000;
  background:#fff;
}
.signup input:focus{outline:none}
.signup button{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0000FF;
  color:#fff;
  border:none;
  padding:0 1.5rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  cursor:pointer;
}
.signup button:hover{opacity:.9}

/* Post grid */
.post-grid{
  max-width:var(--max);
  margin:2.5rem auto;
  padding:0 1rem;
}
.post-grid .grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.grid-item{
  overflow:hidden;
  border-radius:12px;
}
.grid-item img{
  width:100%;
  border-radius:12px;
  display:block;
  margin-bottom:.8rem;
  transition:transform .4s ease;
}
.grid-item:hover img{transform:scale(1.05)}
.grid-title{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:400;
  margin:0;
  font-size:1.25rem;
}
.grid-title a{color:var(--text);text-decoration:none}
.grid-title a:hover{opacity:.9}

/* Banner */
.banner-section{
  max-width:var(--max);
  margin:3rem auto 0;
  padding:0 1rem 2rem;
}
.banner-image{
  width:100%;
  aspect-ratio:8/1;
  object-fit:cover;
  display:block;
}

/* Footer */
.site-footer{background:var(--bg)}
.site-footer .inner{
  max-width:var(--max);
  margin:0 auto;
  padding:1.2rem;
  color:var(--text);
}

.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-right a {
  margin-left: 1.2rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}

.footer-right a:hover {
  opacity: 0.8;
}

/* On mobile stack vertically */
@media(max-width: 600px) {
  .footer-flex {
    flex-direction: column;
    gap: 0.6rem;
  }
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1rem;
}

[data-members-error]:empty,
[data-members-success]:empty {
  display: none;
}

.message {
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

/* Responsive / mobile image-first & smaller image */
@media(max-width:900px){
  .hero.two-col{grid-template-columns:1fr}
  .hero-right{order:1}
  .hero-left{order:2}
  .hero-illustration{
    max-height:220px;
    margin-bottom:1rem;
  }
  .post-grid .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .post-grid .grid{grid-template-columns:1fr}
}