/* Minimal, modern, responsive layout */
:root{
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --accent: #0f67ff;
  --card: #f6f7f9;
  --surface: #f2f4f7; /* tinted panel background */
  --border: color-mix(in oklab, var(--fg) 10%, transparent);
  --radius: 16px;
  --maxw: 920px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0e13;
    --fg: #f2f5f7;
    --muted: #a5acb8;
    --card: #141922;
    --surface: #10151f; /* darker tinted panel */
    --accent: #82aaff;
  }
}
*{box-sizing: border-box}
html, body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji; }
img{ display:block; max-width: 100%; height:auto; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* HERO */
.hero{
  display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px;
  align-items: center; padding: 56px 0 24px;
}
.br-sm{ display:none }
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; padding-top: 36px }
  .br-sm{ display: initial }
}
.hero-text h1{ font-size: clamp(32px, 6vw, 56px); line-height: 1.05; margin: 0 0 14px; letter-spacing:-0.5px; }
.tagline{ font-size: 18px; color: var(--muted); max-width: 70ch; }
.cta-row{ display:flex; gap:12px; margin-top: 18px; }
.btn{ display:inline-block; padding: 10px 14px; border-radius: 999px; border:1px solid transparent; }
.btn.primary{ background: var(--fg); color: var(--bg); }
.btn.ghost{ border-color: var(--border); color: var(--fg); }

.hero-photo{ justify-self: end; }
.hero-photo img{ width: 320px; height: 320px; object-fit: cover; border-radius: 24px; background: var(--card); border:1px solid var(--border); }
@media (max-width: 900px){
  .hero-photo{ justify-self: start }
}

/* SOCIALS */
.socials{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.socials .divider{ opacity: 0.3 }
.social{ display:inline-flex; align-items:center; gap:8px; color: var(--fg); opacity:0.9; }
.social:hover{ opacity:1; text-decoration: none; }
.icon{ display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; }

/* SECTIONS */
.section{ padding: 40px 0; }
.section h2{ font-size: 24px; margin: 0 0 12px; }
.muted{ color: var(--muted); }
.small{ font-size: 14px; }

.section.alt{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

/* FEED */
.feed{
  display:grid; gap: 12px;
}
.post{
  display:block; padding: 14px 16px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px;
}
.post h3{
  margin: 0 0 6px 0; font-size: 18px; line-height: 1.25; color: var(--fg);
}
.post p{ margin:0; }

/* FOOTER */
.site-footer{
  border-top:1px solid var(--border);
  margin-top: 32px; padding: 18px 20px; text-align: center;
}