/* Tracking-guide library styles — generated pages only (copied to landing/track/track.css
   by tools/pseo/generate.js; loaded after styles.css). Matches the zine system: ink
   borders, hard shadows, monospace smallcaps labels. */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.crumbs a {
  color: var(--ink);
  text-decoration-color: var(--splash, var(--orange));
}

.crumbs span[aria-hidden] {
  opacity: 0.5;
}

.fact-box {
  margin: 26px 0;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--paper-deep);
  padding: 18px 20px;
  max-width: 68ch;
}

.fact-box dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
}

.fact-box dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding-top: 3px;
}

.fact-box dd {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .fact-box dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .fact-box dd {
    margin-bottom: 10px;
  }
}

.callout-flag {
  margin: 26px 0;
  max-width: 68ch;
  border: 2px solid var(--ink);
  border-left: 10px solid var(--orange);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--paper);
  padding: 14px 18px;
}

.callout-flag .flag-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 8px;
  background: var(--orange);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transform: rotate(-1deg);
}

.callout-flag p {
  margin: 0;
  font-size: 1.05rem;
}

.perry-note {
  margin: 30px 0;
  max-width: 68ch;
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--chartreuse);
  padding: 16px 20px;
}

.perry-note .perry-label {
  display: inline-block;
  margin: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.perry-note p {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.perry-note p:last-child {
  margin-bottom: 0;
}

.post .chip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 26px;
  padding: 0;
  list-style: none;
  max-width: none;
}

.post .chip-links li {
  margin: 0;
}

.post .chip-links a {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-deep);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 7px 12px;
}

.post .chip-links a:hover,
.post .chip-links a:focus-visible {
  background: var(--chartreuse);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}

.post .guide-disclaimer {
  margin-top: 34px;
  max-width: 68ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}

.post .hub-group {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}