/* jeff.hemminger.haus
 * Style loosely modeled on aaronsw.com's oldstyle.css:
 *   - Georgia serif, generous line-height, single narrow column
 *   - Highlighted links with dotted underlines
 *   - Right-hand sidebar float
 * All warm yellow/olive/mustard tones remapped to a cool blue palette.
 */

/* -- palette -------------------------------------------------------------
 * page bg    #eef4fb   very pale blue (was #ffd cream)
 * link hi    #d6e6f7   soft blue highlight (was #ffc)
 * link hi 2  #c9dcf1   accent highlight for titles (was #ffa)
 * ink        #1b2a3a   near-black with cool cast
 * link       #2f4f7f   deep steel blue (was olive #68693F)
 * mute       #5f7593   muted slate (was #888)
 * rule       #b7c9de   pale rule (was #D2D6BC)
 * sidebar-t  #4a6785   sidebar text
 * sidebar-l  #3d5a83   sidebar links (was #8B8A64)
 * pill-bg    #cfd9e9   soft pill background (was #D2D6BC)
 * -----------------------------------------------------------------------
 */

/* Reset — same rhythm-reset Aaron used. */
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

html { background-color: #eef4fb; }

body {
  font-family: Georgia, "Times New Roman", Times, serif;
  background-color: #eef4fb;
  color: #1b2a3a;
  font-size: 12px;
  line-height: 1.5em;
}

/* Vertical rhythm: 1em = 12px base, 1.5em line-height. */
p, ol, ul, pre, dl, blockquote {
  font-size: 1em;
  margin-bottom: 1.5em;
  line-height: 1.5em;
}

sup { vertical-align: super; line-height: 0.1em; font-size: 0.75em; }
pre { padding-left: 1em; }

/* -----------------------------------------------------------------------
 * Layout: narrow single column, mirroring aaronsw.com's 39em body cap.
 * The site-header/nav and article content share the same column.
 * -----------------------------------------------------------------------
 */

.site-header,
#content,
.site-footer {
  max-width: 39em;
  margin: 0 auto;
  padding: 0 1.5em;
}

.site-header {
  padding-top: 3em;
  padding-bottom: 1em;
}

.site-title {
  font-size: 3em;
  line-height: 1.2em;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 0.25em;
}

.site-title a,
.site-title a:link,
.site-title a:visited {
  color: #2f4f7f;
  background-color: #c9dcf1;
  padding: 0.15em 0.35em;
  text-decoration: none;
  border-bottom: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-nav {
  text-align: center;
  color: #5f7593;
  font-size: 0.95em;
  margin-bottom: 2em;
}

.site-nav a,
.site-nav a:link,
.site-nav a:visited {
  color: #2f4f7f;
  background-color: #d6e6f7;
  text-decoration: none;
  padding: 0 0.15em;
  border-bottom: none;
}

/* -----------------------------------------------------------------------
 * Article typography
 * -----------------------------------------------------------------------
 */

h1.title,
#content > h1:first-child {
  font-size: 1.6em;
  line-height: 1.2em;
  margin: 0.5em 0 1em 0;
  font-weight: normal;
  text-align: left;
  color: #1b2a3a;
}

h2 {
  font-size: 1.25em;
  line-height: 1.286em;
  margin: 1.929em 0 0.643em 0;
  font-weight: normal;
  color: #2f4f7f;
}

h3 {
  font-size: 1.1em;
  line-height: 1.4em;
  margin: 1.5em 0 0.5em 0;
  font-weight: bold;
  color: #2f4f7f;
}

h4, h5, h6 {
  font-size: 1em;
  font-weight: bold;
  margin: 1.25em 0 0.5em 0;
  color: #2f4f7f;
}

p {
  font-size: 1em;
  line-height: 1.6em;
  margin-bottom: 1.25em;
}

/* Big body copy on the homepage, à la aaronsw.com inline overrides. */
.homepage p {
  font-size: 1.4em;
  line-height: 1.9em;
  margin-top: 0.8em;
  margin-bottom: 1.5em;
}

blockquote {
  margin-left: 2em;
  margin-right: 1em;
  color: #4a6785;
  font-style: italic;
}

ul, ol { margin-left: 2.5em; }
li { margin-bottom: 0.35em; }

hr {
  border: 0;
  border-top: 1px solid #b7c9de;
  width: 8em;
  height: 0;
  margin: 2em 0 1.5em 0;
}

/* -----------------------------------------------------------------------
 * Links: Aaron's signature is the highlighted background + dotted rule.
 * -----------------------------------------------------------------------
 */

a:link,
a:visited {
  color: #2f4f7f;
  text-decoration: none;
  background-color: #d6e6f7;
  border-bottom: 1px dotted #7a9bc4;
}

a:hover,
a:focus {
  background-color: #b8d3ee;
  border-bottom: 1px solid #2f4f7f;
}

/* -----------------------------------------------------------------------
 * Code
 * -----------------------------------------------------------------------
 */

code, pre, tt, kbd, samp {
  font-family: "SF Mono", "Menlo", "DejaVu Sans Mono", "Consolas", monospace;
  font-size: 0.92em;
}

code {
  background: #dbe6f4;
  padding: 0 0.25em;
  border-radius: 2px;
}

pre {
  background: #dbe6f4;
  border-left: 3px solid #7a9bc4;
  padding: 0.75em 1em;
  margin: 1.25em 0 1.75em 0;
  overflow-x: auto;
  line-height: 1.5em;
  border-radius: 2px;
}

pre code {
  background: transparent;
  padding: 0;
}

/* Org's src-block wrapper */
.org-src-container {
  margin: 1.25em 0 1.75em 0;
}

/* -----------------------------------------------------------------------
 * Right-side sidebar (opt-in via .sidebar on a paragraph or div)
 * -----------------------------------------------------------------------
 */

.sidebar {
  float: right;
  max-width: 18em;
  margin: 0.5em 0 1em 1.5em;
  padding: 0.75em 1em;
  border: 1px solid #b7c9de;
  background: #dfe9f6;
  color: #4a6785;
  font-size: 0.92em;
  line-height: 1.5em;
}

.sidebar a:link,
.sidebar a:visited {
  color: #3d5a83;
  background: transparent;
  border-bottom: 1px dotted #7a9bc4;
}

.sidebar h3 {
  color: #2f4f7f;
  margin-top: 0;
  font-size: 1em;
}

/* -----------------------------------------------------------------------
 * Blog list (sitemap output)
 *
 * The Org sitemap renders a top-level <ul> directly under #content with
 * no wrapping section.  Style *only* that top-level list without bullets
 * so post rows read as a compact date + title index.  Nested lists and
 * lists inside actual content sections keep their normal bullets.
 * -----------------------------------------------------------------------
 */

#content > ul { list-style: none; margin-left: 0; }
#content > ul > li { margin-bottom: 0.5em; }

.post-date {
  display: inline-block;
  color: #5f7593;
  font-variant-numeric: tabular-nums;
  width: 6.5em;
  font-size: 0.95em;
}

/* Article date/byline on individual posts */
.post-meta,
p.subtitle,
.published {
  color: #5f7593;
  font-style: italic;
  margin-top: -0.5em;
  margin-bottom: 1.5em;
}

/* -----------------------------------------------------------------------
 * Footer
 * -----------------------------------------------------------------------
 */

.site-footer {
  border-top: 1px solid #b7c9de;
  margin-top: 4em;
  padding-top: 1.5em;
  padding-bottom: 3em;
  color: #5f7593;
  font-size: 0.9em;
  text-align: center;
}

.site-footer address {
  font-style: normal;
  margin-bottom: 0.5em;
}

.site-footer a:link,
.site-footer a:visited {
  color: #3d5a83;
  background: transparent;
  border-bottom: 1px dotted #7a9bc4;
}

.site-footer .license,
.site-footer .built {
  font-size: 0.9em;
  margin: 0.3em 0;
}

/* -----------------------------------------------------------------------
 * Tables
 * -----------------------------------------------------------------------
 */

table {
  border-collapse: collapse;
  margin: 1em 0 1.5em 0;
}
th, td {
  padding: 0.3em 0.75em;
  border-bottom: 1px solid #b7c9de;
  text-align: left;
  vertical-align: top;
}
th { color: #2f4f7f; font-weight: bold; }

/* -----------------------------------------------------------------------
 * Images
 * -----------------------------------------------------------------------
 */

img {
  max-width: 100%;
  height: auto;
}

/* -----------------------------------------------------------------------
 * Small screens: drop the sidebar float, tighten padding.
 * -----------------------------------------------------------------------
 */

@media (max-width: 600px) {
  body { font-size: 14px; }
  .site-header, #content, .site-footer { padding: 0 1em; }
  .site-title { font-size: 2.2em; }
  .sidebar { float: none; max-width: 100%; margin: 1em 0; }
  .homepage p { font-size: 1.2em; line-height: 1.7em; }
}