/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Dark Mode Colors */
  --text: #ffffff;
  --muted: #94a3b8;
  --link: #1a56db;
  --bg: #1b1b1b;

  --maxw: 720px;
}
*{box-sizing:border-box}
html{font-size:18px}
body{
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height:1.6;
  margin:0;
  padding:0 1rem 4rem;
}
header, main, footer{max-width: var(--maxw); margin: 0 auto;}
header{padding: 3rem 0 1rem 0;}
h1,h2,h3{line-height:1.2;margin:1.5rem 0 0.5rem}
h1{font-size: clamp(2rem, 6vw, 3rem);}
h2{font-size: clamp(1.4rem, 3vw, 1.8rem);}
p{margin:0.75rem 0}
hr{border:0;border-top:1px solid #eee;margin:1rem 0 1.25rem}
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1rem;
  align-items: baseline;       /* aligns everything */
}

.nav a {
  display: inline-block;
  line-height: 1.1;            /* consistent across all links */
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav a:hover {
  border-color: var(--text);
}

.nav a.external {
  font-size: 0.9rem;           /* smaller externals */
  color: var(--muted);
  line-height: 1.1;            /* matches baseline */
}

.nav a.external:hover {
  color: var(--link);          /* pop on hover */
}
.muted{color:var(--muted)}
.meta{font-style:italic;color:var(--muted)}
a{color:var(--link);}
.footer{color:var(--muted);font-size:.95rem;padding-top:2rem}
.card-img{width:100%;border-radius:.25rem;display:block;margin:.5rem 0}
ul.plain{list-style:none;padding-left:0}
ul.plain li{margin:.4rem 0}
/* Mobile spacing niceties */
@media (min-width: 800px){
  body{padding:0 2rem 4rem}
}
/* Default inline links inside content */
main a {
  color: var(--text);                   /* same as body text */
  text-decoration: none;                /* remove default underline */
  border-bottom: 1px solid transparent; /* invisible until hover */
}

main a:hover {
  border-bottom-color: var(--text);     /* show subtle underline on hover */
}
/* Give each creative section breathing room */
section {
  margin-top: 3rem;   /* extra spacing between sections */
}

/* Limit tall photos so sections feel balanced */
.card-img {
  width: 100%;
  border-radius: .25rem;
  margin: .5rem 0;
  max-height: 600px;   /* adjust as you like */
  object-fit: cover;   /* crops gracefully if taller */
}