/* ppca-web — a port of the old PHP site's _resource/styles.css (brochure shell), plus the styles
   the folded-in engineering blog needs (.prose / .eng-tag / .card, and the CSS vars the posts use). */

:root { --border: #ccc; --muted: #666; --fg: #111; --line: #e5e5e5; }

html { font-family: -apple-system, Helvetica, Arial, sans-serif; }
html, body { margin: 0; padding: 0; }
html, body, input, textarea { font-size: 22px; }

.main { width: 100%; box-sizing: border-box; padding: 2rem; }
.logo, .footer { width: 100%; box-sizing: border-box; padding: 2rem;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; }
.logo { background-color: #222; line-height: 2.5rem; font-weight: bold; font-size: 2.5rem; color: #fff; }
/* Pin every link state: the generic `a:link/:visited/:hover` rule below ties on specificity and
   would otherwise turn the logo blue. */
.logo a, .logo a:link, .logo a:visited, .logo a:hover { color: #fff; text-decoration: none; }
.logo .dot { font-family: Futura, serif; color: #FFFF00; padding-left: 0.3rem; }
.footer { background-color: #ccc; }

.nav { width: 100%; box-sizing: border-box; color: #222; background-color: #ffff00;
  padding: 1rem 2rem; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: bold; font-size: 1rem; line-height: 2rem; }
.nav a, .nav a:link, .nav a:hover, .nav a:visited { color: #000; text-decoration: none; padding-right: 1rem; }
.nav a:hover { text-decoration: underline; }
.logo .container p, .nav .container p { margin: 0; padding: 0; }

.container { width: 100%; margin: 0 auto; max-width: 48rem; box-sizing: border-box; }

pre, code { font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
  font-size: 18px; white-space: pre-wrap; word-wrap: break-word; }
pre { color: #eee; background: #222; padding: 1rem; border-radius: 0.4rem; }

h1 { font-size: 2.5rem; line-height: 3.5rem; text-align: center; }
h2 { line-height: 1.75rem; }
a, a:visited, a:hover, a:link { color: rgb(0, 0, 238); }

p.photo { width: 100%; max-width: 34rem; margin-left: auto; margin-right: auto; }
.photo img { display: block; margin: 0 auto;
  max-width: min(34rem, 98vh, 98vw); max-height: min(34rem, 98vh, 98vw); }

dl dt { font-weight: bold; }
dl dd { padding-bottom: 0.7em; }

table { border-collapse: collapse; }
table td, table th { padding: 4px 10px; text-align: left; vertical-align: top; }

@media only screen and (max-width: 864px) {
  .photo img { width: 100%; max-height: none; }
}
@media only screen and (max-width: 640px) {
  html, body, input, textarea { font-size: 16px; }
}

/* --- Engineering blog (folded in from django-engineering) ------------------------------------ */
.muted { color: var(--muted); }
.page-title { text-align: left; }
.page-sub { max-width: 720px; }
.stack { display: flex; flex-direction: column; }
.card { border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.prose { max-width: 720px; margin: 0 auto; line-height: 1.6; }
.prose h1, .prose h2, .prose h3 { text-align: left; line-height: 1.3; }
.prose pre { overflow-x: auto; }
.prose .diagram, figure.diagram { margin: 1.5rem 0; text-align: center; overflow-x: auto; }
.prose hr, hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.eng-tags { margin: 6px 0 0; }
.eng-tag { display: inline-block; font-size: 12px; font-weight: 600; color: #333;
  background: #f0f0f0; border: 1px solid var(--border); border-radius: 10px;
  padding: 1px 8px; margin-right: 4px; }