/* ==========================================================================
   Parttime Monster - theme
   A rebuild of the original 2009 Blogger skin by Aleksandr Sukhov:
   same colours, sizes and rhythm; the broken bits fixed and made responsive.
   ========================================================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: #ffffff;
  color: #000000;
  font-family: "Open Sans Condensed", "Myriad Set Pro", "Myriad Pro", Verdana, Geneva, sans-serif;
  font-size: 1.3em;        /* the original: 1.3em on a 16px root = 20.8px */
  line-height: 1.4;        /* original body metric */
  margin: 20px auto;
  max-width: 880px;        /* wider reading column (was 760px) */
  padding: 0 20px;
}

/* --- links (the original .temp style: quiet, with a hairline underline) --- */

a { text-decoration: none; }
a:link, a:visited { color: #333333; }
a:hover { color: #999999; }

.post-body a,
.archived-comments a,
.site-footer a,
.comments-note a {
  color: #303030;
  border-bottom: 1px solid #c0c0c0;
}
.post-body a:hover, .archived-comments a:hover, .site-footer a:hover { color: #999999; }

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

/* --- header --------------------------------------------------------------- */

.site-header h1 {
  margin: 0;
  padding: 0;
  color: #333333;
  /* the original wrote `font: Helvetica, sans-serif`, which browsers drop as
     invalid; this is what the author meant */
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.7em;
  font-weight: normal;
  line-height: 1.2;
}
.site-title a:link, .site-title a:visited { color: #333333; }
.site-title a:hover { color: #999999; }

/* --- layout: sidebar on the left, posts on the right (as the original) ---- */

.layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 50px;
}

.main { flex: 1 1 auto; min-width: 0; }

.sidebar {
  flex: 0 0 190px;
  width: 190px;
  color: #666666;
  font-size: 1em;
}
.sidebar ul { margin: 0; padding: 0; }
.sidebar li {
  margin: 5px 0;
  padding: 0;
  list-style-type: none;
  line-height: 1.4;
}
.sidebar a:link, .sidebar a:visited { color: #333333; }
.sidebar a:hover { color: #999999; }

.search-form { margin: 0 0 12px; }
.search-form input[type="search"] {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #c0c0c0;
  background: transparent;
  font: inherit;
  color: #333333;
  padding: 2px 0;
}
.search-form input[type="search"]:focus { outline: none; border-color: #999999; }

/* --- posts ---------------------------------------------------------------- */

.post { margin: 0 0 44px; }

.post-title {
  margin: 0 0 12px;
  font-size: 1.5em;        /* original h3.post-title */
  font-weight: normal;
  color: #333333;
  line-height: 1.3;
}
.post-title a:link, .post-title a:visited { color: #333333; }
.post-title a:hover { color: #999999; }

.post-body p {
  color: #000000;
  line-height: 1.45;       /* original p rule said 14pt (≈18.7px) - fixed */
  margin: 12px 0;
}

.post-body blockquote {
  border-left: 1px solid #a5abab;  /* the original signature detail */
  margin: 0;
  padding: 0 12px;
}

.post-body u { text-decoration: underline; }

.post-footer { padding: 15px 0 20px; }
.comment-link:link, .comment-link:visited { color: #333333; }
.comment-link:hover { color: #999999; }

/* --- pager ---------------------------------------------------------------- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 0 40px;
}
.pager:empty { display: none; }

/* --- comments ------------------------------------------------------------- */

.comments { margin-top: 8px; }

.comments-title,
.archived-comments h3 {
  margin: 0 0 10px;
  font-size: 1em;
  font-weight: normal;
  color: #999999;
}
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment { padding: 10px 0; border-top: 1px solid #f0f0f0; }
.comment-header { color: #777777; font-size: 0.85em; margin-bottom: 4px; }
.comment-content { color: #333333; }
.comment-content p { margin: 6px 0; }

.comments-note { color: #999999; font-size: 0.85em; }

.cf-comments form { margin-top: 18px; }
.cf-comments label { display: block; margin: 10px 0 2px; color: #666666; font-size: 0.9em; }
.cf-comments input[type="text"], .cf-comments textarea {
  width: 100%;
  border: 1px solid #c0c0c0;
  background: #ffffff;
  font: inherit;
  color: #333333;
  padding: 6px 8px;
}
.cf-comments textarea { min-height: 6em; resize: vertical; }
.cf-comments button {
  margin-top: 10px;
  border: 1px solid #c0c0c0;
  background: #ffffff;
  font: inherit;
  color: #333333;
  padding: 4px 14px;
  cursor: pointer;
}
.cf-comments button:hover { color: #999999; border-color: #999999; }
.cf-comments .hp { position: absolute; left: -9999px; }
.cf-comments .cf-error { color: #a94442; }

/* --- pages, archive, search ----------------------------------------------- */

.page-title {
  margin: 0 0 16px;
  font-size: 1.5em;
  font-weight: normal;
  color: #333333;
  line-height: 1.3;
}

.archive-year { font-size: 1.2em; font-weight: normal; color: #333333; margin: 24px 0 8px; }
.archive-month { font-size: 1em; font-weight: normal; color: #777777; margin: 14px 0 6px; }
.archive .count { color: #999999; font-size: 0.85em; }
.archive-posts { margin: 0 0 10px; padding: 0 0 0 22px; }
.archive-posts li { line-height: 1.5; padding: 2px 0; }

.search-hint { color: #999999; }
.search-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #c0c0c0;
  background: transparent;
  font: inherit;
  color: #333333;
  padding: 4px 0;
}
.search-input:focus { outline: none; border-color: #999999; }
.search-results { margin-top: 24px; }
.search-result { margin: 0 0 22px; }
.search-result h3 { margin: 0 0 4px; font-size: 1.1em; font-weight: normal; }
.search-result .meta { color: #999999; font-size: 0.85em; }
.search-result .snippet { color: #555555; margin: 4px 0 0; line-height: 1.4; }
.search-result mark { background: transparent; color: #333333; font-weight: bold; }

/* --- footer & misc -------------------------------------------------------- */

.site-footer {
  clear: both;
  padding: 20px 0 10px;
  color: #999999;
  font-size: 0.85em;
}
.site-footer p { margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #ffffff;
  padding: 6px 10px;
}
.skip-link:focus { left: 10px; }

/* --- small screens -------------------------------------------------------- */

@media (max-width: 940px) {
  body { margin: 16px auto; padding: 0 16px; }
  .layout { flex-direction: column; gap: 26px; margin-top: 30px; }
  .sidebar { width: auto; flex: 1 1 auto; }
  .sidebar ul { display: flex; flex-wrap: wrap; gap: 2px 18px; }
  .sidebar li { margin: 0; }
  .search-form { max-width: 260px; }
  .post { margin-bottom: 34px; }
}