/* ingrid.fyi collection intro pages. Loads after base.css and story-pages/story.css.
   Free in full: no degraded view, only the frame's light guest prompts. */

/* the signed-in reader's name in the header (preview: ?view=member) */
ig-header .reader { display: none; font-family: var(--sans); font-size: 0.85rem; }
body.member ig-header .reader { display: inline; }
body.member ig-header .signin { display: none; }

/* every heading is a plain section, so the last "On this page" entry keeps the normal spacing */
ig-onthispage li:last-child { margin-top: 0; }

/* punctuation kept for screen readers and for the words of the md, not shown */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* entry lists: Domains, numbered tiers and industries, the GCC mandates. One entry each: a small label in the
   left margin (on a phone above the name), the name, its description, and a Domain's verticals beneath */
ig-entries { display: block; margin: 1.1rem 0 0; border-top: 1px solid var(--hair); counter-reset: entry; }
ig-entry { display: block; position: relative; padding: 1.15rem 0 1.2rem 6rem; border-bottom: 1px solid var(--hair); }
ig-entries[kind="stage"] > ig-entry { padding-left: 9rem; }
ig-entry-label, ig-entries[kind="numbered"] > ig-entry::before {
  display: block; position: absolute; left: 0; top: 1.15rem; width: 5.2rem; padding-top: 0.4rem;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
ig-entries[kind="stage"] ig-entry-label { width: 8.2rem; }
ig-entries[kind="numbered"] > ig-entry { counter-increment: entry; }
ig-entries[kind="numbered"] > ig-entry::before { content: counter(entry); letter-spacing: 0; font-size: 0.75rem; }
ig-entry-name { display: block; font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin: 0 0 0.35rem; }
ig-entry > p { margin: 0; }
ig-entries + p { margin-top: 1.1rem; }
ig-entry-links { display: block; margin-top: 0.8rem; padding-left: 0.75rem; border-left: 1px solid var(--hair); font-size: 0.88rem; }
ig-entry-links ul { list-style: none; margin: 0; padding: 0; }
ig-entry-links li { margin: 0 0 0.2rem; line-height: 1.4; }

/* the close: the closing sentence, then the map line after a hairline */
ig-closing { margin-top: 2rem; }
ig-wayforward { display: block; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--hair); }
ig-maplink { display: block; margin: 0; }

@media (max-width: 760px) {
  /* on a phone the label sits above the name, whatever its place in the words */
  ig-entry, ig-entries[kind="stage"] > ig-entry { display: flex; flex-direction: column; padding: 0.9rem 0 1rem; }
  ig-entry-label, ig-entries[kind="numbered"] > ig-entry::before, ig-entries[kind="stage"] ig-entry-label {
    position: static; order: -1; width: auto; padding: 0; margin-bottom: 0.35rem;
  }
  ig-entry-name { font-size: 1.05rem; }
}