@page {
  size: 210mm 297mm;
  margin-top: 5mm;
  margin-right: 5mm;
  margin-bottom: 5mm;
  margin-left: 5mm;
}

/* ===== Theme Variables ===== */

:root {
  /* Catppuccin Latte */
  --color-bg: #eff1f5; /* Base */
  --color-text: #4c4f69; /* Text */
  --color-h1: #363a4f; /* dark, slight blue tint */
  --color-h2: #4c4f69; /* Latte Text */
  --color-h3: #5c5f77; /* Latte Subtext1 */
  --color-h4: #6c6f85; /* Latte Subtext0 */
  --color-link: #4a7ccc;
  --color-nav-bg: #eff1f5; /* Base */
  --color-nav-link: #5c5f77; /* Subtext1 */
  --color-nav-hover: #ccd0da; /* Surface0 */
  --color-keyword-bg: #5c5f77; /* Subtext1 */
  --color-muted: #8c8fa1; /* Overlay1 */
  --color-toc-bg: #e6e8ef; /* Mantle */
  --color-toc-border: #4a7ccc;
  --color-cv-text: #4c4f69; /* Text */
  --color-cv-heading: #4c4f69; /* Text */
  --color-footer: #8c8fa1; /* Overlay1 */
}

/* Dark theme: system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #303446; /* Catppuccin Frappé Base */
    --color-text: #c6d0f5; /* Text */
    --color-h1: #8caaee; /* Blue */
    --color-h2: #85c1dc; /* Sapphire */
    --color-h3: #99d1db; /* Sky */
    --color-h4: #81c8be; /* Teal */
    --color-link: #8caaee; /* Blue */
    --color-nav-bg: #303446; /* Base */
    --color-nav-link: #b5bfe2; /* Subtext1 */
    --color-nav-hover: #414559; /* Surface0 */
    --color-keyword-bg: #51576d; /* Surface1 */
    --color-muted: #838ba7; /* Overlay1 */
    --color-toc-bg: #292c3c; /* Mantle */
    --color-toc-border: #8caaee; /* Blue */
    --color-cv-text: #c6d0f5; /* Text */
    --color-cv-heading: #c6d0f5; /* Text */
    --color-footer: #838ba7; /* Overlay1 */
  }
}

/* Dark theme: manual toggle */
[data-theme="dark"] {
  --color-bg: #303446;
  --color-text: #c6d0f5;
  --color-h1: #8caaee;
  --color-h2: #85c1dc;
  --color-h3: #99d1db;
  --color-h4: #81c8be;
  --color-link: #8caaee;
  --color-nav-bg: #303446;
  --color-nav-link: #b5bfe2;
  --color-nav-hover: #414559;
  --color-keyword-bg: #51576d;
  --color-muted: #838ba7;
  --color-toc-bg: #292c3c;
  --color-toc-border: #8caaee;
  --color-cv-text: #c6d0f5;
  --color-cv-heading: #c6d0f5;
  --color-footer: #838ba7;
}

/* ===== Base ===== */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  font-family: Lato, sans-serif;
  font-size: 1rem;
  text-align: left;
}

#header-pagedjs {
  display: none;
}

@media print {
  header nav,
  .no-print {
    display: none !important;
    height: 0;
  }

  .no-print,
  .no-print * {
    display: none !important;
    height: 0;
  }
}

/* ===== Navigation ===== */

header nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: var(--color-nav-bg);
}

header nav a {
  color: var(--color-nav-link);
  text-decoration: none;
  padding: 10px 20px;
  margin: 0 10px;
  display: inline-block;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

header nav a:hover {
  background-color: var(--color-nav-hover);
}

header #theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-nav-link);
  font-size: 1rem;
  padding: 10px 15px;
  margin: 0 5px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  line-height: 1;
}

header #theme-toggle:hover {
  background-color: var(--color-nav-hover);
}

/* ===== Headings & Links ===== */

h1 {
  color: var(--color-h1);
}

h2 {
  color: var(--color-h2);
}

h3 {
  color: var(--color-h3);
}

h4 {
  color: var(--color-h4);
}

a {
  color: var(--color-link);
}

/* ===== Content Areas ===== */

.home {
  width: 85%;
  max-width: 28cm;
  margin: 0 auto;
}

.blog {
  text-align: left;
  width: 85%;
  max-width: 28cm;
  margin: 0 auto;
  font-size: 0.9rem;
}

.blog .post {
  text-align: left;
  width: 85%;
  max-width: 28cm;
  margin: 0 auto;
  font-size: 0.9rem;
}

.blog .introduction p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.blog .post-title a {
  color: var(--color-h2);
  text-decoration: none;
}

.blog .post-title a:hover {
  text-decoration: underline;
}

.keywords-container {
  margin-top: 0.5rem;
}

.keyword {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 400;
  background-color: var(--color-keyword-bg);
  color: #fff;
  box-sizing: border-box;
  border-radius: 1rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  padding-top: 0.25rem;
  padding-bottom: 0.15rem;
  margin: 0.1rem;
}

/* ===== CV ===== */

.cv {
  text-align: left;
  width: 85%;
  max-width: 31cm;
  margin: 0 auto;
  font-size: 0.9rem;
  color: var(--color-cv-text);
}

.cv h1,
.cv h2,
.cv h3,
.cv h4 {
  color: var(--color-cv-heading);
}

.cv h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.cv-date {
  white-space: nowrap;
  margin-left: 1rem;
}

.cv table {
  border-collapse: collapse;
  margin-bottom: 1rem;
  break-inside: avoid;
  width: 100%;
  table-layout: fixed;
}

.cv table td:first-child,
.cv table th:first-child {
  width: 26%;
}

.cv table td:nth-child(2),
.cv table th:nth-child(2) {
  width: 57%;
}

.cv th,
.cv td {
  padding: 0.2rem 0.5rem;
  text-align: left;
  break-inside: avoid;
}

.cv ul {
  text-align: left;
  break-inside: avoid;
}

.cv li {
  line-height: 1em;
  padding: 0.15rem;
  margin: 0.01rem;
  break-inside: avoid;
}

.cv p {
  break-inside: avoid;
}

.cv hr {
  break-after: auto;
}

/* ===== Portrait ===== */

.my-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  object-fit: cover;
  object-position: 0 0;
}

.personal-information {
  text-align: center;
  break-inside: avoid;
}

.personal-information p {
  margin: 0;
  padding: 0;
}

.personal-information a {
  color: inherit;
}

/* ===== Utilities ===== */

.print-only {
  display: none;
}

@media print {
  .print-only {
    display: initial;
  }
}

.break-before {
  break-before: page;
}

.centered {
  text-align: center;
}

/* ===== Motivation ===== */

.motivation {
  width: 85%;
  max-width: 28cm;
  margin: 0 auto;
  font-size: 0.9rem;
}

.motivation p {
  margin-bottom: 1rem;
}

.motivation .letter-sender,
.motivation .letter-meta {
  margin-bottom: 2rem;
}

/* ===== Skills List ===== */

.skills-list {
  display: inline;
  text-align: center;
}

.skills-list li {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 400;
  background-color: var(--color-keyword-bg);
  color: #fff;
  box-sizing: border-box;
  border-radius: 1rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  padding-top: 0.25rem;
  padding-bottom: 0.15rem;
  margin: 0.1rem;
}

/* ===== Print Overrides ===== */

@media print {
  .cv {
    width: 100%;
    color: #000;
  }

  .cv h1,
  .cv h2,
  .cv h3,
  .cv h4 {
    color: #000;
  }

  .skills-list li {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    margin: 0.05rem;
  }

  .centered {
    break-before: avoid;
    margin: 0;
    padding: 0;
  }

  .cv ul {
    break-after: avoid;
    margin-top: 0;
    margin-bottom: 0;
  }

  .cv h2 {
    margin-top: 1.2rem;
    margin-bottom: 0.4rem;
  }

  .cv h3 {
    margin-top: 0.8rem;
    margin-bottom: 0;
  }

  .cv p {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* ===== Typography ===== */

code,
pre {
  font-family: "Ubuntu Mono", monospace;
}

.post-date,
.reading-time {
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ===== Table of Contents ===== */

#TableOfContents {
  background-color: var(--color-toc-bg);
  border-left: 3px solid var(--color-toc-border);
  padding: 0.6rem 1rem 0.6rem 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.85rem;
}

#TableOfContents::before {
  content: "Contents";
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: 0.4rem;
}

#TableOfContents ul {
  margin: 0;
  padding-left: 1rem;
  list-style: none;
}

#TableOfContents ul ul {
  padding-left: 1rem;
}

#TableOfContents li {
  margin: 0.2rem 0;
}

#TableOfContents li::before {
  content: "·  ";
  color: var(--color-muted);
}

/* ===== Footer ===== */

footer {
  text-align: center;
  padding: 2rem;
  font-size: 0.8rem;
  color: var(--color-footer);
}

footer a {
  color: var(--color-footer);
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
  .home,
  .blog,
  .cv,
  .motivation {
    width: 95%;
  }

  header nav {
    flex-wrap: wrap;
    padding: 5px;
  }

  header nav a {
    padding: 8px 12px;
    margin: 2px 4px;
  }
}

@media (max-width: 480px) {
  header nav {
    flex-direction: column;
    align-items: center;
  }
}