:root {
        --bg: #ffffff;
        --fg: #111111;
        --muted: #f6f6f6;
        --link: #111111;
      }

      * { box-sizing: border-box; }
      /* Nothing may push the page wider than the viewport. Before this, 15 of
         the 57 pages scrolled horizontally on a phone: images and <video
         width="640"> at their natural size, and long GitHub URLs used as link
         text. 'anywhere' rather than 'break-word' because only 'anywhere'
         affects a box's min-content width, which is what forces the container. */
      img, video { max-width: 100%; height: auto; }
      .content, .sidebar { overflow-wrap: anywhere; }
      html, body { height: 100%; }
      body {
        margin: 0;
        font: 16px/1.6 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
        color: var(--fg);
        background: var(--bg);
      }
      a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
      a:hover { border-bottom-color: currentColor; }

      .wrap { max-width: 980px; margin: 0 auto; }

      .header { position: sticky; top: 0; z-index: 10; background: var(--bg); margin-top: 12px; }
      .header-inner { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; }
      .title { font-weight: 700; font-size: 18px; letter-spacing: .2px; padding-left: 28px; }
      .subtitle { margin-left: auto; font-size: 13px; color: #666; padding-right: 28px; }

      .grid { display: grid; grid-template-columns: minmax(0, 300px) 1fr; align-items: start; margin-top: 12px; }
      .sidebar { background: var(--bg); padding: 28px; padding-top: 0; }
      .list { list-style: none; margin: 0; padding: 0; }

      .item {
  margin-bottom: 10px;
}
.item .date {
  font-size: 12px;
  color: #666;
  padding-left: 20px; /* aligns under the title text */
}
      .item a { display: block; padding: 0px 8px; font-weight: 600; }
      .item a::before { content: "- "; font-weight: 700; margin-right: 4px; }

      .content { padding: 28px; padding-top: 0; }
      .post { max-width: 720px; }
      .post h1 { font-size: 28px; line-height: 1.25; margin: 0 0 6px; }
      .meta { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
      .post p { margin: 0 0 14px; }
      blockquote { margin: 0 0 16px; padding-left: 14px; border-left: 3px solid #ddd; color: #555; }
      code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
      pre { background: var(--muted); padding: 12px; overflow: auto; }

      .panel { display: none; }
      .main:has(.panel:target) .panel { display: none; }
      .main:has(.panel:target) .panel:target { display: block; }
      .main:not(:has(.panel:target)) #welcome { display: block; }

      @media (max-width: 900px) {
        .grid { grid-template-columns: 1fr; }
        .sidebar { position: static; padding: 14px 16px; }
        .subtitle { margin-left: 0; padding-right: 0; }
        .title { padding-left: 0; }
        
        .content {
    order: 1;
  }

  .sidebar {
    order: 2;
  }
      }
      
      
.quick-links {
  margin-bottom: 16px;
}

.quick-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quick-links li {
  margin: 2px 0;
}

.quick-links a {
  font-size: 14px;
  font-weight: 500;
  padding: 2px 0;
  display: block;
}

.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip:focus {
  position: static;
  width: auto;
  height: auto;
}

section img {
width: 320px;
}


/* Homepage and CV opening paragraph */
.lede {
  font-size: 18px;
  line-height: 1.5;
}

/* CV page */
.cv { max-width: 720px; }
.cv h2 {
  font-size: 20px;
  margin: 32px 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ddd;
}
.cv .cv-role {
  font-size: 16px;
  margin: 26px 0 0;
}
.cv .cv-type { font-weight: 400; color: #666; }
.cv .cv-dates {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 2px 0 10px;
}
.cv ul { margin: 0 0 14px; padding-left: 18px; }
.cv li { margin-bottom: 8px; }
.cv-skills { margin: 0; }
.cv-skills dt { font-weight: 600; margin-top: 10px; }
.cv-skills dd { margin: 2px 0 0; color: #333; }

/* Marks a sidebar project as client/employer work rather than a side project */
.item .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #555;
}

/* Responsive video embed. The iframe is absolutely positioned inside a fixed
   aspect-ratio box, because an iframe ignores the `img, video { max-width }`
   rule above and a fixed-size one would reintroduce the horizontal scroll
   that issue #14 removed. */
.video-embed {
  position: relative;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 14px;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* A screenshot that is the point of the section, rather than a thumbnail
   alongside prose. `section img` pins images to 320px, which is right for the
   small app shots on the older pages but wastes a full-width screenshot. */
section img.wide {
  width: 100%;
  max-width: 720px;
}

/* Long-lived projects get dated sections, newest first: an "Updated <date>"
   heading for each revision, then the original below it. Scoped to .content
   so the CV's own h2 rule is untouched. */
.content h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 34px 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ddd;
}
.content h2:first-of-type { margin-top: 22px; }
.content h2 + section { margin-top: 14px; }