/* ============================================================
   ThreeDoors — designations.css
   /designations page only. Loads after the design system
   (tokens.css + components.css) and the shared site layout/chrome
   (site.css). Tokens only — no new colours, type, or spacing.

   A deliberately unlinked (chrome-less) page: the consumer DESIGNATION
   roster, built from the FRINGE role-card pattern. Reached only from
   in-copy "designation" / "who you were" mentions.
   ============================================================ */

/* Establishing still */
.dsg-establish { aspect-ratio: 16 / 9; max-height: 440px; }

/* Roster — grouped grids of designation cards */
.dsg-groups { display: grid; gap: var(--space-6); }
.dsg-group__label {
  font-family: var(--font-sans); font-size: var(--t-caption); font-weight: var(--w-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.dsg-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 620px) { .dsg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .dsg-grid { grid-template-columns: repeat(3, 1fr); } }

/* The card — FRINGE role-card lineage: bordered surface, glyph top-right */
.dsg-card {
  display: grid; gap: var(--space-2); align-content: start;
  padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface);
  transition: background-color var(--motion-fast) var(--ease-out-slow),
              border-color var(--motion-fast) var(--ease-out-slow);
}
.dsg-card:hover { background: var(--color-surface-raise); border-color: var(--color-border-strong); }
.dsg-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.dsg-card__name {
  font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-semibold);
  font-size: var(--t-h4); line-height: var(--lh-h4); color: var(--color-text); margin: 0;
}
.dsg-card__icon { flex: none; width: 40px; height: 40px; color: var(--color-accent); }
.dsg-card__tag {
  font-family: var(--font-serif); font-optical-sizing: auto; font-style: italic;
  font-size: var(--t-body-lg); line-height: var(--lh-h4); color: var(--color-text); margin: 0;
}
.dsg-card__desc { font-size: var(--t-caption); color: var(--color-text-muted); line-height: var(--lh-caption); margin: 0; }

/* Closing CTA */
.dsg-cta {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  padding: var(--space-7) var(--space-5);
  display: grid; gap: var(--space-4); justify-items: center; text-align: center;
  background: var(--color-surface);
}
.dsg-cta__head { display: grid; gap: var(--space-3); justify-items: center; max-width: 620px; }
.dsg-cta__title { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.dsg-cta__ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.dsg-cta__note { font-size: var(--t-caption); color: var(--color-text-soft); letter-spacing: var(--ls-caption); }