*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink:    #1a1a1e;
  --bg:     #faf9f6;
  --accent: #37723a;
  --accent2: #c5171a;
  --muted:  #6b7280;
  --border: #e5e7eb;
  --font:   system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sidebar: 200px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
  font-size: 0.8125rem;
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
}

/* ── Sidebar ── */

.sidebar {
  border-right: 1px solid var(--border);
  padding: 1.25rem 1rem 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.logo-wrap {
  display: block;
}

.logo {
  width: 93.5%;
  height: auto;
  border-radius: 50%;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

nav ul a {
  text-decoration: none;
  color: var(--accent);
  font-size: 0.8125rem;
  display: block;
  padding: 0.25rem 0;
}

nav ul a:hover { color: var(--accent2); }

/* ── Page (main + footer) ── */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  max-width: 680px;
  padding: 2.5rem 2rem 4rem;
  overflow: auto; /* clearfix: contains floated images (see .float-photo) */
}

h1 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}

p { margin: 0 0 1rem; }

/* Flush-left to match p/h1/h2 -- browser default ul/ol padding otherwise
   creates a ragged left edge against paragraph text wrapping the same
   float (see .float-photo). Nested lists get their own indent below. */
ul, ol {
  margin: 0 0 1rem;
  padding-left: 0;
  list-style-position: inside;
}

li > ul,
li > ol {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

em { font-style: italic; }

a { color: var(--accent); }
a:hover { color: var(--accent2); text-decoration: none; }

/* Technical-mission bullet links (about-mission.md): plain body-text color
   with a small trailing arrow instead of the default green-underline
   treatment, which reads as too heavy across three full-sentence links in a
   row. */
.link-arrow {
  color: inherit;
  text-decoration: none;
}

.link-arrow:hover { color: var(--accent2); }

.link-arrow::after {
  content: " \2192";
  font-size: 0.85em;
  color: var(--accent);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

/* ── About page tabs ── */

.about-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  border-bottom: 1px solid var(--border);
  margin: 0 0 1.5rem;
}

.about-tabs a {
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.about-tabs a:hover { color: var(--accent); }

.about-tabs a.active {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent2);
}

/* ── Inline content images ── */

.float-photo {
  float: right;
  width: 260px;
  max-width: 42%;
  margin: 0 0 1rem 1.5rem;
  border-radius: 12px;
  display: block;
}

.float-photo-left {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.float-photo-small {
  width: 208px; /* 80% of the 260px default */
  /* top: nudges the float down to align with the following h2's top margin
     (h2 has margin-top: 2rem, which collapses with the preceding paragraph's
     margin-bottom -- but floats don't participate in that collapsing, so
     without this the image sits higher than the heading text next to it).
     Best-effort estimate, not verified against a live render -- nudge
     further if it's still off. */
  margin: 23px 44px 36px 0;
}

.float-photo-heading-align {
  width: 208px; /* 80% of the 260px default */
  /* Nudges the float down so its top edge lines up with the top of the
     following heading's text -- headings carry their own top margin
     that floats don't participate in. Estimated for an h3 with the
     browser default ~1em top margin; not verified against a live
     render -- nudge further if it's still off. */
  margin-top: 19px;
}

.float-photo-70 {
  width: 182px; /* 70% of the 260px default */
}

.float-photo-53 {
  width: 197px; /* up 15% from 171px per follow-up request (171 * 1.15 = 196.65) */
}

.float-photo-35 {
  width: 61px; /* up 33% from 46px per follow-up request (46 * 1.33 = 61.2) */
}

.float-photo-paragraph-align {
  /* Nudges the float down so its top edge lines up with the top of the
     following paragraph's text. The image sits in its own <p> (margin:
     0 0 1rem), and floats don't collapse margins with the next block, so
     without this it sits a touch high relative to the paragraph beside it.
     Best-effort estimate, not verified against a live render -- nudge
     further if it's still off. */
  margin-top: 6px;
}

/* Real (non-floated) block spacer for widening the gap between a paragraph
   and the next block-level content. Floats don't push normal-flow content
   down via their own margin, and markdown collapses any number of blank
   lines in the source into a single gap -- so neither approach actually
   moves the following paragraph's text; this element does, because it's a
   genuine block in the flow. */
.v-spacer {
  height: 3rem;
}

/* Shaves one text line's height (13px * 1.6 line-height = 20.8px, rounded)
   off .v-spacer, for the para2-to-para3 gap only. */
.v-spacer-less1 {
  height: calc(3rem - 21px);
}

/* Nudges fist-unplugged.png down and left of its default float position --
   it read as orphaned/isolated from the surrounding paragraph text at the
   default 6px top margin and 1.5rem left buffer. Must come after
   .float-photo-paragraph-align (same specificity, source order wins) to
   actually override its margin-top. Values tuned against live renders. */
.fist-position {
  margin-top: 68px; /* 20px + 48px (1/2in @ 96px/in) per follow-up request */
  margin-left: 0; /* removes .float-photo's default 1.5rem left buffer so
                      it tucks closer to the wrapped text instead of
                      floating in open space */
}

/* Doubles the standard 208px small-photo width -- overrides .float-photo's
   42% max-width cap too, since that cap was tuned for the 208/260px sizes
   and would otherwise clip this one. */
.float-photo-2x {
  width: 416px;
  max-width: 60%;
}

/* Drop below a float instead of wrapping it -- use where a heading or list
   should start at the full-width left margin rather than the ragged column
   next to a .float-photo. */
.clear-left {
  clear: left;
}

/* Same, but for the right-hand float stack -- guarantees a right-floated
   image starts below any earlier right float (e.g. bund.webp) instead of
   risking a collision/overlap when the preceding paragraph is short. */
.clear-right {
  clear: right;
}

/* ── RSS badge (blog index) ── */

.rss-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ── Footer ── */

footer {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 1.5rem 2rem;
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: 680px;
}

footer a { color: var(--muted); }

/* ── Responsive ── */

@media (max-width: 600px) {
  body {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
    gap: 1rem;
  }

  .logo { max-width: 48px; }

  nav ul {
    flex-direction: row;
    gap: 1.25rem;
  }

  h1 { font-size: 1.25rem; }

  .float-photo,
  .float-photo-left {
    float: none;
    max-width: 100%;
    margin: 0 0 1rem;
  }

  /* Only images with no size modifier go full-width on mobile; the
     percentage/fixed-size variants keep their intended size instead of
     blowing up to fill the screen (equal specificity to their modifier
     classes, so without this exclusion they'd win by being declared
     later in the file -- see the size-modifier classes above). */
  .float-photo:not(.float-photo-35):not(.float-photo-53):not(.float-photo-70):not(.float-photo-small):not(.float-photo-2x),
  .float-photo-left:not(.float-photo-35):not(.float-photo-53):not(.float-photo-70):not(.float-photo-small):not(.float-photo-2x) {
    width: 100%;
  }
}