:root {
  /* Typography */
  --spacing-base: 1.5em;
  --font-family-mono: monospace;
  --font-size-base: 1em;
  --font-size-small: 1em;

  /* Spacing */
  --spacing-xs: calc(var(--spacing-base) * 0.25);
  --spacing-sm: calc(var(--spacing-base) * 0.5);
  --spacing-md: var(--spacing-base);
  --spacing-lg: calc(var(--spacing-base) * 2);

  /* Colors */
  --color-bg-primary: #100f0f;
  --color-bg-secondary: #1c1b1a;
  --color-border: #282726;
  --color-text-primary: #cecdc3;
  --color-text-muted: #878580;
  --color-selection-bg: #282726;
  --color-selection-code-bg: #323130;

  /* Layout */
  --container-width: 88ch;
  --border-radius: 8px;
  --gap-base: 1em;
  --gap-small: 0.5em;

  /* Breakpoints */
  --breakpoint-mobile: 600px;
  --breakpoint-tablet: 900px;
}

::selection {
  background: var(--color-selection-bg);
  color: var(--color-text-primary);
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

ul { list-style-type: disc; margin-left: 1.5rem; }
ol { list-style-type: decimal; margin-left: 1.5rem; }

html {
  margin: 0 0 0 calc(100vw - 100%);
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  font: var(--font-size-base) / var(--spacing-base) var(--font-family-mono);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(auto, var(--container-width));
  justify-content: center;
  padding: var(--spacing-lg);
  gap: var(--spacing-lg);
}

a {
  display: inline-block;
  margin-left: -0.16666em;
  text-decoration: none;
  border-bottom: 1px dotted;
}

p, pre { margin: var(--spacing-base) 0; }

h1, h2, h3, h4, h5 {
  margin: var(--spacing-base) 0;
  font-weight: bold;
}

.highlight { background: var(--color-border); padding: 0 3px; }
time { color: var(--color-text-muted); }

footer {
  padding: calc(var(--spacing-base) * 2) 0;
  text-align: center;
}
footer p { margin-bottom: 0; }

pre {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre ::selection { background: var(--color-selection-code-bg); color: var(--color-text-primary); }

p > code {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  white-space: pre-wrap;
  word-wrap: break-word;
}

p > code ::selection { background: var(--color-selection-code-bg); color: var(--color-text-primary); }

/* Terms list */
.terms-list ul { list-style-type: none; margin: 0; padding: 0; }
.terms-list ul li { display: inline-block; margin: 0 var(--spacing-sm) var(--spacing-sm) 0; }
.terms-list ul li:last-child { margin-right: 0; }

/* Header layout */
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-base) 0;
}

/* Path navigation */
.path-nav {
  font-family: var(--font-family-mono);
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
}

.path-nav::-webkit-scrollbar { display: none; }

.path-nav ol {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.path-nav li {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  max-width: 200px; 
}


.path-nav li a {
  text-decoration: none;
  border-bottom: none;
  padding: 0 0.25em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.path-nav li.current a { color: var(--color-text-primary); }
.path-nav a:hover { text-decoration: underline; }

.back-nav { margin-bottom: var(--spacing-base); }
.back-link { color: var(--color-text-muted); border-bottom: none; }
.back-link:hover { color: var(--color-text-primary); text-decoration: none; }

/* Time list */
.time-list ul { list-style: none; margin-left: 0; }
.time-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gap-base);
  align-items: start;
  padding: var(--spacing-sm) 0;
}

/* Main navigation */
.main-nav {
  font-family: var(--font-family-mono);
  margin-left: var(--spacing-base);
}

.main-nav nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1em;
}

.main-nav nav ul li { display: inline-block; }

.main-nav nav ul li a {
  color: var(--color-text-muted);
  border-bottom: none;
  text-decoration: none;
}

.main-nav nav ul li a:hover { color: var(--color-text-primary); }
.main-nav nav ul li a.active { color: var(--color-text-primary); font-weight: bold; }

/* Divider component */
.divider {
  border-top: 1px solid var(--color-border);
  margin: calc(var(--spacing-base) * 2) 0;
}

/* Terminal navigation */
.terminal-nav {
  font-family: var(--font-family-mono);
  border-top: 1px solid var(--color-border);
  margin-top: calc(var(--spacing-base) * 2);
  padding-top: var(--spacing-base);
}

.terminal-nav nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1em;
}

.terminal-nav nav ul li { display: inline-block; }

.terminal-nav nav ul li a,
.terminal-nav .back-link {
  color: var(--color-text-muted);
  border-bottom: none;
  text-decoration: none;
}

.terminal-nav nav ul li a:hover,
.terminal-nav .back-link:hover { color: var(--color-text-primary); }

.terminal-nav nav ul li a.active { color: var(--color-text-primary); font-weight: bold; }

.terminal-nav .back-nav { margin: calc(var(--spacing-base) * 0.5) 0; }

/* Images and figures */
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--spacing-base) auto;
  border-radius: var(--border-radius);
}

/* Profile image styling */
.profile-image {
  border-radius: 50%;
  margin: var(--spacing-base) 0;
  margin-right: var(--spacing-base);
  max-width: 70px;
  height: auto;
  padding-bottom: 1em;
}

figure { margin: var(--spacing-base) 0; text-align: center; }
figure img { margin: 0 auto; }
figcaption {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  margin-top: calc(var(--spacing-base) / 2);
}

/* Tables */
table {
  width: 100%;
  margin: var(--spacing-base) 0;
  border-collapse: collapse;
}

thead th, th {
  font-weight: bold;
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  padding: var(--spacing-sm);
}

td { padding: var(--spacing-sm); border-bottom: 1px solid var(--color-border); }

/* Typography */
strong { font-weight: bold; }
em { font-style: italic; }

/* Blockquotes */
blockquote {
  margin: var(--spacing-base) 0;
  padding: var(--spacing-sm) var(--spacing-base);
  border-left: 3px solid var(--color-border);
  background: var(--color-bg-secondary);
  font-style: italic;
}

blockquote > :first-child { margin-top: 0; }
blockquote > :last-child { margin-bottom: 0; }

/* Responsive design */
@media (max-width: var(--breakpoint-tablet)) {
  body {
    grid-template-columns: minmax(auto, calc(100vw - 3em));
    padding: var(--spacing-lg);
  }
  .header-content { gap: var(--spacing-sm); }
}

@media (max-width: 600px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  .main-nav {
    margin-left: 0;
    margin-top: var(--spacing-sm);
  }
  .main-nav nav ul {
    flex-wrap: wrap;
  }
  .path-nav li { max-width: 100px; }
  .path-nav li:first-child { max-width: none; }
  .path-nav li.current { max-width: 150px; }
  body {
    grid-template-columns: minmax(auto, calc(100vw - 2em));
    padding: var(--spacing-md);
  }
  .time-list li { grid-template-columns: 1fr; gap: var(--gap-small); }
  .time-list time { font-size: var(--font-size-small); }
}

@media (max-device-width: 600px) {
  body { padding-top: 2em; }
  pre { max-width: calc(100vw - 4em); }
  h1, h2, h3 { font-size: 1.1em; }
  .time-list li { gap: var(--spacing-xs); }
}