/* === FONT IMPORT (place at the very top) === */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:300,400,500,700&display=swap');

/* === DESIGN TOKENS === */
:root {
  --max: 800px;

  /* Light theme defaults */
  --bg: #ffffff;
  --fg: #222222;
  --muted: #666666;
  --border: #eeeeee;
  --link: #1a66ff;
  --link-hover: #4c8dff;

  /* Rhythm & sizing */
  --radius: 10px;
  --space: 1.25rem;
  --line: 1.7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --fg: #eaeaea;
    --muted: #b5b5b5;
    --border: #222222;
    --link: #a8c8ff;
    --link-hover: #cfe1ff;
  }
}

/* Let UA components (inputs, scrollbars) match the theme */
:root { color-scheme: light dark; }

/* -- Dark-mode readability fixes (append at end) -- */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  /* Use light-on-dark tokens everywhere */
  :root {
    --fg: #eaeaea;        /* main text */
    --muted: #c2c2c2;     /* secondary text (header p, footer) */
    --border: #333333;    /* dividers */
    --link: #a8c8ff;      /* links */
    --link-hover: #cfe1ff;
  }

  /* Base */
  body { background: #121212; color: var(--fg); }

  /* Header / footer text that was too dim */
  header p,
  footer { color: var(--muted); }

  /* Dividers that were still #eee */
  header,
  footer,
  section + section { border-color: var(--border); }

  /* Headings — ensure strong contrast on dark */
  h1 { color: #ffffff; }
  h2 { color: #eeeeee; }
  h3 { color: #dddddd; }

  /* Lists & small text sometimes inherit muted from UA styles */
  ul, ol, li, small { color: var(--fg); }

  /* Links */
  a { color: var(--link); }
  a:hover,
  a:focus { color: var(--link-hover); }

  /* Profile image subtle outline for separation on dark bg */
  .profile-photo {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  }
}


/* === BASE RESET === */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--fg);
  line-height: var(--line);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === LAYOUT === */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space);
}

/* === HEADER / FOOTER === */
header,
footer {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0; /* slightly tighter than 1.5em for balance */
}

header { border-top: none; }
footer { border-bottom: none; color: var(--muted); }

header h1 { margin: 0 0 .25rem; }
header p  { margin: 0 0 .5rem; color: var(--muted); }

/* === NAV === */
nav a {
  margin-right: 1rem;
  text-decoration: none;
  color: var(--link);
}
nav a:hover,
nav a:focus {
  color: var(--link-hover);
  text-decoration: underline;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Slab', serif;
  font-weight: 400;
  margin: 1.5em 0 .6em;
  line-height: 1.25;
  color: #fff; /* readable on dark; overridden below per level */
}
h1 { 
  font-weight: 500; 
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
}
h2 { 
  color: #ddd; 
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}
h3 { 
  color: #ccc; 
  font-size: clamp(1.2rem, 2vw, 1.4rem);
}

p { 
  margin: 0 0 1em; 
  color: var(--fg);
  text-align: justify;
  text-justify: inter-word;
}

ul { padding-left: 1.25rem; }

/* === LINKS (global) === */
a {
  color: var(--link);
  text-decoration: none;
}
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus { outline: 2px solid currentColor; outline-offset: 2px; }

/* === SECTIONS & DIVIDERS === */
section { margin-top: 3rem; }
section + section {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* === PROFILE IMAGE === */
.profile-photo {
  float: right;
  width: min(160px, 35%);
  max-width: 160px;
  margin: 0 0 1em 1em;
  border-radius: var(--radius);
  display: block;
  height: auto;
  /* Optional: subtle separation on dark backgrounds */
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--bg), #000 20%);
}

/* === ACCESSIBILITY / UX === */
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}