:root {
  --bg: #ede4e1;
  --text: #2D2B27;
  --link: #9a0303;
  --link-hover: #dd0000;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: Consolas, "Lucida Console", Menlo, Monaco, "DejaVu Sans Mono", "Liberation Mono", monospace;
  line-height: 1.6;
}

/* Internal links use the text color; links that leave the site use the red. */
a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover, a:focus-visible { text-decoration-thickness: 2px; }
a[href^="http"], a[href^="//"], a[href^="mailto:"] { color: var(--link); }
a[href^="http"]:hover, a[href^="http"]:focus-visible,
a[href^="//"]:hover, a[href^="//"]:focus-visible,
a[href^="mailto:"]:hover, a[href^="mailto:"]:focus-visible { color: var(--link-hover); }

.wrap { width: 100%; padding: 0 1.5rem; }

header.site { padding: 1.25rem 0; }
header.site .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1.5rem;
}
.brand { font-weight: bold; font-size: 1.15rem; text-decoration: none; }
.brand:hover { text-decoration: underline; }

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.25rem 1.25rem;
}
nav a { text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { text-decoration: underline; }

/* Phone menu: a <details> element, so it needs no JavaScript. */
.nav-narrow { display: none; position: relative; }
.nav-narrow summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--text);
  padding: 0.2rem 0.8rem;
}
.nav-narrow summary::-webkit-details-marker { display: none; }
.nav-narrow nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 10;
  min-width: 12rem;
  padding: 0.75rem 1rem;
  background: var(--bg);
  border: 1px solid var(--text);
}
.nav-narrow ul { flex-direction: column; gap: 0.6rem; }

@media (max-width: 40rem) {
  .nav-wide { display: none; }
  .nav-narrow { display: block; }
}

main { flex: 1; padding: 1.5rem 0 2rem; }

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.75rem; margin: 0 0 1rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.5rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.25rem; }

/* Welcome page: centered both ways in the space between header and footer */
.home main {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.home h1 { font-size: 2.25rem; }

.entry { margin: 0 0 1.75rem; }
.meta { margin: 0 0 0.4rem; font-size: 0.9rem; }

.resume {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 30rem;
  border: 1px solid var(--text);
}

footer.site { padding: 1.25rem 0; font-size: 0.9rem; }
footer.site p { margin: 0.25rem 0; }
.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.5rem 2rem;
}
.foot-right { margin-left: auto; text-align: right; }
.sep { margin: 0 0.15em; }