/* styles.css */
:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #444444;
  --link: #0a58ca;
  --border: #e6e6e6;
  --codebg: #f6f6f6;

  --maxw: 760px;
  --pad: 28px;
  --radius: 12px;

  --font: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Default to user's system preference */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115;
    --text:#f2f2f2;
    --muted:#b9b9b9;
    --link:#8bb4ff;
    --border:#262a33;
    --codebg:#171a21;
  }
}

/* Optional manual override (no JS) for browsers that support :has() */
body:has(#theme-toggle:checked){
  --bg:#0f1115;
  --text:#f2f2f2;
  --muted:#b9b9b9;
  --link:#8bb4ff;
  --border:#262a33;
  --codebg:#171a21;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  font-size: 1.125rem;
}

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

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 56px var(--pad) 64px;
}

h1{
  font-size: 2.25rem;
  line-height: 1.2;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.subtitle{
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 1.05rem;
}

h2{
  margin: 2.25rem 0 0.5rem;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h3{
  margin: 1.75rem 0 0.4rem;
  font-size: 1.15rem;
  line-height: 1.3;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
}

p{
  margin: 0.75rem 0;
}

ul{
  margin: 0.75rem 0 0.75rem 1.25rem;
  padding: 0;
}

li{
  margin: 0.35rem 0;
}

strong{ font-weight: 700; }
em{ font-style: italic; }

.portfolio-figure{
  margin: 1.25rem 0 1.75rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
}

.portfolio-figure picture,
.portfolio-figure img{
  display:block;
  max-width: 400px;
  width: 100%;
  height:auto;
  margin: 0 auto;
}

.portfolio-figure figcaption{
  margin-top: 0.75rem;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  text-align: center;
}

.asterism{
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* Copyright footer */
.copyright{
  margin-top: 1.5rem;
  text-align: center;
}

.copyright p{
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

/* Theme toggle (CSS-only).
   If :has() isn't supported by the browser, the toggle will not override the system theme. */
.theme-toggle{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, var(--text) 8%);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}

.theme-toggle:hover{
  background: color-mix(in srgb, var(--bg) 86%, var(--text) 14%);
}

.theme-toggle-checkbox{
  position: fixed;
  top: -9999px;
  left: -9999px;
  opacity: 0;
}

/* Ensure SVGs render cleanly */
.theme-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--text); /* Matches your theme text color automatically */
}

.theme-toggle .sun { display: block; }
.theme-toggle .moon { display: none; }

/* When dark is enabled via toggle, swap icons */
body:has(#theme-toggle:checked) .theme-toggle .sun { display: none; }
body:has(#theme-toggle:checked) .theme-toggle .moon { display: block; }

/* Mobile */
@media (max-width: 640px){
  body {
    font-size: 1.15rem;
  }

  .container{
    padding: 52px 18px 56px;
  }
  h1{
    font-size: 1.85rem;
  }
  h2{
    font-size: 1.35rem;
  }
  .portfolio-figure{
    padding: 0.75rem;
  }
  .portfolio-figure picture,
  .portfolio-figure img{
    max-width: 100%;
  }
}