/* theme: terminal - "the ops session": a warm gruvbox-material SRE scrollback, zero dependencies */

:root {
  --bg: #1b1d1e;
  --panel: #232629;
  --fg: #e2d9c5;
  --green: #a9b665;
  --yellow: #d8a657;
  --blue: #7daea3;
  --red: #ea6962;
  --gray: #8f8577;
  --line: #43474a;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-size: 15px;
  line-height: 1.75;
  padding: 3.6rem clamp(1rem, 4vw, 2rem) 4.5rem;
  overflow-x: hidden;
}

main,
footer {
  max-width: 92ch;
  margin: 0 auto;
}

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

/* ── tmux status bar ─────────────────────────────────────────────── */

.tmux {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2ch;
  padding: 0.15rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: 0.87em;
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
}

.tmux p { margin: 0; }

.tmux-session { color: var(--green); font-weight: 700; }
.tmux-win { color: var(--fg); }
.tmux-clock { color: var(--yellow); margin-left: 1ch; }

/* ── session chrome ──────────────────────────────────────────────── */

.lastlogin {
  margin: 0 0 1.8rem;
  color: var(--gray);
  font-size: 0.93em;
}

.rule {
  margin: 2.4rem 0;
  color: var(--line);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}

.cmd {
  margin: 2rem 0 0.4rem;
  font-size: 1em;
  font-weight: 400;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.prompt {
  color: var(--green);
  font-weight: 700;
}

.out {
  margin: 0 0 1rem;
  padding-left: 2ch;
}

.out > p { margin: 0 0 0.9em; }
.out > p:last-child { margin-bottom: 0; }

.comment,
.dim {
  color: var(--gray);
}

.err { color: var(--red); }

/* ── whoami ──────────────────────────────────────────────────────── */

h1 {
  margin: 0.1rem 0 0;
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--fg);
}

.whoami-role {
  margin: 0.15rem 0 0.7rem;
}

.role-title {
  color: var(--green);
  font-weight: 700;
}

.role-loc { color: var(--gray); }

.tagline { color: var(--fg); }

/* ── history --employers ─────────────────────────────────────────── */

.job {
  margin: 1.5rem 0 1.9rem;
}

.job:last-of-type { margin-bottom: 0.5rem; }

.job-head {
  margin: 0 0 0.35rem;
  font-size: 1em;
  font-weight: 400;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 2ch;
  row-gap: 0;
}

.mark { color: var(--green); }

.co {
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jrole { color: var(--fg); }

.dates { color: var(--yellow); }

.jloc { color: var(--gray); }

.job-lines {
  list-style: none;
  margin: 0 0 0.4rem;
  padding-left: 2ch;
}

.job-lines li {
  position: relative;
  margin: 0.35em 0;
  padding-left: 2ch;
}

.job-lines li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--gray);
}

.tags {
  margin: 0;
  padding-left: 2ch;
  color: var(--gray);
  text-transform: lowercase;
  overflow-wrap: anywhere;
}

.tag { margin-right: 0.25ch; }

/* ── ls -laR skills/ ─────────────────────────────────────────────── */

.ls-hdr {
  margin: 1.1rem 0 0.1rem;
  color: var(--gray);
  text-transform: lowercase;
}

.ls .ls-hdr:first-child { margin-top: 0.2rem; }

.ls-row {
  margin: 0;
  display: flex;
  column-gap: 2ch;
  align-items: baseline;
}

.ls-perm {
  flex: 0 0 10ch;
  color: var(--gray);
}

.ls-own {
  flex: 0 0 8ch;
  color: var(--gray);
}

.ls-grp {
  flex: 0 0 3ch;
  color: var(--gray);
}

.ls-dir {
  color: var(--blue);
  font-weight: 700;
  text-transform: lowercase;
}

.ls-file { text-transform: lowercase; }

/* ── cat education.txt ───────────────────────────────────────────── */

.edu {
  display: grid;
  grid-template-columns: 13ch 1fr;
  column-gap: 2ch;
  margin: 0 0 1rem;
}

.edu .dates { grid-column: 1; }

.edu-degree {
  grid-column: 2;
  font-weight: 700;
}

.edu-school {
  grid-column: 2;
  color: var(--gray);
}

/* ── contact --list ──────────────────────────────────────────────── */

.contact {
  list-style: none;
  margin: 0;
  padding-left: 2ch;
}

.contact li { margin: 0; }

.contact a {
  display: flex;
  column-gap: 2ch;
  padding: 0.1rem 0.5ch;
  margin-left: -0.5ch;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact .key {
  flex: 0 0 9ch;
  color: var(--gray);
}

.contact .val {
  color: var(--blue);
  min-width: 0;
}

.contact a:hover { background: var(--panel); }
.contact a:hover .val { text-decoration: underline; text-underline-offset: 3px; }

section > .comment { padding-left: 2ch; }

/* ── links & focus ───────────────────────────────────────────────── */

a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── theme switcher & sign-off ───────────────────────────────────── */

footer .rule { margin-bottom: 1.6rem; }

.theme-switch .comment { margin: 0; }

.theme-switch .cmd { margin: 0.1rem 0 0; }

.theme-switch .pipe {
  color: var(--gray);
  margin: 0 0.75ch;
}

.theme-switch .current {
  color: var(--fg);
  text-decoration-color: var(--yellow);
}

footer > .comment { margin: 1.4rem 0 0; }

.end-prompt { margin-top: 1.4rem; }

.cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.12em;
  margin-bottom: -0.16em;
  background: var(--fg);
  animation: blink 1.2s steps(1) infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── 404 ─────────────────────────────────────────────────────────── */

.error-page main { padding-top: 1.5rem; }

.error-page .cmd { margin-top: 1.2rem; }

/* ── responsive ──────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .ls-own,
  .ls-grp { display: none; }
}

@media (max-width: 480px) {
  body { font-size: 14px; padding-top: 3.2rem; }

  .tmux { font-size: 0.85em; padding: 0.1rem 0.7rem; }

  .job-head { column-gap: 1.5ch; }

  .edu { grid-template-columns: 1fr; }
  .edu .dates,
  .edu-degree,
  .edu-school { grid-column: 1; }

  .contact a { flex-wrap: wrap; row-gap: 0; }
}

/* ── motion & print ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

@media print {
  :root {
    --bg: #ffffff;
    --panel: #f2f0ea;
    --fg: #1a1a1a;
    --green: #55631f;
    --yellow: #7a5817;
    --blue: #2f5d54;
    --red: #9c2b25;
    --gray: #5c564c;
    --line: #c8c4ba;
  }

  html { color-scheme: light; }

  body { padding: 0; font-size: 11pt; }

  .tmux,
  .theme-switch,
  .cursor,
  .end-prompt { display: none; }

  a { text-decoration: none; }

  .job { break-inside: avoid; }
}