@charset "UTF-8";

h1 {
    margin-bottom: 0;
}

body,
html {
    font-size: 14px;
    margin: 10px;
    line-height: 1;
    letter-spacing: .01em;
    font-family: "Monaco", monospace;
    font-weight: 300;
    color: #1b2518;
    max-width: 100%;
}

@media (max-width:400px) {

    body,
    html {
        font-size: 12px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1em;
    font-weight: inherit;
    margin: 0;
    color: #1b2518;
}

a {
    text-decoration: none;
    color: #1b2518;
}

:focus {
    outline: 0;
}

ol,
ul {
    list-style-type: none;
    padding: 0;
}

body {
    max-width: 100vw;
}

.site-title h1 {
    padding: 0;
    padding-bottom: 1vw;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .05em;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}

.menu li {
  /* block by default -> items on separate lines */
  margin: 0.25em 0;
}

/* link is the hover area and a grid container */
.menu a.swap {
  display: inline-grid;
  position: relative;
  font-size: 12px;
}

/* both spans occupy the same grid cell */
.menu a.swap .default,
.menu a.swap .hover {
  grid-area: 1 / 1;
}

/* hover text hidden initially */
.menu a.swap .hover {
  opacity: 0;
}

/* swap opacity on hover/focus */
.menu a.swap:hover .default,
.menu a.swap:focus-visible .default {
  opacity: 0;
}

.menu a.swap:hover .hover,
.menu a.swap:focus-visible .hover {
  opacity: 1;
}

.site-title.swap {
  display: inline-grid;
  justify-items: start;
  align-items: center;
}

.site-title.swap .default,
.site-title.swap .hover {
  grid-area: 1 / 1;
}

.site-title.swap .hover {
  opacity: 0;
}

.site-title.swap:hover .default,
.site-title.swap:focus-visible .default {
  opacity: 0;
}

.site-title.swap:hover .hover,
.site-title.swap:focus-visible .hover {
  opacity: 1;
}

.layout {
  display: grid;
  grid-template-columns: auto 1fr; /* menu | content */
  gap: 3rem;
  align-items: start;
}

/* left panel */
.sidebar {
  white-space: nowrap; /* prevents menu wrapping */
}

/* right panel */
.content {
  margin: 0;
  min-width: 0; /* prevents overflow issues */
  margin-top: 4rem;
  padding: 1rem 1.25rem; 
  max-width: none;
}

/* title: same font as body, larger */
.work-title {
  font-size: 1.15rem;      /* same base size */
  margin: 0;
}

.work-title a {
  color: inherit;        /* same color as body text */
  text-decoration: none;
}

/* description: smaller and indented */
.work-desc {
  font-size: .9rem;
  margin: 1.5em 0 5em 0em; /* indent using character width */
}