/* Reproduces the WordPress "Europe" theme (LaSet 0.8.7) that this site ran
   from 2007-2022. Values transcribed from the original style.css, text.css
   and the 960.css grid (container_16 = 960px, content grid_11 = 640px,
   sidebar grid_5 = 280px).

   Faithful details worth preserving:
     - .entry-title is GEORGIA 30px normal weight, not the Helvetica used by
       other headings
     - #content is justified with a 1px #e3e3e3 right-hand rule
     - content images carry a 4px #ddd frame on #fafafa
     - sidebar widget titles are green uppercase 14px, no underline
     - blockquotes use a BOTTOM border in #bbd791, not a left bar
     - dates/tags render as small grey #e3e3e3 chips

   The one intentional departure: the fixed 960px grid is made responsive,
   since the original was unusable on a phone. */

:root {
  --green: #66cc66;
  --green-soft: #bbd791;
  --chip: #e3e3e3;
  --rule: #e3e3e3;
}

* { box-sizing: border-box; }

/* ---- base: style.css body + text.css scale ---- */
body {
  margin: 0; background: #fff; color: #333;
  font-size: 16px; line-height: 1.6;
  font-family: Georgia, 'Lucida sans ms', Verdana, Arial, Helvetica, serif;
  -webkit-text-size-adjust: 100%;
}
p { color: #555; margin: 0 0 20px; }

h1, h2, h3, h4 { letter-spacing: -1px; font-family: Helvetica, Arial, sans-serif; line-height: 1.25; margin: 0 0 20px; }
h1 { font-size: 25px; } h2 { font-size: 23px; } h3 { font-size: 21px; } h4 { font-size: 19px; }

a { color: #999; text-decoration: none; border-bottom: 1px solid #eee; }
a:hover { color: #000; border-bottom: 1px solid #ccc; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; clear: both; }
.green { color: var(--green); }

/* ---- header ---- */
.container { width: 960px; max-width: 100%; margin: 0 auto; padding: 0 10px; }
#header { display: block; padding: 10px 0 20px; }
#header .bloginfo { flex: 1 1 auto; }
#site-title { font-family: Helvetica, Arial, sans-serif; font-size: 40px; letter-spacing: -1px; font-weight: bold; margin: 0; padding-top: 0; line-height: 1.1; }
#site-title a { color: #000; border: none; }
#site-title a:hover { color: var(--green); border: none; }
.tagline { display: inline-block; font-size: 11px; background: var(--green); color: #fff; text-transform: uppercase; line-height: 1.5em; padding: 0.35em 0.8em; }

.browsing { font-size: 24px; text-align: center; color: #000; padding-top: 15px; font-family: Helvetica, Arial, sans-serif; letter-spacing: -1px; }
.browsing p { color: #000; margin: 0; }

/* ---- 960 grid: content 640 + sidebar 280 ---- */
.columns { display: flex; align-items: flex-start; }
.content-col { flex: 1 1 640px; min-width: 0; margin-top: 40px; margin-bottom: 40px; padding: 0 50px 20px 0; text-align: justify; border-right: 1px solid var(--rule); }
.sidebar { flex: 0 0 280px; padding: 40px 0 0 30px; font-size: 14px; }

/* ---- posts ---- */
.post { padding-top: 0; clear: both; margin-bottom: 20px; }
.entry-title { font-family: Georgia, 'Lucida sans ms', Verdana, Arial, Helvetica, serif; font-weight: normal; font-size: 30px; text-align: left; color: #000; letter-spacing: -1px; margin: 0; padding: 0; }
.entry-title a { color: #000; border: none; font-size: 30px; }
.entry-title a:hover { color: var(--green); border: none; }
.postmetadata { font-size: 10px; color: #666; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif; margin: 6px 0 0; letter-spacing: 0; }
.postmetadata.alt { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rule); text-align: left; }
.postmetadata a { color: #666; }

.entry { padding: 20px 0; }
.entry img { max-width: 97%; height: auto; margin: 5px 0; border: 4px solid #ddd; background: #fafafa; padding: 1px; }
.entry ul { list-style: square; }
.entry ol { list-style: decimal; margin: 0 0 18px 1.5em; }
.entry li { margin-left: 30px; }
.entry ul li { font-size: 14px; color: #666; padding-bottom: 10px; }
.entry blockquote { font-size: 18px; color: #666; padding: 0 20px; margin: 5px 0 15px 20px; border-bottom: 1px solid var(--green-soft); }
.entry blockquote p { color: #666; font-style: italic; font-family: serif; }
.entry pre { background: #f7f7f7; color: #222; line-height: 18px; margin-bottom: 18px; padding: 1.5em; overflow-x: auto; }
.entry code { font-size: 13px; }
.entry table { border-collapse: collapse; border: 1px solid #e7e7e7; margin: 0 -1px 24px 0; text-align: left; width: 100%; display: block; overflow-x: auto; }
.entry th { color: #888; font-size: 12px; font-weight: bold; line-height: 18px; padding: 9px 24px; }
.entry td { border-top: 1px solid #e7e7e7; padding: 6px 24px; }
.entry iframe { max-width: 100%; }
a.more { font-family: Helvetica, Arial, sans-serif; font-size: 11px; text-transform: uppercase; }

/* ---- archive list ---- */
ul.postlist { list-style: none; padding: 0; margin: 0; text-align: left; }
ul.postlist li { display: flex; gap: 16px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); margin: 0; }
ul.postlist .date { margin-left: auto; font-size: 9px; background: var(--chip); color: #333; padding: 0.15em 0.35em; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif; white-space: nowrap; }

/* ---- sidebar widgets ---- */
.widget { margin-bottom: 20px; }
.widgettitle { font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: var(--green); margin: 0 0 6px; padding: 0; text-transform: uppercase; letter-spacing: 0; border: none; }
.widget ul { list-style: none; margin: 10px 0; padding: 0; }
.widget ul li { font-size: 12px; padding: 0 0 10px 0; margin: 0; color: #666; }
.widget .count { color: #aaa; }
.widget .year { font-family: Helvetica, Arial, sans-serif; }

/* ---- pagination (theme .navigation) ---- */
.float-left { float: left; position: relative; }
.float-right { float: right; position: relative; }
.clearfix::after { content: ""; display: block; clear: both; }
.float-left .date, .float-right .date { font-size: 9px; background: var(--chip); color: #333; padding: 0.15em 0.35em; }
.float-left .date a { font-size: 9px; color: #333; border: none; }
.float-left .postmetadata a, .float-right .postmetadata a { color: #666; }

.navigation { display: block; clear: both; margin-top: 20px; padding-bottom: 0; font-family: Helvetica, Arial, sans-serif; font-size: 12px; }
.navigation a { background: #eee; padding: 5px 10px; border-radius: 3px; border: none; color: #333; }
.navigation a:hover { background: #ddd; border: none; color: #000; }
.alignleft { float: left; }
.alignright { float: right; }

/* ---- footer ---- */
#footer { font-size: 11px; color: #999; text-transform: uppercase; padding: 30px 0 25px; font-family: Helvetica, Arial, sans-serif; }
#footer .copyright { float: left; position: relative; }
#footer::after { content: ""; display: block; clear: both; }
#footer .copy { background: var(--green); color: #fff; padding: 0.15em 0.35em; }

/* ---- responsive: the original was fixed-width and unusable on phones ---- */
@media (max-width: 860px) {
  .columns { display: block; }
  .content-col { border-right: none; padding-right: 0; margin-top: 24px; }
  .sidebar { padding: 24px 0 0; border-top: 1px solid var(--rule); margin-top: 32px; }
  #site-title { font-size: 30px; }
  .browsing { font-size: 19px; }
  .entry-title, .entry-title a { font-size: 25px; }
  .content-col { text-align: left; }
}