/* The blog's resume sheet (shared/resume_sheet, shared/resume_paper, shared/resume_role,
   shared/resume_header). A grid canvas with corner marks holding papers that are set like
   the resumes the product generates: Helvetica body, navy section rules, navy bullet
   markers (the base template's defaults). Labels are Geist, loaded by the partial itself.

   Everything is scoped under .rsx because the article pages also load Bootstrap, which
   styles figure, pre, p and ul margins on its own. */

.rsx {
  position: relative;
  margin: 1.5rem 0 2rem;
  padding: 28px 24px;
  border: 1px solid #eaeaea;
  background-color: #fafafa;
  background-image:
    linear-gradient(#efefef 1px, transparent 1px),
    linear-gradient(90deg, #efefef 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  font-family: Geist, Inter, system-ui, -apple-system, sans-serif;
}
.rsx--compact { padding: 18px 18px; margin: 1rem 0 1.25rem; }

.rsx-mark { position: absolute; stroke: #a1a1a1; stroke-width: 1; fill: none; }
.rsx-mark--tl { top: -7px; left: -7px; }
.rsx-mark--tr { top: -7px; right: -7px; }
.rsx-mark--bl { bottom: -7px; left: -7px; }
.rsx-mark--br { bottom: -7px; right: -7px; }

.rsx-caption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0 0 10px; font-size: 12px; font-weight: 500; line-height: 1.4; color: #171717;
}
.rsx-caption__meta { color: #666; white-space: nowrap; }

.rsx-papers { display: flex; flex-wrap: wrap; gap: 24px; }
.rsx--compact .rsx-papers { gap: 16px; }
.rsx-item { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.rsx-tag { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; line-height: 1.4; color: #171717; }
.rsx-dot { width: 6px; height: 6px; border-radius: 999px; background: #a1a1a1; flex: none; }
.rsx-dot--before { background: #e5484d; }
.rsx-dot--after { background: #30a46c; }

.rsx-paper {
  background: #fff;
  border: 1px solid #eaeaea;
  padding: 20px 22px;
  font-family: 'Helvetica Neue', Helvetica, Arial, 'DejaVu Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #1a1a1a;
  text-align: left;
}
.rsx-paper--strong { border-color: #171717; }
.rsx-paper--letter {
  padding: 32px 36px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 15px;
  line-height: 1.65;
}
.rsx-paper p { margin: 0 0 12px; }
.rsx-paper p:last-child { margin-bottom: 0; }
.rsx-paper--letter p { margin-bottom: 14px; }

.rsx-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rsx-role { font-weight: 700; }
.rsx-dates { color: #555; white-space: nowrap; }
.rsx-company { font-style: italic; color: #444; }

.rsx-skel { display: inline-block; height: 8px; border-radius: 2px; background: #f2f2f2; flex: none; }
.rsx-skel--dates { width: 64px; }
.rsx-skel--company { display: block; width: 120px; margin-top: 6px; background: #f5f5f5; }
.rsx-skel--name { display: block; width: 180px; height: 14px; background: #eaeaea; }

.rsx-header { margin-bottom: 18px; }
.rsx-header__contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rsx-header__contact .rsx-skel { height: 7px; }

.rsx-section {
  margin: 0 0 10px;
  padding-bottom: 4px;
  border-bottom: 2px solid #1f3a5f;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: #1f3a5f;
}
* + .rsx-section { margin-top: 18px; }

.rsx-label { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: #333; }

.rsx-bullets { margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.rsx-bullets li { margin-bottom: 4px; padding-left: 3px; }
.rsx-bullets li:last-child { margin-bottom: 0; }
.rsx-bullets li::marker { color: #1f3a5f; }

/* Literal text the reader is told to copy (a template, a plain-text CV): kept line for
   line, in the paper's own typeface rather than Bootstrap's monospace. */
.rsx-plain {
  margin: 0; padding: 0; border: 0; background: none; overflow: visible;
  white-space: pre-wrap; word-break: break-word;
  font: inherit; color: inherit;
}

@media (max-width: 576px) {
  .rsx { padding: 20px 14px; }
  .rsx-paper { padding: 16px 16px; }
  .rsx-paper--letter { padding: 22px 20px; }
}