/* ===== Light, minimal theme ===== */
:root{
  --bg:#ffffff; 
  --fg:#111111;        /* body text and headings */
  --muted:#666666;
  --rule:#e9e9e9;
  --accent:#111111;    /* links/buttons; adjust later if you want color */
  --btn-bg:#f3f3f3;
  --btn-bg-hover:#ececec;
  --maxw:780px;
  color-scheme: light;
}

*{box-sizing:border-box}

/* ===== Fonts: Source Sans 3 site-wide ===== */
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:"Source Sans 3", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:400; font-size:16px; line-height:1.6;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw);margin:0 auto;padding:2rem 1rem 4rem}

/* ===== Header ===== */
.site-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin:0 0 2rem 0;
}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{
  display:block;
  width:100px;    /* ← logo size */
  height:auto;
}
.logo-slot{
  display:block; width:200px; height:48px; 
  background:#ddd; border:1px solid #ccc; border-radius:6px;
}
/* nav on the right */
.topnav{display:flex; gap:1.25rem; flex-wrap:wrap}
.topnav a{color:var(--fg)}
.topnav a[aria-current="page"] { text-decoration: underline; }

/* ===== Typography ===== */
h1,h2,h3,h4,h5,h6{
  font-family:"Source Sans 3", sans-serif;
  font-weight:600;            /* headings semi-bold 600 */
  color:var(--fg);
  margin:0 0 .25rem 0;
}

/* Subtitle: regular, italic, slightly greyed, body size */
.subtitle{
  font-family:"Source Sans 3", sans-serif;
  font-weight:400;            /* regular 400 */
  font-size:1rem;             /* same as body */
  font-style:italic;
  color:var(--muted);
  margin-top:-0.25rem;
  margin-bottom:1rem;
}

.byline{color:var(--muted)}

/* ===== Blocks and dividers ===== */
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}
.block .lede{margin:.25rem 0 .75rem 0;color:var(--fg)}

/* ===== Images ===== */
.project-img,
.hero-img{
  width:100%; max-width:100%; height:auto; display:block; margin:1rem 0;
}

/* ===== Buttons ===== */
.links{display:flex; flex-wrap:wrap; gap:.5rem}
.btn{
  display:inline-block; padding:.55rem .9rem; border-radius:.5rem;
  background:var(--btn-bg); color:var(--fg); border:1px solid var(--rule);
  transition:background .15s ease, transform .02s ease; font-family:inherit;
}
.btn:hover{background:var(--btn-bg-hover); text-decoration:none}
.btn:active{transform:translateY(1px)}

/* ===== Footer ===== */
.site-foot{text-align:center; color:var(--muted); margin-top:2rem}

/* Footer social links: plain text, inline & centered */
.site-foot .social{
  list-style:none;
  display:flex; justify-content:center; align-items:center;
  gap:1.25rem;
  padding:0; margin:1rem 0 0 0;
}
.site-foot .social li{ margin:0; }
.site-foot .social a{
  color:var(--fg);
  text-decoration:none;
}
.site-foot .social a:hover{ text-decoration:underline; }

/* ===== Stacked list items (title → image → summary/buttons) ===== */
.list-item { display:block; margin-bottom:1.25rem; }
.list-item h3 { margin:0 0 .5rem 0; }

/* Thumbs (used in lists) */
.list-thumb{
  display:block;
  width:100%; max-width:100%; height:auto;
  margin:.25rem 0 .75rem 0;
  border:1px solid var(--rule);
  border-radius:6px;
}

/* Clickable thumbnails with subtle hover effect */
.thumb-link{ display:block; }
.thumb-link .list-thumb{
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.thumb-link:hover .list-thumb,
.thumb-link:focus .list-thumb{
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  opacity: 0.98;
}

/* Blog summaries (Projects list loop no longer shows summary) */
.summary{ margin:0 0 .75rem 0; color:var(--fg); }

/* ===== YouTube Embed ===== */
.youtube-container{
  position:relative; width:100%;
  padding-bottom:56.25%; /* 16:9 */
  margin:1rem 0; overflow:hidden;
  border-radius:8px; background:#000;
}
.youtube-container iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}

/* Add more space between text and images in Markdown content */
p img,
img + p,
p + img {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  display: block;
}

/* Full-width any content image inside the main article block */
article.block img:not(.list-thumb):not(.logo) {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem 0;
}

/* === Blog post image captions (manual figure/figcaption) === */
.post-content figure {
  margin: 1.5rem 0;            /* overall space above/below the figure block */
  text-align: center;
}

.post-content figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 0 auto;  /* only 0.5rem gap before caption */
}

.post-content figure figcaption {
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;                   /* remove extra paragraph spacing */
  line-height: 1.4;
}