/* duh.css — single hand-authored stylesheet for duh.se.
   Replaces the historic stack (bootstrap, bootstrap-theme, scribble,
   pygments, tumblr-duh, custom). Organized as cascade layers, no
   build pipeline, no hashing. */

@layer reset, base, layout, content, nav;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
}

@layer base {
  :root {
    --fg: #333;
    --fg-muted: #999;
    --bg: #fff;
    --accent-bg: #ffc;
    --border: #ccc;
    --image-bg: #f9f9f9;
    --content-max: 970px;
  }

  html, body {
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.5 Georgia, "Times New Roman", Times, serif;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--fg);
    font-weight: normal;
    margin-bottom: 0;
  }

  a {
    color: var(--fg);
    text-decoration: none;
    padding: 1px 2px;
    background: var(--accent-bg);

    &:hover {
      color: var(--fg-muted);
      background: none;
    }
  }

  hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1em 0;
  }

  blockquote {
    margin: 1em 0;
    padding: 0 1em;
    border-left: 4px solid #eee;
    color: var(--fg-muted);
  }

  code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  code { color: var(--fg); }
  pre {
    font-size: 0.85em;
    white-space: pre;
    overflow-x: auto;
  }
}

@layer layout {
  .container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 15px;
  }
  /* `.row` and `.col-md-12` are vestigial Bootstrap; single-column
     layout doesn't need rules for them. */
}

@layer content {
  article {
    & img {
      max-width: 100%;
      height: auto;
      background: var(--image-bg);
      border: 1px solid var(--border);
      padding: 0.5em;
    }

    & .date-and-tags {
      font-size: 0.875em;
      color: var(--fg-muted);
      margin: 0 0 1em;

      & a { color: var(--fg-muted); }
    }
  }
}

@layer nav {
  .pager {
    list-style: none;
    padding: 0;
    margin: 2em 0;
    display: flex;
    justify-content: space-between;
    gap: 1em;

    & li { display: inline; }
    & a {
      display: inline-block;
      padding: 5px 14px;
      border: 1px solid #ddd;
      border-radius: 15px;
      background: var(--bg);

      &:hover { background: #eee; }
    }
    & .previous { margin-right: auto; }
    & .next { margin-left: auto; }
  }
}