/* Shared design system for sachinbenny.xyz
   Used by index.html and the generated devlog.html.
   Theme-aware (light/dark via prefers-color-scheme). */

:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #6b7280;
  --line: #e5e7eb;
  --card: #fafafa;
  --accent: #2563eb;
  --tag-bg: #eef2ff;
  --tag-fg: #3730a3;
  --max: 660px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --fg: #e8eaed;
    --muted: #9aa0a6;
    --line: #262a33;
    --card: #171a21;
    --accent: #6ea8fe;
    --tag-bg: #1e2540;
    --tag-fg: #b9c6ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* Readable serif stack: Charter & Iowan Old Style are high-legibility
     serifs on Apple platforms; Georgia is the universal fallback. */
  font-family: Charter, "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Header (name only) --- */
.hero { padding: 28px 0 12px; }
.hero h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.15; margin: 0; }

/* --- Intro + portrait (photo sits inline, between paragraphs) --- */
.intro { padding: 8px 0 24px; }
.intro p { margin: 0 0 18px; }
.intro p:first-child { margin-top: 0; }
.portrait {
  width: 260px; height: auto;
  border-radius: 12px; display: block; margin: 26px 0;
  background: var(--card);
}
@media (max-width: 620px) {
  .portrait { width: 100%; max-width: 300px; }
}

/* --- Sections --- */
section.block { padding: 36px 0; border-top: 1px solid var(--line); clear: both; }
section.block h2 { font-size: 23px; margin: 0 0 14px; }
section.block p { margin: 0 0 16px; }

/* --- Prose lists (e.g. Writing) — centered, no bullets --- */
.prose-list { margin: 0; padding: 0; list-style: none; }
.prose-list li { margin: 0 0 10px; }

/* --- Footer --- */
footer.site-footer {
  color: var(--muted); font-size: 13px; margin-top: 40px;
  border-top: 1px solid var(--line); padding: 20px 0 64px;
}

/* --- Devlog-specific (used by generated devlog.html) --- */
.devlog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 48px; }
.devlog-head h1 { font-size: 28px; margin: 0; }
.devlog-sub { color: var(--muted); margin: 0 0 40px; }
.session { border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 20px 22px; margin: 0 0 20px; }
.session h2 { font-size: 20px; margin: 0 0 4px; }
.session .meta { color: var(--muted); font-size: 13px; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tag { background: var(--tag-bg); color: var(--tag-fg); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.deployed { background: #dcfce7; color: #166534; border-radius: 999px; padding: 2px 10px; font-size: 12px; }
@media (prefers-color-scheme: dark) { .deployed { background: #14351f; color: #86efac; } }
ul.items { margin: 0; padding-left: 20px; }
ul.items li { margin: 0 0 8px; }