/* Terminal — monospace, shell-prompt headings. Light and dark, chosen by data-mode on <html>. */
:root {
  color-scheme: dark;
  --bg: #0d1117; --fg: #c9d1d9; --muted: #7d8590; --green: #3fb950; --amber: #d29922; --cyan: #58a6ff;
  --border: #30363d; --rule: #21262d; --dots: #484f58;
}
:root[data-mode="light"] {
  color-scheme: light;
  --bg: #f6f8fa; --fg: #1f2328; --muted: #59636e; --green: #116329; --amber: #7d4e00; --cyan: #0969da;
  --border: #d0d7de; --rule: #d8dee4; --dots: #8c959f;
}
body { background: var(--bg); color: var(--fg); font: 14.5px/1.7 "JetBrains Mono", ui-monospace, monospace; }
a { color: var(--cyan); }
#page { max-width: 900px; }

.site-nav { background: var(--bg); }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--fg); text-decoration: underline; }
.site-nav a[aria-current] { color: var(--green); font-weight: 700; }
.site-nav .brand { font-weight: 700; }
.menu-toggle, .mode-toggle { font: inherit; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.menu-toggle:hover, .mode-toggle:hover { color: var(--fg); }
.mode-toggle { font-size: 12px; text-align: left; }

.fortune { margin-top: 18vh; max-width: 62ch; }
.fortune-prompt { margin: 0 0 14px; color: var(--muted); }
.fortune figure { margin: 0 0 0 2ch; }
.fortune blockquote { margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: var(--fg); }
.fortune figcaption { color: var(--muted); }
.fortune cite { color: var(--amber); font-style: normal; }

#masthead { border: 1px solid var(--border); border-radius: 8px; padding: 40px 24px 24px; position: relative; margin-bottom: 36px; }
#masthead::before {
  content: "● ● ●"; position: absolute; top: 10px; left: 14px; font-size: 11px; letter-spacing: 2px; color: var(--dots);
}
:root[data-mode="dark"] .mode-toggle::after { content: ":set light"; }
:root[data-mode="light"] .mode-toggle::after { content: ":set dark"; }
.name { font-size: 30px; margin: 0; color: var(--green); }
.name::before { content: "> "; color: var(--muted); }
.name::after { content: "_"; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.headline { margin: 4px 0 12px; color: var(--amber); }
.headline::before { content: "# "; color: var(--muted); }
.contact { color: var(--muted); }
.print { color: var(--green); border-radius: 4px; }

.sec { margin-bottom: 34px; }
.sec h2 { font-size: 15px; margin: 0 0 14px; color: var(--green); font-weight: 700; }
.sec h2::before { content: "$ cat ./"; color: var(--muted); font-weight: 400; }
.sec h2::after { content: ".md"; color: var(--muted); font-weight: 400; }
.sec > p { margin: 0 0 0 2ch; }
.entry { margin: 0 0 18px 2ch; padding-left: 2ch; border-left: 2px solid var(--rule); }
.entry h3 { font-size: 14.5px; }
.org { color: var(--cyan); }
.role { color: var(--fg); font-weight: 400; }
.role::before { content: " :: "; color: var(--muted); }
.entry .date { color: var(--amber); font-size: 13px; }
.entry p:not(.date) { margin: 4px 0 0; }

/* Left pane on larger screens. */
@media screen and (min-width: 721px) {
  body { display: flex; align-items: flex-start; }
  #page { flex: 1; min-width: 0; padding: 40px 32px 64px; }
  .site-nav {
    position: sticky; top: 0; flex: none; width: 200px; height: 100vh;
    display: flex; flex-direction: column; padding: 40px 24px 24px; border-right: 1px solid var(--border);
  }
  .nav-bar { margin-bottom: 20px; }
  .menu-toggle { display: none; }
  .nav-menu { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .mode-toggle { margin-top: auto; padding: 6px 0; }
}

/* Top bar with a drop-down menu on phones. */
@media screen and (max-width: 720px) {
  body { font-size: 14px; overflow-wrap: anywhere; }
  .site-nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--border); }
  .nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
  .brand { padding: 12px 0; }
  .menu-toggle { min-height: 44px; padding: 0 0 0 16px; }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding-bottom: 8px; background: var(--bg); border-bottom: 1px solid var(--border);
  }
  .site-nav.open .nav-menu { display: block; }
  .nav-menu a, .mode-toggle { display: block; width: 100%; padding: 12px 16px; line-height: 20px; }

  #page { padding: 20px 16px 48px; }
  #masthead { padding: 36px 16px 16px; margin-bottom: 28px; }
  .name { font-size: 24px; }
  .sec > p { margin-left: 0; }
  .entry { margin-left: 0; padding-left: 1.5ch; }
  .fortune { margin-top: 10vh; }
  .fortune figure { margin-left: 0; }
  .fortune blockquote { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) { .name::after { animation: none; } }
@media print {
  :root[data-mode] {
    color-scheme: light;
    --bg: #fff; --fg: #000; --muted: #555; --green: #000; --amber: #333; --cyan: #000;
    --border: #ccc; --rule: #ccc; --dots: #ccc;
  }
  .site-nav { display: none; }
  body { font-size: 9.5pt; } .name::after { display: none; } #masthead { border: 0; padding: 0; }
  #masthead::before { display: none; }
}