/* =========================================================================
   Eternal Roam — Atlas Connections (Phase 1A)
   Scoped under .er-atlas-v1. Tokens are declared on the component root, never
   :root, so nothing leaks into the host theme. This is a focused subset of the
   approved v1.1 design system: the tie markers, the quiet "How this connects"
   spine, Places of a Life (Module B), Tombs and Relics (Module C), and a
   restrained provenance note. Ported from the handoff styles.css, with the
   handoff-only .is-mobile demo class replaced by a real media query.
   ========================================================================= */

.er-atlas-v1 {
  --era-paper:     #FBF7EC;
  --era-vellum:    #F2ECDB;

  --era-ink:   #1F1B14;
  --era-ink-2: #3A332A;
  --era-ink-3: #6E6555;
  --era-ink-4: #8C8472;

  --era-clay:      #9A4F2E;
  --era-clay-deep: #7A3C20;
  --era-teal:      #2C5A57;
  --era-gold:      #A4823F;
  --era-blue:      #6E7B82;

  --era-rule:      rgba(31,27,20,.12);
  --era-rule-soft: rgba(31,27,20,.07);
  --era-rule-hair: rgba(31,27,20,.20);

  --era-serif: 'Spectral', 'GT Sectra', Georgia, 'Times New Roman', serif;
  --era-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
  --era-mono:  'DM Mono', ui-monospace, Menlo, monospace;

  --era-r-sm: 3px;
  --era-r-md: 5px;

  color: var(--era-ink);
  font-family: var(--era-sans);
  font-size: 15px;
  line-height: 1.6;
}
.er-atlas-v1 *, .er-atlas-v1 *::before, .er-atlas-v1 *::after { box-sizing: border-box; }

/* On-page section: a centered, full-width band that inherits the page surface
   rather than drawing its own card edge against the saint template. */
.er-atlas-v1.er-atlas { background: transparent; }
.er-atlas-v1 .era-module { max-width: 1180px; margin: 0 auto; padding: 44px 48px; border-top: 1px solid var(--era-rule-soft); }
.er-atlas-v1 .era-module:first-of-type { border-top: none; }

/* ----- Type ----- */
.er-atlas-v1 .era-kicker {
  font-family: var(--era-mono); font-size: var(--er-fs-floor); letter-spacing: .16em;
  text-transform: uppercase; color: var(--era-ink-3); font-weight: 500;
  display: inline-flex; align-items: center; gap: 9px;
}
.er-atlas-v1 .era-kicker .tick { width: 6px; height: 6px; border-radius: 50%; background: var(--era-clay); display: inline-block; flex: none; }
.er-atlas-v1 .era-kicker.teal .tick { background: var(--era-teal); }
.er-atlas-v1 .era-kicker.blue .tick { background: var(--era-blue); }
.er-atlas-v1 .era-h2 { font-family: var(--era-serif); font-weight: 400; letter-spacing: -.012em; line-height: 1.06; margin: 0; color: var(--era-ink); }
.er-atlas-v1 .era-modtitle, .er-atlas-v1 .era-atlas-title { font-size: 32px; margin: 12px 0 0; }
.er-atlas-v1 .era-atlas-intro { font-family: var(--era-sans); font-size: 14.5px; line-height: 1.7; color: var(--era-ink-2); margin: 14px 0 0; max-width: 70ch; }

/* ----- The tie (label-first) ----- */
.er-atlas-v1 .era-tie { display: inline-flex; align-items: center; gap: 8px; font-family: var(--era-mono); font-size: var(--er-fs-floor); letter-spacing: .12em; text-transform: uppercase; color: var(--era-ink-3); white-space: nowrap; }
.er-atlas-v1 .era-tie .tm { width: 11px; height: 11px; flex: none; display: inline-block; position: relative; }
.er-atlas-v1 .era-tie.life .tm   { border-radius: 50%; background: var(--era-clay); }
.er-atlas-v1 .era-tie.martyr .tm { background: transparent; }
.er-atlas-v1 .era-tie.martyr .tm::before { content:''; position:absolute; left: 4.5px; top: 0; width: 2px; height: 11px; background: var(--era-clay); }
.er-atlas-v1 .era-tie.martyr .tm::after  { content:''; position:absolute; left: 1px; top: 4.5px; width: 9px; height: 2px; background: var(--era-clay); }
.er-atlas-v1 .era-tie.tomb .tm   { background: var(--era-clay); }
.er-atlas-v1 .era-tie.relic .tm  { border-radius: 50%; border: 2px solid var(--era-teal); background: transparent; }
.er-atlas-v1 .era-tie.legacy .tm { border-radius: 50%; border: 1.5px solid var(--era-ink-4); background: transparent; }
.er-atlas-v1 .era-tie.hub .tm    { border-radius: 50%; border: 1.5px solid var(--era-ink); background: transparent; }
.er-atlas-v1 .era-tie.hub .tm::after { content:''; position:absolute; inset: 3px; border-radius: 50%; background: var(--era-ink); }
.er-atlas-v1 .era-tie .verb { color: var(--era-ink); font-weight: 500; }

/* ----- The spine: quiet "How this connects", once per page ----- */
.er-atlas-v1 .era-spinewrap { margin-top: 22px; }
.er-atlas-v1 .era-spinewrap .era-kicker { margin-bottom: 10px; }
.er-atlas-v1 .era-spine { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--era-rule); border-radius: var(--era-r-md); overflow: hidden; background: var(--era-vellum); }
.er-atlas-v1 .era-spine .node { flex: 1; padding: 14px 14px 13px; border-right: 1px solid var(--era-rule); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.er-atlas-v1 .era-spine .node:last-child { border-right: none; }
.er-atlas-v1 .era-spine .node .dot { width: 10px; height: 10px; flex: none; }
.er-atlas-v1 .era-spine .node .nm { font-family: var(--era-serif); font-size: 15px; font-weight: 500; line-height: 1; }
.er-atlas-v1 .era-spine .node .dot.s-clay { background: var(--era-clay); border-radius: 50%; }
.er-atlas-v1 .era-spine .node .dot.s-sq   { background: var(--era-clay); }
.er-atlas-v1 .era-spine .node .dot.s-teal { border: 2px solid var(--era-teal); border-radius: 50%; }
.er-atlas-v1 .era-spine .node .dot.s-ink  { border: 1.5px solid var(--era-ink); border-radius: 50%; }
.er-atlas-v1 .era-spine .node .dot.s-gold { background: var(--era-gold); border-radius: 50%; }

/* ----- Module B · Places of a Life ----- */
.er-atlas-v1 .era-placegroup { margin-top: 26px; }
.er-atlas-v1 .era-grouplab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.er-atlas-v1 .era-grouplab .t { font-family: var(--era-mono); font-size: var(--er-fs-floor); letter-spacing: .14em; text-transform: uppercase; color: var(--era-ink-2); }
.er-atlas-v1 .era-grouplab .ln { flex: 1; height: 1px; background: var(--era-rule); }
.er-atlas-v1 .era-grouplab .ct { font-family: var(--era-mono); font-size: var(--er-fs-floor); letter-spacing: .1em; color: var(--era-ink-4); }
.er-atlas-v1 .era-placelist { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--era-rule); border: 1px solid var(--era-rule); border-radius: var(--era-r-md); overflow: hidden; }
.er-atlas-v1 .era-placerow { background: var(--era-paper); padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; text-decoration: none; color: inherit; }
a.er-atlas-v1, .er-atlas-v1 a.era-placerow { transition: background .18s; }
.er-atlas-v1 a.era-placerow:hover { background: var(--era-vellum); }
.er-atlas-v1 .era-placerow .meat { min-width: 0; }
.er-atlas-v1 .era-placerow .nm { font-family: var(--era-serif); font-size: 18px; font-weight: 500; line-height: 1.08; color: var(--era-ink); }
.er-atlas-v1 .era-placerow .nm .pend { font-family: var(--era-mono); font-size: var(--er-fs-floor); letter-spacing: .1em; text-transform: uppercase; color: var(--era-ink-4); margin-left: 8px; vertical-align: middle; }
.er-atlas-v1 .era-placerow .tie-wrap { margin-top: 8px; }
.er-atlas-v1 .era-placerow .nt { font-size: var(--er-fs-floor); color: var(--era-ink-2); line-height: 1.5; margin: 8px 0 0; }
.er-atlas-v1 .era-placerow .go { font-family: var(--era-serif); font-size: 18px; color: var(--era-clay-deep); align-self: start; }

/* ----- Module C · Tombs and Relics ----- */
.er-atlas-v1 .era-tombpanel { border: 1px solid var(--era-rule); border-radius: var(--era-r-md); overflow: hidden; background: var(--era-paper); margin-top: 22px; }
.er-atlas-v1 .era-tombpanel--noimg .bd { padding: 24px 26px; display: flex; flex-direction: column; gap: 13px; }
.er-atlas-v1 .era-tombpanel .toprow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.er-atlas-v1 .era-tombpanel h4 { font-family: var(--era-serif); font-size: 24px; font-weight: 500; line-height: 1.06; margin: 0; }
.er-atlas-v1 .era-tombpanel .ctx { font-size: var(--er-fs-floor); color: var(--era-ink-2); line-height: 1.6; margin: 0; max-width: 72ch; }
.er-atlas-v1 .era-tombpanel .chip-wrap { margin-top: 2px; }

/* ----- Provenance note ----- */
.er-atlas-v1 .era-srcnote { border: 1px solid var(--era-rule); border-radius: var(--era-r-md); background: var(--era-vellum); padding: 18px 22px; }
.er-atlas-v1 .era-srcnote__lab { font-family: var(--era-mono); font-size: var(--er-fs-floor); letter-spacing: .14em; text-transform: uppercase; color: var(--era-ink-3); display: block; margin-bottom: 8px; }
.er-atlas-v1 .era-srcnote p { font-size: var(--er-fs-floor); color: var(--era-ink-2); line-height: 1.62; margin: 0; max-width: 86ch; }

/* =========================================================================
   Mobile — the spine collapses to a compact chip strip so it never dominates
   the first screen; multi-column modules stack. Real media query, not the
   handoff's .is-mobile demo class.
   ========================================================================= */
@media (max-width: 768px) {
  .er-atlas-v1 .era-module { padding: 34px 18px; }
  .er-atlas-v1 .era-modtitle, .er-atlas-v1 .era-atlas-title { font-size: 26px; }
  .er-atlas-v1 .era-spine { flex-direction: row; flex-wrap: wrap; gap: 6px; border: none; background: transparent; border-radius: 0; overflow: visible; }
  .er-atlas-v1 .era-spine .node { flex: 0 0 auto; border: 1px solid var(--era-rule); border-radius: 999px; padding: 6px 12px; gap: 7px; flex-direction: row; align-items: center; background: var(--era-vellum); }
  .er-atlas-v1 .era-spine .node .nm { font-size: var(--er-fs-floor); }
  .er-atlas-v1 .era-spine .node .dot { width: 8px; height: 8px; }
  .er-atlas-v1 .era-placelist { grid-template-columns: 1fr; }
  /* Let long tie labels wrap rather than force horizontal overflow at 360px. */
  .er-atlas-v1 .era-placerow .era-tie { white-space: normal; }
}