/* ssrubin.com — modern rebuild of the old Bootstrap 2 + Stylus styles.
   No framework, no JS; just a small grid + typography + a code theme. */

:root {
  --green: #008000;
  --green-dark: #006400;
  --accent: #82b89d;
  --muted: #999;
  --rule: #e7e7e7;
  --ink: #222;
}

* { box-sizing: border-box; }

body {
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  padding-top: 40px;
}

/* Fixed-width container that steps at the same breakpoints as the old
   Bootstrap 2 grid (see the media queries at the bottom of this file). */
.container {
  width: 940px;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 80px;
}

a { color: var(--green); text-decoration: none; cursor: pointer; }
a:hover, a:active { color: var(--green-dark); text-decoration: underline; }

h1, h2, h3 {
  font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.15;
}
h1 { font-size: 2.5rem; margin: 0; }
h1 a, h1 a:hover { color: #000; text-decoration: none; }
h2 { font-size: 1.4rem; margin: 0; }
h3 { font-size: 1.05rem; margin: 0; }

p { margin: 0.5em 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.5rem 0; }
img { max-width: 100%; height: auto; }
blockquote { border-left: 4px solid var(--rule); margin: 1em 0; padding-left: 1em; color: #555; }

.muted { color: var(--muted); }
.text-right { text-align: right; }
.inlineHeader { font-family: "PT Sans", sans-serif; }
.top-buffer { margin-top: 50px; }
.paper { font-size: 0.9rem; }

/* --- Minimal 12-column grid (drop-in for the old Bootstrap 2 grid) --- */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: start;
}
[class*="span"] { grid-column-end: span 12; min-width: 0; }
.span1  { grid-column-end: span 1; }
.span2  { grid-column-end: span 2; }
.span3  { grid-column-end: span 3; }
.span4  { grid-column-end: span 4; }
.span5  { grid-column-end: span 5; }
.span6  { grid-column-end: span 6; }
.span7  { grid-column-end: span 7; }
.span8  { grid-column-end: span 8; }
.span9  { grid-column-end: span 9; }
.span10 { grid-column-end: span 10; }
.span11 { grid-column-end: span 11; }
.span12 { grid-column-end: span 12; }
.offset2 { grid-column-start: 3; }

.steve-img { width: 100%; }

/* --- "Below: research, …, and classes." inline nav --- */
.navlist, .navlist ul, .navlist li { display: inline; font-size: 1rem; margin: 0; padding: 0; }
.navlist li:after { content: ", "; }
.navlist li:first-child:before { content: "Below: "; }
.navlist li:last-child:before { content: "and "; }
.navlist li:last-child:after { content: "."; }

/* --- Homepage section bullet lists --- */
#maincontent ul {
  font-size: 0.95rem;
  list-style: none;
  border-left: 5px solid var(--accent);
  padding-left: 15px;
  margin: 0.5em 0;
}
#maincontent ul li { padding: 2px; color: var(--accent); }
#maincontent ul li a { color: var(--green); }
ol li, ul li { line-height: 1.5; padding: 3px 0; }

/* --- Code: build-time PrismJS highlighting (solarized-light-ish) --- */
pre[class*="language-"], code[class*="language-"] {
  font-family: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
}
pre[class*="language-"] {
  background: #fdf6e3;
  color: #657b83;
  padding: 12px 16px;
  margin: 1em 0;
  overflow-x: auto;
  border: 1px solid #eee8d5;
  line-height: 1.45;
}
:not(pre) > code {
  background: #f4f4f4;
  padding: 0.1em 0.35em;
  border-radius: 2px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #93a1a1; }
.token.punctuation { color: #586e75; }
.token.property, .token.tag, .token.boolean, .token.number,
.token.constant, .token.symbol { color: #b58900; }
.token.selector, .token.attr-name, .token.string, .token.char,
.token.builtin, .token.inserted { color: #859900; }
.token.operator, .token.entity, .token.url, .token.variable { color: #657b83; }
.token.atrule, .token.attr-value, .token.keyword { color: #268bd2; }
.token.function, .token.class-name { color: #cb4b16; }
.token.regex, .token.important { color: #d33682; }

/* --- Responsive breakpoints (mirror the old Bootstrap 2 fixed grid) --- */
@media (min-width: 1200px) {
  .container { width: 1170px; }   /* wider columns: span8 = 770px */
  .row { gap: 30px; }
}

@media (min-width: 768px) and (max-width: 979px) {
  .container { width: 724px; }    /* span8 = 476px */
}

@media (max-width: 767px) {
  .container { width: auto; padding: 0 16px 60px; }
  body { font-size: 17px; padding-top: 20px; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  [class*="span"] { grid-column: 1 / -1 !important; }
  .offset2 { grid-column-start: 1; }
  .steve-img { width: auto; max-height: 240px; object-fit: scale-down; }
}