/* One fixed theme, drawn from public/images/logo.png:
   navy wordmark, river blue, leaf green, sun gold, on sunlit paper. */
:root {
  color-scheme: light;
  --navy: #062645;
  --navy-deep: #041a31;
  --blue: #0a5183;
  --green: #4d7330;       /* logo green #5a8036, darkened for text contrast */
  --green-wash: #edf2e4;
  --gold: #f2b630;
  --gold-wash: #fdf4dc;
  --paper: #fbfaf5;
  --ink: var(--navy);
  --muted: #475668;
  --rule: #dce2d3;
  --ok: #3f6a25;
  --err: #a12d2d;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
}

body { background: var(--paper); color: var(--ink); font-size: 1.075rem; line-height: 1.65; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; color: var(--navy); }
a { color: var(--blue); }
a:hover { color: var(--green); }
.muted { color: var(--muted); }
.narrow { max-width: 44rem; }

.btn-brand { background: var(--navy); color: #fff; border: 2px solid var(--navy); font-weight: 500; }
.btn-brand:hover, .btn-brand:focus { background: var(--green); border-color: var(--green); color: #fff; }
.btn-brand:disabled { background: var(--muted); border-color: var(--muted); color: #fff; }

.site-nav { padding: 1rem 0; background: var(--paper); border-bottom: 3px solid var(--gold); }
.brand { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); text-decoration: none; font-weight: 600; }
.brand span { color: var(--green); }
.brand-mark { height: 36px; width: auto; vertical-align: middle; margin: -4px 0.45rem 0 0; }
.nav-cta { color: var(--navy); font-weight: 500; }

.hero { padding: 3rem 0 4rem; background: radial-gradient(ellipse at 50% 0%, var(--gold-wash) 0%, var(--paper) 70%); text-align: center; }
.hero .narrow { margin: 0 auto; }
.hero-logo { width: min(100%, 520px); height: auto; margin-bottom: 2rem; }
.hero h1 { font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.15; margin-bottom: 1.25rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--green); font-weight: 600; margin-bottom: 0.75rem; }
.lede { font-size: 1.22rem; color: var(--muted); margin-bottom: 2rem; }

.band { padding: 3.5rem 0; border-top: 1px solid var(--rule); }
.band.alt { background: var(--green-wash); }
.band h2 { font-size: 1.8rem; margin-bottom: 1.25rem; }
.band h2::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--gold); margin-top: 0.6rem; border-radius: 2px; }

.principles { padding-left: 1.25rem; margin: 1.5rem 0; }
.principles li { margin-bottom: 1.4rem; padding-left: 0.25rem; }
.principles li::marker { font-family: var(--serif); color: var(--green); font-weight: 700; }
.principles h3 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.test { margin: 0; color: var(--muted); }
.test span { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; background: var(--green); border-radius: 3px; padding: 0 0.4rem; margin-right: 0.4rem; vertical-align: 0.12em; }

.question { font-family: var(--serif); font-size: 1.25rem; background: var(--paper); border-left: 4px solid var(--gold); padding: 1rem 1.25rem; margin: 2rem 0 0; border-radius: 0 6px 6px 0; }
.question strong { color: var(--navy); }

.who { height: 100%; padding: 1.25rem; border: 1px solid var(--rule); border-top: 4px solid var(--blue); border-radius: 6px; background: #fff; }
.col-lg-3:nth-child(2) .who { border-top-color: var(--green); }
.col-lg-3:nth-child(3) .who { border-top-color: var(--gold); }
.col-lg-3:nth-child(4) .who { border-top-color: var(--navy); }
.who h3 { font-size: 1.1rem; }
.who p { margin: 0; color: var(--muted); font-size: 0.98rem; }

.projects dt { font-family: var(--serif); font-size: 1.15rem; margin-top: 1.25rem; color: var(--navy); }
.projects dd { color: var(--muted); margin: 0.25rem 0 0; }

.write-form { margin-top: 1.5rem; }
.write-form .form-control, .write-form .form-select { background: #fff; border-color: var(--rule); color: var(--ink); }
.write-form .form-control:focus, .write-form .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 0.2rem rgba(10, 81, 131, 0.15); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; min-height: 1.5em; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }

.site-footer { padding: 2.5rem 0; background: var(--navy); color: #c9d4e0; font-size: 0.92rem; border-top: 3px solid var(--gold); }
.site-footer a { color: var(--gold); }
.site-footer p { margin-bottom: 0.4rem; }
.blue-square { margin-left: 0.4em; }
.tagline { font-family: var(--serif); font-size: 1.35rem; color: var(--green); margin-bottom: 1.25rem; }

.rule-band { padding: 4rem 0; background: var(--navy); color: #fff; border-top: 4px solid var(--gold); border-bottom: 4px solid var(--gold); }
.rule-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; font-weight: 600; color: var(--gold); margin-bottom: 1rem; }
.rule-text { font-family: var(--serif); font-size: clamp(1.45rem, 3.4vw, 2.05rem); line-height: 1.3; font-weight: 600; margin-bottom: 1.5rem; }
.rule-note { color: #c9d4e0; margin: 0; }

.creed { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.35; color: var(--navy); border-left: 4px solid var(--gold); padding: 0.25rem 0 0.25rem 1.25rem; margin: 0 0 2rem; }
.creed p { margin-bottom: 0.4rem; }
.creed p:last-child { margin-bottom: 0; }
.creed-by { font-family: system-ui, sans-serif; font-size: 0.95rem; color: var(--green); font-weight: 600; margin-top: 0.75rem; letter-spacing: 0.02em; }

/* Self-exemption: where one of my own examples fails a test today. The rule covers me too. */
.projects .shortfall { color: var(--muted); font-size: 0.97rem; line-height: 1.5; border-left: 3px solid var(--err); padding: 0.1rem 0 0.1rem 0.85rem; margin: 0.45rem 0 0; }
.projects .shortfall strong { color: var(--err); font-weight: 600; }

.nav-links { display: flex; gap: 1.25rem; align-items: baseline; }
.nav-links a { color: var(--navy); font-weight: 500; white-space: nowrap; }
.nav-toggle { display: none; }
/* The links don't fit beside the brand on a phone or small tablet. Without JS they wrap under it;
   with JS (nav.js adds .has-toggle) they fold into a hamburger menu.
   The cutoff is Bootstrap's lg: five links, one of them "From the Founder", need about 710px beside the brand. */
@media (max-width: 991.98px) {
  .site-nav .container { flex-wrap: wrap; row-gap: 0.4rem; }
  .nav-links { gap: 1rem; font-size: 0.95rem; }
  .has-toggle .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; margin-right: -10px; background: none; border: 0; cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; background: var(--navy); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .has-toggle .nav-links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 0.5rem; font-size: 1.05rem; }
  .has-toggle.open .nav-links { display: flex; }
  .has-toggle .nav-links a { padding: 0.6rem 0; border-top: 1px solid var(--gold-wash); text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

/* Founder page */
.founder-photo { float: right; width: 200px; height: auto; margin: 0.25rem 0 1rem 1.5rem; border-radius: 8px; border-bottom: 4px solid var(--gold); }
@media (max-width: 575.98px) { .founder-photo { float: none; display: block; width: 180px; margin: 0 auto 1.25rem; } }

/* Blog */
.post-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.post-list li { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.post-list li:first-child { border-top: 0; padding-top: 0; }
.post-list h3 { font-size: 1.35rem; margin-bottom: 0.2rem; }
.post-list h3 a { color: var(--navy); text-decoration: none; }
.post-list h3 a:hover { color: var(--green); }
.post-list p { margin: 0.35rem 0 0; color: var(--muted); }
.post-date { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--green); font-weight: 600; text-transform: uppercase; }
.post-draft { display: inline-block; margin-left: 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); background: var(--gold); border-radius: 3px; padding: 0 0.4rem; }
.post h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.2; margin: 0.4rem 0 1.75rem; }
.post-body blockquote { font-family: var(--serif); font-size: 1.15rem; border-left: 4px solid var(--gold); padding: 0.25rem 1.25rem; margin: 1.5rem 0; color: var(--navy); }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.post-body th, .post-body td { border: 1px solid #d8d2c4; padding: 0.5rem 0.75rem; vertical-align: top; }
.post-body th { background: var(--gold-wash); }
.post-foot { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--muted); }
.post-hero { display: block; width: 100%; height: auto; border-radius: 6px; margin: 0 0 2rem; }

/* Pixboard rail, blog pages only: a slim column fixed in the left margin. The dock is the parent of
   the rail's own element (which replaces its innerHTML); the page makes room for it only from the
   rail's 400px breakpoint up, where it shows. */
.rail-dock { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); z-index: 1030; }
@media (min-width: 400px) { body:has(.rail-dock) { padding-left: 66px; } }