/* Four-color Marathon identity, shared by the archive, articles and CMS. */
html:root, body .post-page, body .admin-shell {
  --brand-teal: #00658c;
  --brand-orange: #f5a000;
  --brand-navy: #142e46;
  --brand-ivory: #f3eadb;
  --paper: var(--brand-ivory);
  --paper-deep: #e9decc;
  --surface: #fffcf7;
  --ink: var(--brand-navy);
  --foreground: var(--brand-navy);
  --background: var(--brand-ivory);
  --muted: #526372;
  --faint: #667785;
  --line: rgba(20,46,70,.17);
  --teal: var(--brand-teal);
  --teal-dark: var(--brand-navy);
  --dark: var(--brand-navy);
  --orange: var(--brand-orange);
  --sage: #adc5ce;
  --mint: #e2edf0;
  --xray: var(--brand-navy);
}
html body, body .post-page, body .admin-shell {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 0% 0%,rgba(0,101,140,.13),transparent 42rem),radial-gradient(ellipse at 100% 30%,rgba(245,160,0,.11),transparent 38rem),linear-gradient(rgba(20,46,70,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(20,46,70,.025) 1px,transparent 1px);
  background-size: auto,auto,48px 48px,48px 48px;
  color: var(--ink);
}
body .topbar, body .post-nav, body .admin-topbar {
  background: rgba(255,252,247,.95);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 24px rgba(20,46,70,.05);
}
body .intro {
  background: linear-gradient(145deg,var(--surface) 55%,var(--paper));
  border-top: 4px solid var(--teal);
  box-shadow: 0 18px 48px rgba(20,46,70,.07);
}
body .intro h1, body .archive-heading h2 { color: var(--ink); }
body .intro h1 em, body .eyebrow { color: var(--teal); }
body .lead { color: var(--muted); font-size: 1rem; }
body .principles { border-top-color: var(--line); }
body .principle b { color: var(--teal); }
body .anatomy-card { background: var(--surface); border-top: 4px solid var(--orange); box-shadow: 0 18px 48px rgba(20,46,70,.09); }
body .anatomy-head { flex-wrap: wrap; }
body .micro-badge { color: var(--teal); background: var(--mint); }
body .xray-panel { background: linear-gradient(160deg,var(--brand-navy),#091b2b); }
body .xray-helper { background: rgba(20,46,70,.92); color: var(--brand-ivory); }
body .button.primary, body .map-view-cases { background: var(--orange); border-color: var(--orange); color: var(--ink); }
body .button.primary:hover, body .map-view-cases:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
body .archive-heading { border-top: 2px solid var(--teal); }
body .recent-strip, body .featured-strip { background: rgba(255,252,247,.72); }
body .featured-strip { border-left: 4px solid var(--orange); }
body .filterbar { background: rgba(243,234,219,.97); }
body .filter-button { font-size: .875rem; }
body .filter-button.active { background: var(--teal); color: white; box-shadow: inset 0 -3px var(--orange); }
body .case-card { background: var(--surface); border-color: var(--line); border-radius: 8px; box-shadow: 0 8px 25px rgba(20,46,70,.06); }
body .case-card:hover { border-color: var(--teal); box-shadow: 0 16px 36px rgba(20,46,70,.12); }
body .tag { color: var(--teal); border-color: rgba(0,101,140,.25); background: var(--mint); }
body .tag.type { background: var(--paper); color: var(--ink); }
body .about { background: var(--brand-navy); border-top: 3px solid var(--orange); color: var(--surface); box-shadow: 0 18px 48px rgba(20,46,70,.13); }
body .about p { color: var(--brand-ivory); font-size: .9375rem; }
body .about .eyebrow { color: var(--orange); }
body .case-hover-preview { background: var(--surface); border-color: var(--teal); border-top: 3px solid var(--orange); }
body .case-hover-preview::before { background: var(--surface); }
body .case-hover-preview p { color: var(--muted); font-size: .875rem; }
body .modal-hero, body .post-hero, body .admin-preview header { background: linear-gradient(125deg,var(--mint),var(--surface) 60%,var(--paper)); border-top: 4px solid var(--teal); }
body .post-page>article, body .editor-panel, body .post-list-panel, body .engagement-admin { border-radius: 8px; background: var(--surface); border-color: var(--line); box-shadow: 0 12px 40px rgba(20,46,70,.07); }
body .post-tags span { color: var(--teal); border-color: var(--teal); background: var(--mint); }
body .post-copy { font-size: 1rem; color: var(--ink); }
body .post-summary { color: var(--muted); }
body .post-author { padding: 24px; border-left: 3px solid var(--orange); background: var(--paper); }
body .comment-form, body .tiptap-sticky-tools, body .tiptap-hint { background: var(--paper); }
body .tiptap-toolbar button.active, body .tiptap-image-inspector, body .comparison-inspector, body .admin-message { background: var(--mint); color: var(--teal); }
body .tiptap-content blockquote, body .rich-text-content blockquote { border-left-color: var(--orange); color: var(--muted); }
body .rich-text-content h2, body .rich-text-content h3 { color: var(--ink); }
body .tiptap-content { color: var(--ink); font-size: 1rem; }
body .editor-panel input, body .editor-panel textarea, body .editor-panel select { background: var(--surface); }
body :focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* Actual measurable labels stay inside the panel, independent of text length. */
body .map-marker::after { display: none; }
body .map-marker { background: var(--orange); }
body .map-marker::before { display: none; }
body .map-marker .map-label {
  position: absolute; left: var(--label-left,20px); top: var(--label-top,50%);
  transform: translateY(-50%); width: max-content; max-width: var(--label-max,160px);
  padding: 7px 9px; border: 1px solid rgba(243,234,219,.55); border-radius: 3px;
  background: var(--surface); color: var(--brand-navy); font-size: .9375rem;
  font-weight: 700; line-height: 1.45; white-space: normal; overflow-wrap: anywhere;
  box-shadow: 0 4px 12px rgba(20,46,70,.18);
}
body .map-marker:hover .map-label, body .map-marker:focus-visible .map-label, body .map-marker.active .map-label { background: var(--orange); border-color: var(--orange); }
@media(max-width:720px) {
  body .brand { flex-wrap: wrap; gap: 6px 12px; padding: 10px 0; }
  body .brand-logo { width: 145px; height: auto; max-width: 100%; }
  body .nav-inner { flex-wrap: wrap; gap: 4px 12px; }
  body .map-marker .map-label { font-size: .875rem; visibility: hidden; }
  body .map-marker.active .map-label, body .map-marker:focus-visible .map-label { visibility: visible; }
}