/* The ImagineMover: component styles. Every value comes from tokens.css (tokens.json). */

body { background: var(--surface); color: var(--ink); font-family: var(--font-text); margin: 0; }
.im-pad { padding: var(--space-6); }
.im-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-6); }
.im-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }

/* Focus */
.im-btn:focus-visible, .im-tag:focus-visible, .im-card a:focus-visible, .im-sources a:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* Button: pill-shaped, display face */
.im-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 20px;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
}
.im-btn--primary { background: var(--primary); color: var(--on-primary); }
.im-btn--ghost { background: transparent; color: var(--ink); border-color: var(--control-border); }
.im-btn--offset { background: var(--surface-raised); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-offset); }
.im-btn--offset:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.im-btn img { width: 14px; height: 14px; }

/* Tag: pill on blueprint */
.im-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono); font-size: 13px; line-height: 20px;
  padding: 2px var(--space-3); border-radius: var(--radius-pill);
  background: var(--blueprint); color: var(--tag-ink); text-decoration: none;
}

/* Kicker */
.im-kicker {
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink);
}

/* Post card */
.im-card {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column; max-width: 360px;
}
.im-card--featured { border-color: var(--ink); box-shadow: var(--shadow-offset); }
.im-card__media { aspect-ratio: 16 / 9; background: var(--blueprint); display: block; width: 100%; object-fit: cover; }
.im-card__media--placeholder { display: flex; align-items: center; justify-content: center; color: var(--gold-ink); }
.im-card__media--placeholder svg { width: 32px; height: 32px; fill: currentColor; }
.im-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.im-card__title { font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 600; margin: 0; color: var(--ink); }
.im-card__title a { color: inherit; text-decoration: none; }
.im-card__title a:hover { text-decoration: underline; }
.im-card__dek { font-size: 16px; line-height: 26px; color: var(--ink-muted); margin: 0; }
.im-card__meta { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* Sources list */
.im-sources {
  background: var(--surface-sunken); border-radius: var(--radius-md); padding: var(--space-6);
  max-width: 640px;
}
.im-sources h3 { font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; margin: 0 0 var(--space-3); }
.im-sources ol { margin: 0; padding-left: var(--space-6); font-family: var(--font-mono); font-size: 13px; line-height: 21px; color: var(--ink); }
.im-sources li + li { margin-top: var(--space-2); }
.im-sources a { color: var(--link); }
.im-sources__licence { margin: var(--space-4) 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* Orbit rule: section divider */
.im-rule { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-12) 0; color: var(--gold-ink); }
.im-rule::before, .im-rule::after { content: ""; flex: 1; height: 1.5px; background: var(--line); }
.im-rule svg { width: 28px; height: 28px; fill: currentColor; }

/* Title lockup: thumbnails, banners, Instagram covers. Echoes the logo: heavy, slanted, gold with a hard navy offset. */
.im-lockup { background: var(--navy); padding: var(--space-8); }
.im-lockup__text {
  font-family: var(--font-display); font-weight: 800; font-size: 64px; line-height: 0.95;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--gold);
  text-shadow: 4px 4px 0 var(--navy-deep); transform: skewX(-10deg); display: inline-block; margin: 0;
}
.im-lockup__sub { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy); margin-top: var(--space-3); }

/* Blueprint grid: at most once per site, as the band behind the home masthead. Never behind text, cards or post content. */
.im-blueprint {
  background-color: var(--blueprint);
  background-image:
    linear-gradient(var(--line-blueprint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-blueprint) 1px, transparent 1px);
  background-size: var(--space-8) var(--space-8);
}