:root {
  --bg: #0d0f0d;
  --fg: #c9d3c6;
  --dim: #6e7a6c;
  --accent: #7fd67f;
  --amber: #d6b25f;
  --blue: #7fb2d6;
  --rule: #232823;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 3rem 1.25rem 5rem;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.75 "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-ligatures: none;
  font-feature-settings: "zero" 1;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

.term { max-width: 46rem; margin: 0 auto; }

/* prompt lines: the command the "user typed" */
.ps1 { color: var(--dim); user-select: none; }
.ps1 .user { color: var(--accent); }
.ps1 .host { color: var(--amber); }
.ps1 .path { color: var(--blue); }

.line { margin: 0 0 .75rem; }

h1 {
  margin: 0 0 .3rem;
  font-size: 1.45rem;
  font-weight: 700;
}

.tagline {
  margin: 0;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: .4em;
}

.pin {
  width: .8em;
  height: .8em;
  flex: none;
  fill: var(--amber);
  stroke: none;
}

/* name on the left, nav on the right, sharing one baseline */
.titlebar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
}

/* page nav; grows as pages are added */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.nav a { border-bottom: 0; }
.nav a::before { content: "./"; color: var(--dim); }
.nav a:hover { border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }

.nav a[aria-current="page"] {
  color: var(--fg);
  font-weight: 700;
}
.nav a[aria-current="page"]::before { content: "./"; color: var(--accent); }

h1 .home {
  color: inherit;
  border-bottom: 0;
}
h1 .home:hover { color: var(--accent); }

h2 {
  margin: 2.75rem 0 .5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

/* command output blocks */
.out {
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
}
.out > p { margin: 0 0 .2rem; }
/* bullets are drawn by CSS, not written into the markup */
.item {
  padding-left: calc(1ch + .5rem);
  text-indent: calc(-1ch - .5rem);
}
.item::before {
  content: ">";
  color: var(--dim);
  margin-right: .5rem;
  font-style: normal;
}

/* sub-heading inside an output block, e.g. "recent" under reading */
.out > .sub {
  margin: 1.4rem 0 .35rem;
  color: var(--amber);
  text-transform: lowercase;
}
.out > .sub:first-child { margin-top: 0; }

/* book entry: "> title" with the author indented underneath */
.book { padding: .1rem 0; }
.book + .book { margin-top: .45rem; }
.book .title { margin: 0; font-style: italic; }
.book .desc { padding-left: calc(1ch + .5rem); }

.row { padding: .35rem 0; }
.row + .row { margin-top: .35rem; }

.date { color: var(--blue); margin-right: .9rem; }
/* fixed date column so the names line up despite varying date lengths */
#extra-curricular .date { display: inline-block; width: 14ch; margin-right: .9rem; }
.name { color: var(--fg); font-weight: 700; }
.desc { margin: .1rem 0 0; color: var(--dim); }

.key { color: var(--amber); }
.eq { color: var(--dim); }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}
a:hover { border-bottom-style: solid; }

footer { margin-top: 3rem; }
footer .line { margin: 0; }

.cursor {
  display: inline-block;
  width: .6em;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: blink 1.1s step-end infinite;
}

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

@media (max-width: 34rem) {
  body { font-size: 14px; }
  /* narrow screens: let the nav drop under the name rather than crush it */
  .titlebar { flex-wrap: wrap; gap: .2rem 1rem; }
  .date, #extra-curricular .date { display: block; width: auto; margin: 0; }
}